Содержание

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

Просто используйте короткий код для автоматического создания оглавления для любого контейнера HTML.

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

Просто используйте 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

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

(Последнее обновление: 29.05.2019)

Привет, дамы и господа! Как сделать удобную навигацию по статье? Блок — Содержание. Навигация в статье подойдёт для тех, у кого большие, длинные сообщения и они разбиты на разделы, то есть, на подзаголовки 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.Читайте продолжение. Ещё один легкий способ.

wordpressmania.ru

Как сделать содержание в статье блога на wordpress без плагинов – Блог Виталия Лебах

Для посетителей сайта/блога очень удобно если довольно объёмная статья, состоящая из нескольких важных пунктов, имеет содержание. Причём это не просто содержание с перечнем главных мыслей, а своего рода ссылки, которые помогают читателю быстро переместится на нужный фрагмент статьи.

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

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

Что бы было всё понятно, буду показывать на примере одной своей статьи в которой решил создать небольшое содержание. А вот содержание для этой заметки.

 

Быстрая навигация по статье

Делаем содержание в статье сайта на Вордпресс

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

Затем всё можно оформить в рамку, выделенную подходящим цветом.

Как сделать якорь

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

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

Итак, якорь для одного из разделов статьи готов, теперь его нужно привязать к соответствующей фразе в блоке «Содержание»

 Как прикрепить  якорь к содержанию

В принципе здесь всё просто — Выделяем нужную фразу «Содержания» и вставляем как обычную ссылку содержимое из буфера обмена (Ctrl+V)  Есть лишь один важный момент — Перед ссылкой нужно прописать символ решётки  (Shift+3) при английской раскладке.

Подобным образом делаем с остальными нужными нам частями содержания. Не забываем сохранить. После этого мы увидим, что фразы «Содержания» стали активными ссылками ведущими к нужному абзацу статьи.

Вот и всё, уже это будет отлично работать, можно оставить так. Желательно лишь выделить содержание от остального текста инструментами редактора.

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

Изменяем дизайн блока «Содержание»

Для этого нам понадобится перейти из визуального в HTML  редактор нажав кнопку «Текст». Здесь нужно найти созданное меню.

Теперь понадобится вот такой, уже готовый HTML код. Я узнал его от Дениса Повага о котором немного рассказывал на вот этой странице.  Этот код выделит наше «Содержание» рамкой  с жёлтым фоном. Просто скопируйте его и применяйте.

<div style=»background: #ffffa0; border: 1px solid #e5e597; padding: 8px 10px; font-size: 16px;»>здесь пункты содержания</div>    (ВНИМАНИЕ! ВАЖНО! Заметил, что в двух местах, кавычки в коде, после публикации статьи, сами подменяются на треугольные скобки. Если будете пользоваться предложенным кодом то нужно внести правку. Должно быть так, перед «background …….. и после 16px;» треугольные скобки которые вы видите, нужно исправить на кавычки. Смотрите следующее изображение, там всё верно! (Нужно просто заменить скобки на кавычки!)

Итак: нужно скопировать этот код, вставить его в свою запись, внести правку, а текст вашего содержания, вместе со всеми относящимися к нему атрибутами кодов, поместить перед закрывающимся тегом  </div> в этом коде.

В моём случае это получилось так.Переходим в визуальную часть редактора и смотрим, что получилось. Теперь наше Меню выглядит так;

Можно ли изменить цвет фона, толщину бордюра, размер? Легко! Давайте обратим внимание на информацию в коде, изменив которую можем корректировать дизайн по своему желанию.

Как изменить фон и размеры

(A)- background: #ffffa0; — Это цвет фона изменив значение #ffffa0 мы изменяем цвет. Существуют сайты для визуального подбора кода палитры цвета. Например вот этот   Выбираем нужный цвет, копируем полученный код и вставляем его вместо значения  #ffffa0 ( Важно соблюдать все  пробелы, точки с запятой и т.д.) Подменяем только значение цвета —   Обновляем страницу и любуемся новой палитрой меню.

Подобным образом подменяем значения в других пунктах. Они означают: Б  — заменив 1 на большее значение мы увеличим ширину бордюра.  В  — Код Цвета бордюра  Г и Д — Влияют на  расстояние от края рамки до текста и  размеры.

Например можно сделать вот так:

Но мне так конечно не нужно, это лишь для примера.

Вот таким образом можно создать  «Содержание» статьи и изменить его по своему усмотрению, без применения плагинов. Описывал долго и от этого может показаться слишком сложным это дело, но на самом деле всё просто. Один раз попробовать и всё легко уяснится.

