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

oglavlenie wordpress statya cover Без рубрики
Блок Содержание, якоря у H2, Easy TOC 2.0.88 без автовставки, Exclude CSS и чеклист мобильной проверки кликов на опубликованной странице.

Текст на три экрана, а читатель уходит, не дойдя до цены. Страшно ставить плагин: у Марины из салона после установки блок перекрыл на телефоне кнопку «Записаться». Ниже маршрут без лишнего кода: блок «Содержание» в WordPress, при необходимости один лёгкий плагин без автовставки, проверка кликов на смартфоне и отключение CSS плагина, если верстка спорит с темой. Результат на сегодня: сможете добавить кликабельные разделы в начало одной длинной записи и настроить их без поломки колонки на телефоне.

Оглавление в WordPress — это список ссылок на заголовки внутри той же страницы. Якорь — короткий id в коде заголовка; ссылка вида #цена ведёт браузер к нужному H2. Блок Gutenberg «Содержание» сам собирает пункты из заголовков и в официальной справке помечен как динамический: список обновляется при показе страницы, а не «зашивается» навсегда в текст. Если плагин подтянул лишний CSS и верстка поехала, чаще всего помогает отключить стили плагина и убрать автовставку на каждый пост.

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

Оцените, зачем оглавление именно в вашей длинной записи

Светлый стол: зачем оглавление в длинной статье WordPress на сайте услуг

На практике оглавление окупается, когда в публикации больше трёх смысловых блоков: прайс, этапы, кейс. Читатель с телефона редко дочитывает «простыню»; ему нужен переход к «Сколько стоит» или «Как записаться». Типичная ошибка — автосодержание на короткие новости.

Вставляйте TOC в длинные SEO-статьи. Не дублируйте меню сайта. Материалы в разделе статей с оглавлением проще дочитывают до CTA.

Разберитесь с якорями и иерархией H2, пока не трогаете плагины

Блокнот: якорь HTML у заголовка и порядок H2 H3 в WordPress

Якорь — это уникальное имя фрагмента страницы, как номер комнаты в офисе. В блоке «Заголовок» Gutenberg поле «Якорь HTML» лежит в «Расширенные»; ссылка #skolko-stoit прокрутит к этому заголовку. Официальная справка WordPress.com прямо говорит: H1 обычно занят заголовком записи, в содержании логично начинать с H2, затем вложенные H3.

Если раздела нет в списке, проверьте порядок H2-H3 и блоки «Заголовок», не жирный текст. Один «потерянный» H2 — частая причина пустого «Содержания». См. SEO-заголовок записи WordPress.

Для двух-трёх H2 хватит ручного списка со ссылками #якорь. Плагин — когда статей много и заголовки часто меняют.

Вставьте блок «Содержание» в Gutenberg без установки плагина

Экран WordPress: блок Содержание после лида статьи

Честно говоря, многие думают, что оглавление навсегда вшивается в HTML записи, как в Word. У блока core/table-of-contents в документации разработчиков статус experimental: оглавление рендерится на сервере при показе и подтягивает актуальные заголовки. После переименования раздела список в начале страницы обновится без ручного копирования ссылок — это и есть тот сюрприз, ради которого сначала стоит попробовать штатный блок, а не очередной плагин из подборки.

  1. Шаг 1. Откройте длинную запись в редакторе блоков. Убедитесь, что разделы оформлены блоками «Заголовок» уровня H2 и H3.
  2. Шаг 2. Поставьте курсор после вводного абзаца (лида), нажмите «+» и найдите блок «Содержание» (Table of Contents).
  3. Шаг 3. Если блок пустой — добавьте хотя бы один H2 ниже по тексту и обновите превью; без заголовков список не из чего собрать.
  4. Шаг 4. В настройках блока задайте максимальный уровень (часто H2-H3, без мелких H5-H6, чтобы список не раздувался).
  5. Шаг 5. Сохраните черновик, опубликуйте или откройте предпросмотр как гость. Кликните каждый пункт оглавления на десктопе и на телефоне — не в режиме редактирования.

Цепочка: H2 → блок «Содержание» → проверка кликов → плагин только при необходимости. Рядом полезна таблица в Gutenberg для сравнения тарифов.

Подключите один лёгкий плагин, если заголовков много и нужна автогенерация

На wordpress.org у Easy Table of Contents на 2026-10-02: версия 2.0.88, 600 000+ установок, tested up to 7.1.2. У LuckyWP TOC есть предупреждение о давности тестов с новым ядром — выше риск «пропало после обновления».

Не включайте автовставку на все посты: один тестовый материал, шорткод вручную. При дерганой прокрутке в Easy TOC переключите Smooth Scroll JS/CSS. Если пунктов очень много, в настройках ищите лимит заголовков (в 2.0.87 добавили разбиение длинного списка).

*Instagram,Facebook (принадлежит компании Meta, признанной экстремистской и запрещённой на территории РФ)

Проверьте мобильную верстку и отключите CSS плагина при конфликте

