5 Плагинов для создания оглавления статей, страниц WordPress

От автора

В этой статье я собрал 5 плагинов для создания оглавления статей. В среде WordPress плагины данного типа чаще называют TOC плагины, что означает плагины table of contents. Они достаточно удобны, особенно для длинных статей и страниц.

5 плагинов для создания оглавления статей (TOC)

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

Easy table of contents

https://wordpress.org/plugins/easy-table-of-contents/

Последнее авторское тестирование на версии: 4.9.7.

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

Возможности

После установки плагина он доступен для настройки. В настройках вы можете:

• Автоматическое создание оглавления для ваших сообщений, страниц и пользовательских типов сообщений путем анализа его содержимого для заголовков.
• Возможно включение страниц и/или сообщений. Пользовательские типы сообщений поддерживаются, пока их содержимое выводится с тегом шаблона the_content().
• При соответствующей настройке можно автоматически добавить оглавление на страницы сайта.
• Предоставляет множество удобных и понятных параметров настройки того, когда и где нужно вставлять оглавление.
• Существует множество опций для настройки отображения вставленной оглавления: разные темы оглавления, меняющиеся размеры шрифтов, расположение формы оглавления. Есть возможность создать свои собственные темы, выбирая собственные цвета для границы, фона и ссылки.
• Множественные форматы маркеров списка: без маркеров, десятичные, римские и другие.
• В настройках можно выбрать, отображение оглавления в древовидной иерархической структуре или без неё.
• Вы можете, отключить оглавление на выбранных рубриках.
• Плагин поддерживает плавную прокрутку, есть чек настроек.
• Выборочно включать или отключать оглавление в сообщении по почте.
• Можно отфильтровать типы заголовков (h2-h6) которые будут показаны в оглавлении.

Вывод: Плагин по настройкам очень похож, на заброшенный плагин «Table of contents plus», о котором ниже. Только настроек несколько больше и внешний вид самого оглавления более современен.

Cm table of content

https://wordpress.org/plugins/cm-table-of-content/

Русского языка нет. Последнее  авторское тестирование на версии 4.9.8

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

В бесплатной версии настройки крайне ограничены и упрощены до минимума. В настройках вы можете:

• Включить показ оглавления только в статьях и страницах, исключив архивов и главную страницу сайта;
• Изменить заголовок модуля содержания;
• Задать теги, которые будут показаны в оглавлении: h2-h Задать их классы CSSи уникальные ID.
• Указать размеры заголовков в оглавлении.

Вывод: Мне не удалось запустить бесплатную версию этого плагина. Такое ощущение, что бесплатная версия создана не для ознакомления, а для обязательного обновления до платной версии. Плагин настойчиво собирает подписчиков и требует подписки.

Extended table of contents with nextpage support

https://wordpress.org/plugins/extended-table-of-contents-with-nextpage-support/

После установки и активации этот плагин появляется отдельным пунктом в меню «Плагины».

Данный плагин автоматически создает и вставляет оглавление (table of contents — TOC) на ваши страницы и сообщения (можно выбрать)  на основе тегов h2-h6 (можно выбрать).

Всякий раз, когда плагин обнаруживает более определенного количества заголовков (по умолчанию: 3), он вставляет TOC в верхнюю часть страницы. Плагин также может обрабатывать сообщения, разделенные на страницы  тегом nextpage-wordpress.

Вывод: Очень простой, но от этого не плохой плагин для вставки TOC в статьи и посты сайта. Нет специальных настроек внешнего вида, тонкой фильтрации заголовков, фильтров по рубрикам. Но плагин работает, результат выглядит так (заголовок можно поменять).

Shortcode Table of Contents

https://wordpress.org/plugins/shortcode-toc/

Протестировано до: 4.9.7

Просто используйте

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

Просто используйте toc content=".your-container" короткий код для автоматического создания оглавления для любого контейнера HTML.

Значения your-container вы найдете в описании плагина. Например, чтобы сделать заголовок статьи с тегами h2-h6, вам нужен такой шорт код.

