Красивое выделение текста в WordPress разными цветными блоками

Без плагина WordSmall

выделение текста

Одним из важных моментов в написании статьи является ее визуальное оформление. Это необходимо для удобного чтения, и в целом восприятия подачи материала. Допустим, когда в предложении нужно сделать акцент на главные слова, то они выделяются жирным шрифтом или подчеркиванием. Но когда нужно акцентировать целый абзац, простое выделение уже не столь приемлемое решение. Будет лучшим вариантом оформить текст определенным стилем в зависимости от его степени оповещения.

На WordPress’e есть несколько плагинов, с помощью которых можно реализовать подобное выделение текста. Они больше подходят тем, кто совсем плохо разбирается в CSS, и плохо знаком с платформой. Почему? Потому что это очень легко делается без плагина своими силами. По сути, такое оповещение, или как еще их можно назвать «заметки» состоят из одних стилей CSS. А для полного удобства добавляются кнопки в HTML редактор WordPress, чтобы каждый раз не утруждать себя в написании HTML разметки.

В создании заметок я хотел обойтись только одними средствами CSS, включая и иконок. Но тогда не обошлось бы без подключения шрифта Font Awesome. Поэтому пришлось ограничиться и воспользоваться графическими иконками, которые можно скачать в конце статьи так же, как и исходник в формате AI (Illustrator).

Установка

Первым делом пропишем сразу стили оформления внешнего вида. Нужно открыть файл style.css, он находится внутри вашей текущей темы. Затем в самом низу добавляем следующий код:


/*стили заметок*/

.shortcodestyle {
    font: 14px arial;
    line-height: 1.4;
    padding: 15px 15px 15px 75px;
    word-wrap: break-word;
    border-radius: 2px;
    clear: both;
    margin: 10px auto;
    max-width: 660px;
    position: relative;
        text-decoration:none;
}
/*Внимание*/
.warning {
    background: #fff2b8 url("images/warning.png") no-repeat scroll 15px 50%;
    border-bottom: 2px solid #EAD18C;
    color: #4F2012;
}
.warning a {
    color: #D15225;
}

/*Информация*/

.info {
    background: #bae5f8 url("images/info.png") no-repeat scroll 15px 50%;
    border-bottom: 2px solid #9BBFC4;
    color: #0F2B33;
}
.info a {
    color: #216CAF;
}

/*Важно*/

.important {
    background: #ffcaca url("images/important.png") no-repeat scroll 15px 50%;
    border-bottom: 2px solid #f4a9a9;
    color: #330D0D;
}
.important a {
    color: #ff3a37;
}

/*Совет*/

.advice {
    background: #ccfacc url("images/advice.png") no-repeat scroll 15px 50%;
    border-bottom: 2px solid #b1dbb1;
    color: #0b280b;
}
.advice a {
    color: #5E9800;
}

/*Нейтральность*/
.neutrality {
    background: #f5f5f5 url("images/neutrality.png") no-repeat scroll 15px 50%;
    border-bottom: 2px solid #dfdfdf;
    color: #222;
}
.neutrality a {
    color: #5587c4;
}

Вторым делом добавим в HTML редактор свои кнопки. Открываем файл functions.php и в конце перед знаком ?> помещаем вот такой код:

//Кнопки в редактор
if( !function_exists('my_buttons') ){
function my_buttons()
{ ?>
<script type="text/javascript">
QTags.addButton( 'warning', 'Внимание', '<div class="warning shortcodestyle">', '</div>' );
QTags.addButton( 'info', 'Инфо', '<div class="info shortcodestyle">', '</div>' );
QTags.addButton( 'important', 'Важно', '<div class="important shortcodestyle">', '</div>' );
QTags.addButton( 'advice', 'Совет', '<div class="advice shortcodestyle">', '</div>' );
QTags.addButton( 'neutrality', 'Нейтрал', '<div class="neutrality shortcodestyle">', '</div>' );
</script>
<?php }
add_action('admin_print_footer_scripts', 'my_buttons');
}

Демо Скачать иконки

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Комментариев: 15
  • Александр

    Здравствуйте, спасибо за статью. Меня интересует с помощью какого кода вывести эти блоки в страницу сайта, тоесть в статью?

    • WordSmall

      Здравствуйте! Если вы хотите прописывать их вручную, то во второй части кода видно какие классы отвечают, пример, <div class="warning shortcodestyle"></div>. А вообще, после установки всего кода в нужные файлы, появятся кнопки в HTML-редакторе статьи, где вам нужно будет лишь на нее нажать, чтобы добавить нужный класс.

      • Александр

        WordSmall, Понятно, спасибо за ответ!

  • Александр

    Сделал все как положено, но кнопки в редакторе не появились. В чем может быть проблема?

    • WordSmall

      Александр, Кнопки должны были появиться. Посмотрите по внимательнее. В редакторе есть два режима: Визуально, Текст. Кнопки будут видны в режиме «Текст».

      • Александр

        WordSmall, Ага все появились, еще раз спасибо ;-)

      • WordSmall

        Александр, Не за что! Рад был помочь ;-)

  • sveta

    Спасибо за статью!

    А куда залить иконки?

    • WordSmall

      sveta, здравствуйте! Внутри вашей темы должна быть папка «images» или «img» , можете залить сюда. Только обращайте внимание, чтобы здесь background: #fff2b8 url("images/warning.png") no-repeat scroll 15px 50%; был указан правильный путь к картинке.

      • sveta

        WordSmall, Спасибо!

  • Вадим

    Спасибо за полезный материал! Прекрасная замена плагину. Уже внедрил в шаблон. При первой же возможности опробую в статье.

    Но тогда не обошлось бы без подключения шрифта Font Awesome

    А можно для тех, у кого подключен скрипт FA дополнить статью соответствующими стилями?

    • WordSmall

      Спасибо на добромм слове) Можно, почему нет. У меня пока нет на это время, но со временем дополню.

    • WordSmall

      Вадим, покажу на примере одного блока, а там просто продублируйте и изменете классы, ну и стили, есле нужно.

      .info { background: #bae5f8; border-bottom: 2px solid #9BBFC4; color: #0F2B33; } .info::before { width: 50px; position: absolute; content: "\f00d"; font-family: 'FontAwesome'; font-size: 40px; left: 13px; top: 50%; display: inline-block; line-height: 48px; height: 50px; border-radius: 50%; background: #fff; text-align: center; color: #002b3e; margin-top: -0.625em; }

  • Rishat

    Добрый день. Вставил код, но выдает синтаксическая ошибка

    • WordSmall

      Здравствуйте. В коде ошибок нет. Смотрите, в правильное место ли вставили.

Добавить комментарий
bold quote code