Красивое оформление статей в WordPress

Различные наглядные примеры красивого оформления элементов статей в WordPress: цитаты, списки, таблицы и пр.

2020

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

Как оформить статью WordPress?

Красиво оформить свои публикации можно:

  1. самостоятельно с помощью плагинов;
  2. самостоятельно без плагинов;
  3. обратившись к специалисту, чтобы он настроил плагин либо внёс соответствующие изменения в файлы вашей темы.

Что значит оформить статью?

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

Что можно и нужно оформлять:

  • шрифты
  • отступы
  • заголовки
  • списки
  • таблицы
  • цитаты
  • прочие элементы

Как красиво оформить цитату в Вордпресс?

Красиво оформленные цитаты позволяют выделять наиболее значимые моменты публикации, намеренно заостряя на них внимание читателя. В визуальном редакторе WordPress она так и называется - "Цитата". В редакторе кода цитата заключается в парный тег <blockquote></blockquote> и выглядит как-то так:

<!-- wp:quote {"className":"ПРИСВОЕННЫЙ-КЛАСС"} -->
<blockquote class="ПРИСВОЕННЫЙ-КЛАСС">Цитата</blockquote>
<!-- /wp:quote -->

Способ оформления цитат без использования плагинов

При оформлении статей этого блога я использую цветные информационные блоки -  именно на их примере основан данный способ оформления цитат. Блоки выглядят так:

Пример оформления информационного блока №1

и

Пример оформления информационного блока №2

Для самостоятельного оформления понадобятся:

  1. любой векторный шрифт с иконками, в данном примере Font Awesome;
  2. файл functions.php, для подключения библиотеки шрифта;
  3. файл стилей (обычно это style.css либо styles.css).

Для подключения необходимой библиотеки иконок, используя хук, помещаем содержащий ссылку на внешнюю библиотеку <link> в <head></head> всех страниц сайта. Добавляем следующий код в самый конец файла functions.php:

/**
 * Добавляем Font Awesome
 */
function noodlin_font_awesome() {
	echo '<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">';
}
add_action( 'wp_head', 'noodlin_font_awesome' );

В файл style.css добавляем стили:

/* Стили для информационного блока №1 */

blockquote.font-awesome-info-circle {
	background: #BDE5F8;
	border-left: none;
	font-style: normal;
	margin: 0 0 26px 0;
	padding: 15px 20px 15px 70px;
	position: relative;
	text-align: left;
}

blockquote.font-awesome-info-circle:before {
	color: #4DB2EC;
	content: "\f05a";
	font-family: FontAwesome;
	font-size: 40px;
	line-height: 0!important;
	margin-left: -70px;
	position: absolute;
	text-align: center;
	top: 50%;
	width: 70px;
}

blockquote.font-awesome-info-circle p {
	color: #222222!important;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 15px;
	font-weight: normal;
	line-height: inherit;
	margin: 0;
	text-transform: none;
}

и, соответственно, стили для информационного блока №2

/* Стили для информационного блока №2 */

blockquote.font-awesome-exclamation-circle {
	background: #FFBDBD;
	border-left: none;
	font-style: normal;
	margin: 0 0 26px 0;
	padding: 15px 20px 15px 70px;
	position: relative;
	text-align: left;
}

blockquote.font-awesome-exclamation-circle:before {
	color: #FF0000;
	content: "\f06a";
	font-family: FontAwesome;
	font-size: 40px;
	line-height: 0!important;
	margin-left: -70px;
	position: absolute;
	text-align: center;
	top: 50%;
	width: 70px;
}

blockquote.font-awesome-exclamation-circle p {
	color: #222222!important;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 15px;
	font-weight: normal;
	line-height: inherit;
	margin: 0;
	text-transform: none;
}

Осталось только добавить эти классы в нужные теги <blockquote class=""></blockquote>. Для первого варианта:

<blockquote class="font-awesome-info-circle">Пример оформления информационного блока №1</blockquote>

и для второго варианта:

<blockquote class="font-awesome-exclamation-circle">Пример оформления информационного блока №2</blockquote>

Перед внесением каких-либо изменений в файлы Вордпресс обязательно делайте бэкап!

Где лежат functions.php и style.css?

Для тех, кто пока не в курсе, functions.php - конфигурационный файл темы, а найти его можно по следующему адресу:

/wp-content/themes/ИСПОЛЬЗУЕМАЯ-ТЕМА/functions.php

Если используется дочерняя тема, то:

/wp-content/themes/ДОЧЕРНЯЯ-ТЕМА/functions.php

Например, для темы "Twenty Twenty" путь будет выглядеть вот так:

/wp-content/themes/twentytwenty/functions.php

Файл style.css находится там же.

Любые изменения в файлах functions.php и style.css рекомендую производить исключительно в дочерней теме!

Надеюсь, с цитатами всё было понятно?

СХОЖИЕ ПОСТЫБОЛЬШЕ ОТ АВТОРА