toc content=".entry-content"

Чтобы ограничить вывод тегов, тегами h2-h3 нужно этому коду добавить свойства:

toc content=".entry-content" headers="h3,h4"

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

Table of contents plus

https://wordpress.org/plugins/table-of-contents-plus/

Этот плагин очень давно не тестировался автором. Однако работает на нескольких моих сайтах, обновлённых до последней версии.  Последнее авторское тестирование на версии: 4.4.16.

Это на самом деле мощный и очень удобный плагин, который автоматически создает контекстный индекс или оглавление (TOC) для страниц и постов.

После установки и активации плагина, в консоли, появится отдельный пункт в меню «Настройки». Настроек очень много, но они просты и почти понятны. Обращу ваше внимание на несколько нюансов:

1. Во-первых, список настроек раскрывается кнопкой «Расширенные — показать»;
2. В пункте настроек под названием «Исключить заголовки» вы можете, исключит заголовки не только по тегам h2-h6но по фразам и отдельным словам. Например, я, таким образом, убираю заголовки похожие статьи, еще статьи, подписка  и т.п.
3. В оформлении 6 тем, есть смена размера шрифта, установка обтекания (слева, справа, нет), ширина блока оглавления (в %).

Вывод: Я бы, безусловно, рекомендовал этот плагин, если бы он обновлялся автором.

Общий вывод

Я показал 5 Плагинов для создания оглавления статей, страниц WordPress. Из всех плагинов данного обзора могу порекомендовать только «Easy table of contents», хотя на большинстве своих сайтов работаю с плагином «Table of contents plus». Для простых решений подойдет плагин «Extended table of contents (with nextpage support)».

©www.wordpress-abc.ru

Еще плагины

Похожие посты:

www.wordpress-abc.ru

Навигация в статье с плагином и без

Привет, дамы и господа! Как сделать удобную навигацию по статье? Блок — Содержание. Навигация в статье подойдёт для тех, у кого большие, длинные сообщения и они разбиты на разделы, то есть, на подзаголовки h3 — h6. Если вы не поняли о чём идет речь, посмотрите например: в  википедия, да и не только на ней, у многих блогеров присутствует блок содержание статьи с заголовками.

Содержание блок для WordPress

Если вам всю статью читать ни к чему, вас интересует только определённый раздел, то нажимаешь на нужный заголовок и переходишь к интересующей части документа. Вот, как то так. И так, читаем — Как сделать содержание в статье? Как создать оглавление в постах и ​​страницах WordPress?

Навигация по статье как в Википедии:

Навигация по статье в Вики

Многие говорят (пишут), что такая навигация в статье оказывает положительный результат на ранжировании сообщения в поисковой выдаче. Верить, не верить, даже не знаю. Хотя всё может быть. И так, создать такую навигацию по статье можно с помощью плагина (легче всего) и без, с применением якоря, то есть, в ручную. Рассмотрим оба варианта, а вы выберите то, что вам удобней.

Навигация в статье с помощью плагинов

Плагин Simple TOC — содержание в сообщениях

Плагин Simple TOC — таблица содержания в сообщениях

Данный простой плагин очень лёгкий в использование. Этот модуль позволяет легко создать автоматически навигацию по статье, с тегами h3 или h4. После установки и активации плагина, в редакторе WordPress появится кнопка  Simple TOC:

В редакторе TinyMCE WordPress появится кнопка Simple TOC

Пишите статью с подзаголовками h3 или h4, ставите курсор мышки в том месте где должна появится блок содержание записи, обычно в начале сообщения и нажимаете волшебную кнопку. Указываете нужный тег и выбираете авто заголовок TOC (можно пользоваться и другими методами вставки):

Вставка — содержание статьи

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

Можно перед навигацией вставить такой текст — в статье мы рассмотрим следующие вопросы или что подобное. Едем дальше.

Plagin Table of Contents Generator — содержание статьи

