Сегодня хочу поделиться с вами одним важным моментом в написании статей на 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, спасибо за ссылку. У меня в некоторых статьях требуется оформление кодом. Надеюсь среди этих плагинов найдутся бесплатные.