Как сделать оглавление на WordPress-сайте

В этой заметке приведу код, который позволит сделать оглавление на WordPress-сайте. Оглавление будет появляться автоматически при добавлении в текст заголовков. Теперь нам не придётся каждый раз писать html-код для оглавления вручную при создании новой записи, имеющей подзаголовки.

В файл function.php для начала необходимо внести следующий PHP-код:

function generate_table_of_contents() {
    global $post;
    $content = get_the_content();
    $document = new DOMDocument();
    @$document->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'));
    $headers = $document->getElementsByTagName('h2');

    if ($headers->length > 0) {
        $toc = '<div class="table-of-contents"><h2>Оглавление</h2><ul>';
        foreach ($headers as $header) {
            $id = sanitize_title($header->textContent);
            $toc .= '<li><a href="#' . $id . '">' . $header->textContent . '</a></li>';
            $content = preg_replace('/<h2(.*?)>(.+?)<\/h2>/', '<h2 id="' . $id . '"$1>$2</h2>', $content, 1);
        }
        $toc .= '</ul></div>';
        $content = $toc . $content;
    }

    return $content;
}

add_filter('the_content', 'generate_table_of_contents');

function generate_table_of_contents() {

global $post;

$content = get_the_content();

$document = new DOMDocument();

@$document->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'));

$headers = $document->getElementsByTagName('h2');

if ($headers->length > 0) {

$toc = '<div class="table-of-contents"><h2>Оглавление</h2><ul>';

foreach ($headers as $header) {

$id = sanitize_title($header->textContent);

$toc .= '<li><a href="#' . $id . '">' . $header->textContent . '</a></li>';

$content = preg_replace('/<h2(.*?)>(.+?)<\/h2>/', '<h2 id="' . $id . '"$1>$2</h2>', $content, 1);

}

$toc .= '</ul></div>';

$content = $toc . $content;

}

return $content;

}

add_filter('the_content', 'generate_table_of_contents');

Этот код использует функцию generate_table_of_contents(), которая:

Получает содержимое текущей записи с помощью get_the_content().
Анализирует содержимое, используя DOMDocument, чтобы найти все теги h2.
Создает оглавление, используя найденные заголовки, и добавляет уникальные идентификаторы id для каждого заголовка.
Заменяет оригинальные теги h2 на теги с добавленными идентификаторами.
Возвращает обновленное содержимое записи с добавленным оглавлением.

Чтобы использовать этот код, вам нужно:

Скопировать код в файл functions.php вашей темы WordPress.
Сохранить изменения и обновить страницу.

Теперь, когда вы добавляете теги h2 в свои записи, оглавление будет автоматически генерироваться и отображаться в начале записи. Однако, этот вариант не слишком интересен. Дело в том, что оглавление будет всегда отображаться в раскрытом виде, и это не всегда удобно.

Вот доработанный код, который включает в себя возможность свернуть/развернуть оглавление, прокрутку страницы до соответствующего тега h2 при клике на пункт оглавления, а также красивый фон оглавления:

function add_toc_script() {
    wp_enqueue_script('toc-script', get_template_directory_uri() . '/js/toc.js', array('jquery'), null, true);
    wp_enqueue_style('toc-style', get_template_directory_uri() . '/css/toc.css');
}
add_action('wp_enqueue_scripts', 'add_toc_script');

function add_toc_markup($content) {
    $pattern = '/<h2[^>]*>(.*?)<\/h2>/';
    preg_match_all($pattern, $content, $matches);

    if (count($matches[0]) > 0) {
        $toc = '<div class="toc-container"><button class="toggle-toc"><h2>Оглавление</h2></button><div class="toc-content">';
        $toc .= '<ul class="toc-list">';

        foreach ($matches[0] as $key => $heading) {
            $anchor = 'toc-' . $key;
            $content = str_replace($heading, '<h2 id="' . $anchor . '">' . $matches[1][$key] . '</h2>', $content);
            $toc .= '<li><a href="#' . $anchor . '" class="toc-link">' . $matches[1][$key] . '</a></li>';
        }

        $toc .= '</ul></div></div>';
        return $toc . $content;
    }
    return $content;
}
add_filter('the_content', 'add_toc_markup');

function add_toc_script() {

wp_enqueue_script('toc-script', get_template_directory_uri() . '/js/toc.js', array('jquery'), null, true);

wp_enqueue_style('toc-style', get_template_directory_uri() . '/css/toc.css');

}

add_action('wp_enqueue_scripts', 'add_toc_script');

function add_toc_markup($content) {

$pattern = '/<h2[^>]*>(.*?)<\/h2>/';

preg_match_all($pattern, $content, $matches);

if (count($matches[0]) > 0) {

$toc = '<div class="toc-container"><button class="toggle-toc"><h2>Оглавление</h2></button><div class="toc-content">';

$toc .= '<ul class="toc-list">';

foreach ($matches[0] as $key => $heading) {

$anchor = 'toc-' . $key;

$content = str_replace($heading, '<h2 id="' . $anchor . '">' . $matches[1][$key] . '</h2>', $content);

$toc .= '<li><a href="#' . $anchor . '" class="toc-link">' . $matches[1][$key] . '</a></li>';

}

$toc .= '</ul></div></div>';

return $toc . $content;

}

return $content;

}