Plagin Table of Contents Generator

Тоже простой плагин в использование. Он автоматически создает упорядоченный список содержания статьи, путем сканирования заголовок контент — страницы, с тегами h2 — H6. После установки и активации модуля, в нужном месте вашей статьи нажимаете кнопку в редакторе сообщений и плагин вставляет шорт-код [TOC]:

Плагин вставляет шорт-код [TOC]

Публикуете запись и смотрим, что получается:

Содержание статьи

Оформление блока навигации по статье по умолчанию принимает дизайн вашего сайта, но можно в настройках плагина добавить свой стиль CSS:

Table of Contents Generator » Настройки

Идем дальше. Следующий у нас будет просто супер Plugin, до этого были только «цветочки», а теперь пошла «ягода». Встречайте.

Plugin Table of Contents Plus — содержание статьи, навигация в статье как в Википедии

Plugin Table of Contents Plus

Очень мощный и удобный модуль, с помощью которого можно автоматически создавать блок навигации по статье, которая будет похожа на содержание в википедия. С заголовками и подзаголовками, то есть, древовидную навигацию (иерархия). Вот, как у меня получилось:

Блок — Содержание статьи без обтекания текстом

Или так, с обтеканием текстом:

Навигация по статье

После установки и активации Table of Contents Plus в разделе «Настройки» появится вкладка TOC+, нажимаете её и переходите к настройкам плагина. Там их великое множество:

Настройки Table of Contents Plus

В этой части можно указать: позиция блока (перед первым заголовком; после первого заголовка; вверху статьи или после). Вставлять блок с содержанием, когда количество 2 и более заголовков в статье. Естественно, если меньше двух заголовков содержание в записи выводиться не будет. Заголовок блока, показать иерархию списка и их количество, плавный эффект прокрутки страницы, ширина блока, позиция — слева; справа, размер шрифта. Далее:

Table of Contents Plus — настройки

Выберите готовый стиль блока или создайте свой (Custom):

Создание собственного стиля блока

Еще можно произвести дополнительные настройки (скриншот вверху), нажав вкладку Advanced (show), откроется продолжение настроек, где можно отметить с какими тегами формировать содержание статьи, от h3 по h6. Здесь, также укажите нужное расстояние от верха страницы, где останавливать заголовок. После всех настроек навигации в статье, не забудьте нажать кнопку Сохранить настройки. Вот вроде и всё, ах да, если вдруг вы не захотите отображать содержание в определённой статье, перед публикацией её вставьте такой код [no_toc]. И последнее, с помощью данного плагина можно создать карту сайта, но, это уже другая история и другой пост.

Как сделать якорь ссылку. Навигация в статье без плагина

Как создать якорные ссылки в WordPress? Очень просто. Принцип действия якорей: в нужном месте вашей статьи ставите определенную метку и потом делаете ссылку на нее (наше содержание). Кликнув по ссылке, читатель сразу попадает в нужное место раздела статьи. И так, приступим.

Допустим, у вас есть в статье пять заголовков с тегами h3, нам нужно создать в начале статьи или в любом месте записи меню, только в переключив вкладку в редакторе сообщений на  «Текст»:

<a href=»#1″> Ваш заголовок №1 </a>
<a href=»#2″> Ваш заголовок №2 </a>
<a href=»#3″> Ваш заголовок №3 </a>
<a href=»#4″> Ваш заголовок №4 </a>
<a href=»#5″> Ваш заголовок №5 </a>

Теперь, добавляем к каждому заголовку статьи якорь, соответственно нашему созданному содержанию, в нашем случае это цифры из меню 1, 2, 3, 4, 5 без решётки. Выделено красным цветом:

<h3> Заголовок h3 номер 1 </h3>
<h3> Заголовок h3 номер 2 </h3>
<h3> Заголовок h3 номер 3 </h3>
<h3> Заголовок h3 номер 4 </h3>
<h3> Заголовок h3 номер 5 </h3>

