Сегодня хочу поделиться с вами одним важным моментом в написании статей на WordPress — использование блоков внимания. Это по части визуального оформления материалов, которое играет ключевую роль в привлечении внимания читателей. Когда нужно подчеркнуть главные моменты, я часто использую блоки внимания. Они позволяют выделить целый абзац и сделать его более заметным для аудитории. Благодаря CSS стилям можно легко подобрать подходящий дизайн для каждого блока, что делает статьи более удобными и приятными для чтения. Присоединяйтесь к обсуждению и узнайте больше о блоках внимания в WordPress!
На WordPress'e существует несколько плагинов, которые помогают реализовать блоки внимания или заметки без необходимости вникать в CSS или знать платформу в деталях. Однако, это можно сделать своими силами, и довольно легко. Такие блоки состоят из стилей CSS и с помощью добавления кнопок в HTML-редактор WordPress, станет удобным их использование.
В создании заметок я решил использовать только CSS для стилизации иконок. Это будет намного удобней и проще. В противном случае, пришлось бы устанавливать шрифт Font Awesome или использовать графические иконки.
Установка
Первым делом добавим в HTML редактор свои кнопки. Открываем файл functions.php и в конце перед знаком ?>
помещаем вот такой код:
//дополнительные кнопки в текстовом редакторе add_action('admin_footer', 'my_buttons'); function my_buttons() { ?> <script> jQuery(document).ready(function(){ if(typeof(QTags) !== 'undefined') { 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 }
Вторым делом пропишем стили оформления внешнего вида. Нужно открыть файл style.css, он находится внутри вашей текущей темы. Затем в самом низу добавляем следующий код:
/*стили заметок*/ .shortcodestyle { line-height: 1.4; padding: 20px; padding-left: 20px; padding-left: 70px; border-radius: 0 5px 5px 0; position: relative; display: block; margin-bottom: 1.5em; overflow: hidden; } .shortcodestyle:before { width: 35px; height: 35px; position: absolute; top: 50%; left: 15px; transform: translate(0, -50%); border-radius: 50%; color: #fff; line-height: 34px; text-align: center; font-size: 26px; } /*Внимание*/ .warning:before { content: "\26A0"; background: #feba4b; } .warning { background: #fff0d9; border-left: 2px solid #feba4b; } /*Информация*/ .info:before { content: "i"; background: #86CDEF; } .info { background: #eaf7fd; border-left: 2px solid #86CDEF; } /*Важно*/ .important:before { content: "✕"; background: #f4a9a9; } .important { background: #ffe7e7; border-left: 2px solid #f4a9a9; } /*Совет*/ .advice:before { content: "✓"; background: #b1dbb1; } .advice { background: #f3fef3; border-left: 2px solid #b1dbb1; } /*Нейтральность*/ .neutrality:before { content: "#"; background: #dfdfdf; } .neutrality { background: #f5f5f5; border-left: 2px solid #dfdfdf; }
На последнем шаге вам остается использовать добавленные ранее блоки внимания. Просто выделите нужный текст и нажмите соответствующую кнопку в текстовом редакторе: «Внимание», «Инфо» и так далее. Это позволит выделить важные фрагменты текста и сделать их более заметными для ваших читателей.
Что за плагин WordPress используется для добавления блоков кода?
Таких плагинов есть много. Вот можете выбрать себе подходящий wordpress.org/plugins/tags/highlighting/
WordSmall, спасибо за ссылку. У меня в некоторых статьях требуется оформление кодом. Надеюсь среди этих плагинов найдутся бесплатные.