add_filter('the_content', 'add_toc_markup');

Однако, чтобы всё заработало, для этого кода нужно создать два новых файла:

toc.js (в папке js):

document.addEventListener('DOMContentLoaded', function() {
    var tocLinks = document.querySelectorAll('.toc-link');
    var toggleTocButton = document.querySelector('.toggle-toc');
    var tocContent = document.querySelector('.toc-content');

    // Переключение отображения оглавления
    toggleTocButton.addEventListener('click', function() {
        tocContent.classList.toggle('show');
        this.classList.toggle('open');
    });

    // Плавная прокрутка при клике на пункт оглавления
    tocLinks.forEach(function(link) {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            var targetId = this.getAttribute('href');
            var targetElement = document.querySelector(targetId);
            if (targetElement) {
                var targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
                smoothScroll(targetPosition, 800);
            }
        });
    });

    // Функция плавной прокрутки
    function smoothScroll(finalPosition, duration) {
        var startPosition = window.pageYOffset;
        var distance = finalPosition - startPosition;
        var startTime = null;

        function animation(currentTime) {
            if (startTime === null) startTime = currentTime;
            var timeElapsed = currentTime - startTime;
            var run = easeInOutQuad(timeElapsed, startPosition, distance, duration);
            window.scrollTo(0, run);
            if (timeElapsed < duration) {
                requestAnimationFrame(animation);
            } else {
                window.scrollTo(0, finalPosition);
            }
        }

        function easeInOutQuad(t, b, c, d) {
            t /= d / 2;
            if (t < 1) return c / 2 * t * t + b;
            t--;
            return -c / 2 * (t * (t - 2) - 1) + b;
        }

        requestAnimationFrame(animation);
    }
});

document.addEventListener('DOMContentLoaded', function() {

var tocLinks = document.querySelectorAll('.toc-link');

var toggleTocButton = document.querySelector('.toggle-toc');

var tocContent = document.querySelector('.toc-content');

// Переключение отображения оглавления

toggleTocButton.addEventListener('click', function() {

tocContent.classList.toggle('show');

this.classList.toggle('open');

});

// Плавная прокрутка при клике на пункт оглавления

tocLinks.forEach(function(link) {

link.addEventListener('click', function(e) {

e.preventDefault();

var targetId = this.getAttribute('href');

var targetElement = document.querySelector(targetId);

if (targetElement) {

var targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;

smoothScroll(targetPosition, 800);

}

});

// Функция плавной прокрутки

function smoothScroll(finalPosition, duration) {

var startPosition = window.pageYOffset;

var distance = finalPosition - startPosition;

var startTime = null;

function animation(currentTime) {

if (startTime === null) startTime = currentTime;

var timeElapsed = currentTime - startTime;

var run = easeInOutQuad(timeElapsed, startPosition, distance, duration);

window.scrollTo(0, run);

if (timeElapsed < duration) {

requestAnimationFrame(animation);

} else {

window.scrollTo(0, finalPosition);

}

function easeInOutQuad(t, b, c, d) {

t /= d / 2;

if (t < 1) return c / 2 * t * t + b;

t--;

return -c / 2 * (t * (t - 2) - 1) + b;

}

requestAnimationFrame(animation);

}

});

toc.css (в папке css):

.toc-container {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 20px;
}

.toggle-toc {
    /*display: block;*/
    width: 100%;
    text-align: left;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.toggle-toc.open::after {
    content: "▲";
    float: right;
    font-size: 16px;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.toggle-toc:not(.open)::after {
    content: "▼";
    float: right;
    font-size: 16px;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.toc-content {
    display: none;
}

.toc-content.show {
    display: block;
}

.toc-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.toc-link {
    color: #333;
    text-decoration: none;
}

.toc-link:hover {
    color: #000;
}

.toc-container {

background-color: #f5f5f5;

border: 1px solid #ddd;

padding: 20px;

margin-bottom: 20px;

}

.toggle-toc {

/*display: block;*/

width: 100%;

text-align: left;

background-color: transparent;

border: none;

cursor: pointer;

font-size: 16px;

font-weight: bold;

display: flex;

justify-content: space-between;

align-items: center;

cursor: pointer;

}

.toggle-toc.open::after {

content: "▲";

float: right;

font-size: 16px;

font-weight: bold;

transition: transform 0.3s ease;

}

.toggle-toc:not(.open)::after {

content: "▼";

float: right;

font-size: 16px;

font-weight: bold;

transition: transform 0.3s ease;

}

.toc-content {

display: none;

}

.toc-content.show {

display: block;

}

.toc-list {

list-style-type: none;

padding: 0;

margin: 0;

}

.toc-link {

color: #333;

text-decoration: none;

}

.toc-link:hover {

color: #000;

}

Этот код добавляет следующие функциональности:

Оглавление можно свернуть/развернуть, нажав на стрелку в заголовке.
При клике на пункт оглавления, страница прокручивается до соответствующего тега h2.
Оглавление имеет красивый фон, определенный в стилях CSS.

Чтобы использовать этот код, вам нужно:

Скопировать код в файл functions.php вашей темы WordPress.
Создать файлы toc.js и toc.css в соответствующих папках вашей темы.
Сохранить изменения и обновить страницу.

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