Блоки внимания без плагинов

Блоки внимания без плагинов
Автор блога
Андрей WPM

Андрей WPM

Блоки внимания для WordPress.

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

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

Для начала я вам продемонстрирую что мы будем с вами делать, а уже потом приступим к реализации. В принципе, сделать их не очень тяжело, если вы хотя-бы чуток понимаете базовые языки HTML и CSS и знаете, где находятся файлы functions.php и style.css в вашей теме/шаблоне. Итак, примеры:

Утвердительный блок — Окей! Обычно зеленый блок, с утвердительной галочкой. Означает одобрение, принятие, положительный чекер.

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

Предупредительный блок — Внимание! Служит для привлечения внимания читателей. Обозначает какое-то предупреждение или важное пояснение.

Вопросительный блок — Вопрос! Можно выделять разного рода вопросы, например в диалогах, или же наоборот — ответов на важные вопросы.

Пояснительный блок — Кстати! Используется для выделения какой-то важной информации или пояснения без остережений. Заменяет слово кстати.

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

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

 

Делаем блок внимания самостоятельно.

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

Одна важная деталь! Я специально сделал блоки простыми дивами, а не блоками цитаты и объясню почему. Блок цитаты поисковики априори считают НЕ уникальным. Этот блок создан именно для того, чтобы выделять не уникальный текст. Но в блоках внимания, очень редко выделяют именно цитируемый с какого-то другого сайта текст. Поэтому, чтобы поисковики ваши блоки индексировали как положено, в оригинале, тогда оборачивайте их, как и я в div, а не в blockquote, как это делают многие.

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

 

Регистрируем кнопки в файле functions.php

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

/*
* Добавляем выпадающее меню в визуальный редактор
*/ 
function wpb_mce_buttons_2($buttons) {
array_unshift($buttons, 'styleselect');
return $buttons;
}
add_filter('mce_buttons_2', 'wpb_mce_buttons_2');
/*
* Функция вызова фильтра для настроек MCE
*/
function wpm_blok_vnivaniya( $init_array ) {
// Определяем массив style_formats
$style_formats = array(
// Каждый дочерний элемент — формат со своими собственными настройками
array(
'title' => 'Красный блок – Осторожно!',
'block' => 'div',
'classes' => 'ostorozhno',
'wrapper' => true,
),
array(
'title' => 'Зелёный блок – Okey!',
'block' => 'div',
'classes' => 'okey',
'wrapper' => true,
),
array(
'title' => 'Желтый блок – Внимание!',
'block' => 'div',
'classes' => 'vnimanie',
'wrapper' => true,
),
array(
'title' => 'Синий блок – Вопрос!',
'block' => 'div',
'classes' => 'vopros',
'wrapper' => true,
),
array(
'title' => 'Сиреневый блок – Кстати!',
'block' => 'div',
'classes' => 'kstati',
'wrapper' => true,
),
);
// Вставляем массив, JSON ENCODED, в 'style_formats'
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}
// Прикрепляем вызов к 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'wpm_blok_vnivaniya' );

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

array(
'title' => 'Красный', // Название, которое будет показывать в редакторе
'block' => 'div', // В какой тег будет производиться обёртка.
'classes' => 'my_block_class', // Класс для стилизации через css.
'wrapper' => true, // Технические данные, должно быть true.
),

Чтобы добавить ещё одну кнопку, скопируйте этот кусок кода и вставьте после такого же куска перед скобкой с точкой запятой ); . Для удаления тоже самое в обратном порядке, просто удалите нужный массив array ( ... ), и кнопка исчезнет из редактора.

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

Главное, следите за скобками. Одна лишняя скобка или знак препинания (как и их отсутствие) и сайт может рухнуть. Используйте очень внимательно.

Проверяем что всё сработало. Открываем для редактирования любую запись и ищем кнопку с выпадающим списком под названием форматы.

выподающий список блоков внимания в редакторе wp
Кнопка форматы в визуальном редакторе WordPress

 

Стилизуем блоки внимания в файле style.css

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

/* НАЧАЛО – БЛОКИ ВНИМАНИЯ */