Объясню немного, то есть, начинаете писать статью,например: вступительную часть, затем меню с содержанием статьи с нужными заголовками. Далее, по ходу написания сообщения создаёте или вставляете заголовки с нашими якорями. Работать наша навигация будет после публикации вашего шедевра. После клика по ссылке в содержании, вас отправят на ту часть документа, на которую вы закинули якорь. Вот, как то так. Есть ещё один способ создания навигации по статье с использованием визуального редактора — Вставить/изменить ссылку.

Лучше использовать этот метод когда ваша статья уже написана, так будет легче всего. В нужных местах записи расставьте метки (якоря), куда будут переходить ваши читатели. Только в режиме «Текст»:

<a name=”Якорь метка”></a> или <a name=”Якорь метка”>Ваш текст</a>

В первом случае, якорь не будет виден посетителям, а во втором будет. Вместо «Якорь метка» вы указываете любое имя. Оно может быть произвольным, например, bomba1 или просто букву c цифрой — s1. Вместо слова Ваш текст» можете, что — то написать. Следующий шаг, это нам надо указать ссылки на расставленные анкоры. Как сделать ссылку на якорь? В любом месте статьи, всё таки лучше, как всегда в начале, пишем названия нашего содержания и каждый заголовок по очереди выделяем мышкой, нажимаем в визуальном редакторе кнопку Вставить/изменить ссылку:

Вставить/изменить ссылку

В поле URL обязательно вставляете знак решётка — # и метку якорь, по желанию пишем заголовок который при наведению на ссылку в содержание будет появляться. Нажимаем «Добавить ссылку». Такую же операцию проделываем с каждым пунктом меню (содержание), то есть, делаете ссылку на каждую расставленную метку в статье. На этом у меня всё. Вроде понятно объяснил вам эту не сложную процедуру.

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

PS.Читайте продолжение. Ещё один легкий способ.

<a href="#posts-1">Название ссылки 1</a>
<a href="#posts-2">Название ссылки 2</a>
<a href="#posts-3">Название ссылки 3</a>

#sod {
    display: inline-block;
    padding: 18px 23px 13px;
    margin: 0 0 18px;
    background: #dfeef6;
    border-bottom: 2px solid #c0d0d9;
    border-radius: 7px;
}

<h3>заголовок 1</h3>

1
2
3
4
5
6

<ol>
<li><a href="#идентификатор 1">заголовок 1</a></li>
<li><a href="#идентификатор 2">заголовок 2</a></li>
...
<li><a href="#идентификатор n">заголовок n</a></li>
</ol>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<ol>
<li><a href="#идентификатор 1">заголовок 1</a></li>
<ul>
<li><a href="#идентификатор 1`">подзаголовок 1</a>
</ul>
<li><a href="#идентификатор 2">заголовок 2</a></li>
<ul>
<li><a href="#идентификатор 2`">подзаголовок 2</a>
</ul>
...
<li><a href="#идентификатор n">заголовок n</a></li>
<ul>
<li><a href="#идентификатор n`">подзаголовок n</a>
</ul>
</ol>

1
2
3
4
5
6
7
8
9

<div>
<strong>Содержание статьи:</strong>
<ol>
<li><a href="#идентификатор 1">заголовок 1</a></li>
<li><a href="#идентификатор 2">заголовок 2</a></li>
...
<li><a href="#идентификатор n">заголовок n</a></li>
</ol>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div>
<strong>Содержание статьи:</strong>
<ol>
<li><a href="#идентификатор 1">заголовок 1</a></li>
<ul>
<li><a href="#идентификатор 1`">подзаголовок 1</a>
</ul>
<li><a href="#идентификатор 2">заголовок 2</a></li>
<ul>
<li><a href="#идентификатор 2`">подзаголовок 2</a>
</ul>
...
<li><a href="#идентификатор n">заголовок n</a></li>
<ul>
<li><a href="#идентификатор n`">подзаголовок n</a>
</ul>
</ol>
</div>