Функция автоматического содержания статьи в WordPress упрощает навигацию и улучшает восприятие длинных публикаций. Для её реализации чаще всего используются плагины, такие как Easy Table of Contents или Table of Contents Plus. Они позволяют вставлять оглавление на основе заголовков H1–H6 без ручной верстки.
После установки плагина достаточно активировать его и задать параметры отображения: уровни заголовков, типы записей (посты, страницы), положение блока (до или после введения). В настройках можно выбрать автоматическую вставку содержания или добавлять его вручную через шорткод [toc].
Если оглавление нужно только в отдельных публикациях, рекомендуется отключить автоматическую вставку и использовать блок Shortcode в редакторе Gutenberg. Также важно убедиться, что заголовки в тексте оформлены правильно (H2, H3 и т.д.), иначе содержание не будет отображаться.
Для тех, кто не использует плагины, возможна ручная вставка содержания через HTML-якоря и внутренние ссылки. Это требует больше времени, но обеспечивает полный контроль над структурой. Такой подход подходит при создании кастомных шаблонов или при минималистичной настройке WordPress.
Как добавить якоря для содержания в WordPress
Чтобы ссылки в содержании вели к нужным разделам статьи, необходимо добавить якоря к соответствующим заголовкам. В редакторе Gutenberg выберите заголовок, затем в правой панели в разделе «Дополнительно» укажите уникальный HTML-якорь. Например, для заголовка «Преимущества метода» можно ввести «preimushchestva-metoda».
Если используется классический редактор, переключитесь на вкладку «Текст» и вручную добавьте атрибут id к нужному заголовку: <h3 id="preimushchestva-metoda">Преимущества метода</h3>.
В содержании ссылки оформляются в виде: <a href="#preimushchestva-metoda">Преимущества метода</a>. При клике пользователь будет перенаправлен к нужному фрагменту статьи без перезагрузки страницы.
Если содержание создаётся автоматически (например, через плагин Table of Contents Plus), убедитесь, что включено автогенерирование якорей. В настройках плагина это обычно обозначается как «Использовать заголовки H1–H6 для построения содержания».
Якоря чувствительны к регистру. Не используйте пробелы, кириллические символы и специальные знаки – заменяйте их дефисами и латиницей. Для надёжности придерживайтесь одного формата во всей статье.
Как настроить автоматическое создание содержания с помощью плагинов
Установите плагин Easy Table of Contents через раздел «Плагины» → «Добавить новый». После активации перейдите в «Настройки» → «Table of Contents».
Включите отображение содержания для нужных типов записей: записи, страницы, произвольные типы. Отметьте соответствующие чекбоксы.
Выберите уровни заголовков, которые будут включены. Обычно это h2 и h3. При необходимости добавьте h4 для детализированных структур.
Настройте внешний вид: заголовок блока содержания, возможность сворачивания, цветовую схему. Эти параметры находятся во вкладке «Внешний вид».
Для точной настройки якорей убедитесь, что используется транслитерация URL. Это исключает проблемы с навигацией по содержанию на кириллице.
Если сайт использует конструктор Elementor, активируйте поддержку в разделе «Интеграция» и проверьте, что заголовки в контенте корректно определяются как элементы DOM.
Проверьте результат на опубликованной странице. При необходимости используйте режим отладки в браузере для отслеживания некорректной генерации якорей.
Периодически проверяйте совместимость плагина с обновлениями WordPress и темой. При сбоях замените плагин, например, на LuckyWP Table of Contents с аналогичным функционалом.
Как вручную создать содержание с использованием HTML-списков
Для ручного добавления содержания в статью WordPress потребуется HTML-редактор. Откройте запись в режиме «Текст» и вставьте код списка с якорными ссылками.
Пример структуры содержания:
<ul>
<li><a href="#section1">Заголовок 1</a></li>
<li><a href="#section2">Заголовок 2</a></li>
<li><a href="#section3">Заголовок 3</a></li>
</ul>
Каждому заголовку в тексте статьи нужно задать идентификатор:
<h2 id="section1">Заголовок 1</h2>
<p>Текст раздела...</p>
<h2 id="section2">Заголовок 2</h2>
<p>Текст раздела...</p>
<h2 id="section3">Заголовок 3</h2>
<p>Текст раздела...</p>
Для вложенных пунктов используйте списки внутри списков:
<ul>
<li><a href="#section1">Раздел 1</a>
<ul>
<li><a href="#subsection1">Подраздел 1.1</a></li>
</ul>
</li>
</ul>
Соответственно, в тексте статьи используйте:
<h3 id="subsection1">Подраздел 1.1</h3>
Рекомендации:
- Не используйте одинаковые значения атрибута id в пределах одной страницы.
- Поддерживайте логическую иерархию заголовков: h2 для основных, h3 для вложенных.
- Размещайте содержание в начале статьи, сразу после вступления.
- Проверяйте работу ссылок – якоря должны точно соответствовать идентификаторам заголовков.
Как оформить содержание с помощью встроенных стилей в WordPress
Для создания содержания используйте встроенный блок «Оглавление», доступный при установке плагина Yoast SEO или Rank Math. После установки и активации плагина откройте редактор записи и добавьте блок Table of Contents.
Если вы работаете в Gutenberg, структуру содержания можно оформить с помощью заголовков уровней H2 и H3. Именно они используются плагинами для генерации оглавления автоматически. Следите за иерархией: каждый новый раздел – H2, вложенные подразделы – H3.
Для управления отображением содержания используйте панель настроек блока. Здесь можно включить или скрыть нумерацию, настроить отступы и выбрать отображаемые уровни заголовков. Большинство плагинов позволяют исключать отдельные заголовки, добавляя к ним класс no_toc.
Если вы не используете плагин, оглавление можно собрать вручную. Для этого оформите список ссылок с якорями. Пример: <a href="#zagolovok1">Раздел 1</a>. Для заголовка раздела добавьте атрибут id="zagolovok1".
Чтобы стилизовать содержание без сторонних решений, используйте встроенные параметры блока «Группировка». Внутрь добавьте текст или список, примените фон, рамку и отступы. Это доступно в боковой панели редактора Gutenberg.
При использовании темы, поддерживающей блоки, проверьте, как она отображает стили заголовков. При необходимости откройте «Внешний вид» → «Настроить» → «Дополнительные стили CSS» и задайте стили для классов .wp-block-heading или .table-of-contents.
Как обновлять содержание статьи при изменении структуры текста
Если структура статьи изменилась – добавлены новые заголовки или удалены старые – необходимо пересобрать содержание, чтобы оно точно отражало актуальное состояние текста.
- Открой редактор WordPress и перейди в режим редактирования статьи.
- Проверь иерархию заголовков:
<h2>для основных разделов,<h3>– для вложенных. Нарушенная структура приведёт к некорректному отображению содержания. - Если используется плагин (например, Easy Table of Contents), нажми «Обновить» или «Перегенерировать содержание» в настройках блока содержания. Плагин автоматически подхватит изменения в заголовках.
- Если содержание добавлено вручную, найди и перепроверь все пункты списка. Убедись, что каждый элемент соответствует заголовку в тексте, а ссылки внутри содержания ведут к нужным якорям.
- Для ручной корректировки якорей проверь, что каждому заголовку присвоен корректный
id:<h2 id="primer">Пример</h2>- Ссылка в содержании должна выглядеть так:
<a href="#primer">Пример</a>
- После правок проверь содержание в опубликованной статье. Клик по каждому пункту должен перемещать к соответствующему разделу.
- Если используются шорткоды или блоки Gutenberg, обновление может потребовать повторной вставки или настройки блока содержания.
При любом изменении структуры текста содержание необходимо синхронизировать вручную или с помощью настроек плагина, чтобы избежать некорректных ссылок и пустых пунктов.
Как улучшить навигацию по статье через содержание в WordPress
Добавление якорей к заголовкам позволяет создать кликабельное содержание, по которому можно быстро перейти к нужному разделу. Для этого каждый заголовок должен иметь уникальный атрибут id. В редакторе WordPress при использовании блочного редактора (Gutenberg) можно задать его в настройках блока заголовка.
Для автоматического создания содержания рекомендуется использовать плагин, поддерживающий генерацию оглавления на основе заголовков H2–H6. Один из стабильных вариантов – Easy Table of Contents. После установки в настройках можно выбрать, на каких типах записей включать содержание, задать глубину вложенности и точное место вставки – до первого абзаца, после заголовка или в произвольной позиции с помощью шорткода [toc].
Для лучшей читаемости отключите отображение заголовка содержания, если он дублирует основной заголовок статьи. Названия пунктов автоматически подтягиваются из заголовков в тексте, поэтому важно, чтобы они были краткими и информативными.
Если в статье более 5 пунктов, добавьте возможность свернуть и развернуть содержание. Это снижает визуальную перегрузку и улучшает восприятие на мобильных устройствах. В Easy Table of Contents эта функция доступна через параметр Allow the user to toggle the visibility.
Для улучшения UX на мобильных устройствах используйте фиксированное положение оглавления (через CSS или плагин, если поддерживается). Это особенно полезно в длинных статьях: пользователь может перейти к нужному разделу без прокрутки вверх.
Избегайте вставки содержания вручную в каждом посте. Использование шорткода или автоматической вставки снижает риск ошибок и экономит время при обновлениях контента.
Загрузка...
