[toc] Сегодня хочу поделиться с Вами как можно реализовать содержание страниц на сайте/блоге. Вывести оглавление можно двумя способами. Первый — с помощью кода, второй — с помощь плагина. Второй вариант более простой, плагин не создает существенной нагрузки и делает все автоматически. И все же, уверен, многие не захотят его использовать, поэтому рассмотрим все варианты.
Что такое содержание страниц и зачем оно нужно?
Ну, собственно, вы можете его наблюдать справа вверху, в этой статье. Это якорная ссылка, которая переводит не на другую страницу, а на нужное место в записи. Как правило, это заголовки (h2, h3, h4 и т.д.).
Зачем оно нужно?
Большинство посетителей, приходят с конкретной целью — решить свой вопрос. Если решение не находиться в короткий промежуток времени, большая часть посетителей, кликают на крестик браузера и идут искать дальше. Само оглавление, с самого начала дает понять, возможно ли решение вопроса в статье. Плюс, это возможность быстро перейти к нужной информации и пропустить воду.
Поисковые системы, также могут использовать оглавление страниц в своей выдаче. Например, у меня есть статья с таблицей содержания:
Если в поисковике, ввести запрос, который будет похож на один из заголовков статьи, то выдача будет такой:При переходе из поисковика, посетитель сразу попадет на интересующую информацию, а не в начало статьи.
Правильная структура (иерархия) заголовков.
Необходимо правильно располагать заголовки в статье. Первым должен идти заголовок H1 — ваше название поста. Чаще, H1 не участвует в оглавлении, а начинается все с H2. Далее располагаются заголовки H3, H4 и т.д. в порядке уменьшения.
Создаем содержание страницы (записи).
Чтобы код, представленный ниже заработал, его необходимо прописывать в текстовом режиме, редактора WordPress:
Стандартно заголовки выглядят так: <h2>Заголовок</h2>. Для того чтобы создать якорный заголовок, за который мы потом зацепимся, необходимо присвоить ему ID:
В поле id=«любой текст», для примера я использовал цифры.
Простое
После решетки (#) добавляем id нужного заголовка.
Результат:
Нумерованное
Тот же самый код, только вместо <ul></ul>, ставим <ol></ol>.
Результат:
Многоуровневое нумерованное
Также, для правильного построения цифровой иерархии, нужно добавить в style.css код (путь обычно такой: Ваш-домен/wp-content/themes/тема/style.css):
Результат:
Оглавление в анонсах на главной странице.
Часто, на главной странице выводятся анонсы статей (по принципу блога) и в нем часть текста из статьи. Если Вы разместите содержание в верхней части страницы, то оно также будет отображаться на главной. Но переход по ссылке не будет переводить к заголовку. Потому что на главной странице их не будет. Чтобы перейти к заголовку с главной страницы, необходимо прописывать полный путь ссылки + #id заголовка, пример:
Оформление таблицы содержания.
Необходимо добавить код в style.css, он подойдет для любого выбранного кода, выше:
Подробнее о стилях: Результат:
- .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> и <h3>, если необходимы другие, добавьте их по аналогии. Отступы настроены, для моего меню. Ваше меню, может быть, больше или меньше, поэтому меняйте параметры: height: 3em;margin-top: -3em;. Единственный нюанс, оставляете их симметричными. То есть, если меняете height: 5em, тоже самое значение, только с минусом, ставим для margin-top: -5em.
Создаем содержание веб-страницы, с помощью плагина.
Этот вариант используется на моем блоге. Совершенно не нагружает сайт, по сравнению с другими плагинами, которые я использую. Поэтому смело его рекомендую. Речь идет о плагине Table of contents plus или просто TOC.[vc_btn title=»Скачать плагин Table of Contents Plus» color=»primary» align=»center» i_icon_fontawesome=»fa fa-download» add_icon=»true» link=»url:https%3A%2F%2Fwordpress.org%2Fplugins%2Ftable-of-contents-plus%2F||target:%20_blank|»]
Настройка плагина 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), но не рекомендую использовать его для этих целей. Вывод карты сайта не доработан, воспользуйтесь другими способами.
Оставить комментарий