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

👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

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

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

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

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

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

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

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

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

Важные сообщения. Обычно выводятся в плашках со светло-зеленым или серым фоном.

Справочные данные. Вы можете использовать бокс со светло-синей подложкой, чтобы разместить справочную информацию.

Предупреждения. Используйте плашки со светло-красным фоном, чтобы предупреждать читателей о какой-либо опасности.

Файлы для скачивания. Отличительная особенность — иконка, изображающая скрепку, папку или документ.

Цитаты. Чаще всего такие элементы используются для выделения цитируемого текста.

Реклама. Хороший способ ненавязчиво что-нибудь прорекламировать — вставить в подходящее по контексту место статьи блок внимания с рекламными материалами.

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

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

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

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

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

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

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

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

200+ иконок WPRemark

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

Кастомизация блока на WpRemark

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

-15% на WPRemark

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

Примеры блоков внимания на WPRemark

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

Старое решение для блоков внимания WP-MFC Blocks

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

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

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

Решение Special Text

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

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

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

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

Shortcodes Ultimate для улучшения оформления статьи

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

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

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

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

Бесплатное расширение для блоков внимания WP-Note

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

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

Блоки внимания Drop Shadow Boxes

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

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

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

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

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

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

Примеры блоков внимания в Reboot

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

Примеры блоков внимания на Yelly

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

JournalX легкий блок внимания

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

Root полезные блоки

Шаблоны от 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.

Обратите внимание: если вы делаете плашки с собственными стилями, придется немного подредактировать php-код. Измените названия боксов на свои варианты, удалите лишние div-ы и пропишите для них кастомные классы.

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

Лицензия WPRemark

Создай свой первый сайт на WordPress

Александр

В рамках блога стремлюсь доступно передавать многолетний опыт по созданию, технической поддержке, безопасности и SEO-оптимизации WordPress-сайтов.

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