Как сделать содержание статьи в wordpress

Добавил пользователь Morpheus
Обновлено: 29.08.2024

Вы когда-нибудь прекращали читать статью из-за того, что она была слишком длинной, вам стало скучно или вы не могли найти раздел, который действительно хотели прочитать? Этого могло бы не произойти, если бы автор добавил оглавление.

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

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

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

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

Повторите эти действия для остальных заголовков на странице (или только для тех, которые вы хотите включить в оглавление).

Затем щелкните блок Custom HTML.

Скопируйте и вставьте в блок следующий HTML-код:

Вот как это оглавление будет выглядеть и работать в интерфейсе моего сайта WordPress:

Как создать оглавление с помощью плагина

Создать оглавление с помощью плагина очень просто. Вы просто устанавливаете плагин ToC и настраиваете его параметры.

Тогда у вас будет несколько вариантов дизайна. Насколько широким должен быть стол? Какой размер шрифта? Это всего лишь несколько параметров, которые, вероятно, будут включены в настройки плагина.

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

Лучшие плагины для содержания WordPress

Ниже представлен ряд бесплатных и премиальных плагинов, которые вы можете использовать для добавления оглавлений на свой сайт WordPress, независимо от вашего бюджета.

1 Исправлено оглавление.

Фиксированное оглавление включает более 50 анимационных эффектов, отличное мета-поле для каждой страницы, различные параметры настройки и многое другое. Помимо совместимости с последними браузерами и версией WordPress, этот плагин также готов к переводу, поэтому вы можете локализовать свое оглавление на любой язык, какой захотите.

2 Героическое содержание

Heroic Table of Contents – это простой способ бесплатно добавить автоматически сгенерированное оглавление на ваш сайт WordPress.

Этот плагин сканирует ваши статьи и создает оглавление, в котором перечислены заголовки ваших статей (h1, h2, h3 и т.д. ). Вы можете легко скрыть классы заголовков, которые вам не нужны. Это означает, что больше не нужно вручную создавать ToC или обновлять его при изменении статьи. Кроме того, поскольку он построен как блок WordPress, легко перетащить Heroic ToC в свой контент.

3 Простое содержание

Easy Table of Contents идеально подходит для начинающих блогеров и владельцев сайтов с ограниченным бюджетом.

4 CM Содержание

CM Table of Contents – еще один бесплатный плагин WordPress, который помогает создавать оглавление на основе тега HTML-элемента, имени класса или идентификатора.

Все, что вам нужно сделать, это заполнить эту информацию на странице настроек плагина. Хотя для этого потребуется назвать или распознать тег HTML-элемента, это позволит вам создать многоуровневую таблицу содержания, состоящую не только из заголовков, но и из любого элемента, который вы хотите. Хотите включить изображение в свой ToC? Нет проблем! Просто добавьте его тег, имя класса или идентификатор в настройки, и все готово.

5 Окончательные блоки

Ultimate Blocks – это мощный плагин Gutenberg, который имеет более 15 блоков. Один из них позволяет мгновенно добавлять оглавление к вашим записям или страницам WordPress.

6 Архитектор процветания

Thrive Architect – это многофункциональный инструмент, такой как Ultimate Blocks. Он предлагает множество функций для расширения вашего сайта WordPress, включая возможность автоматического создания оглавления.

С помощью элемента Thrive Table of Content вы можете выбрать, какие заголовки вы хотите сгенерировать в оглавлении, чтобы каждый раз, когда появляется конкретный заголовок, оглавление генерируется автоматически. Вы также можете выбрать шаблон для своего ToC и настроить его, выбрав его макет, цвет, типографику, границу, тень и многое другое.

Улучшение читательского опыта

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

Оглавление статьи в ВордПресс без плагина — как сделать содержание на странице вручную

Добавляем перед каждым подзаголовком строчку кода: . Этим тегом отмечаем точку, на которую попадет читатель, когда кликнет по ссылке в содержании. Имена якорей должны отличатся друг от друга. Чтобы не перепутать места, используем цифры.

После этого, поднимаемся в начало текста и создаем ссылки тегом: Пункт содержания . Шарп, или знак решетки по-простому, говорит о том, что пользователя отправляют на определенное место этого документа, а не на другую страницу. Между открывающим и закрывающим тегом вписываем подзаголовок, к которому ведет ссылка. Сохраняем документ и проверяем, все ли корректно отображается.

Но для оформления по вкусу придется писать дополнительный стиль css, потому что без него содержание отображается в стандартном для сайта виде. А если публикаций очень много, то ручная простановка тегов превращается в рутину. Чтобы сэкономить время и нервы, оглавление можно добавить с помощью плагина.

Table of Contents Plus — содержание материала по тегам заголовков статьи

Плагин TOC+ автоматически собирает заголовки и генерирует содержание к тексту. Дизайн похож на оглавление в статьях википедии, можно выбрать из нескольких цветовых тем или сделать свою. Удобный инструмент с гибкими настройками.

Блок основных настроек плагина.

Width — задаем ширину блока.
Wrapping — выбираем с какой стороны будет отображаться содержание: по умолчанию, слева или справа.
Font size — задаем размер шрифта.
Presentation — выбираем дизайн оглавления из доступных или делаем свой.

Advanced — блок настроек для опытных пользователей.

Lowercase — опция ограничивает название анкоров нижним регистром.
Hyphenate — заменяет знак подчеркивания на дефис в именах якорей.
Include homepage — добавляет содержание на главную страницу.
Exclude CSS file — отключает css плагина, что позволяет использовать свой стиль.
Preserve theme bullets — позволяет применить собственный стиль отображения маркеров для неупорядоченного списка.
Heading levels — опция позволяет выбирать заголовки, которые попадут в содержание.
Exclude headings — позволяет игнорировать заголовки с определенным словом или словосочетанием.
Restrict path — дает возможность не выводить оглавление на определенной странице. Для этого в строку вводим ее адрес.
Default anchor prefix — префикс якоря по умолчанию.

TOC Плагин Easy Table of Contents для WordPress сайта

Easy ToC не уступает предыдущему плагину: автоматически генерирует блок навигации в статьях, позволяет настроить внешний вид и др. Находим модуль в поиске через админку WordPress, устанавливаем, активируем и переходим к настройкам.

Auto Insert — включаем автоматический вывод блока навигации в статью для определенных разделов сайта. Если убрать галочки, содержание отобразится в меню сбоку.
Position — определяем положение блока на странице.
Show when — задаем минимальное количество подзаголовков, при которых плагин генерирует содержание.
С помощью Опций Display Header Label и Header Label — включаем отображение заглавия.
Toggle View — позволяем читателю прятать содержание.
Initial View — прячем оглавление под спойлер.
Show as Hierarchy — включаем древовидную структуру подзаголовков.
Counter — выбираем вариант нумерации между десятичными, обычными и римскими цифрами. Или убираем числа вообще.
Smooth Scroll — включаем плавную прокрутку.

Width и Custom Width — задаем ширину блока.
Float — включаем обтекание текстом.
Font Size — выбираем размер шрифта.
Theme — выбираем тему отображения навигации.
Custom Theme — настраиваем цветовую схему под себя, по порядку: цвет фона, обводки и заглавия. А также: цвет ссылок в обычном состоянии, при наведении курсора мыши и уже посещенных.

Продвинутые настройки плагина идентичны ToC+. Позволяют настроить анкоры, отключить css, исключить заголовки из навигации и пр. Сохраняем изменения и смотрим результат. Как выглядит содержание, созданное плагином, видно на скриншоте ниже.

Пример статьи с оглавлением.

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

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

Шаг первый. Выбираем пункты для оглавления

Нам нужно определиться, из чего будет состоять содержание нашей статьи. Обычно это довольно просто – мы берём подзаголовки, идущие по тексту статьи и составляем из них план.

Эти заголовки и подзаголовки копируйте и вставляйте в самый верх статьи, с помощью инструмента увеличения отступа сформируйте иерархию оглавления:

Шаг второй. Вставка якорей

Якорь – это то место, на которую будет указывать ссылка внутри этой же статьи.

Чтобы вставить якорь, кликните на любое место в документе – обычно перед заголовком, куда хотите вставить якорь, нажмите кнопку Вставить / редактировать якорь. Введите имя якоря – выберите любое, но пишите его латинскими буквами и (или) цифрами. Когда всё готово, нажмите ОК.

Повторите вставку якорей для всех мест, куда будут указывать ссылки из оглавления статьи.

Там, куда вставлены якоря, появляются красные флажки:

Шаг третий. Создание ссылок на якоря

Теперь вернитесь к оглавлению вашей статьи, выделите пункт, для которого хотите создать ссылку, нажмите кнопку Вставить / Редактировать ссылку. Откроется новое окно:

Повторите это для каждого пункта меню.

Вот и всё! Вот так очень просто и быстро можно создать меню любой сложности и любой вложенности, с любым количеством подпунктов.

Содержание (оглавление), добавленное в записи и на страницы WordPress-сайта, упрощает поиск нужного фрагмента в тексте. Особенно, если это объемные статьи, вроде тех, которые я пишу для блога koz.one.

Далее вы узнаете о том, как сделать содержание, которое будет автоматически добавляться в записи и/или на страницы сайта на WordPress.

Как установить плагин для добавления содержания статьи в WordPress Easy Table of Contents

Easy Table of Contents — удобный для пользования и элементарный для понимания плагин, который позволяет добавлять оглавление в записи, на страницы и в пользовательские типы записей на WordPress-сайте.

Особенности Easy Table of Contents:

автоматически генерирует содержание на основе заголовков;
поддерживает тег ;
поддерживает Rank Math — лучший SEO-плагин в мире;
умеет работать с классическим и блочным (Gutenberg) редактором, а также с конструкторами страниц Divi, Elementor, WPBakery Page Builder и Visual Composer;
есть возможность выбрать, где будет отображаться оглавление: в записях, на страницах или и там, и там;
много тонких настроек для создания идеального содержания статья и в плане юзабилити, и в плане дизайна;
несколько типов маркеров для обозначения пунктов оглавления на выбор;
возможность включить иерархическое отображение содержания, которое базируется на приоритете заголовков — заголовки H2 будут вложены в заголовки H1, H3 — в H2 и т. д.;
посетитель может скрыть содержание одним кликом;
поддержка плавной прокрутки;
возможность добавить оглавление не в начало записи или страницы, а как виджет на боковую панель.

Easy Table of Contents — мой любимый WordPress-плагин, который с удовольствием использую в этом блоге, а также на сайте probootblack.info, который администрировал на момент написания этой статьи.

Установка дополнения Easy Table of Contents ничем не отличается от установки других плагинов WordPress:

Easy Table of Contents: настройка плагина для добавления содержания статьи в WordPress

Сразу после установки дополнения Easy Table of Contents рекомендую выполнить его тонкую настройку. Для этого перейдите в Настройки > Содержание в админке WordPress.

После настройки плагина Easy Table of Contents содержание будет автоматически добавлено в указанные типы контента и отображаться так, как вы указали в этих самых настройках.

Привет. Где-то пару недель назад я активно начал к объемным статьям составлять содержания (оглавления). После этого в мой адрес посыпалось куча вопросов в стиле: “Как это сделать?”. Решил ответить постом. Вот как выглядит содержание статьи:

Данное оглавление имеет массу плюсов:

Посетитель сразу видит всю структуру статьи. Не устану повторять: главное в продвижении сайтов – это структура. Структура сайта, статьи и всего остального.
Размещены ссылки. То есть можно кликнуть по интересующему пункту и осуществится автоматическое пролистывание вниз до выбранного пункта.
Все это создается автоматически, за 2 секунды. Не нужно тратить время. Интересно? Еще бы. Читаем далее.

Необходимый код для составления содержания

Вручную создавать подобное содержание очень долгое занятие, ведь нужно:

Понаставить “якори”.
Вручную задать название каждому пункту.
Подбирать правильные ссылки с якорями.

Из-за сложностей и неудобств, я не использовал данный метод. Только в исключительных случаях. Для реализации автоматического оглавления, мне помог код, который я взял на одном классном блоге WP-Kama (скорей всего вы слышали о нем). Вот и сама статья – “Содержание больших постов“.

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

Сначала скопируйте этот код:

Откройте файл function.php, который располагается в папке вашего шаблона и вставьте этот код в конец файла:

Стили оглавления

Дальше скопируйте этот код:

Откройте файл style.css Вашей темы и вставьте в его в конец файла:

Как использовать

Теперь просто в нужных местах во время написания статей используете заголовок 2 (h2) и заголовок 3 (h3) при необходимости:

Напомню, очень важно правильно использовать заголовки h1, h2, h3 в SEO. В итоге, прописанные заголовки h2 и h3 будут теми самими пунктами оглавления. Надеюсь, хоть это содержание заставит многих использовать заголовки в своих статьях, а то многие вообще игнорируют все это.

Уже потом выводим в нужном месте само меню. Как? Просто вставляем вот шорткод contents в редакторе статьи туда, где нужно вывести содержание.

Выглядит будет примерно так:

В результате получим то необходимое меню, в которым основные пункты – это использованные заголовки h2, а подпункты – заголовки h3:

Вывод

Вот так просто все это внедрить себе на блог. Спасибо Тимуру Камаеву за такой классный код. Если вы вдруг захотите добавить какие-то дополнительные “плюшки”, перейдите по ссылке, там есть интересные дополнения, которые могут кому-то пригодятся.

Я же очень хочу, чтобы вы использовали данный код хотя бы для того, чтобы Ваши статьи получались более структурированными и Вы “рвали” ТОП со своими классными статьями. Всего вам хорошего!

Читайте также: