Как добавить блоки внимания на WordPress сайт: с помощью плагина, шаблона или кода

Плагины WordPress

Блоки внимания (англ. attention) WordPress — это информация (текстовая и медийная), которая выделена на сайте особым образом. Благодаря этому уникальному оформлению они привлекают внимание пользователя, заставляя задержаться на странице и вчитаться в текст.

Например, в блоки внимания можно добавлять данные о контактах или скидках. Это склонит посетителя к покупке товара. Использование таких нехитрых приемов выгодно каждому владельцу сайта любой направленности.

Как именно добавить красивые блоки внимания в WordPress — ответ в статье.

Блоки внимания на сайте: назначение

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

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

У attention-блоков есть еще несколько важных задач:

выделение спецпредложений по товарам;
привлечение внимания к ссылкам на дополнительные ресурсы;
простановка внутренней перелинковки для увеличения глубины просмотра;
предостережение посетителя от необдуманных действий;
предложение скачать файл или оформить подписку;
усиление призыва к действию (англ. call-to-action).

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

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

При правильном использовании блоков внимания WordPress можно добиться крутых эффектов:

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

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

Блоки внимания гарантированно «цепляют» взгляд читателей. Но если в них поместить бесполезную или ошибочную информацию, эффекта не будет. Вот почему так важно знать свою целевую аудиторию (ЦА).

ТОП-9 плагинов WordPress для вывода блоков внимания

Самый простой и эффективный способ добавить блоки внимания на свой сайт — использовать плагины WP.

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

Поэтому перед установкой какого-либо программного обеспечения (ПО) на WordPress рекомендую изучить все актуальные сегодня предложения.

Special Textboxes

Special Text Boxes — это программная утилита, которая предлагает на выбор 7 вариаций блоков внимания. Если на сайте стоит тема Metro, то она уже встроена в функционал и доступна пользователю. В этом случае дополнительно ничего устанавливать не нужно.

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

Плюсы и минусы

Бесплатный.

Доступен на 16 языках.

Качественный интерфейс.

Мало шаблонов.

Небольшое количество визуальных настроек.

Simple Alert Boxes

Плагин Simple Alert Boxes последний раз обновлялся 5 лет назад. Разработчики больше не поддерживают свою программу. Поэтому его можно использовать лишь на ВордПресс с версией до 4.9.20 включительно.

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

Плюсы и минусы

Бесплатный.

Минимальный набор дизайнов.

Скромный ассортимент настроек блоков.

Давно не обновлялся.

Возможны проблемы совместимости со свежими версиями WordPress и других плагинов.

WPRemark

WRPemark является детищем компании WPShop. Это команда разработчиков тем и плагинов для сайтов, о которой знают практически все веб-мастеры и профи онлайн-бизнеса. Большая часть сайтов в России построена именно на их разработках.

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

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

Настроек так много, что для их перечисления понадобилась отдельная статья. Поэтому плагин WPRemark используют многие владельцы веб-сайтов в Интернете.

При этом он имеет минимальный вес и умеет подключать стили «на лету», а значит — не будет перегружать сайт.

Бонусом идет отзывчивая служба поддержки, которая всегда на связи.

Плюсы и минусы

Огромное количество дизайнов.

Много настроек и неограниченные возможности оформления.

Регулярные обновления с актуализацией под новые версии движка и php.

Корректная работа в классическом и блочном (Gutenberg) редакторе.

Поддержка шорткодов для вставки блоков в любом месте макета.

Не создает дополнительную нагрузку.

Русскоязычная служба поддержки (1 год бесплатно).

Платный (цена небольшая).

Всем посетителям wp-r.ru даю промокод на покупку:

Активируйте скидку 15%

Кстати, все attention-блоки в этой статье оформлены именно с помощью WPRemark.

WP-MFC Blocks

WP-MFC Blocks — простой плагин с 4 шаблонами, но внушительным количеством настроек. Каждый тип блока внимания можно видоизменить до неузнаваемости.

Эту программу разработала компания MFC.AGENCY. На их официальном сайте есть информация о плагине, но больше нет активной ссылки на страницу скачивания или покупки. Вероятно, получить его официальным способом больше не получится.

