Лайки, посетители и подписчики на сайт!Подробнее

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

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

Информация для справки

Полезная информация

Предупреждение

Ошибка, критическое замечание

Цитата

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 присутствует по-умолчанию. Скриншот из моего редактора:

Кнопки HTML-редактора

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.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: #00529b; background: #bde5f8;}
.info:before {content: "\f129";}
.success {color: #4f8a10; background: #dff2bf;}
.success:before {content: "\f00c";}
.warning {color: #9f6000; background: #feefb3;}
.warning:before {content: "\f12a";}
.error {color: #d63301;	background: #ffccba;}
.error:before {content: "\f00d";}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
blockquote {
	position: relative;
	margin: 0;
	padding: 5px 10px 5px 70px;
	color: #222;
	background: #f9f9f9;
}
blockquote:before {
	position: absolute;
	top: 50%;
	width: 70px;
	margin-left: -70px;
	line-height: 0!important;
	content: "\f02d";
	font-family: FontAwesome;
	font-size: 40px;
	color: #393;
	text-align: center;
}

Значения свойства content соответствуют hex-коду выбранных иконок Font Awesome. На этом урок закончен, можете использовать красивые блоки для оформления своих статей.

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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' );

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

Визуально

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

  1. Юлия

    Попробовала установить у себя коды таких блоков внимания. Кнопки в режиме HTML появились, а стили чего-то не работают. Не подскажете, в чем может быть проблема?

    Ответить

  2. Webliberty

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

    Ответить

  3. Юлия

    А что нужно со шрифтом сделать? Можете подсказать как подключить? Или может у Вас есть материал на эту тему, чтобы я могла разобраться?

    Ответить

  4. Webliberty

    Юлия, внимательно изучите статью, ссылка на инструкцию по установке шрифта в ней есть.

    Ответить

  5. Сергей Саранчин

    Приветствую!
    Тоже давно сделал у себя вывод блоков цитат в своих статьях на блоге. Хорошая штука, улучшает восприятие текста ;-)

    Ответить

  6. Виталий

    Вообще-то есть специальный плагин вывода таких инфоблоков. Не стоит копаться в коде

    Ответить

  7. Webliberty

    Виталий, конечно есть! Давайте расскажу о преимуществах кода)

    Во-первых, все стили и скрипты вставляются в существующие файлы шаблона, т.е. число обращений к серверу не увеличивается. А при подключении плагина все CSS и JS файлы создают дополнительные запросы.

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

    Ответить

  8. Айк

    Спасибо огромное Денис :o

    Давно искал, а самое главное для меня то что без плагина, так как любой плагин создает нагрузку, чем меньше их количество тем лучше для вашего блога или сайта. Плагин кончено быстрое решение, но не всегда, если можно обойтись кодом с исчерпывающим описанием как например здесь, то спешите делать БЕЗ ПЛАГИНОВ! :x

    Да и вообще сайт крутой — ничего лишнего :o

    Ответить

  9. Юлия

    Подскажите, пожалуйста, почему у меня корректно не отображаются блоки выделения. Текст получается в блоке, а картинка (в данном случае восклицательный знак) убежала в район заголовка статьи. Ссылку прописала в графе «сайт».

    Ответить

  10. Айк

    Юлия, привет!

    Я бы посоветовал вам обратится в кворк и за 500 рублей решить вопрос быстро. Сэкономите кучу времени и нервов, просто покажите данную статью и опытный программист все сделает за вас быстро и качественно :o

    Ответить

  11. Webliberty

    Юлия, для начала попробуйте сделать все по инструкции и удалить дублирование стилей в style.css — сейчас я вижу они вставлены два раза подряд. Затем очистите кэш плагина Hyper Cache.

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

    Добавлю: где Вы увидели, чтобы строки в CSS комментировались символами // ?
    Если хотите правильно закомментировать, то используйте такую конструкцию:

    1
    
    /* стили для блоков внимания */

    Скорее всего дело именно в этом!

    Ответить

  12. Юлия

    Webliberty, продела все манипуляции заново по шагам. Все равно картинка убежала к заголовку статьи. Может попробовать поиграться с изменением значений отступов?

    Ответить

  13. Webliberty

    Юлия, нужно очистить кэш, я вижу что на Вашем сайте все работает!

    Ответить

  14. Юлия

    Webliberty, да! Все заработало! Извините за такие глупые вопросы — с кодами всегда плохо дружу. Спасибо за новые знания и уделенное внимание ;-)

    Ответить

  15. Иван

    Спасибо! Все работает. А как можно сделать, чтобы кнопки блоков были в визуальном редакторе и при выделении текста и нажатии на кнопку блока сразу оборачивались в нужные теги?

    Ответить

  16. Webliberty

    Иван, специально по Вашей просьбе обновил статью и добавил инструкцию по размещению кнопки форматирования в визуальном редакторе. Попробуйте)

    Ответить

  17. Иван

    Webliberty, работает))) Спасибо большое!

    Ответить

  18. 1informer.com

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

    Я чувствую, что у этой статьи будет еще продолжение, так как в рунете видел и покруче оформление, но почти никто так подробно не описывает инструкцию как Денис.

    1) я бы хотел видеть видеоинструкцию
    2) сделайте пожалуйста другие виды оформления

    Приятно читать ваш блог, видно что человек старается :o

    Ответить

Ваш комментарий:

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: