RigWEB

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

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

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

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

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

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

Цитата

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

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

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

  1. Юлия

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

    Ответить

  2. Webliberty

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

    Ответить

  3. Юлия

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

    Ответить

  4. Webliberty

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

    Ответить

  5. Юлия

    Спасибо! Сразу не увидела. Думаю, что уже разберусь.

    Ответить

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

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

    Ответить

  7. Виталий

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

    Ответить

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

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