Создаем содержание (оглавление) статьи, страницы или записи, без плагина и с ним.

[toc] Сегодня хочу поделиться с Вами как можно реализовать содержание страниц на сайте/блоге. Вывести оглавление можно двумя способами. Первый — с помощью кода, второй — с помощь плагина. Второй вариант более простой, плагин не создает существенной нагрузки и делает все автоматически. И все же, уверен, многие не захотят его использовать, поэтому рассмотрим все варианты.

Что такое содержание страниц и зачем оно нужно?

Ну, собственно, вы можете его наблюдать справа вверху, в этой статье. Это якорная ссылка, которая переводит не на другую страницу, а на нужное место в записи. Как правило, это заголовки (h2, h3, h4 и т.д.).

Зачем оно нужно?

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

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

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

Правильная структура (иерархия) заголовков.

Необходимо правильно располагать заголовки в статье. Первым должен идти заголовок H1 — ваше название поста. Чаще, H1 не участвует в оглавлении, а начинается все с H2. Далее располагаются заголовки H3, H4 и т.д. в порядке уменьшения.

Создаем содержание страницы (записи).

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

Стандартно заголовки выглядят так: <h2>Заголовок</h2>. Для того чтобы создать якорный заголовок, за который мы потом зацепимся, необходимо присвоить ему ID:

<h2 id="1">Заголовок</h2> 
<h3 id="2">Заголовок</h3> 
<h3 id="3">Заголовок</h3>

В поле id=«любой текст», для примера я использовал цифры.

Простое

