Как добавить оглавление в записи WordPress
Если ищете способ улучшить удобство использования сайта на WordPress и дать посетителям возможность лучше ориентироваться в структуре контента, я рекомендую добавить список заголовков с активными ссылками, которые будут перенаправлять их прямо в нужный раздел. Этот элемент, более известный как оглавление, используется на огромном количестве ресурсов в Интернете. Википедия — известный пример сайта, на котором эта система реализована весьма успешно.
В этой статье я расскажу, как добавить оглавление в WordPress.
Зачем использовать оглавление на сайте WordPress
Как я уже упоминал выше, оглавление может улучшить пользовательский опыт сайта, поскольку позволяет посетителям легче ориентироваться на странице или в записи. Другими словами, они быстрее доберутся до интересующих их разделов, а также смогут изучать контент более практичным и эффективным образом.
Следует отметить, что эта система особенно пригодится, если страница или запись содержит большие объемы материала, например, длинные статьи.
Еще одна причина, по которой стоит рассмотреть возможность использования содержания, заключается в том, что оно в целом может улучшить SEO проекта на ВордПресс. А именно: если добавите эту систему на конкретную страницу или в пост, Google автоматически добавит в сниппет результата поиска ссылку «перейти к», которая приведет пользователей прямо к интересующему разделу, а точнее — к заголовку, который можно найти на странице или в посте.
Другими словами, если посетители введут ключевые слова, которые есть в оглавлении, это повысит вероятность появления страницы в верхних результатах.
Помимо добавления оглавления на страницы или записи, вы сможете вставить его в сайдбар.
Плагины оглавления WordPress
Qi Addons
Если используете Elementor, самый простой способ добавить содержание в записи — это использовать Qi Addons для него. Это коллекция из 100+ бесплатных и премиум-виджетов для популярного конструктора, которые расширяют функциональность Elementor и помогают добавлять расширенные функции, начиная от типографики и демонстрации контента до СЕО и бизнеса.
Виджет «Оглавление» является бесплатным, и все, что нужно сделать, чтобы использовать его, — это установить Элементор на сайт и загрузить плагин Qi Addons.
После установки расширения все компоненты автоматически добавятся в стандартный набор виджетов. Вы сможете добавлять их так же, как и любой другой.
Перейдите к посту, в который хотите добавить оглавление, и найдите подходящее место для него. Обычно оно размещается сразу под введением или под заголовком.
Нажмите на значок «+» в редакторе, чтобы добавить новый виджет. В меню слева найдите вариант, введя «Оглавление» в строку поиска.
Вам нужен виджет, обозначенный красным цветом слева. Другой — это виджет Elementor Pro. Если используете Elementor Pro, можете выбрать 1 из этих 2. Я остановлюсь на Qi.
Перетащите виджет в пустой элемент на странице. По умолчанию он будет выглядеть так.
Обратите внимание, что виджет автоматически определил подзаголовки (для этого они должны быть заголовками с тегами H (H2, H3, H4…). Если есть иерархические подзаголовки (например, раздел H2 может содержать несколько разделов H3 или H4), они будут иерархически отображены в оглавлении.
В примере, который я использую, есть только несколько H2, поэтому мне не нужна иерархия, а также не нужны подзаголовок или заголовок для оглавления. Я удалю их с помощью меню редактирования слева — просто очистите фиктивный текст, и они исчезнут.
Я также удалю вводный текст. Конечно, вы можете оставить любой из них, если он нужен. Они особенно подходят для длинных постов с большим количеством текста и множеством подзаголовков.
Меню также включает опцию ограничения оглавления только главной страницей и контактами. По умолчанию она установлена на «Нет». Это означает, что вы можете добавлять другой контент, как в примере выше, например, похожие записи, раздел контактов, социальные сети и т. д. Если это не нужно, переключите на «Да».
Есть также очень полезная опция исключения определенных тегов H (например, если хотите включить только подзаголовки H2 и H3, но не H4), а также классов и идентификаторов.
Теперь можете кастомизировать стиль оглавления с помощью вкладки «Стиль» в редакторе. Здесь возможно установить параметры типографики для подзаголовка, заголовка и текста.
Прокрутив страницу вниз, вы увидите настройки «Стиль интервалов», которые я также оставил без изменений. Перейдем к «Стиль списка», где вы можете выбрать, будет ли оглавление нумерованным или ненумерованным. Если выберете нумерованный список, пункты в оглавлении будут пронумерованы.
Параметр «Положение стиля списка» определяет, будет ли список находиться внутри или снаружи элемента, а в разделе «Стиль списка» возможно выбрать, как будут выглядеть маркеры (доступны варианты «Диск», «Круг», «Квадрат» и «Нет»).
Наконец, здесь вы можете установить параметр «Подчеркивание при наведении курсора на список». По умолчанию установлено значение «Да». Это означает, что при наведении курсора на элемент списка под ним появится подчеркивание.
После этого пришло время кастомизировать стиль текста списка.
Вам нужен параметр «Типографика элемента». Здесь можете выбрать семейство шрифтов (я изменил свой, чтобы он соответствовал стилю остальной части поста), а также насыщенность, интервалы, элементы и так далее.
И это, по сути, все, что касается кастомизации основных стилевых и функциональных параметров. На последней вкладке, «Дополнительно», представлены дополнительные параметры для оглавления.
Я не буду рассматривать их по отдельности, но вы можете поэкспериментировать с ними и персонализировать макет с помощью полей и отступов; добавить анимационный эффект, если хотите, чтобы оглавление, например, появлялось или исчезало, когда пользователь наводит на него курсор; использовать параметры «Трансформация», чтобы раздел наклонялся или переворачивался; добавить фон или рамку, а также редактировать дополнительные параметры адаптивности.
Использование виджета «Оглавление» очень просто и интуитивно понятно. Он предлагает богатый набор опций, позволяющих кастомизировать список именно так, как нужно.
Если пользуетесь Gutenberg, обратите внимание, что Qi Blocks for Gutenberg имеет почти идентичный блок «Оглавление» с практически такими же параметрами стиля.
Если по какой-либо причине не хотите использовать ни одно из этих решений, есть еще один, хотя и менее функциональный, плагин, которым можно воспользоваться, так что давайте рассмотрим его.
Easy Table of Contents
Easy Table of Contents — очень популярный плагин, который так же прост в использовании и конфигурации, как и предполагает его название. Прежде чем перейти к тому, как использовать его для добавления оглавления на сайт WP, давайте рассмотрим некоторые его настройки.
После установки и активации в дашборде WordPress перейдите в «Настройки» > «Оглавление».
Там вы сможете управлять общими настройками плагина. Сюда входят параметры, позволяющие включить поддержку оглавления на страницах, в записях, кастомный CSS и так далее.
Аналогичным образом вы сможете конфигурировать опцию «Автоматическая вставка», которая будет автоматически добавлять оглавление для каждого типа записей.
Лично я не рекомендую добавлять содержание ко всем записям, если только они не являются длинными.
Обратите внимание, оглавление будет автоматически добавляться только к тем типам записей, для которых включена поддержка содержания.
Вы также можете выбрать положение оглавления, количество заголовков, которое должна иметь страница или запись, чтобы оно появилось (по умолчанию — 4, но вы можете изменить это число на любое другое), выбрать, отображать ли метку заголовка или нет (и указать название метки заголовка) и многое другое.
Далее идет вкладка «Внешний вид». Здесь можете кастомизировать все параметры, связанные с внешним видом оглавления. Сюда входят ширина, размер шрифта заголовка, начертание и т. д.
Еще одна полезная опция, которую можете кастомизировать здесь, — это тема для оглавления. На выбор предлагается несколько различных, и вы также можете создать собственную, изменив цвет фона, рамки, заголовка, ссылок и т. д.
Однако следует помнить, что применить кастомизации темы можно только в том случае, если оглавление вставлено в страницу или запись, тогда как виджет будет автоматически персонализирован в соответствии со стилями виджетов используемой темы ВордПресс.
Наконец, в разделе «Дополнительные настройки» вы можете кастомизировать отображение всех анкоров строчными буквами, установить перенос слов, выбрать заголовки, которые хотите включить в оглавление (от H1 до H6), и многое другое.
После того как кастомизируете все параметры в соответствии со своими предпочтениями, не забудьте нажать кнопку «Сохранить изменения».
Добавление оглавления на страницу или в запись WordPress
Если включили опцию автоматической вставки, то оглавление будет добавляться в каждую запись автоматически (для каждой статьи, имеющей 4+ заголовков, но вы можете изменить это число в соответствии с предпочтениями). При этом возможно поменять эти настройки при необходимости на самой странице или в посте.
После того как найдете запись/страницу, к которой хотите добавить оглавление, перейдя в «Страницы» > «Все страницы/записи» > «Все записи», нажмите «Редактировать» на соответствующей странице/записи или перейдите в «Страницы/записи» > «Добавить новую», если хотите добавить его к новой странице или посту.
Вы увидите, что на экране редактирования страницы/записи появился новый раздел под названием «Оглавление».
Здесь возможно отключить автоматическую вставку для этой конкретной страницы или записи, а также указать уровни заголовков, которые должны отображаться в содержании.
Изменение любых настроек на этом экране переопределит существующие (те, которые вы установили на вкладке «Общие настройки») только для этой страницы/записи.
После того как вы добавили весь нужный контент на страницу или в запись, можете просмотреть раздел в режиме предварительного просмотра и увидеть, как выглядит оглавление.
Оглавление будет расположено прямо над первым заголовком статьи. Нажатие на любую из доступных ссылок в содержании приведет читателей к конкретному разделу, который их интересует.
Добавление оглавления в сайдбар WordPress
Плагин Easy Table of Contents поставляется с виджетом, который позволяет добавить оглавление в сайдбар WP.
Для этого перейдите в «Внешний вид» > «Виджеты» и найдите виджет с названием «Оглавление» в списке доступных.
Затем просто добавьте виджет, перетащив его в область сайдбара справа, или кликните по нему и нажмите кнопку «Добавить виджет».
Как только кликните по виджету «Оглавление» в области сайдбара, вы сможете изменить его название, а также выбрать цвет выделения активного раздела.
Добавление оглавления в мобильное меню WordPress
Еще один способ вывести оглавление в записи WordPress — использование мобильного меню. На мой взгляд, это самый удобный вариант, если вы хотите, чтобы содержанием действительно пользовались. Такое решение позволяет держать оглавление всегда в зоне видимости пользователя, что повышает его кликабельность.
Проще всего добавить оглавление в мобильное меню при помощи плагина WPBar. Само расширение создано для формирования на сайте панелей, которые можно выводить на любых устройствах. В первую очередь, они предусмотрены для смартфонов и планшетов, где доступ к основному меню зачастую затруднителен.
Меню, которое формируется при помощи WPBar, напоминает варианты из мобильных приложений. Оно закрепляется в нижней или верхней части экрана, тем самым пользователь постоянно имеет доступ к удобной навигации и различным функциональным компонентам, добавленных в него.
Чтобы создать оглавление в панели WordPress через WPBar, установите плагин и активируйте его на сайте. После этого в админке ВП появится одноименный пункт. Нажмите «Панели» — «Добавить новую панель».
При первом заходе на страницу вы увидите виртуальный тур. Рекомендую с ним ознакомиться, он помогает понять, как взаимодействовать с решением.
Далее в левом меню необходимо сформировать список элементов, которые будут выводиться в панели. Используйте модуль «Содержание», чтобы сделать оглавление. Сама настройка модуля крайне простая, здесь есть 4 ключевых параметра:
- Название. То, как пункт будет называться в мобильном меню, которое отображается пользователю.
- Иконка. Имеются 100+ вариантов отрисованных разработчиками иконок, плюс можно загрузить свою.
- Минимум заголовков. Количество заголовков на странице выбранного типа, при котором меню формируется и отображается.
- Теги заголовков. Какие именно заголовки должны попадать в содержание — выбор доступен от H1 до H6.
Если правило по минимальному количеству заголовков не соблюдено для страницы, где меню должно выводиться, согласно общим настройкам плагина, то пункт содержания в нем отображаться не будет.
Настройки таргетирования WPBar позволяют указать, чтобы элемент выводился только на страницах записей блога, в одиночных записях или даже в конкретных публикациях. Простейшая условная логика определяет, когда именно меню отображается.
Плагин позволяет сформировать несколько панелей. Например, отдельную для главной страницы и персонализированную для блога.
WPBar является платным расширением, стоимость которого за 1 сайт составляет 2900 рублей. Есть вариант с неограниченной лицензией, который хорошо подойдет вебмастерам, владеющим сеткой сайтов.
Скидка на WPBar
Заключение
Оглавление — это обязательная функция для любого веб-сайта или блога, содержащего длинные текстовые материалы. Если это относится к вашему проекту на WordPress, я настоятельно рекомендую добавить этот полезный инструмент на страницу, в пост или в сайдбар с помощью Qi Addons, либо прямо в меню через WPBar. Эти 2 замечательных плагина не только помогут с легкостью добавить содержание, но и позволят использовать другие виджеты/блоки из этой коллекции.
Если хотите использовать отдельный плагин, созданный специально для этой цели, возможно выбрать Easy Table of Contents. Какое бы решение вы ни приняли, очевидно, что создание оглавления настолько просто, что нет никаких оправданий для его отсутствия — если, конечно, это соответствует стилю блога.
Пожалуйста, оцените материал:
