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

Привет всем!

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

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

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

Ищешь заработок в Интернете? Записывайся на бесплатный онлайн курс «СПЕЦИАЛИСТ ПО ИНТЕРНЕТ-РЕКЛАМЕ» и получи удаленную профессию рекламщика в Яндекс Директ за 10 дней!

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

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

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

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

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

Как сделать с помощью 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 для WordPress... Всем привет! Сегодня поменял внешний вид формы подписки на обновления моего...блога, реализованной через такой сервис Google, как feedburner. Именно по этой...причине в данной статье я расскажу о создании красивой формы подписки feedburner...для WordPress.
Картинки в комментариях. Плагин Comment Images... Здравствуйте, читатели моего блога! Речь в данной статье пойдет о плагине для...WordPress, который позволяет вставлять изображения в комментарии. Разумеется,...это не единственный способ выполнения данной операции, ведь уже размещенное в...интернете изображение можно вставить в комментарий с использованием ссылки не...него. Однако, для этого изображение должно быть размещено в интернете, а...какое-либо стороннее изображение, к примеру, с жесткого диска вашего компьютера,...добавить не удастся. В этом случае на помощь приходит плагин.
Галерея изображений стандартными средствами WordPr... Всем привет! В сегодняшней статье я хочу затронуть вопрос создания простой...галереи изображений для WordPress стандартными средствами данной CMS.
Простой способ изменить фон для WordPress сайта!... Всем привет! Сегодняшняя статья будет наиболее интересна новичкам, которые...хотят изменить или установить фон для своего сайта/блога на WordPress, ведь в...ней я расскажу об одном быстром и простом способе сделать фон для своего...интернет-ресурса.
Всплывающие картинки в WordPress без плагина... Всем привет! Про то, как сделать всплывающие картинки в WordPress я уже писал в...одной из своих статей, но там речь шла о...применении специального плагина. Логично будет рассмотреть способ получения...аналогичного результата без установки дополнительных плагинов. Именно об этом мы...и поговорим в рамках сегодняшней статьи.

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

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

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

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