blogvp.ru

Как сделать автоматическое оглавление: подробная инструкция

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В нем «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», но описывать ее функционал я не буду, так как в нем эта функция реализована очень слабо, и не стоит ни моего, ни вашего внимания. Единственно, что я хочу пояснить по поводу данной карты, так это то, что она делается не для поисковых роботов, а для посетителей, и выводится на страницах при помощи шорт кода.

Заключение

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

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

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

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

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

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

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

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

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

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

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

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

blog-bridge.ru

Меню содержания статьи WordPress

В статьях большого объёма часто делают меню с предварительным содержанием материала, которое включает в себя заголовки основных разделов. По сути, это обычные якорь ссылки. Когда по ним совершается клик, то веб-страница с плавной прокруткой или резкой, в зависимости от реализации, прокручивается до назначенного стоп якоря.

Давайте рассмотрим, как на WordPress’e сделать меню статьи. Для ясности, чтобы было понятно о каком меню идет речь, приведу пример: сайт «Википедия». Думаю, многие его посещают, и стало быть, замечали с левой стороны находится блок с названием «Содержание». Так вот, нам предстоит создать подобную навигацию статьи WordPress с автоматическим ее выводом.

Плагин Easy Table of Contents и его настройка

После установки и активации модуля переходим во вкладку «Настройки-Table of Contents». Здесь находится одна страница со всеми параметрами. Вывести блок «Содержание» можно двумя способами: первый – это внутри статьи, второй – это виджет. Давайте пойдем по порядку. С настройками плагина можно поэкспериментировать и подобрать нужные варианты. Вот пример.

Обратите внимание на раздел «Headings». Он отвечает за то, какие теги статьи (подзаголовки, обернутые тегами h2, h3, h4 и т.д.) учитывать, как раздел и добавлять их к списку «Содержание».

Результат.

Давайте теперь выведем навигацию статьи в сайдбаре сайта. Но для начала подправим один параметр в основных настройках плагина, а именно «Auto Insert». Просто уберите там все галочки, чтобы блок не выводился в статье, он у нас будет в боковой панели сайта. Переходим во вкладку «Внешний вид-Виджеты», перетаскиваем виджет «Table of Contents» на самое первое место, даем ему название и сохраняем.

Результат.

Easy Table of Contents

wordsmall.ru

Table of Contents Plus плагин содержания статьи в WordPress + решение без плагина

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

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

Из личного опыта скажу, что бывают такие случаи, когда по заданному запросу в поиске Яндекс и Гугл находишь конкретный сайт и, казалось бы, вот здесь должен быть ответ, но перейдя на веб-ресурс видишь длинную портянку текста и понимаешь, что не готов вчитываться в каждое слово чтобы найти то из-за которого сюда попал.

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

Я тоже стараюсь так делать на своем блоге если вижу, что посты выходят объемные и содержат более 5-ти подзаголовков (теги h3, h4).

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

В этой статье речь пойдет о том, каким образом можно сделать содержание в статьях и как это делаю я на своих сайтах и блоге.

Способ 1. Плагин Вы устанавливаете один из модулей (например, Table of Contents Plus) формирования оглавлений и настраиваете его под свои нужды.

Такая таблица может выводиться автоматически или вручную.

Способ 2. HTML код В этом случае придется самостоятельно прописывать название подзаголовков в меню, расставлять ссылки-якоря, задавать стили для таблицы.

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

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

Лично я для блога seoslim.ru оглавления в постах по привычке вывожу кодом, а для остальных проектов использую плагин TOC+.

Как пользоваться Table of Contents Plus, настройка

На сегодня самым популярным среди вебмастеров считается модуль Table of Contents Plus, лично меня он привлек гибкими настройками.

С его помощью и будем выводить на сайтах меню с подзаголовками как в Википедии.

Первым делом надо скачать сам плагин для чего переходим из административной панели WordPress в раздел «Плагины» далее «Добавить новый» и в поиске вводим название модуля Table of Contents Plus.

Далее загружаем и активируем плагин на сайте.

Теперь перейдя в «Настройки» вордпресс вы можете видеть новый раздел «TOC+» это и есть панель с настройками создаваемой структуры (оглавления) записей.

Остается кратко рассмотреть основные настройки Table of Contents Plus.

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

Position. Здесь надо выбрать в каком месте выводить содержание (перед первым подзаголовком или после него, вверху, внизу).

Данная опция актуальна для тех, кто хочет, чтобы меню показывалось автоматически.

