Как сделать закрепленное оглавление в сайдбаре записи WordPress

Оглавление удобно размещать не только внутри статьи, но и справа в сайдбаре. Так читатель всегда видит структуру материала и может быстро перейти к нужному разделу.

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

Что получится

В сайдбаре записи будет блок оглавления.

При прокрутке статьи активный раздел будет выделяться:

• цветом;
• жирным начертанием.

Например, если читатель сейчас находится в разделе “Куда вставлять код”, соответствующий пункт в оглавлении станет цветным и жирным.

Шаг 1. Добавляем оглавление в сайдбар

Сначала нужно вывести само оглавление в правой колонке записи.

Если вы используете Kadence Blocks, можно добавить блок:

Table of Contents

в область виджетов сайдбара:

Внешний вид → Виджеты → Sidebar

или через кастомайзер:

Внешний вид → Настроить → Виджеты → Sidebar

Добавьте блок оглавления в сайдбар одиночной записи.

Важно: оглавление должно ссылаться на заголовки внутри статьи. Обычно блок оглавления сам создает ссылки вида:

<a href="#section-title">Название раздела</a>

А у заголовков статьи должны быть такие же id:

<h2 id="section-title">Название раздела</h2>

Шаг 2. Добавляем JavaScript для отслеживания текущего раздела

Теперь нужно сделать так, чтобы при прокрутке страницы скрипт понимал, какой заголовок сейчас находится выше текущей точки просмотра, и подсвечивал соответствующий пункт оглавления.

Добавьте этот код через WPCode или Code Snippets как JavaScript Snippet:

document.addEventListener('DOMContentLoaded', function() {
    const headings = document.querySelectorAll('.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4');
    const tocLinks = document.querySelectorAll('#secondary .widget a');

    if (!headings.length || !tocLinks.length) return;

    window.addEventListener('scroll', function() {
        let current = '';

        headings.forEach(function(heading) {
            const headingTop = heading.getBoundingClientRect().top;
            if (headingTop <= 150) {
                current = heading.getAttribute('id');
            }
        });

        tocLinks.forEach(function(link) {
            link.classList.remove('active-toc-item');
            if (link.getAttribute('href') === '#' + current) {
                link.classList.add('active-toc-item');
            }
        });
    });
});

Настройки сниппета:

Code Type: JavaScript Snippet
Location: Frontend
Auto Insert: Run Everywhere

Если в WPCode нет отдельного JavaScript-сниппета, можно добавить код через PHP-сниппет внутри <script>, но удобнее использовать именно JavaScript Snippet.

Что делает JavaScript

Эта строка находит заголовки внутри текста записи:

const headings = document.querySelectorAll('.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4');

То есть скрипт отслеживает заголовки:

H1, H2, H3, H4

Эта строка находит ссылки в виджете сайдбара:

const tocLinks = document.querySelectorAll('#secondary .widget a');

#secondary — это область сайдбара. .widget a — ссылки внутри виджетов.

Проверка:

if (!headings.length || !tocLinks.length) return;

нужна, чтобы скрипт не выполнялся зря, если на странице нет заголовков или нет оглавления.

При прокрутке страницы срабатывает:

window.addEventListener('scroll', function() {

Дальше скрипт смотрит положение каждого заголовка относительно окна браузера:

const headingTop = heading.getBoundingClientRect().top;

Если заголовок находится выше точки 150px от верхнего края окна, он считается текущим:

if (headingTop <= 150) {
    current = heading.getAttribute('id');
}

После этого скрипт убирает активный класс у всех ссылок:

link.classList.remove('active-toc-item');

И добавляет класс той ссылке, которая ведет к текущему заголовку:

if (link.getAttribute('href') === '#' + current) {
    link.classList.add('active-toc-item');
}

Шаг 3. Добавляем CSS для активного пункта

Теперь нужно оформить активную ссылку оглавления.

Добавьте CSS в:

Внешний вид → Настроить → Дополнительные стили

#secondary .widget a.active-toc-item {
    color: var(--global-palette1);
    font-weight: 700;
}

Что делает CSS

Класс:

.active-toc-item

добавляется JavaScript-кодом к текущему пункту оглавления.

Правило:

color: var(--global-palette1);

окрашивает активный пункт в основной цвет темы Kadence.

А строка:

font-weight: 700;

делает пункт жирным.

Если хотите использовать свой цвет, можно заменить переменную Kadence на обычный HEX-код:

#secondary .widget a.active-toc-item {
    color: #2563eb;
    font-weight: 700;
}

Шаг 4. Закрепляем сайдбар при прокрутке

Чтобы оглавление оставалось на экране при прокрутке записи, сайдбар можно сделать “липким”.

Добавьте CSS:

.sidebar-inner-wrap {
    position: sticky;
    top: 20px;
}

position: sticky закрепляет блок, когда он доходит до верхней части экрана.

top: 20px задает отступ сверху.

Важное примечание

Этот третий код опциональный.

Если в вашей теме уже есть настройка закрепления сайдбара или виджета, этот CSS добавлять не нужно.

Например, в Kadence можно закрепить виджет или сайдбар через настройки темы. Если вы уже включили закрепление там, код:

.sidebar-inner-wrap {
    position: sticky;
    top: 20px;
}

использовать не обязательно.

Возможные проблемы

Если активный пункт не подсвечивается, проверьте две вещи.

Первая: у заголовков должны быть id.

Например:

<h2 id="kuda-vstavlyat-kod">Куда вставлять код</h2>

Вторая: ссылки оглавления должны вести к этим же id:

<a href="#kuda-vstavlyat-kod">Куда вставлять код</a>

Если id у заголовка и href у ссылки не совпадают, подсветка не сработает.

Если оглавление находится не в #secondary

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

const tocLinks = document.querySelectorAll('#secondary .widget a');

Если у вас другой контейнер, селектор нужно заменить.

Например, для конкретного блока оглавления Kadence можно использовать более точный селектор:

const tocLinks = document.querySelectorAll('.kb-table-of-content-nav a');

И тогда CSS тоже можно сделать точнее:

.kb-table-of-content-nav a.active-toc-item {
    color: var(--global-palette1);
    font-weight: 700;
}

Итог

Чтобы сделать оглавление справа в сайдбаре записи, нужно:

1. Добавить блок оглавления в сайдбар.
2. Добавить JavaScript, который отслеживает текущий заголовок.
3. Добавить CSS для активного пункта.
4. При необходимости закрепить сайдбар через position: sticky.

Такое оглавление помогает читателю ориентироваться в длинной статье и делает навигацию по записи заметно удобнее.