Плюсы и минусы

Большое количество настроек.

Удобный интерфейс.

Русскоговорящие разработчики.

Малое количество исходных дизайнов.

Больше нет ссылки на скачивание или покупку.

Платный.

Shortcodes Ultimate

Shortcodes Ultimate — многофункциональный бесплатный плагин, который способен добавлять на сайт не только блоки внимания, но и другие ценные элементы: вкладки, кнопки, слайдеры, карусели, табы. С его помощью можно даже вставлять в контент адаптивное видео.

Это позволяет значительно улучшить визуальную привлекательность интернет-страниц. Но программный интерфейс сложноват для новичков в сайтостроении.

Плюсы и минусы

Бесплатный.

Большое количество настроек.

Кроме блоков внимания, работает со множеством других визуальных элементов.

Можно вставлять красиво оформленные отрывки через шорткоды.

Небольшое количество пресетов.

Неудобный сложный интерфейс.

Бывают проблемы совместимости с другими плагинами или нестандартными шаблонами.

Simple Note

Simple Note — наиболее простой плагин attention-блоков в хорошем смысле этого слова. С его помощью добавить на сайт привлекающие внимание элементы можно всего в 1-2 клика.

Настройки здесь интуитивно понятные. Самостоятельно разобраться сможет каждый. Однако у этой простоты есть обратная сторона — минимум пресетов (всего 5 штук) и очень скромное количество настроек.

Плюсы и минусы

Free.

Максимально удобный интерфейс.

Блоки подключаются непосредственно в редактор WordPress.

Мало шаблонов.

Минимум настроек.

WP-Note

WP-Note не предложит вам каких-то уникальных блоков внимания, так как в его библиотеке предустановлено всего 5 типов оформления. Зато есть масса настроек и удобный, интуитивно понятный интерфейс. К тому же, сами блоки выглядят необычно, что может привлечь внимание читателей.Если вы не гонитесь за многообразием, этот плагин — хороший выбор.

Плюсы и минусы

Фри-версия.

Удобный интерфейс.

Необычные пресеты в IT-стилистике.

Маленький выбор.

Среднее количество настроек.

Нет вариантов под конкретные ниши.

Drop Shadow Boxes

Drop Shadow Boxes — один из самых первых плагинов для интеграции блоков внимания в проекты на WordPress.

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

Если сайт окрашен в яркие цвета, такие элементы на странице будут смотреться неуместно. Вот почему в WPRemark пользователь сам выбирает, выводить ли ему тень вокруг блока, и какую (цвет, положение, размытие, размер). Здесь же такой возможности у пользователя не будет.

В целом Drop Shadow Boxes — качественный модуль, пусть и слегка устаревший.

Плюсы и минусы

Бесплатный.

Множество настроек тени.

Оценят любители минимализма.

Мало шаблонов «из коробки».

Подходит только минималистичным сайтам со скромной бело/черно/серой цветовой гаммой.

Работает исключительно на шорткодах.

В старых браузерах тени отображаться не будут.

Нет русского языка.

Может быть несовместим с версиями WordPress выше 5.9.3.

Stellissimo Text Box

Плагин Stellissimo Text Box стоит устанавливать на свой WordPress-ресурс только в крайнем случае.

Во-первых, он лишен перевода на русский язык.
Во-вторых, совместим с CMS WP до 4.3.0 версии. То есть уже устарел, хотя его по-прежнему можно скачать из репозитория. В блоках внимания Stellissimo можно менять только цвет и параметры текста: шрифт и размер. Даже такой «роскоши», как нескольких дизайн-макетов с разными иконками, в плагине нет.

Плюсы и минусы

Бесплатный.

1 шаблон.

В версиях WordPress выше 4.3.0 может не работать.

Нет русского языка.

Минимум опциональных настроек.

Шаблоны WPShop c готовыми блоками внимания

Компания WPShop занимается разработкой WordPress-шаблонов и плагинов для сайтов.

Если вам нужны лишь блоки внимания, можете приобрести WPRemark (описание выше). У этой команды также есть несколько тем, в которые уже интегрирован инструмент для добавления основных блоков внимания.

Вот топовые шаблоны WordPress со встроенными блоками внимания от WPShop.

