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

вики

Оглавление статьи в ВордПресс без плагина - как сделать содержание на странице вручную

Используем для этого html-тег: <a>, который нужен, чтобы поставить ссылку или якорь в документе. Чтобы сделать навигацию, переходим в редактор кода страницы, вставляем текст и разбиваем его подзаголовками.

в коде

Добавляем перед каждым подзаголовком строчку кода: <a name=”имя_якоря”></a>. Этим тегом отмечаем точку, на которую попадет читатель, когда кликнет по ссылке в содержании. Имена якорей должны отличатся друг от друга. Чтобы не перепутать места, используем цифры.

После этого, поднимаемся в начало текста и создаем ссылки тегом: <a href=”#Имя_Якоря”>Пункт содержания</a>. Шарп, или знак решетки по-простому, говорит о том, что пользователя отправляют на определенное место этого документа, а не на другую страницу. Между открывающим и закрывающим тегом вписываем подзаголовок, к которому ведет ссылка. Сохраняем документ и проверяем, все ли корректно отображается.

на странице

При желании используем теги <ul> или <ol> чтобы отобразить содержание маркированным или нумерованным списком, как на скриншоте. По сравнению с плагином, такая навигация удобна тем, что экономит ресурсы сервера и не тормозит загрузку страницы.

Но для оформления по вкусу придется писать дополнительный стиль css, потому что без него содержание отображается в стандартном для сайта виде. А если публикаций очень много, то ручная простановка тегов превращается в рутину. Чтобы сэкономить время и нервы, оглавление можно добавить с помощью плагина.

Table of Contents Plus - содержание материала по тегам заголовков статьи

Плагин TOC+ автоматически собирает заголовки и генерирует содержание к тексту. Дизайн похож на оглавление в статьях википедии, можно выбрать из нескольких цветовых тем или сделать свою. Удобный инструмент с гибкими настройками.

Переходим в раздел «Плагины — Добавить новый», в строку поиска вводим название и кликаем установить. Активируем модуль и переходим к настройке TOC.

toc

Блок основных настроек плагина.

  • Position — выбираем где разместить блок с оглавлением. На выбор 4 позиции: перед или после заголовка, вверху или внизу страницы.
  • Show when — выставляем минимальное количество подзаголовков, при которых плагин генерирует содержание.
  • Auto insert … types — выбираем в каких разделах генерировать оглавление: в записях, на страницах и т.д.
  • Heading text — вводим заглавие для блока навигации, например: «Содержание». Если убрать галку с «Show title … contents», то оглавление будет генерироваться без названия. Следующий пункт позволяет читателю прятать содержание под спойлер. В поля пишем подсказку, которую увидит пользователь при наведении на кнопки «спрятать/показать».
  • Show hierarchy — включаем древовидную структуру оглавления, когда в тексте используются несколько типов подзаголовков: <h2>, <h3> и т.д.
  • Number list items — отключаем нумерацию содержания.
  • Enable smooth scroll effect — включаем плавную прокрутку.

toc2

С помощью блока настроек «Appearance» настраиваем отображение.

  • Width — задаем ширину блока.
  • Wrapping — выбираем с какой стороны будет отображаться содержание: по умолчанию, слева или справа.
  • Font size — задаем размер шрифта.
  • Presentation — выбираем дизайн оглавления из доступных или делаем свой.

toc2

Advanced — блок настроек для опытных пользователей.

  • Lowercase — опция ограничивает название анкоров нижним регистром.
  • Hyphenate — заменяет знак подчеркивания на дефис в именах якорей.
  • Include homepage — добавляет содержание на главную страницу.
  • Exclude CSS file — отключает css плагина, что позволяет использовать свой стиль.
  • Preserve theme bullets — позволяет применить собственный стиль отображения маркеров для неупорядоченного списка.
  • Heading levels — опция позволяет выбирать заголовки, которые попадут в содержание.
  • Exclude headings — позволяет игнорировать заголовки с определенным словом или словосочетанием.
  • Restrict path — дает возможность не выводить оглавление на определенной странице. Для этого в строку вводим ее адрес.
  • Default anchor prefix — префикс якоря по умолчанию.

Чтобы сохранить изменения, кликаем на «Update option».

TOC Плагин Easy Table of Contents для WordPress сайта

Easy ToC не уступает предыдущему плагину: автоматически генерирует блок навигации в статьях, позволяет настроить внешний вид и др. Находим модуль в поиске через админку WordPress, устанавливаем, активируем и переходим к настройкам.

easy

  • Auto Insert — включаем автоматический вывод блока навигации в статью для определенных разделов сайта. Если убрать галочки, содержание отобразится в меню сбоку.
  • Position — определяем положение блока на странице.
  • Show when — задаем минимальное количество подзаголовков, при которых плагин генерирует содержание.
  • С помощью Опций Display Header Label и Header Label — включаем отображение заглавия.
  • Toggle View — позволяем читателю прятать содержание.
  • Initial View — прячем оглавление под спойлер.
  • Show as Hierarchy — включаем древовидную структуру подзаголовков.
  • Counter — выбираем вариант нумерации между десятичными, обычными и римскими цифрами. Или убираем числа вообще.
  • Smooth Scroll — включаем плавную прокрутку.

easy 2

  • Width и Custom Width — задаем ширину блока.
  • Float — включаем обтекание текстом.
  • Font Size — выбираем размер шрифта.
  • Theme — выбираем тему отображения навигации.
  • Custom Theme — настраиваем цветовую схему под себя, по порядку: цвет фона, обводки и заглавия. А также: цвет ссылок в обычном состоянии, при наведении курсора мыши и уже посещенных.

easy 2

Продвинутые настройки плагина идентичны ToC+. Позволяют настроить анкоры, отключить css, исключить заголовки из навигации и пр. Сохраняем изменения и смотрим результат. Как выглядит содержание, созданное плагином, видно на скриншоте ниже.

пример

Мы предлагаем: