Красивое выделение текста в WordPress

Сегодня будет урок на тему того, как визуально выделить фрагмент текста в WordPress средствами CSS без использования плагина.

Возможно, у кого-то возникнет вопрос: зачем выделять текст в статьях на сайте?

Постараюсь ответить: красивое оформление сайта является немаловажной составной частью его развития и раскрутки, ведь красиво оформленный контент улучшает юзабилити (удобство использования) сайта, повышает степень лояльности читателей к ресурсу и в конечном итоге положительно влияет на поведенческие факторы ранжирования поисковых систем.

В этой статье мы научимся создавать вот такие блоки выделения текста:

Внимание!
Информация!
Важно!
Совет!
Заметка!

По-моему красиво!

Итак, давайте не будем упускать возможность украсить содержимое сайта!

Приступаем к реализации поставленной задачи.

Как сделать с помощью CSS красивое выделение текста цитаты

Перед началом выполнения описанных ниже шагов не забудьте сделать резервную копию файлов шаблона WordPress!

Действия по реализации возможности добавления красивых блоков выделения текста в WordPress можно условно разделить на три простых этапа.

Начнем с первого из них, а именно добавления функции, позволяющей прямо из текстового редактора WordPress специальными кнопками добавлять к тексту классы div.

Для этого копируем вот этот код:

// код кнопок выделения текста
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( 'note', 'Заметка', '<div class="note shortcodestyle">', '</div>' );
</script>
<?php }
add_action('admin_print_footer_scripts', 'my_buttons');
}

И вставляем его в самый конец файла functions.php шаблона WordPress.

Второй этап — это подключение стилей CSS для вышеуказанных классов div, т.е. непосредственно визуальное оформление блоков.

Открываем файл style.css шаблона WordPress и в самый конец добавляем следующие стили:

/*стили блоков выделения текста*/
.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(путь к файлу/warning.png) no-repeat scroll 15px 50%;
border-bottom: 2px solid #EAD18C;
color: #4F2012;
}
.warning a {
color: #D15225;
}
 
/*Информация*/
.info {
background: #bae5f8 url(путь к файлу/info.png) no-repeat scroll 15px 50%;
border-bottom: 2px solid #9BBFC4;
color: #0F2B33;
}
.info a {
color: #216CAF;
}
 
/*Важно*/
.important {
background: #ffcaca url(путь к файлу/important.png) no-repeat scroll 15px 50%;
border-bottom: 2px solid #f4a9a9;
color: #330D0D;
}
.important a {
color: #ff3a37;
}
 
/*Совет*/
.advice {
background: #ccfacc url(путь к файлу/advice.png) no-repeat scroll 15px 50%;
border-bottom: 2px solid #b1dbb1;
color: #0b280b;
}
.advice a {
color: #5E9800;
}
 
/*Заметка*/
.note {
background: #f5f5f5 url(путь к файлу/nоte.png) no-repeat scroll 15px 50%;
border-bottom: 2px solid #dfdfdf;
color: #222;
}
.note a {
color: #5587c4;
}

На третьем этапе нам нужно загрузить на хостинг файлы из архива, доступного для скачивания по этой ссылке. Это файлы картинок, используемых в блоках выделения текста.

Обратите внимание, что на эти файлы прописаны ссылки в вышеуказанном CSS коде, и эти ссылки нужно отредактировать, заменив фразы путь к файлу на действительный путь к папке, в которой вы разместили файлы из архива (в моем случае https://expromtom.ru/wp-content/themes/mytheme/img/).

Вот и все, теперь для выделения текста достаточно перейти в режим текстового редактора в WordPress, выделить нужный текст и нажать одну из пяти кнопок, в зависимости от контекста:

Красивое выделение текста в WordPress

Вот таким нехитрым способом можно сделать в WordPress выделение текста.

Пользуйтесь на здоровье!

Комментарии 13

  • На третьем этапе нам нужно загрузить на хостинг файлы из архива, доступного для скачивания по этой ссылке. Это файлы картинок, используемых в блоках выделения текста.
    Ссылка уже не работает?

  • Отличный способ выделять текст без использования плагинов. Рекомендую всем!

  • Спасибо. Так все понятно у вас объяснено! Попробую. Только заменить, как мне надо слова и попробую изменить картинки.

  • В первом коде при сохранении выдает ошибку в строке
    <?php }
    Как можно исправить ?

    • Дмитрий, у меня установлен данный код и все работает.
      Возможно какая-то несовместимость с темой Вордпресс.

    • Часто бывает такое, когда вставляют код в конце файла и после закрытия ?>, а нужно как раз перед ним и все будет норм.

      Я маялся с оформлением, т.к. в целом статьи однотипные, пробовал плагин Elementor, но чет с ним долго приходится оформлять статьи, вашу фишку добавил на некоторые сайты. Спасибо за простоту! 😉

  • Спасибо получилось неплохо. А можно эти шорткоды сделать чтобы они отображались не в текстовом а обычном редакторе.

  • В визуальном редакторе хотелось бы не сами кнопки а как-то определить расположение блоков по тексту, чтобы нагляднее было. Но если нельзя, то и так хорошо.

  • Что-то не получается, functions.php не такой как у всех)
    Вот такого закрывающего тега вообще нет ?>
    Через хуки всё сделано, а менять из-за этого тему, как-то не хочется)

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Adblock
detector