Как сделать блоки внимания на WordPress: вручную, плагином, с помощью темы

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

Для каких целей используют блоки внимания

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

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

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

Блоки внимания WordPress — яркий и неизбитый прием, который используется для украшения и структурирования длинных статей на сайтах.

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

Блоки внимания применяют, чтобы выделять следующие виды информации:

Лучшие плагины WordPress для блоков внимания

Подобрал для вас несколько ТОПовых плагинов для создания блоков внимания на WordPress сайте. Для вас — только лучшие решения, которые протестировал самостоятельно.

WPRemark: русский премиальный плагин для оформления блоков внимания

WPRemark содержит большой набор инструментов для вставки эффектных плашек в лонгриды. Плагин дает возможность гибкой настройки дизайна всех элементов.

Это решение от WPShop не тормозит работу сайта, так как не содержит тяжелых файлов стилей или скриптов. В классическом редакторе элементы вставляются в текст с помощью шорткодов, а в Gutenberg есть специальный бокс с настройками.

Возможности WPRemark для создания блоков внимания:

• Более 230 оптимизированных иконок. Они имеют уникальный дизайн и отлично смотрятся на любом экране. Также можно загружать свои собственные иконки.

• Кастомизация внешнего вида. Можно менять цвет фона, скругление углов, расположение иконки, вид рамки и многое другое.

• Создание пользовательских блоков. Размещая несколько плашек друг за другом, вы можете оформлять эффектные списки, а с помощью редактора Гутенберг — блок плюсов и минусов в двух колонках. Тут возможности ограничены только вашей фантазией.
• Совместимость с любой темой. Плагин поддерживает все шаблоны WordPress, а при возникновении проблем вы всегда можете рассчитывать на помощь службы технической поддержки (к слову — русскоязычной).

-15% на WPRemark

Несколько примеров разнообразных блоков на WPRemark можно видеть ниже:

WP-MFC Blocks: некогда популярное решение, которое больше не поддерживается

WP-MFC Blocks — какое-то время назад этот коммерческий плагин для создания блоков внимания на CMS WordPress был очень популярен. В сети мне попадалось немало статей, которые рекомендуют покупать и устанавливать именно его. С его помощью можно было украшать статьи на сайтах эффектными элементами для привлечения внимания.

Special Text Boxes: простой модуль WordPress для блоков внимания

Special Text Boxes содержит несколько вариантов оформления плашек на WordPress. Блоки вставляются на страницу с помощью шорткодов.

Данный ВордПресс-модуль распространяется бесплатно.

Shortcodes Ultimate: набор элементов для улучшения структуры статей

Плагин Shortcodes Ultimate включает более 50 шорткодов, позволяющих создавать различные визуальные элементы на страницах WordPress.

После установки в редакторе появляется кнопка для вставки шорткодов. Элемент привлечения внимания можно вставить через вкладку «Блок». Вы можете добавить к нему заголовок, кастомные стили и т.д.

Плагин имеет ограниченную бесплатную лицензию и расширенную PRO-версию. Поддерживает редактор Gutenberg.

WP-Note: бесплатный плагин для блоков внимания

WP-Note — простой модуль, который добавляет 5 кнопок на панель визуального редактора WordPress. При нажатии на кнопки в текст добавляются шорткоды блоков для привлечения внимания.

Drop Shadow Boxes: блоки внимания с красивой тенью

Drop Shadow Boxes — в отличие от остальных решений, блоки, которые генерирует этот бесплатный плагин, выделяются не цветом фона. Текст размещается на белом бэкграунде, а под самим блоком появляется эффектная тень.

Темы WordPress, имеющие встроенные блоки внимания

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

Блоки внимания включают следующие WordPress-темы:

• Reboot. Содержит 8 блоков, каждый из которых имеет собственный цвет фона. Слева от текста находится иконка. Варианты значков: восклицательный знак, вопрос, крестик, галочка, буква «i», «палец вверх», «палец вниз» и кавычка (для цитат).

• Cook It. В этот шаблон интегрировано 8 плашек внимания, отличающихся по цвету фона. Набор иконок такой же, как у темы Reboot.
• Yelly. Данная социальная тема также содержит 8 блоков, по оформлению схожих с предыдущими двумя решениями.