Show when. В каком случае будет отображено меню. Надо выбрать какое должно быть минимально количество подзаголовков в статье (2, 3, 4, 5, 6 и т.д.).

Опция понадобится тем, кто решил выводить меню автоматически.

Auto insert for the following content types. Указываете галочкой, где будет выводиться блок-содержание (статья, страница, страница с обратной связью).

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

Если настроено автоматическое размещение меню, но в какой-то статье не нужен этот блок, тогда вставьте шорткод [no_toc].

Heading text. Данная опция отвечает за название заголовка.

Если вы хотите, чтобы над ссылками меню показывалось его название (Оглавление, Меню, Содержание), тогда ставьте галочку «Show title on top of the table of contents».

Чтобы пользователь сам мог скрывать/раскрывать содержание отмечаем чекбокс «Allow the user to toggle the visibility of the table of contents» и прописываем названия для «Show text» — показать и «Hide text» — скрыть.

Если хотите, чтобы по умолчанию оглавление статьи было свернуть, тогда отмечаем пункт «Hide the table of contents initially».

Show hierarchy. Опция отвечает за отображение иерархии в блоке. То есть если в статье используются теги h3, h4, h5 тогда оглавление будет древовидным.

Number list items. Этот пункт позволит включить отображение нумерации в содержании, прям как в Википедии.

Enable smooth scroll effect. Как перенаправлять пользователя к выбранному заголовку (плавная прокрутка или быстрая).

Width. Ширина блока, здесь придется вам поэкспериментировать, так как у всех разные шаблоны.

Wrapping. Обтекание блока текстом. Можно выбрать без обтекания, слева или справа .

Font size. Указываем размер шрифта. Экспериментируйте.

Presentation. Здесь надо выбрать оформление содержания или настроить собственный стиль, пункт Custom.

Advanced. Дополнительные настройки, которые мало кому пригодятся, поэтому их нет смысла описывать.

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

Если какие-то есть вопросы по настройкам плагина Table of Contents Plus смотрите раздел справки «Help» там все подробно расписано.

Как сделать оглавление в постах без плагина

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

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

Поэтому на seoslim.ru было решено выводить содержание в постах с помощью html кода.

Для чего в требуемом посте первым делом создаем таблицу ссылок.

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

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

Для каждой ссылки прописывается название подзаголовка, а сама ссылка должна содержать «якорь».

«Якорь» — это то место куда будет перенаправлен посетитель.

В моем случае якорем является posts-1, posts-2, posts-3.

Далее надо в статье расставить «якоря» именно в те места куда решите перенаправлять читателя.

Как видите на скрине для первого подзаголовка я указал такой «якорь»

И разместил его перед тегом h3 той части текста к которой он относится.

Тоже самое делаем для всех ссылок из содержания.

Для того чтобы оглавление в статье получилось красивым и сочеталось с шаблоном добавляем к таблице стили.

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

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

Вот мой пример, где был создан атрибут <div></div> в который и помещаем содержание статьи.

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

Как видите ничего сложного, хоть и приходится все делать руками.

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

seoslim.ru

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

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

Введение

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

Ранее я как-то не придавал этому особого внимания. А зря.

Сейчас объясню почему.

Почему важно наличие содержания статьи в WordPress?

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

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

А во-вторых, существует точка зрения, якобы поисковые системы положительно относятся к подобного рода вещам, вследствие чего качество вашего интернет-ресурса в глазах поисковых систем может возрасти.

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

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

Пришло время приступить непосредственно к рассмотрению самой последовательности действий по реализации поставленной задачи.

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

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

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

Переходим к технической части.

Все описываемые действия по прописыванию идентификаторов и составлению самого содержания необходимо будет совершать в режиме текстового (не визуального!) редактора.

В данной статье для примера мы будем прописывать идентификаторы для заголовков h3-h6 (ведь h2 по идее должен быть заголовком самой статьи). Использовать все уровни заголовков в статье или только некоторые из них — решать вам, на суть метода это никак не влияет.

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

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

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

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

На самом деле в данной статье мы рассматриваем частный случай, и прописывать идентификаторы можно не только для заголовков, но и для некоторых других тегов (ol, ul, p).

Идем далее. После присваивания заголовкам идентификаторов нам необходимо оформить само содержание статьи.

Если совсем кратко, то вызвать список выбранных разделов статьи нам поможет код:

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>

<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>

<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>

<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>

<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>

Заключение

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

На этом все, удачи вам!

expromtom.ru