.ostorozhno, .okey, .vnimanie, .vopros, .kstati{ // Отвечает за сами блоки внимания.
	padding:4% 4% 3% 4%;
	margin:3% 0;
	position:relative;
}
.ostorozhno p, .okey p, .vnimanie p, .vopros p, .kstati p{ // Отвечает за текст в блоках.
	margin:0 0 1% 10%;
	font-size:120%;
}
.ostorozhno a, .okey a, .vnimanie a, .vopros a, .kstati a{ // Отвечает за ссылки в блоках.
	color:#000000;
	text-decoration: underline;
}
.ostorozhno::before, // Отвечает за иконки слева текста, общие настройки.
.okey::before,
.vnimanie::before,
.vopros::before,
.kstati::before
{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 3em;
	position: absolute;
	top:50%;
	margin-top:-32px;
        left:4%;
}
.ostorozhno{ // Отвечает за фоновый цвет блоков.
	background: linear-gradient(45deg, #FF7474, #FFB871);
}
.ostorozhno::before{ // Отвечает за саму иконку и её цвет.
	content: "\f057";
	color: #FF6547;
}
.okey{ // Отвечает за фоновый цвет блоков.
	background: linear-gradient(45deg, #7FFF7F, #FFFF80);
}
.okey::before{ // Отвечает за саму иконку и её цвет.
	content: "\f058";
	color: #34BC58;
}
.vnimanie{ // Отвечает за фоновый цвет блоков.
	background: linear-gradient(45deg, #FFB871, #FFFF80);
}
.vnimanie::before{ // Отвечает за саму иконку и её цвет.
	content: "\f06a";
	color: #F58128;
}
.vopros{ // Отвечает за фоновый цвет блоков.
	background: linear-gradient(45deg, #7ABCFF, #8888FF);
}
.vopros::before{ // Отвечает за саму иконку и её цвет.
	content: "\f059";
	color: #3DA2E0;
}
.kstati{ // Отвечает за фоновый цвет блоков.
	background: linear-gradient(45deg, #FF97CB, #FF7DBE);
}
.kstati::before{ // Отвечает за саму иконку и её цвет.
	content: "\f05a";
	color: #BA62E9;
}

/* КОНЕЦ – БЛОКИ ВНИМАНИЯ */

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

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

Как пользоваться иконками, я писал ранее в статье – Бесплатные иконки для сайта. Там вы найдете инструкцию как их подключать (если ещё они не подключены), как пользоваться и что они умеют, с примерами.

 

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

Наверняка многие из вас, кто читал колонку "Прожарка", видели блоки внимания в виде мессенджера. Так вот, эти блоки сделаны точно по такому же принципу, что и блоки внимания. Только вместо иконок установлена аватарка. Я вам покажу пример, как это реализованно у меня, а вы уже сами подстроите под себя.

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

/* НАЧАЛО – БЛОКИ ИНТЕРВЬЮ */

.moy_block{
	padding:4% 5% 2.5% 4%;
	margin:3% 0;
	position:relative;
}
.moy_block p{
	margin:0 0 2% 11%;
	font-size:120%;
}
.moy_block a{
	color:#000000;
	text-decoration: underline;
}
.moy_block::before
{
	position: absolute;
	top:50%;
	margin-top:-32px;
}
.moy_block::before{
	content: url(https://secure.gravatar.com/avatar/ae9d602c5378a7415c9a0eedeec7e10d?s=65&r=g);
	left:2%;
}
.moy_block{
	margin-right: 15%;
	background: linear-gradient(45deg, #E1FFE1, #FFFFDE);
	border-radius: 0 50px 50px 0;
}

/* КОНЕЦ – БЛОКИ ИНТЕРВЬЮ */

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

Чтобы сделать блок с круглыми краями, я использовал свойство border-radius. Отступ от правого края, чтобы выглядело как в мессенджере я делал margin-right.

 

Как пользоваться этими блоками.

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

Чтобы обернуть нужное сообщение в блок внимания, просто выделите его мышкой, затем нажмите на кнопку Формат и кликните по нужному названию блока. Это действие автоматически обернет выделенный текст в див с нужным классом. В итоге, вы получите нужный блок. Проще-простого! Таким же макаром выделяем всё нужные нам предложения или абзацы. Блоки по высоте уже резиновые, поэтому не имеет значения сколько текста вы обернёте.

 

В завершении.

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

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

Андрей WPM
Опубликовал - Андрей WPM

Друзья, блогу нужна ваша поддержка. Если вам понравилась статья или она вам помогла решить задачу, поделитесь ею в одной из соцсетей. Этим вы поможете дальнейшему развитию. Всем активистам - спасибо!


CTRL+D

Бонус для читателей WPMaster.kz. Предлагаю познакомиться с новым разделом на блоге - Промокоды. Только самые лучшие и нужные промокоды для покупок плагинов, тем, обучения, сервисов и т.д.



23
Вопросы не по теме статьи, задавайте в разделе "Флудилка".

avatar
1000
  Подписаться  
новее старее
Уведомление о
Александр Зырян
21 комм.
Александр ( webnub.ru )

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

Роман
4 комм.
Роман

Штука классная, намного лучше дефолной функции "цитата". Но как то возможно реализовать выделение текста в блоки в новом блочном редакторе ВП? А не только в классик редакторе

Алексей
4 комм.
Алексей

Не плохо) Но сейчас в WordPress появился новый редактор Gutenberg. И данный вариант не актуален на сколько я знаю) Если только в собственно ручно созданных таксономиях это будет работать. Поскольку там старый редактор)

Руслан
4 комм.
Руслан

Все отлично работает, но блок внимания с аватаркой на пк и планшете норм отображаются, а на телефоне аватарка залазит на текст! Как это можно исправить? См. скрин http://images.vfl.ru/ii/1573042838/3b9c9b35/28466722.jpg

Папа
2 комм.
Папа

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