Как добавить оглавление в WordPress с помощью Elementor

Rifat Учебные пособия по WordPress Oct 2, 2020

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

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

Например:

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

В этом посте вы точно узнаете, как настроить виджет «Оглавление» с помощью Elementor Theme Builder.

Прежде всего, мы должны упомянуть, что вы также можете использовать виджет «Оглавление» по частям. Однако в этом руководстве мы сосредоточены на автоматическом добавлении оглавления ко всем (или некоторым) вашим материалам с помощью Elementor Theme Builder и отдельных шаблонов сообщений.

Вот как это сделать.

1. Создайте или отредактируйте единый шаблон сообщения

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

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

2. Добавить виджет "Оглавление"

Когда вы закончите создание шаблона отдельного сообщения, поместите виджет «Оглавление» в то место, где вы хотите его разместить. Элемент Table of Contents находится в категории Single вместе с виджетами для заголовка сообщения и содержимого сообщения.

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

Теперь давайте настроим параметры виджета "Оглавление".

3. Настройте виджет "Оглавление".

Убедитесь, что настройки виджета «Оглавление» открыты. Затем используйте вкладку «Содержимое», чтобы настроить содержимое, отображаемое в оглавлении.

Сначала дайте заголовок - например, «Оглавление». Это неподвижный текст, который отображается над списком якорных ссылок, автоматически генерируемых виджетом.

Затем выберите то содержимое, которое вы хотите включить. На вкладке "Включить" вы можете ввести:

  • Конкретные теги заголовков. Например, вы можете захотеть включить теги <h2> и <h3>, но не что-либо ниже. Конечно, вы можете установить теги заголовков в редакторе WordPress.
  • Другие контейнеры. Вы также можете добавить якорные ссылки на другие контейнеры вне содержимого вашего сообщения. Например, ваш нижний колонтитул. Это функция высокого уровня.

Если вы собираетесь перейти на вкладку «Исключить», вы можете удалить определенные заголовки из своего сообщения с помощью селектора CSS. Например, если вы хотите исключить один заголовок <h2>, вы можете добавить к этому заголовку специальный класс «игнорировать» CSS с помощью редактора WordPress, а затем исключить его с помощью якоря по правилу селектора.

Затем вы можете использовать параметр «Просмотр маркера», чтобы выбрать между числами и маркерами для вашего списка содержания. Если вы выберете «маркеры», вы можете выбрать любой значок FontAwesome.

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

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

4. Настройте параметры стиля.

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

5. Настройте дополнительные параметры.

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

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

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

И да, вот и все! Вы только что получили знания о том, как автоматически добавлять оглавление к вашему контенту с помощью Elementor Theme Builder и виджета «Оглавление».

Для начала, купите Elementor Pro сегодня, чтобы начать использовать виджет Оглавление в Конструктор тем Elementor.