Красивое выделение текста в 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 выделение текста.

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

Также стоит прочитать:

Как сделать красивую форму подписки Feedburner для... В данной статье вы найдете информацию о том, как создать красивую форму подписки...Feedburner для WordPress.
Как вставлять картинки в комментарии WordPress... Речь в данной статье пойдет о плагине для WordPress, который позволяет вставлять...изображения в комментарии. Разумеется, это не единственный способ выполнения...данной операции, ведь уже размещенное в интернете изображение можно вставить в...комментарий с использованием ссылки не него. Однако, для этого изображение...должно быть размещено в интернете, а какое-либо стороннее изображение, к примеру,...с жесткого диска вашего компьютера, добавить не удастся. В этом случае на помощь...придет рассматриваемый ниже плагин.
Простой способ изменить фон для WordPress сайта... Сегодняшняя статья будет наиболее интересна новичкам, которые хотят изменить или...установить фон для своего сайта на WordPress, ведь в ней я расскажу об одном быстром и...простом способе сделать фон для своего интернет-ресурса.

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

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

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

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