Оглавление WordPress без лишнего кода: два способа для стабильной навигации

Для статьи в WordPress по-прежнему подходят два практичных способа: ручное оглавление через HTML-якоря блочного редактора и автоматическое — с помощью плагина. Главное изменение для новичка состоит в том, что при ручной настройке уже не требуется вставлять отдельные HTML-теги перед каждым заголовком.
У WordPress появился собственный блок оглавления, однако считать его полноценной заменой этим вариантам пока рано. Документация блока Table of Contents прямо называет его экспериментальным и предупреждает, что он может измениться или исчезнуть без уведомления. Поэтому для рабочего сайта разумнее выбрать ручные якоря либо стабильный плагин.
Какой способ выбрать
Ручной вариант подходит для одной или нескольких длинных статей, когда вы хотите обойтись без дополнительного расширения. Все пункты и якоря придётся создать самостоятельно, а после переименования или перестановки разделов — проверить и при необходимости исправить.
Плагин удобнее для блога с большим архивом или для редакции, которая регулярно выпускает объёмные материалы. Он собирает содержание из заголовков, автоматически создаёт ссылки и позволяет задать единые правила для записей и страниц.
В обоих случаях сначала приведите в порядок структуру текста. Название публикации обычно занимает уровень H1, основные разделы — H2, а вложенные подразделы — H3. Оглавление не исправит хаотичную иерархию: оно лишь покажет её читателю.
Способ 1. Оглавление через якоря блочного редактора
Этот вариант работает без установки плагина и без перехода в редактор кода. Для каждого раздела назначается уникальный якорь, а в начале статьи создаётся обычный список со ссылками на эти якоря.
- Откройте запись в блочном редакторе и убедитесь, что названия основных разделов оформлены блоками «Заголовок», а не просто жирным текстом.
- Добавьте перед первым разделом блок «Список». Впишите в него названия тех разделов, к которым читатель должен получить быстрый доступ.
- Выделите первый заголовок статьи. В правой панели его настроек раскройте раздел «Дополнительно» и найдите поле «HTML-якорь».
- Введите короткое уникальное значение, например vybor-sposoba. Не добавляйте знак решётки в само поле якоря.
- Вернитесь к списку, выделите соответствующий пункт, нажмите кнопку создания ссылки и укажите #vybor-sposoba.
- Повторите действия для остальных разделов, сохраните запись и проверьте каждую ссылку в режиме просмотра опубликованной страницы.
Официальная инструкция по переходам внутри страницы уточняет правила: якорь должен быть уникальным в пределах документа, чувствителен к регистру, начинается с буквы и не содержит пробелов. В ссылке перед его именем ставится знак решётки.
Лучше использовать короткие значения латиницей, состоящие из понятных слов и дефисов: например, plugin-settings или manual-method. Не применяйте одинаковый якорь для двух заголовков. Если ссылка ведёт не к тому разделу или ничего не делает, первым делом сравните написание якоря и адреса после решётки.
Название пункта оглавления не обязано дословно повторять длинный заголовок, но смысл должен сохраняться. Пункт «Настройка плагина» понятнее абстрактного «Второй способ». Это особенно важно для людей, которые просматривают ссылки с помощью вспомогательных технологий или пытаются быстро найти конкретный этап инструкции.
Способ 2. Автоматическое оглавление с плагином
Для автоматизации подойдёт Easy Table of Contents. Его страница в официальном каталоге WordPress подтверждает автоматическое построение оглавления по заголовкам, поддержку записей, страниц и пользовательских типов материалов, а также работу с классическим и блочным редакторами.
- В панели управления откройте «Плагины» → «Добавить плагин» и найдите Easy Table of Contents по точному названию.
- Установите и активируйте расширение, затем перейдите на страницу его настроек.
- Включите оглавление только для нужных типов материалов. Для обычного блога это чаще всего записи; автоматическое добавление на короткие служебные страницы обычно не требуется.
- Задайте минимальное количество заголовков, при котором должно появляться содержание. Так оно не будет занимать место в публикациях из двух небольших разделов.
- Выберите уровни заголовков. Для большинства статей достаточно H2 и H3: включение более глубоких уровней может сделать список громоздким.
- Настройте положение, подпись и возможность сворачивания, затем откройте несколько старых и новых записей на компьютере и телефоне.
Бесплатная версия умеет автоматически вставлять содержание и поддерживает шорткод [ez-toc] для выбранного места в материале. Отдельный блок для редактора Gutenberg указан разработчиком среди возможностей платной версии, поэтому отсутствие такого блока после установки бесплатного варианта не означает ошибку.
Если автоматическое оглавление пропускает раздел, проверьте тип соответствующего блока и разрешённые уровни заголовков в настройках. Визуально крупный абзац не считается H2 или H3. И наоборот, техническая подпись, случайно оформленная как заголовок, может попасть в содержание.
Что проверить перед публикацией
Сначала нажмите каждый пункт оглавления на опубликованной странице. Переход должен приводить к правильному разделу, а адрес браузера — получать фрагмент после решётки. Проверьте также прямое открытие такого адреса в новой вкладке: нужный заголовок должен оказаться в видимой области страницы.
- В статье используется один H1, обычно выводимый темой из названия записи.
- Основные части размечены как H2, а H3 находятся внутри соответствующих разделов H2.
- Названия пунктов объясняют содержание разделов, а не состоят из общих слов.
- Ручные якоря не повторяются и не содержат пробелов.
- После переименования заголовка ручная ссылка всё ещё ведёт к его действующему якорю.
- Автоматическое оглавление не захватывает подписи и служебные элементы страницы.
Отдельно посмотрите мобильную версию. Длинное содержание не должно отодвигать начало статьи на несколько экранов; в таком случае сократите число уровней или включите сворачивание. Если на сайте закреплена верхняя панель и она перекрывает заголовок после перехода, это уже вопрос оформления темы, а не неправильного адреса якоря.
Практичный итог
Для отдельной статьи проще создать список и назначить заголовкам якоря через правую панель блочного редактора. Этот способ не требует кода и сохраняет полный контроль над названиями пунктов.
Если оглавление нужно во многих публикациях, плагин уменьшит объём ручной работы и будет обновлять список на основе фактической структуры материала. Экспериментальный блок WordPress уже показывает направление развития редактора, но для стабильного рабочего сценария пока лучше не делать его единственной опорой.
Читайте также:
Подпишитесь на рассылку
Получайте свежие новости Web3, AI и криптовалют прямо на вашу почту.