Автоматическое оглавление (содержание) для статей насайте

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

Решение. Для WordPress есть хорошие плагины для вывода содержания статьи, но они работают с функцией the_content() и выведут только те заголовки, которые попали в неё. Поэтому в данной ситуации лучше будет использовать JavaScript.

Автоматическое создание и вывод содержания статьи с помощью JavaScript и jQuery

See the Pen
Titles of Content Float block Javascript
by qfurs (@qfurs)
on CodePen.

Пример №1: Автоматическое создание блока оглавлений. Прилипающий блок с маркировкой пунктов. CSS, Javascript

Решение 1. Хороший вариант автоматического создания содержания статьи в плавающем блоке на Javascript и CSS bp Примера №1 приведен в Коде №1. Интересной «фишкой» здесь является выделение пункта оглавления в зависимости на каком уровне статьи находится видимый экран.

Код №1: Автоматические заголовки статьи на jQuery, CSS, HTML.
Если будут проблем с «прилипанием» блока, то стоит обратить внимание на работу свойства position: sticky;. Некоторые моменты при оформлении липкого блока можно посмотреть здесь.

Автоматический вывод оглавлений статьи в WordPress

Table of Contents Plus (Michael Tran) — мощный и популярный плагин, который автоматически создает блок содержания в статьях. Имеет различные настройки. Можо выводить во всех постах или использовать шорткод, создавать блок оглавлений при наличии заданного количества заголовков в статье.

Подборка решений оглавлений статей в HTML

Несколько интересных примеров для оформления оглавлений статей для вдохновения или применения.

See the Pen
Progressive TOC
by Mohammad H Alijany (@mh_alijnay)
on CodePen.

Пример №2: Не автоматическое создание блока оглавлений. Плавающий блок, CSS, JavaScript

See the Pen
jQuery TOC Scrollspy
by Jason Davis (@jasondavis)
on CodePen.

Пример №3: Автоматическое создание блока оглавлений. Плавающий блок, CSS, jQuery

See the Pen
jQuery table of contents
by tokumewi (@tokumewi)
on CodePen.

Пример №4: Автоматическое создание блока оглавлений. Плавающий блок с раскрывающимися подпунктами на CSS и jQuery

See the Pen
Table of Contents with progress bar
by Geoffrey Crofte (@GeoffreyCrofte)
on CodePen.

Пример №5: Автоматическое создание блока содержания. Плавающий блок с маркировкой подпунктов которые просматриваются. CSS и jQuery

See the Pen
Titles of Content jQuery
by qfurs (@qfurs)
on CodePen.

Пример №6: Автоматическое создание блока содержания. Плавающий блок с маркировкой подпунктов которые просматриваются. CSS и jQuery
5 1 голос
Рейтинг статьи
Подписаться
Уведомить о
guest

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии