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

Содержание статьи wordpress

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

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

Содержание необходимо, чтобы:

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

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

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

Улучшить SEO. Поисковые системы, такие как Google и Яндекс, учитывают структуру страницы при ее индексировании. Наличие плана материала помогает их роботам лучше понять содержимое статьи, особенно если в самом шаблоне неправильно расставлены заголовки виджетов, комментариев и других блоков.

Увеличить уровень доверия к контенту. Когда статья структурирована и есть навигация по ней, она выглядит более профессиональной.

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

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

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

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

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

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

Плюсы и минусы использования плагинов
Работают практически со всеми темами. А если не сработает один из плагинов, то можно подобрать аналог.
Многие из расширений бесплатные.
Простые настройки, использовать можно без наличия специфических знаний.
Если потребуется, не нужно будет думать, как убрать содержание из всех статей одновременно. Для этого достаточно отключить плагин.
Зачастую ограниченная функциональность в плане кастомизации.
Не всегда имеется русскоязычная локализация.
Любой дополнительный плагин всегда грузит сайт ВордПресс.

Table of Content Plus (TOC+)

Table of Content Plus (TOC+)

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

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

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

Оглавление+ в опциях

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

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

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

Если вы установили TOC+, но не наблюдаете оглавления в постах, убедитесь, что в настройках установлена галочка у пункта «post». По умолчанию содержание формируется только для типа контента «page».

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

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

Как выглядит оглавление TOC+

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

Плюсы и минусы Table of Content Plus
Простые настройки.
Можно вывести список заголовков на отдельной странице в нужном месте при помощи простого шорткода.
Включает функционал для генерации HTML карты сайта.
Распространяется бесплатно.
Не лучший дизайн.
Нет продвинутых функций.

Easy Table of Contents

Easy Table of Contents

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

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

Красивый стандартный шаблон

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

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

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

Easy Table of Contents частично переведен на русский язык.

TOP Table Of Contents

Красивый TOP Table Of Contents

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

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

Как выглядит вариант

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

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

Платная версия плагина обойдется в $19,99 за 1 сайт.

Главный минус TOP Table Of Contents, который выделяют пользователи, это большая нагрузка на сайт. В отзывах многие отмечают, что показатель PageSpeed у них заметно снизился после установки этого расширения.

Joli Table of Contents

Joli Table of Contents

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

Один из вариантов оглавления

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

Плюсы и минусы Joli Table of Contents
Огромное количество опций для детальной настройки, в том числе несколько уникальных.
Хороший дизайн, много пресетов.
Работает с Gutenberg.
Дружественный к SEO.
Поддержка хуков для продвинутой настройки.
Не переведен на русский язык.
Нужно потратить время, чтобы разобраться в настройках.
Многие опции доступны только в PRO-версии за $40 в год.

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


Премиальные темы WP

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

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

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

Промокод на Reboot

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

Переход к настройкам

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

Раздел модулей

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

Опции для содержания

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

Достуные опции

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

План статьи на шаблоне

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

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

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

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

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

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

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

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

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

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

Оглавление в Spectra

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

Вставка элемента

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

Настройки элемента

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

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

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

Якорная ссылка представляет собой обычную ссылку, но вместо стандартного линка в ней используется символ # с идентификатором элемента. Нажав на эту ссылку, можно внутри статьи переместиться к тегу, где в атрибуте id указан тот же идентификатор. Не имеет значения, какой именно тег используется. Идентификатор можно указать прямо в <h2>, <h3>, <h4> и любом другом заголовке.

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

Указываем в заголовках id. Например:

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

Задавать id можно любой. Главное, чтобы он совпадал со значением в якорной ссылке.

Генерируем список якорных ссылок, то есть фактически само оглавление. И добавляем его в нужное место страницы.

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

Прописываем стили CSS для используемого класса тега <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
}

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

Чистое оглавление на HTML CSS

Обратите внимание: В CSS-код я добавил каунтеры, чтобы автоматически нумеровались пункты. Если этого не требуется, уберите из стилей параметры counter-reset, counter-increment, content.

Выводы

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

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

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

Пожалуйста, оцените материал:

Специализируюсь на разработке и оптимизации уникальных веб-решений для клиентов различных отраслей. Имею большой опыт работы с WordPress, которым активно делюсь с читателями.
Получай полезные материалы удобным способом!
Добавить комментарий