Привет Всем! С вами Blog-Bridge.ru и я, Калмыков Антон. В этой статье я хотел бы рассказать вам, как сделать автоматическое оглавление в WordPress в своей статье при помощи кода или при помощи плагина Table of Contents Plus.

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

Это достигается за счет того, что посетитель сразу видит всю структуру поста. Кроме того, оглавление дает ему понимание, есть ли нужная информация в статье или нет.

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

Конечно же, не стоит злоупотреблять этим и делать содержание в посте, в котором всего 1500 – 2000 символов, один заголовок h2 и вы рассказываете о прекрасной погоде за окном. В этом случае использование оглавления совершенно неуместно и будет только раздражать.

Но вот если вы пишите в статье о том, как построить дом, и описываете все этапы, то человек, попавший на данную страничку по запросу «установка дымохода», сможет сразу же перейти к разделу «как правильно смонтировать дымоход», минуя при этом этапы заливки фундамента и становления каркаса здания и монтажа крыши. И поверьте мне, будет вам благодарен за то, что вы позаботились о его «пути» к нужной ему информации.

Как сделать содержание статьи при помощи кода

Итак, давайте для начала я расскажу вам, как создать содержание статьи при помощи кода.

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

Теперь вам требуется присвоить каждому пункту данного меню свою ссылку. Для этого выделяем по отдельности каждый пункт вашего оглавления.

Далее нажимаем кнопку «Вставить/Изменить ссылку» в редакторе WordPress.

И присваиваем ссылку # с номером для каждого пункта нашего меню.

Причем для второй строчки у вас URL  будет «#2», для третьей — «#3» и так далее.

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

<a name="1"></a>

В нем «1» — это переменная, которая соответствует номеру вашего заголовка. Например, в нашем случае для первой строчки это выглядит так:

А для второй вот так:

После того, как вы присвоили переменные вашим заголовкам, в правом верхнем углу редактора Вордпресс нажимаем «Сохранить»  и «Просмотреть».

В результате вот что у нас получилось:

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

Второй способ вывода оглавления заключается в установке и настройке под свои потребности плагина Table of Contents Plus.

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

Таким образом будет выглядеть оглавление, сделанное при помощи рассматриваемого плагина:

Итак, о том как устанавливать плагины на WordPress я писал тут и в сегодняшней статье повторяться не буду. Поэтому прочитайте внимательно и будем двигаться дальше.

После установки и активации плагина давайте перейдем к более тонким его настройкам.

Основные настройки плагина

Будем считать,  что если вы читаете данный раздел, то плагин уже установили. Теперь в административной панели Вордпресса в «Настройках» нажимаем на «TOC+».

После этого мы попадаем на страницу, на которой и происходит корректировка плагина под наши потребности.

• «Position» — данный пункт позволяет выводить содержание до (Before first heading) или после (After first heading) первого заголовка, вверху (TOP) или в самом низу статьи (Bottom).
• Второй пункт «Show when» — дает нам возможность выбора количества заголовков в посте, после которого плагин автоматически будет выводить содержание (в случае активации третьей строчки).
• Строка «Auto insert for ….» — позволяет нам выбрать, где будет происходить автоматический вывод оглавления, в записях «post» или на страницах «page» блога.
• В четвертой строчке «Heading text» — мы можем переименовать по нашему усмотрению заголовок содержания. Мы его назвали «Содержание статей», вы можете проявить свою фантазию и обозначить его по-другому. Также при активации в данной строчке чекбокса «Allow the user to toggle…» вы можете предоставить пользователю возможность скрывать содержание.
• Чекбокс «Show hierarchy» — активирует древовидную иерархию оглавления.
• Чекбокс «Number list items» — позволяет присваивать нумерацию разделов в оглавлении.
• Чекбокс «Enable smooth…» — активирует прокрутку перехода к разделу. У нас я его поставил, так как он придает плавности перехода к разделу. Но это, по моему мнению, а пользоваться этим или нет решать только вам.

Настройка внешнего вида таблиц оглавления

• Width — задает ширину таблицы оглавления. В ней три значения на выбор:

«Относительная (Relative)», «Фиксированноя (Fixed)» и «Другая (Other)». В результате вы с легкостью сможете подобрать нужный вам размер.

• Wrapping – задает обтекание текстом таблицы. Мне не очень понравилось как это смотрится у нас на сайте, и я оставил не активным данный пункт.
• Presentation – придает стиль нашей таблице. По умолчанию стоит серый цвет, но мы решили поменять его и выбрали пункт «Custom», в котором сами задали цвет фона и шрифта.

Дополнительные настройки Table of Contents Plus

В данном меню мы можем дополнительно настроить регистры, анкоры, ограничить путь к файлам, исключить стиль CSS плагина и при этом будет задан стиль темы (Exclude CSS file), задать уровни заголовков, которые будут выводиться «Heading levels», а также задать уровень отступа от верхней кромки страницы (Smooth scroll ….).

Для нас пункт «Smooth scroll top offset» был спасением, так как у нас верхнее меню сайта статично и передвигается вместе с прокруткой статьи. И когда происходило перемещение на нужную часть нашей статьи, то меню закрывало наши заголовки. Изменив это значение на 90 px, я решил нашу проблему.

Также в этом плагине есть вкладка карта сайта «Sitemap», но описывать ее функционал я не буду, так как в нем эта функция реализована очень слабо, и не стоит ни моего, ни вашего внимания. Единственно, что я хочу пояснить по поводу данной карты, так это то, что она делается не для поисковых роботов, а для посетителей, и выводится на страницах при помощи шорт кода.

Заключение

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

[no tok]

Он запрещает вывод оглавления в том посте, в котором вы прописали его.

Вообщем, теперь вы можете делать свои статьи более удобными для своего читателя. Причем потратив на это совсем немного времени. Выберите для себя наиболее удобный вариант для составления оглавления и вперед!

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

Если возникнут вопросы — пишите в комментариях!

Я с вами прощаюсь, до новых встреч!

Статьи в тему:

Простой способ защиты от спамеров: Akismet плагин

Hyper cache — настройка лучшего плагина по кэшированию

WordPress плагин формы обратной связи: Contact Form 7 ваш незаменимый помощник для общения

Как сделать хлебные крошки WordPress? Плагин Yoast SEO наш лучший помощник

 С наилучшими пожеланиями, Калмыков Антон