Как создать динамическую 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 необходимо следующее:
- Тема Divi. На сайте должен быть установлен WordPress и активирована тема Divi.
- Содержимое сайта. Чтобы сгенерировать отображение содержимого в формате html, на сайте должны быть актуальные страницы, сообщения, категории, продукты.
- Плагин 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. Там можно увидеть доступные настройки. В этом руководстве оставим параметры на вкладке настроек в покое. Посмотрим их позже
Сейчас нас интересует вкладка Как этим пользоваться. А там все доступные примеры шорткодов, которые можем использовать для отображения содержимого страницы карты сайта. Выделены желтым цветом те, которые будем пускать в дело.
Создание HTML страницы для карты сайта в Divi
После того как плагин будет установлен, приступим к разработке макета страницы карты сайта для пользователей в Divi.
Первое, что делаем это создаем новую страницу. Раздел панели управления WordPress Страницы (1) ⟹ Добавить новую (2). Вводим название страницы, к примеру, HTML карта сайта для посетителей (3), затем нажимаем Использовать Divi Builder (4).
После того как страница для карты сайта создана, не забыть прописать для нее метатеги: H1, title и Descripion.
Добавление готового макета на страницу
После перехода в Divi Builder будет предложены три варианта построения страницы. Выбираем Выбрать макет
Будем использовать макет страницы Категории пакета Magazine (категория библиотеки макетов Lifestyle)
Загружаем макет Категории (Categories) к себе на страницу и сохраняем ее.
Удаление ненужных элементов
Поскольку будем использовать только верхнюю часть этого готового макета, то после его загрузки удаляем все секции, кроме первой. Получается вот такой шаблон:
Создание новых секций в карте сайта
Затем добавляем новую обычную секцию под оставшейся верхней.
Добавление строки для отображения страниц
В первой строке html карты Divi для пользователей будем отображать страницы сайта. Начнем с добавления строки из одного столбца.
Внутри строки добавляем новый текстовый модуль.
В поле Настройки Текст на вкладке Текст нужно вставить следующую запись
<h2>Страницы сайта</h2>
!!! Обращаю внимание, именно на этой вкладке, а не на вкладке Визуальный
В результате получаем вывод на экран всех страниц сайта
Настройки дизайна
Несмотря на то, что этот контент создан с помощью шорткода, внешним видом отображения можно и нужно управлять. Ведь этот код выводится через текстовый блок, который имеет свои настройки дизайна. И мы будем создавать эти элементы, используя встроенные настройки дизайна Divi.
Переходим на вкладку дизайна и строим дизайн под используемую тему, не забывая о преемственности шрифтов и цветовых решений. У меня получилось вот так:
Если будут проблемы по оформлению своей карты сайта, то всегда можно обратиться ко мне или задать вопрос в комментариях.
Аналогично выводим категории и записи категорий, подгоняем стили. Окончательный вид карты сайта для пользователей с использованием макетов Divi можно посмотреть у меня на сайте.
Помогу в создании блога, интернет-магазина или лендинга на премиальной теме WordPress Divi. Обучу администрированию сайта. Окажу техническую поддержку.
Обращайтесь, буду рад помочь Вашему бизнесу или хобби.
