Оформление информационных блоков и цитат на сайте

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

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

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

• Font Awesome или другой векторный шрифт с иконками
• jQuery (инструкция как подключить есть на этой странице блога)

Перейдём непосредственно к реализации. Будьте внимательны при выполнении инструкций.

Стилизация и добавление кнопок в HTML-редактор WordPress

Первым делом добавим в HTML-редактор WordPress кнопки для быстрой вставки элементов, для этого в файл functions.php нужно добавить код:

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
}

Сохраните файл и перейдите в редактор записи или страницы, на панели инструментов должны появиться новые кнопки: Info, Success, Warning, Error. Вы можете заменить названия кнопок и классы элементов на своё усмотрение. Кнопка для вставки цитаты b-quote присутствует по-умолчанию. Скриншот из моего редактора:

Переходим к следующему шагу и добавим в таблицу стилей style.css свойства для селекторов. С помощью позиционирования, отступов и высоты строки центрируем иконки по вертикали, они размещены в псевдоэлементе :before и выводятся перед текстом. Стили для цветных блоков:

.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";}

Стили для блока цитат:

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

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

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

По просьбе одного из читателей обновляю статью и добавляю инструкцию по добавлению кнопок в визуальный редактор WordPress. Для этого в тот же файл 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' );

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

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

Добавление блоков в блочный редактор Гутенберг

Перешли на WordPress 5.0 и используете новый блочный редактор? Предлагаю установить мой плагин Simple Note, размещённый в каталоге. Загрузить плагин можно на официальной странице:

Поставьте плагину высокую оценку, если он вам понравился 😳