После решетки (#) добавляем id нужного заголовка.

<div class="toc">
  <p>Содержание:</p>
  <ul>
    <li><a href="#1">Заголовок</a>
    <li><a href="#2">Заголовок</a>
    <li><a href="#3">Заголовок</a>
  </ul>
</div>

Результат:

Нумерованное

Тот же самый код, только вместо <ul></ul>, ставим <ol></ol>.

<div class="toc">
  <p>Содержание:</p>
  <ol>
    <li><a href="#1">Заголовок</a>
    <li><a href="#2">Заголовок</a>
    <li><a href="#3">Заголовок</a>
  </ol>

Результат:

Многоуровневое нумерованное

<div class="toc">
  <p>Содержание:</p>
  <ol>
    <li><a href="#1">Заголовок</a>
      <ol>
        <li><a href="#2">Заголовок</a>
        <li><a href="#3">Заголовок</a>
      </ol>
    <li><a href="#4">Заголовок</a>
      <ol>
        <li><a href="#5">Заголовок</a>
        <li><a href="#6">Заголовок</a>
        <li><a href="#7">Заголовок</a>
      </ol>
</div>

Также, для правильного построения цифровой иерархии, нужно добавить в style.css код (путь обычно такой: Ваш-домен/wp-content/themes/тема/style.css):

.toc > ol {counter-reset: li;}
.toc > ol > li {counter-increment: li;}
.toc ol ol {counter-reset: lili;}
.toc ol ol li {position: relative;list-style: none;}
.toc ol ol li:before {content: counter(li) "." counter(lili) ".";counter-increment: lili;position: absolute;left: -2em;}

Результат:

Оглавление в анонсах на главной странице.

Часто, на главной странице выводятся анонсы статей (по принципу блога) и в нем часть текста из статьи. Если Вы разместите содержание в верхней части страницы, то оно также будет отображаться на главной. Но переход по ссылке не будет переводить к заголовку. Потому что на главной странице их не будет. Чтобы перейти к заголовку с главной страницы, необходимо прописывать полный путь ссылки + #id заголовка, пример:

<div class="toc">
  <p>Содержание:</p>
  <ol>
    <li><a href="http://blogforest.ru/zarabotok-na-klikah.html#1">Лучшие сайты по заработку на кликах</a></li>
    <li><a href="http://blogforest.ru/zarabotok-na-klikah.html#2">Эффективные методы заработка на кликах</a></li>
    <li><a href="http://blogforest.ru/zarabotok-na-klikah.html#3">Другие способы заработка на кликах</a></li>
  </ol>
</div>

Оформление таблицы содержания.

Необходимо добавить код в style.css, он подойдет для любого выбранного кода, выше:

.toc {float:right;border: 1px dotted #0582ef;padding:4px 6px 0 6px;margin:4px;background: #f0f8ff;}
.toc p {color: #000000;margin-bottom: -10px;}
.toc a {color: #4db2ec;}

                            Подробнее о стилях:                                                                                                                                                                                           Результат:

• .toc {float: right; — выравнивание по правому краю (обтекает текстом слева).
• border: 1px dotted #0582ef; — обрамление, вместо dotted, можно использовать solid и dashed, ну и конечно менять цвет.
• padding: 4px 6px 0 6px; — внутренние отступы, можно поиграть с цифрами.
• margin: 4px — внешний отступ.
• background: #f0f8ff; — цвет фона таблицы.}
• .toc p {color: #000000 — цвет названия таблицы.
•  margin-bottom: -10px; — расстояние от заголовков, до названия.}
• .toc a {color: #4db2ec; — цвет заголовков}

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

Как сделать отступ для плавающего меню?

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

h2:target:before {content: "";display: block;height: 3em;margin-top: -3em; visibility: hidden;}
h3:target:before {content: "";display: block;height: 4em;margin-top: -4em; visibility: hidden;}

Данный код, для двух заголовков <h2> и <h3>, если необходимы другие, добавьте их по аналогии. Отступы настроены, для моего меню. Ваше меню, может быть, больше или меньше, поэтому меняйте параметры: height: 3em;margin-top: -3em;. Единственный нюанс, оставляете их симметричными. То есть, если меняете height: 5em, тоже самое значение, только с минусом, ставим для margin-top: -5em.

Создаем содержание веб-страницы, с помощью плагина.

Этот вариант используется на моем блоге. Совершенно не нагружает сайт, по сравнению с другими плагинами, которые я использую. Поэтому смело его рекомендую. Речь идет о плагине Table of contents plus или просто TOC.

Настройка плагина Table of Contents Plus

Position — где будет размещено меню содержания на странице:

• Before first heading (default) — перед первым заголовком.
• After first heading — после первого заголовка.
• top — в самом верху в области контента.
• Bottom — в самом низу в области контента.

Show when — отображать меню, если в тексте присутствует указанное количество заголовков.

Auto insert for the following content types — автоматическая вставка содержания во все страницы, записи, в другие места (в зависимости от вашего шаблона темы).

Heading text:

• Show title on top of the table of contents — включение и отключение, отображения названия меню и ввод самого названия.
• Allow the user to toggle the visibility of the table of contents — включение опции показать/скрыть содержание.
• Hide the table of contents initially — скрыть оглавление по умолчанию.

Show hierarchy — отображать иерархию.

Number list items — нумерация оглавления.

Enable smooth scroll effect — плавный переход, к заголовку.

Appearance:

• Width — максимальная ширина, можно задать: автоматически или точный размер.
• Wrapping — выравнивание оглавления, по левому или правому краю.
• Font size — размер отступа, от названия таблицы, до самих заголовков.
• Presentation — выбор готового присета (у меня стоит «Light blue»). Можно настроить свою версию в разделе «Custom»

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

Чтобы открыть дополнительные настройки, нажмите кнопку Advanced «show«, внизу.

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

Include homepage — разрешить отображать менюшку оглавления, на на главной странице (если оно там используется). Тут есть нюанс: если у Вас главная страница реализована по принципу блога (с анонсами), то оглавление также там будет (если включить). Но, оно не будет работать, т.к. toc ищет заголовки на текущей странице и не осуществляет переход на новую.

Exclude CSS file — запретить плагину, загружать свои css стили. Это может понадобиться, если Вы хотите использовать собственное оформление для вывода оглавления.

Preserve theme bullets — если в Вашей теме используются фоновые изображения для  <ul></ul> списка, включение данной опции отобразит их. Стандартно это черные точки, если они отображаются у Вас при включении пункта, значит особенных изображений нет.

Heading levels — выбор заголовков, которые должны участвовать в оглавлении страницы.

Exclude headings — добавить заголовки в исключение (используя символы: * и |), например:

• Фрукты* — исключить заголовки, которые начинаются со слова «фрукты».
• *Бананы* — исключить заголовок, если в нем встречается слово «бананы».
• Заголовок №1|Заголовок №2|Заголовок №3 — исключить заголовки по точному соответствию.

Smooth scroll top offset — если у Вас в теме используется плавающее главное верхнее меню, можно задать отступ в px.

Restrict path — запретить использование оглавление на определенных страницах, например:

Имеем страницу где не хотим показывать оглавление: https://blogforest.ru/zarabotok-na-klikah.html

Правильной код который нужно вставить будет выглядеть так: /zarabotok-na-klikah.html/

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

Default anchor prefix — изменение префикса url. При переходе к заголовку, к ссылке добавляются символы «#i», Вы можете изменить «i», на другой символ.

Использование шорткода — можно отключить автоматическое добавление содержания и использовать шорткод:

Его можно вставить в любом месте на странице.

Также в плагине присутствует вывод карты сайта (sitemap), но не рекомендую использовать его для этих целей. Вывод карты сайта не доработан, воспользуйтесь другими способами.