В редакторе Gutenberg для WordPress часто возникает потребность создавать оглавления (table of contents, TOC) для длинных статей и страниц. Это помогает пользователям быстро ориентироваться в содержимом и улучшает SEO. В этой статье разберём, как добавить автоматические оглавления в блоках Gutenberg, используя как готовые плагины, так и собственные решения с примером кода.
Почему важно использовать автоматические оглавления в Gutenberg
Длинные тексты без оглавления неудобны для восприятия. Внедрение TOC помогает:
- Улучшить юзабилити сайта — пользователи сразу видят структуру и могут перейти к нужному разделу.
- Повысить SEO — поисковые системы учитывают структуру контента.
- Снизить показатель отказов за счёт удобства навигации.
Ранее большинство решений требовали установки сторонних плагинов или ручного создания оглавления. Gutenberg с его блоками даёт возможность сделать это более аккуратно и гибко.
Использование плагинов для автоматического оглавления в Gutenberg
Самый простой способ — использовать специализированные плагины. Рассмотрим три популярных варианта.
1. LuckyWP Table of Contents
Плагин позволяет автоматически добавлять оглавление на страницах и в постах, поддерживает Gutenberg, можно вставлять блок оглавления прямо в редактор.
- Автоматическое создание оглавления из заголовков h2–h4.
- Настройка внешнего вида и поведения.
- Поддержка якорных ссылок для плавной прокрутки.
Для установки используйте админку WordPress или скачайте с официального репозитория.
2. Table of Contents Plus
Классический плагин, который работает и с Gutenberg. Он автоматически генерирует оглавление, настраивается через админку.
- Можно вставлять оглавление с помощью шорткода или PHP-функции.
- Гибкие настройки отображения.
- Поддержка кастомных типов записей.
Скачать можно с репозитория WordPress.
3. WPGPT Table of Contents (для пользователей WPShop)
Если вы используете продукты WPShop, обратите внимание на плагин WPGPT, который в числе функций поддерживает динамическое создание оглавлений с высокой кастомизацией, интеграцию с Gutenberg и AI-поддержку для улучшения структуры контента.
Создание собственного блока оглавления для Gutenberg с автоматическим заполнением
Если вы хотите более тонко контролировать процесс или не хотите зависеть от сторонних плагинов, можно создать собственный блок оглавления. Рассмотрим пример реализации.
Регистрация блока и получение заголовков
Для начала нужно зарегистрировать блок с помощью JavaScript (React) и PHP. Главная задача — получить все заголовки из текущего поста и отобразить их в виде списка с якорными ссылками.
import { registerBlockType } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
registerBlockType('wpcontent/toc-block', {
title: 'Автоматическое оглавление',
icon: 'list-view',
category: 'widgets',
edit() {
const headings = useSelect((select) => {
const blocks = select('core/block-editor').getBlocks();
let result = [];
blocks.forEach(block => {
if(block.name === 'core/heading') {
const level = block.attributes.level;
const content = block.attributes.content;
const text = content.replace(/<[^>]+>/g, '');
const anchor = text.toLowerCase().replace(/[^a-z0-9]+/g, '-');
result.push({ level, text, anchor });
}
});
return result;
}, []);
return (
<nav className="toc-block">
<h2>Оглавление</h2>
<ul>
{headings.map((heading, index) => (
<li key={index} style={{ marginLeft: (heading.level - 2) * 20 + 'px' }}>
<a href={`#${heading.anchor}`}>{heading.text}</a>
</li>
))}
</ul>
</nav>
);
},
save() {
// Рендеринг на фронтенде сделаем через PHP
return null;
},
});Этот код регистрирует блок, который на этапе редактирования собирает все блоки заголовков core/heading, извлекает их текст, уровень и генерирует якорь. В редакторе выводится список с отступами по уровню заголовка.
Добавление якорей к заголовкам при сохранении
Чтобы ссылки работали, нужно в PHP добавить фильтр, который будет автоматически добавлять якоря к заголовкам при выводе контента.
function wpcontent_add_anchors_to_headings( $content ) {
$pattern = '/<h([2-4])(.*?)>(.*?)<\/h\1>/i';
$content = preg_replace_callback($pattern, function($matches) {
$level = $matches[1];
$attrs = $matches[2];
$text = strip_tags($matches[3]);
$anchor = sanitize_title($text);
// Добавляем id для якоря
if (strpos($attrs, 'id=') === false) {
$attrs .= ' id="' . $anchor . '"';
}
return "<h{$level}{$attrs}>{$matches[3]}</h{$level}>";
}, $content);
return $content;
}
add_filter('the_content', 'wpcontent_add_anchors_to_headings');Этот фильтр ищет заголовки h2–h4 и добавляет к ним id с безопасным якорем, что обеспечивает работу ссылок из оглавления.
Настройка стилей и UX для блока оглавления
После создания функционала важно оформить оглавление так, чтобы оно выглядело аккуратно и было удобным. Обычно стоит:
- Добавить стили для выделения текущего раздела при прокрутке.
- Сделать оглавление фиксированным или плавающим на экране.
- Скрывать или сворачивать оглавление на мобильных устройствах для экономии места.
Пример простого CSS для блока:
.toc-block {
background: #f9f9f9;
border: 1px solid #ddd;
padding: 15px;
max-width: 300px;
font-size: 14px;
}
.toc-block ul {
list-style: none;
padding-left: 0;
}
.toc-block li {
margin-bottom: 5px;
}
.toc-block a {
text-decoration: none;
color: #0073aa;
}
.toc-block a:hover {
text-decoration: underline;
}Для более продвинутого UX можно добавить скрипты, отслеживающие позицию прокрутки и подсвечивающие активный пункт оглавления.
Итоги и рекомендации по выбору подхода
Автоматические оглавления в Gutenberg значительно улучшают структуру и восприятие контента. Для большинства сайтов достаточно использовать готовые плагины, особенно WPGPT с поддержкой современных функций.
Если нужны кастомные решения, создание собственного блока оглавления — отличный вариант, который можно адаптировать под любые задачи и дизайн.
Обязательно тестируйте работу оглавления на разных устройствах и уделяйте внимание доступности (ARIA-атрибуты, удобство навигации для клавиатуры).