История Марины повторяется часто: на десктопе блок красивый, на смартфоне float или sticky тянет оглавление к краю и перекрывает кнопку заявки. Она сняла автовставку, перенесла TOC шорткодом только в длинные статьи и включила «Exclude CSS» — страница снова выглядела как до плагина, а ссылки на H2 остались. Если клик есть, а прокрутка дергается, в Easy TOC переключите Smooth Scroll с JS на CSS или наоборот; в обзорах по настройке это типичный фикс при конфликте с темой.

Симптом на телефоне Что сделать
Оглавление шире колонки текста, появилась горизонтальная прокрутка Отключить CSS плагина, убрать фиксированную ширину в настройках TOC, проверить, нет ли таблицы шире экрана ниже по тексту
Блок наезжает на кнопку CTA Выключить sticky/float у оглавления, перенести TOC ниже лида или выше первого H2, тест на опубликованной странице
Клик по пункту ничего не делает Проверить уникальность id якорей, нет ли двух заголовков с одним «Якорь HTML», открыть страницу не из превью редактора
После обновления WordPress оглавление пропало Обновить плагин до версии с tested up to вашего ядра или вернуться к блоку Gutenberg «Содержание»

Успех по критериям: список разделов в начале; клики ведут к H2; на телефоне нет наезда на CTA; у заголовков уникальные id без дублей. Проверьте на опубликованной странице, не в редакторе: выберите один длинный пост, пройдите каждый пункт оглавления с телефона и зафиксируйте результат в заметке. Например, попросите коллегу повторить тест — так быстрее, чем гадать, виновата тема или плагин. При подозрении на конфликт после обновления ядра на минуту деактивируйте плагин оглавления и сравните мобильный вид.

Свяжите оглавление с SEO и внутренними ссылками без магии

Для SEO оглавление не волшебная кнопка: важнее H2-H3 и полезный текст. Блок помогает людям быстрее найти ответ и дочитать до заявки на услугу. Добавьте перелинковку внутри статьи WordPress на соседние материалы кластера видимости.

Когда некогда тестировать TOC на боевом сайте с десятками лендингов, можно передать настройку через раздел услуг или написать в мессенджер через форму контактов. Короткие ответы по ходу правок — в канале t.me/DikiiTelegram.

Материал проверен: Андрей Дикий (создаёт сайты и продвигает их статьями, SEO/GEO).
На что опирались: wordpress.com (блок Table of Contents, page jumps); developer.wordpress.org (core/table-of-contents, experimental, server-rendered); wordpress.org Easy Table of Contents 2.0.88 и LuckyWP TOC; GitHub ahmedkaludi/easy-table-of-contents issue #952, matthummel-pa/tocflow; ipipe.ru и companylists.ru про Exclude CSS и Smooth Scroll. Частотность запросов: Яндекс Вордстат, прогон 2026-10-02 (MCP недоступен, точные показы не верифицированы).

Частые вопросы

Нужно ли оглавление для SEO в WordPress?

Как отдельный фактор ранжирования оглавление не гарантирует рост позиций. Оно помогает структурировать длинный текст для людей и поддерживает логику H2-H3. Сначала выстройте заголовки и смысл, потом добавьте блок «Содержание» или плагин.

Как добавить якорь к заголовку в Gutenberg?

Выделите блок «Заголовок», откройте панель справа, раздел «Расширенные», поле «Якорь HTML». Задайте короткий латиницей id без пробелов. Ссылка в тексте: #ваш-id. Блок «Содержание» может создать якоря автоматически.

Какой плагин оглавления легче для новичка в 2026?

Начните без плагина — блок «Содержание». Если нужна автогенерация на многих постах, смотрите Easy Table of Contents 2.0.88 с актуальной пометкой tested up to на wordpress.org. Установите без автовставки на все записи, протестируйте одну статью.

Влияет ли оглавление на скорость страницы?

Лёгкий список ссылок почти не нагружает сайт. Тормозят тяжёлые скрипты, лишний CSS и sticky-эффекты. Отключите стили плагина, если тема уже задаёт оформление, и не дублируйте TOC двумя плагинами сразу.

Почему в содержании нет одного из разделов?

Заголовок оформлен не блоком «Заголовок», нарушен порядок уровней (например H4 без H2 выше) или уровень скрыт в настройках блока «Содержание». Исправьте разметку и обновите страницу.

Что делать, если плагин оглавления сломал сайт?

Зайдите в «Плагины», деактивируйте TOC-плагин, проверьте фронт. Если админка недоступна — отключите папку плагина через файловый менеджер хостинга. Затем обновите плагин или вернитесь к блоку Gutenberg.

Можно ли оставить только ручной список ссылок?

Да, для 2-4 разделов: блок «Список» со ссылками #якорь в начале. Автоматика нужна, когда много длинных статей и заголовки часто правят.

*Instagram,Facebook (принадлежит компании Meta, признанной экстремистской и запрещённой на территории РФ)
Новый маркетинг с искусственным интеллектом
Добавить комментарий