Пропустить

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

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

Например:

  • <h2>
    • <h3>
    • <h3>
  • <h2>
    • <h3>

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

В этом посте мы покажем вам, как именно настроить виджет. Виджет содержания для WordPress с помощью Elementor Theme Builder.

Но прежде, давайте узнаем вместе Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге.

Затем вернемся к тому, почему мы здесь.

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

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

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

1. Создайте или измените отдельный шаблон сообщения.

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

Легко создайте свой сайт с Elementor

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

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

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

После того, как вы открыли свой уникальный шаблон сообщения, добавьте виджет Содержание где вы хотите разместить оглавление. Он находится в категории "Уникальные" с виджетами для заголовка и содержания сообщения:

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

Пришло время настроить параметры этого виджета.

3. Настройте таблицу виджетов.

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

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

Затем выберите контент, который нужно включить. Во вкладке Включают, вы можете войти:

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

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

Затем вы можете использовать параметр Просмотр маркера выбирать между числами и маркерами в списке содержания. Если вы выберете " пули ", вы можете выбрать любой значок Font Awesome.

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

Word Wrap - могут ли элементы занимать несколько строк или нет.

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

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

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

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

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

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

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

Если вы используете Точность позиционирования чтобы отобразить оглавление поверх другого элемента (например, заголовка), вы также можете увеличить индекс Z, чтобы он отображался вверху:

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

Для начала купите Факир Pro сегодня и создайте оглавление в Конструктор тем Elementor.

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
0 акции
доля
чирикать
Регистрация