Как создать динамическую HTML Sitemap в Divi

Как создать динамическую HTML Sitemap в Divi

Карта сайта для посетителей может быть полезна для перемещения по ресурсу, построенному на Divi. Она построена в формате html и обычно содержит организованный список ссылок на все релевантное наполнение ресурса. Такую страницу можно создать с помощью плагинов или вручную.

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

В этой статье я покажу, как создать динамический макет html карты в Divi, используя комбинацию Divi Theme Builder и плагина WP Sitemap Page. Настройка чрезвычайно проста, а результат удивительно эффективен.

Краткий обзор макета Divi

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

Чтобы получить доступ к загрузке, необходимо подписаться на список рассылки DiviLancer Daily, используя форму ниже. Как новый подписчик, будете получать разные “полезняшки” для работы с темой Divi. Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и на него придет ссылка для загрузки макета. Вы не будете повторно подписаны или не будете получать дополнительные электронные письма.

Чтобы импортировать макет на свою страницу, его надо извлечь из zip-файла и перетащить файл JSON в Theme Builder. Примечание: Макет основан на шорткодах, используемых с плагином WP Sitemap Page, который необходимо установить. Если на сайте не активен плагин, то контент в модулях не будет виден.

Что понадобится для работы макета

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

  1. Тема Divi. На сайте должен быть установлен WordPress и активирована тема Divi.
  2. Содержимое сайта. Чтобы сгенерировать отображение содержимого в формате html, на сайте должны быть актуальные страницы, сообщения, категории, продукты.
  3. Плагин WP Sitemap Page установлен и активирован.

А теперь давайте перейдем к самому интересному — к руководству.

Разница между XML и HTML файлами Sitemap

Всего есть два основных два вида карт сайта — XML и HTML. Карты сайта в формате XML создаются специально, чтобы дать поисковым системам подробную структуру сайта для индексации. По большей части они существуют для того, чтобы упростить сканирование. А это в свою очередь повышает рейтинг ресурса. Таким образом, sitemap XML не для пользователя.

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

Настройка плагина WP Sitemap Page

В этом руководстве я собираюсь использовать бесплатный, но эффективный плагин WP Sitemap Page. Этот плагин позволит динамически отображать содержимое карты сайта в модуле Divi с помощью шорткодов. Чтобы загрузить его, переходим в панель управления WordPress, выбираем раздел Плагины (1) ⟹ Добавить новый (2). Находим плагин карты сайта WP с помощью панели поиска (3), а затем устанавливаем его и активируем (4).

Установка плагина WP Sitemap Page
Чтобы открыть настройки WP Sitemap Page, переходим в Настройки ⟹ WP Sitemap Page. Там можно увидеть доступные настройки. В этом руководстве оставим параметры на вкладке настроек в покое. Посмотрим их позже
Настройки плагина карты сайта для пользователей WP Sitemap Page

Сейчас нас интересует вкладка Как этим пользоваться. А там все доступные примеры шорткодов, которые можем использовать для отображения содержимого страницы карты сайта. Выделены желтым цветом те, которые будем пускать в дело.

Как пользоваться плагином WP Sitemap Page

Создание HTML страницы для карты сайта в Divi

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

Первое, что делаем это создаем новую страницу. Раздел панели управления WordPress Страницы (1) ⟹ Добавить новую (2). Вводим название страницы, к примеру, HTML карта сайта для посетителей (3), затем нажимаем Использовать Divi Builder (4).

Добавление страницы в Divi
После того как страница для карты сайта создана, не забыть прописать для нее метатеги: H1, title и Descripion.

Добавление готового макета на страницу

После перехода в Divi Builder будет предложены три варианта построения страницы. Выбираем Выбрать макет

Создание страницы для карты сайта
Будем использовать макет страницы Категории пакета Magazine (категория библиотеки макетов Lifestyle)
Загрузка макета страницы из библиотеки Divi
Макет Категории пакета Divi Magazine

Загружаем макет Категории (Categories) к себе на страницу и сохраняем ее.

Удаление ненужных элементов

Поскольку будем использовать только верхнюю часть этого готового макета, то после его загрузки удаляем все секции, кроме первой. Получается вот такой шаблон:

Удаление ненужных секций

Создание новых секций в карте сайта

Затем добавляем новую обычную секцию под оставшейся верхней.

Вставка новой секции

Добавление строки для отображения страниц

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

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

<h2>Страницы сайта</h2>

!!! Обращаю внимание, именно на этой вкладке, а не на вкладке Визуальный

Страницы в html карте сайта
В результате получаем вывод на экран всех страниц сайта
Вывод на карту сайта страниц

Настройки дизайна

Несмотря на то, что этот контент создан с помощью шорткода, внешним видом отображения можно и нужно управлять. Ведь этот код выводится через текстовый блок, который имеет свои настройки дизайна. И мы будем создавать эти элементы, используя встроенные настройки дизайна Divi.

Настройка дизайна карты сайта
Переходим на вкладку дизайна и строим дизайн под используемую тему, не забывая о преемственности шрифтов и цветовых решений. У меня получилось вот так:
Дизайн ряда страницы

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

Аналогично выводим категории и записи категорий, подгоняем стили. Окончательный вид карты сайта для пользователей с использованием макетов Divi можно посмотреть у меня на сайте.

Автор DiviLancer

Помогу в создании блога, интернет-магазина или лендинга на премиальной теме WordPress Divi. Обучу администрированию сайта. Окажу техническую поддержку.

Обращайтесь, буду рад помочь Вашему бизнесу или хобби.

Оставьте ответ

Ваш адрес email не будет опубликован.