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

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

    Задача. Необходимо сделать вывод оглавлений (содержания) статей в постах автоматически. Сложность заключается в том что на странице часть контента выводится не через функцию 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 комментариев
    Межтекстовые Отзывы
    Посмотреть все комментарии