newUX: new User Experience

Как добавить оглавление в WordPress

admin 2 мин чтения

Длинные статьи в WordPress неудобно читать без навигации: клиент не видит структуру и уходит. Оглавление собирает заголовки в список и даёт быстрый переход к нужному разделу. В WordPress его можно добавить без плагинов, одним блоком и скриптом.

Зачем оглавление в WordPress

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

Как это работает

Скрипт newUX находит заголовки статьи и строит из них список. Каждому заголовку присваивается якорь, поэтому переход срабатывает сразу. Список обновляется сам: добавили раздел, и он появился в оглавлении.

Шаг 1. Подключите скрипт

Вставьте код скрипта в <head> или подвал темы. Удобнее всего через плагин для вставки кода в шапку и подвал, чтобы не трогать файлы темы. Как это сделать, описано в статье "Как подключить скрипт newUX".

Шаг 2. Вставьте контейнер в статью

Откройте запись в редакторе и добавьте блок "HTML-код" в том месте, где должно быть оглавление. Обычно это начало статьи, сразу после вступления. Внутри блока разместите пустой контейнер:

<div id="toc-ВАШ_ТОКЕН"></div>

Токен сайта указан в панели управления.

Шаг 3. Укажите селектор статьи

По умолчанию заголовки берутся из родителя блока оглавления. В WordPress тема может оборачивать контент в свой контейнер, поэтому надёжнее указать селектор. Часто это .entry-content или .post-content, но зависит от темы. Посмотрите класс контейнера статьи в коде страницы и вставьте его в настройках функции.

Шаг 4. Проверьте результат

Обновите статью и проверьте:

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

Частые ошибки

  • Контейнер не найден. Проверьте, что id совпадает с токеном сайта.
  • В оглавлении лишние заголовки. Укажите селектор статьи.
  • Заголовки не попадают в список. Убедитесь, что это настоящие теги H2-H4, а не текст, оформленный крупным шрифтом.

Итог

Оглавление в WordPress подключается блоком HTML-код и одним скриптом. Оно делает длинные статьи удобнее и повышает дочитывания. Если ещё не подключили скрипт, начните с инструкции "Как подключить скрипт newUX", а общий разбор в статье "Как добавить автоматическое оглавление".

← Все статьи