• JournalX. Имеет 4 стилизованных бокса с разным фоном и иконками. Причем предусмотрены блоки внимания, растягивающиеся на всю ширину экрана, включая сайдбар.

• Root. Темплейт содержит 5 вариантов оформления блоков, отличающихся цветом фона и иконками.

Шаблоны от WPShop по скидкой

Как программно вставлять блоки внимания на WordPress

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

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

Шаг 1. Подключение CSS стилей Bootstrap 5 к вашей теме или дочернему шаблону

Потребуется отредактировать файл header.php. Найдите этот файл в редакторе тем и добавьте следующий код в head перед другими файлами стилей:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">


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

Но при грамотном подключении проблем не обнаруживается. Например, вы можете не использовать полный файл CSS от Bootstrap, а кастомизировать его, удалив ненужные строки кода. Потом его нужно минимизировать и подключить через специальную функцию для вставки скриптов в файле functions.php.

Шаг 2. Использование на сайте ВордПресс

Везде, где нужно вставить элемент, используйте вкладку редактора «Текст». Заворачивайте контент, к которому хотите привлечь внимание, в тег div:

<div class="alert alert-primary" role="alert">
Этот текст для примера работы блоков внимания.
</div>

Класс alert-primary содержит свойства для отображения простого блока внимания со светло-синим фоном. Вы можете заменить его одним из следующих вариантов:

• alert-secondary — текстовый блок со светло-серым бэком;
• alert-success — плашка со светло-зеленым фоном, оповещающая об успехе;
• alert-danger — бокс с бледно-красной подложкой, предупреждающий об опасности;
• alert-warning — элемент со светло-желтым фоном;
• aler-info — информационный блок на голубой подложке;
• alert-dark — блок предупреждения на сером фоне.

Допустим, вы не хотите подключать фреймворк Bootstrap к сайту. Тогда просто добавьте новые стили для создания подобных боксов в файл CSS вашего шаблона. А затем выводите на сайте аналогичным образом через теги div.

Шаг 3. Создание кнопок с блоками внимания в редакторе WordPress

Далее расскажу, как добавить в редактор WP кнопки блоков внимания. Код будет автоматически вставляться в поле редактора при нажатии на эти элементы интерфейса. От вас не потребуется каждый раз вспоминать, какие классы вы присваивали тому или иному элементу.

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

1. Найдите в редакторе тем файл functions.php.
2. Добавьте в этот файл код (можно вставить в самый низ):

add_action('admin_footer', 'eg_quicktags');
function eg_quicktags() {
?>
<script>
jQuery(document).ready(function(){
if(typeof(QTags) !== 'undefined') {
QTags.addButton( 'Primary', 'Primary', '<div class="alert alert-primary">', '</div>');
QTags.addButton( 'Secondary', 'Secondary', '<div class="alert alert-secondary">', '</div>');
QTags.addButton( 'Success', 'Success', '<div class="alert alert-success">', '</div>');
QTags.addButton( 'Danger', 'Danger', '<div class="alert alert-danger">', '</div>');
QTags.addButton( 'Warning', 'Warning', '<div class="alert alert-warning">', '</div>');
QTags.addButton( 'Info', 'Info', '<div class="alert alert-info">', '</div>');
QTags.addButton( 'Dark', 'Dark', '<div class="alert alert-dark">', '</div>');
}
});
</script>
<?php
}

Этот вариант кода мной протестирован и на момент написания статьи прекрасно работает. Кнопки появляются в классическом редакторе на вкладке «Текст». Вы можете ими пользоваться для вставки стильных элементов от Bootstrap 5.

Перепробовав все эти варианты, я склоняюсь к тому, что самый верный путь — установка либо плагина WPRemark, либо одной из тем WPShop. В первом случае я получаю полный набор инструментов для создания абсолютно любых блоков внимания, а также их группировки в списки или колонки. А во втором случае — отсутствие каких-либо проблем с совместимостью скриптов и производительностью сайта.

Лицензия WPRemark