Root

тема рут с блоками внимания

Главное преимущество Root — гибкость: легко настраивать, видоизменять и адаптировать под свои нужды. Это обеспечивается огромным количеством настроек.

Причем «Рут» быстро загружается даже при низкой скорости мобильного интернета.

В эту тему встроен инструментарий для добавления блоков внимания нескольких разновидностей.

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

Скидка на топовый SEO-шаблон Root

Reboot

Reboot — более прогрессивная версия Root. Если выбирать из двух вариантов, рекомендуем именно этот.

Взять Reboot у официала по самой выгодной цене

«Ребут» подходит для любого сайта: начиная с обычного лендинга и заканчивая новостным порталом или коммерческим интернет-магазином. В него уже встроено 12 полезных плагинов, среди которых есть инструмент для добавления разных блоков внимания через классический или блочный редактор WordPress.

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

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

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

Как сделать блоки внимания без плагина

Если нет желания устанавливать плагины или темы с нужными инструментами, а блоки внимания на своем WP-ресурсе использовать хочется, можно все сделать самостоятельно.

Но для этого понадобятся навыки программирования: минимально — CSS и HTML, а лучше еще и php — для добавления соответствующих кнопок в редактор админки.

Добавление div с новыми классами

Для начала необходимо написать php-хук, который добавит в ваш текстовый редактор кнопки новых «дивов» html. Его нужно вставить в файл «functions.php» активной темы (основной или дочерней). Другой вариант — использовать плагин Profunction.

Можете просто скопировать приведенный ниже пример кода.


add_action('admin_footer', 'eg_quicktags');
function eg_quicktags() {
?>
    <script>
    jQuery(document).ready(function(){
    if(typeof(QTags) !== 'undefined') {
        QTags.addButton( 'Info', 'Info', '<div class="info">', '</div>');
        QTags.addButton( 'Success', 'Success', '<div class="success">', '</div>');
        QTags.addButton( 'Warning', 'Warning', '<div class="warning">', '</div>');
        QTags.addButton( 'Error', 'Error', '<div class="error">', '</div>');
    }
    });
    </script>
<?php
}

add_action('admin_footer', 'eg_quicktags');

function eg_quicktags() {

jQuery(document).ready(function(){

if(typeof(QTags) !== 'undefined') {

QTags.addButton( 'Info', 'Info', '<div class="info">', '</div>');

QTags.addButton( 'Success', 'Success', '<div class="success">', '</div>');

QTags.addButton( 'Warning', 'Warning', '<div class="warning">', '</div>');

QTags.addButton( 'Error', 'Error', '<div class="error">', '</div>');

}

});

</script>

<?php

}

Обязательно сохраните файл, после чего на панели инструментов обнаружится несколько новых кнопок: «Info», «Error» и так далее. Названия вместе с классами можете поменять на любые другие. Важно, чтобы эти классы не были зарезервированны в вашем шаблоне, и не возникал конфликт.

На этом работа не заканчивается. Теперь нужно добавить в таблицу стилей style.css свойства для селекторов блоков.

Вот один из примеров соответствующего кода для цветных блоков.


.info,
.success,
.warning,
.error {
    position: relative;
    padding: 20px 10px 20px 70px;
}
.info:before,
.success:before,
.warning:before,
.error:before {
    position: absolute;
    top: 50%;
    width: 70px;
    margin-left: -70px;
    line-height: 0!important;
    font-family: FontAwesome;
    font-size: 40px;
    text-align: center;
}
.info {
    color: #084298;
    background: #bde5f8;
}
.info:before {
    content: "\f129";
}
.success {
    color: #0f5132;
    background: #dff2bf;
}
.success:before {
    content: "\f00c";
}
.warning {
    color: #5f5000;
    background: #feefb3;
}
.warning:before {
    content: "\f12a";
}
.error {
    color: #842029;
    background: #ffccba;
}
.error:before {
    content: "\f00d";
}

.info,

.success,

.warning,

.error {

position: relative;

padding: 20px 10px 20px 70px;

}

.info:before,

.success:before,

.warning:before,

