Как добавить содержание записи или страницы на WordPress: все способы

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

Зачем нужно делать оглавление в статьях

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

Как добавить содержание в посты и страницы на сайте WordPress

Есть несколько способов это сделать, каждый из которых имеет свои преимущества и недостатки. Рассмотрю наиболее распространенные.

Автоматически при помощи плагинов

В репозитории WordPress есть большое количество расширений, которые могут справиться с задачей.

Table of Content Plus (TOC+)

Table of Content Plus (TOC+) является самым популярным расширением в репозитории WordPress для создания оглавлений.

После установки Table of Contents Plus на сайт в админке в разделе «Настройки» появится пункт «Оглавление+».

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

Вебмастеру предлагают выбрать для оглавления:

• Место расположения.
• Минимальное количество заголовков для формирования содержания.
• Тип контента для вывода.

• Параметры иерархии и видимости.
• Настройки дизайна.

Я редко использую TOC+ на своих проектах из-за его устаревшего дизайна.

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

Easy Table of Contents

Практически полным аналогом TOC+ является плагин содержания WordPress Easy Table of Contents, но только если сравнивать бесплатные версии. Он тоже полностью автоматический и позволяет выводить содержание в любом типе контента.

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

В дополнение у Easy Table of Contents имеется премиальный вариант, который обойдется в $49 за 1 домен на 1 год.

Платная версия расширения предлагает целый ряд дополнительных опций:

• Отдельный блок для редактора Гутенберг.
• Вставка в AMP страницы.
• Возможность закрепить план статьи при прокрутке.
• Вывод информации о времени на чтение материала.

TOP Table Of Contents

Сделать красивое содержание с современным дизайном поможет расширение TOP Table Of Contents. Плагин имеет в бесплатной версии 4 варианта внешнего вида, каждый из которых настраивается по десяткам параметров.

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

Полностью раскрывается TOP Table Of Contents в Pro-версии:

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

Joli Table of Contents

Joli Table of Contents можно назвать самым настраиваемым плагином оглавлений для WP. Он полностью адаптивный и отлично смотрится практически на любом сайте. Достаточно только подобрать нужный пресет и задать цвета.

Расширение от Joli позволяет выводить оглавление не только внутри поста. С ним можно добавить плавающий виджет, в том числе изначально скрытый. Еще одно заметное отличие решения от аналогов — возможность вывести красивый и настраиваемый прогресс-бар.

Автоматический вывод оглавления в премиальных шаблонах

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

• Reboot — многофункциональный с конструктором главной страницы.
• Yelly — для быстрого распространения контента в соцсетях.
• JournalX — с возможностями для создания уникального онлайн-журнала.
• Cook It — под кулинарную тематику.
• Root — для быстрого личного блога или портфолио.
• Bono — для интернет-магазина с WooCommerce.

Промокод на Reboot

1. Все настройки темы сконцентрированы в удобном кастомайзере. Чтобы перейти к ним, просто на фронтенде, предварительно авторизовавшись в админке, нажмите «Настроить».

2. Перейдите в раздел «Модули».

3. Выберите пункт «Содержание».

4. Здесь можно указать контент для вывода, обернуть содержание в noindex, указать расположение. Настройки предельно простые.

После этого автоматически в указанных материалах начнет выводиться красивое нумерованное оглавление.

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

Все темы WPShop имеют подробную документацию на русском языке, где описаны полезные хуки с реальными примерами.

Я считаю, что в 99,9% случаев модуля для вывода содержания в шаблонах ВПШоп достаточно. Поскольку на большинстве своих проектов я использую именно эти российские темы, обычно поверх не устанавливаю дополнительные плагины для оглавлений.

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

Любая тема WPShop со скидкой

Вручную в редакторе Gutenberg

При использовании конструктора Гутенберг на сайте проще всего создать план статьи с помощью бесплатной версии расширения Spectra.

1. После установки и активации плагина “Спектра”, перейдите в конструктор и найдите новый блок «Оглавление».

2. Перетащите его в нужное место страницы. Сразу содержание будет автоматически сформировано.

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

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

Вручную в классическом редакторе WordPress

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

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

<h2 id="razdel1">Химический состав</h2>
<h2 id="razdel2">Полезные свойства</h2>
<h2 id="razdel3">Выводы</h2>

<span class="oglavlenie"><strong>Содержание: </strong>
<a href="#razdel1">Химический состав</a>
<a href="#razdel2">Полезные свойства</a>
<a href="#razdel3">Выводы</a></span>

.oglavlenie {
counter-reset: list 0;
display: block;
margin-top: 20px;
padding: 10px;
background: linear-gradient(135deg, #f6d365, #eabcaf);
border-radius: 10px;
}
.oglavlenie a:before {
counter-increment: list;
content: counter(list) ". "
}
.oglavlenie strong {
margin-bottom: 40px;
}
.oglavlenie a {
display: block;
text-decoration: none;
color: #333;
margin-bottom: 5px;
}
.oglavlenie a:hover {
color: #ff0000;
}
ol.oglavlenie {
background: #ebebeb;
color: #444;
line-height: 18px;
margin-bottom: 18px;
padding: 1.5em
}

В результате получим оглавление следующего вида.

Выводы

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

-15% на шаблоны WPShop

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