.error:before {

position: absolute;

top: 50%;

width: 70px;

margin-left: -70px;

line-height: 0!important;

font-family: FontAwesome;

font-size: 40px;

text-align: center;

}

.info {

color: #084298;

background: #bde5f8;

}

.info:before {

content: "\f129";

}

.success {

color: #0f5132;

background: #dff2bf;

}

.success:before {

content: "\f00c";

}

.warning {

color: #5f5000;

background: #feefb3;

}

.warning:before {

content: "\f12a";

}

.error {

color: #842029;

background: #ffccba;

}

.error:before {

content: "\f00d";

}

Если также нужен блок цитат, рекомендую прописать еще и эти css-стили.


blockquote {
    position: relative;
    margin: 0;
    padding: 5px 10px 5px 70px;
    color: #222;
    background: #eff1f5;
}
blockquote:before {
    position: absolute;
    top: 50%;
    width: 70px;
    margin-left: -70px;
    line-height: 0!important;
    content: "\f10e";
    font-family: FontAwesome;
    font-size: 40px;
    color: #333;
    text-align: center;
}

blockquote {

position: relative;

margin: 0;

padding: 5px 10px 5px 70px;

color: #222;

background: #eff1f5;

}

blockquote:before {

position: absolute;

top: 50%;

width: 70px;

margin-left: -70px;

line-height: 0!important;

content: "\f10e";

font-family: FontAwesome;

font-size: 40px;

color: #333;

text-align: center;

}

Свойство «content» в этом примере задает отображение иконок из набора символов FontAwesome.

Если ваш сайт работает на шаблоне WPShop (за исключением Root), для формирования своих блоков внимания можете использовать его иконочный шрифт wpshop-core, который гораздо легче и современнее. Инструкцию по его использованию и набор доступных иконок найдете по ссылке: https://support.wpshop.ru/faq/theme-icons/.

Вы всегда можете изменить представленные коды под свои нужды. Это позволит уникализировать блоки внимания и привнести свою авторскую «изюминку» в контент сайта.

Добавление кнопок в визуальный редактор php-кодом

Если используете визуальный редактор, то удобнее будет добавить в него кнопки вывода блоков внимания. Для этого понадобится тот же файл, который называется «functions.php».

В него необходимо вставить соответствующий код. Один из примеров представлен ниже, копируйте. При желании в него можно внести свои правки.


function info_buttons($buttons) {
    array_unshift($buttons, 'styleselect');
    return $buttons;
}
add_filter('mce_buttons_2', 'info_buttons');
function my_mce_before_init_insert_formats( $init_array ) {
    $style_formats = array(
    array(
        'title' => 'Info',
        'block' => 'div',
        'classes' => 'info',
        'wrapper' => false,
    ),
    array(
        'title' => 'Success',
        'block' => 'div',
        'classes' => 'success',
        'wrapper' => false,
    ),
    array(
        'title' => 'Warning',
        'block' => 'div',
        'classes' => 'warning',
        'wrapper' => false,
    ),
    array(
        'title' => 'Error',
        'block' => 'div',
        'classes' => 'error',
        'wrapper' => false,
    )
    );
    $init_array['style_formats'] = json_encode( $style_formats );
    return $init_array;
}
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

function info_buttons($buttons) {

array_unshift($buttons, 'styleselect');

return $buttons;

}

add_filter('mce_buttons_2', 'info_buttons');

function my_mce_before_init_insert_formats( $init_array ) {

$style_formats = array(

array(

'title' => 'Info',

'block' => 'div',

'classes' => 'info',

'wrapper' => false,

array(

'title' => 'Success',

'block' => 'div',

'classes' => 'success',

'wrapper' => false,

array(

'title' => 'Warning',

'block' => 'div',

'classes' => 'warning',

'wrapper' => false,

array(

'title' => 'Error',

'block' => 'div',

'classes' => 'error',

'wrapper' => false,

)

);

$init_array['style_formats'] = json_encode( $style_formats );

return $init_array;

}

add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

В визуальном режиме редактора должны появиться кнопки, по клику на которые в статью будут добавляться современные блоки внимания.

Не забывайте называть кнопки понятным для себя языком, иначе запутаетесь.

После добавления вышеуказанных кодов все должно заработать. Можете пользоваться.

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