Как создать полезную html карту сайта для пользователей

Как создать полезную html карту сайта для пользователей

Рано или поздно каждый сайтостроитель начинает понимать, что сайт строится в первую очередь для пользователей, а не для поисковых систем. Конечно, лучше раньше, чем никогда. И начинает вводить онлайн удобства и сервисы на сайте для посетителей. Одним из таких удобств является html карта сайта WordPress.

Она позволяет показать пользователю иерархический список записей и разделов с удобной навигацией по ним. В этой статье я покажу, как создать html карту сайта в WordPress для людей.

HTML карта сайта

Что такое html карта и чем она отличается от xml карты?

Карта сайта в формате xml создается для машин и поисковых систем. Она использует язык разметки для представления содержимого ресурса. Поисковые системы используют эти карты для определения приоритетов и настройки скорости сканирования сайта. 

Карта сайта в формате html предназначена для реальных людей. Она отображает список записей и разделов сайта на одной странице. Роботам поисковых систем она подходит меньше, чем xml карта, хотя они ее тоже используют. 

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

Зачем нужна карта для пользователей?

Если на сайте еще нет html карты, то ее надо сделать. Почему?

  1. Благодаря карте можно построить иерархию разделов, подразделов и записей на одной странице сайта.
    2. Карта упрощает индексацию сайта ботами и увеличивает количество запросов, участвующих в поиске.
    3. Она может служить дополнительным инструментом поиска нужного контента для пользователя
    4. Карта выступает как элемент главного меню и предоставляет удобный инструмент навигации по сайту. Любой материал доступен в два клика (первый — на карту, второй — на статью)
    5. Html карта улучшает SEO показатели сайта
    6. Для владельца сайта html карта покажет количество созданных записей в каждом разделе и пробелы в наполнении его необходимым контентом.

Создать карту сайта для людей возможно следующими способами:

  1. С помощью плагинов,
    2. Без плагинов через изменение html шаблонов темы,
    3. При помощи шорткода.

И если варианты 2 и 3 требуют углубленного знания WordPress и основ программирования, то первый способ подходит всем, кто только начал создавать сайт на вордпресс. Поэтому я в статье остановлюсь только на создании html карты сайта при помощи плагинов.

Добавление карты сайта с помощью плагинов

Существует множество плагинов для создания карты, например:

  • Simple Sitemap,
  • WP Sitemap Page,
  • Sitemap by click5 (позволяет создавать как xml, так и html карты сайта),
  • Hierarchical HTML Sitemap,
  • Simple Sitemap и другие

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

13 карт сайта в одном плагине PS Auto Sitemap

Достаточно популярным и простым плагином для создания красивой карты сайта можно считать PS Auto Sitemap (количество скачиваний более 200 000, оценка 5.0). Крайняя версия WP, с которой он тестировался, 4.2.28.

Плагин PS Auto Sitemap

Его достоинствами являются:

  1. автоматическая генерация html карты сайта,
  2. 13 встроенных стилей визуализации,
  3. наличие внутреннего кэша, что позволяет освободить базу данных от лишних запросов.

Данный плагин хорошо работает на сайтах с не очень большим объемом страниц. Он не умеет делить карту сайта на несколько страниц и выводит ее одной длинной “портянкой”. Это является практически единственным недостатком.

Установка и активация плагина обычные, без каких либо премудростей. После его установки в консоли WP в разделе Настройки появится новый пункт PS Auto Sitemap.

Установка плагина PS Auto Sitemap

Приступаем к формированию карты сайта для людей. Первое, что необходимо сделать — это создать страницу, на которой будет она размещена. При создании запоминаем (записываем) ID страницы. Узнать его можно при редактировании. В каждой теме ID выводится по-своему, у меня в Divi это вот так: post=232267. Значит ID страницы 232267.

ID cтраницы с картой сайта

На данную страницу надо вставить единственный шорткод:

<!— SITEMAP CONTENT REPLACE POINT —>

Всё сохраняем и идем в настройки плагина, для оформления внешнего вида карты сайта для пользователей.

Настройка плагина PS Auto Sitemap
  1. Display home list — Выводить в карту сайта домашнюю (главную) страницу или нет.
  2. Display post tree — Показывать дерево сообщений (выводить или нет в карте сайта записи).
  3. Display page tree — Показывать дерево страниц (выводить или нет страницы сайта).
  4. PostID of the sitemap — ID страницы с картой сайта.
  5. Depth level — уровень глубины. Сколько уровней сайта надо отображать (1, 2, 3 и так далее ) на html карте (no limit — выводить без ограничений).
  6. Display first — очередность вывода. Что выводить первым записи или страницы?
  7. Display of categories & posts — выводить записи (посты) и страницы вместе или раздельно.
  8. Excluded categories — исключать категории. Какие категории нужно исключить из карты сайта. Необходимо указать ID категорий последовательно друг за другом, разделяя запятой.
  9. Exclude posts — исключить посты. Какие записи не надо выводить в пользовательскую карту. Также указываются ID постов через запятую.
  10. Select style — стиль отображения карты сайта на экране.
  11. Using cache — использование кэша (должно быть включено, то есть около use должна быть галочка).
  12. Сохранить изменения — не забыть всё сохранить.

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

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

Карта сайта плагина PS Auto Sitemap. Стиль Cheker

Для любителей музыки и сайтов соответствующей направленности стиль Music

Карта сайта плагина PS Auto Sitemap. Стиль Music

Визуальная карта сайта — плагин Slick Sitemap

Он позволяет создать произвольную визуализацию карты сайта. Первое, что вам нужно сделать, это установить и активировать плагин Slick Sitemap. Установка обычная, без каких-либо особенностей.

Установка плагина Slick Sitemap

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

Создание меню для визуальной карты

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

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

После того как созданы два меню (основное и служебное), можно настроить html карту сайта. Для этого надо перейти в консоли WordPress раздел Настройки (1) и выбрать пункт Slick Sitemap (2) для настройки плагина.

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

В настройках всего три пункта:

  1. Default Sitemap Menu — выбор основного меню (Визуальное меню),
  2. Default Columns — сколько столбцов должно быть отображено на карте сайте,
  3. Default Utility Menu — выбор служебного меню

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

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

[slick-sitemap]

После этого опубликовать страницу и посмотреть, что получилось в результате работы плагина Slick Sitemap.

Пример визуальной карты сайта в WordPress

Внешний вид визуальной карты

Плагин WP Sitemap Page

Еще одним из широко применяемых плагинов является WP Sitemap Page, который также “немного” заброшен. Крайняя версия WordPress, с которой он тестировался, 5.2.7. Но несмотря на это имеет количество скачиваний 200 000+ и оценку 5.0.

Плагин WP Sitemap Page

После установки и активации плагина в панели Настройки появился новый раздел WP Sitemap Page.

Установка плагина WP Sitemap Page

Особенности плагина:

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

К недостаткам плагина относится то, что на больших проектах использование его нежелательно. Карта сайта создается динамически без использования кеша. Поэтому ее формирование будет “тормозить” сайт. Для больших проектов подойдет плагин PS Auto Sitemap, который имеет встроенный кеш.

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

Если указан шорткод

Вывод карты сайта плагином WP Sitemap Page

Из трех рассмотренных выше плагинов я отдаю предпочтение PS Auto Sitemap, несмотря на его “преклонный” возраст.

На что стоит обратить внимание при создании html карты

  • карта сайта не должна «выпадать» из общего дизайна ресурса;
  • она должна одинаково (ну или почти одинаково) выглядеть в любом браузере;
  • следует воздержаться от графических элементов в карте сайта, чтобы не замедлять ее загрузку;
  • карта сайта должна соответствовать структуре самого сайта;
  • ссылка на нее  должна располагаться на видном месте.

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

И в заключение этой статьи позволю дать несколько практических советов при составлении пользовательской карты сайта:

  1. Карту надо составлять так, чтобы пользователь мог найти любой документ сайта.
  2. Все данные должны быть иерархически выстроены. Находясь в какой-либо категории посетитель должен видеть все ее записи.
  3. Ссылки на записи должны предлагаться в текстовой форме и представлять собой название статьи.
  4. Не надо вводить в карту графические элементы.
  5. Карта должны быть доступна с каждой страницы сайта, поэтому логичнее всего включать ее в меню, футер или сайтбар.
  6. Если есть возможность, то можно включить короткие описания каждого раздела, чтобы повысить заинтересованность посетителей посмотреть его.

Надеюсь, что созданная html карта поможет улучшить пользовательские факторы сайта и не разочарует посетителей.

Автор DiviLancer

Автор блога - DiviLancer Леонид

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

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

Элементы кода в записи

Элементы кода в записи

Каждый блогер, пишущий на темы WordPress или автор технического контента должны отображать код html на странице блога. Это может быть головной болью, потому что не все темы поддерживают в своих редакторах такую возможность. Премиальная тема Divi является как раз исключением. Но об этом ниже.

 

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

Рассмотрим плагин SyntaxHighlighter Evolved, который служит именно для этой цели. Установка и активация плагина обычны, найти его можно на штатном репозитории WordPress.org. Единственно, надо удостовериться, что скачивается именно тот плагин, который необходимо. Автором SyntaxHighlighter Evolved является Alex Mills (Viper007Bond). Существует много плагинов с аналогичными именами и функциями, но я рекомендую именно его, как надежного помощника.
Плюс SyntaxHighlighter Evolved идет со специализированным блоком для редактора Гутенберг (при работе с Divi он тоже может пригодится, потому что Divi Builder работает теперь с Гутенбергом). Не говоря уже о многих параметрах, которые позволяют просто и быстро решить задачу  отображения кода в записи.

Плагин SyntaxHighlighter Evolved

Установка плагина

После установки плагина в консоли в меню Настройки появляется новый объект SyntaxHighlighter.

Щелкнув по нему переходим к настройке плагина.

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

Страница настроек для плагина относительно проста.

Практически все настройки касаются внешнего вида того, как код отображен на Вашем сайте.

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

Настройка плагина
Настройка плагина SyntaxHidhlighter
  1. Версия Highlighter — выбираем 3
  2. Показывать номера строк — показывать
  3. Отступ вложенных строк — оставляем по умолчанию 4.

Все остальные настройки оставляем по умолчанию.

Можно изменить цветовую гамму, если не нравится дефолтная тема.

Посмотреть что получится после «экспериментов» с цветовыми гаммами можно на этой же странице в окне Предпросмотр.

Настройка внешнего вида плагина SyntaxHidhlighter

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

Версия Highlighter, номера и отступ вложенных строк

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

Обе версии безопасны, однако, каждая из них предлагает определенные функции , а другая не делает этого (во время написания этой записи, по крайней мере).

Если пользователи, которые будут читать пост и копировать код для себя, то версия 3.x будет предпочтительнее. Однако, если пост больше для чтения и отображения на дисплее, то версия 2.x может лучше подойти.

Второе — номера строк.

Если код вставляется с какими-то учебными целями, то нумерация строк необходима.

Или если код большой, то и в этом случае без номеров не обойтись.

Номера строк в плагине SyntaxHighlighter Evolved
Без номеров строк в плагине SyntaxHighlighter Evolved

Однако, если есть короткие отрывки кода, то нет никакой потребности постоянно маркировать строки.

Удаление нумерации может очистить вид кода и сделать его более читабельным.

Особой разницы выводить код с номерами или без них нет, это дело каждого автора.

И затем существует размер вкладки. Значения по умолчанию опции равно 4, но можно изменить его на любое число. Никакого значения это не имеет.

Код и шорткоды

Если прокрутить к нижней части страницы настроек, то можно увидеть большое количество шорткодов параметров.

Эти шорткоды необходимы для выделения фрагментов кода. Обычным пользователям, скорее всего, это не пригодится.

Параметры шорткодов

Использование плагина в Divi

Использовать плагин в теме Divi можно в тех модулях, в которых вообще возможно использование шорткодов. Чаще всего используется модуль Текст. При этом возможно использовать как в визуальном редакторе Divi Builder или в классическом редакторе. Если использовать модуль Текст, то предпочтительнее использовать вкладку Текст, а не Визуальный.  Так удобнее контролировать символы форматирования, которые могут быть случайно внесены в текст при копировании из какого-то внешнего источника (например из редактора Word). А во вкладке Текст эти символы хорошо видны.

Для внесения кода, он оборачивается в конструкцию

[рhр] код, который необходимо отобразить [/рhр] или смотри рисунок справа.

Данным плагином можно выводить на экран не только коды, но и любую информацию, которую надо каким-то образом выделить.

Использование плагина SyntaxHighlighter Evolved в теме Divi

 Результат выполнения данного шорткода показана ниже:

 код, который необходимо отобразить 

Использование модуля Код в визуальном конструкторе Divi Builder

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

Находясь в строке конструктора Divi Builder добавляем новый модуль.

Элементы кода в записи | EAN1QN5

Из готовых модулей выбираем модуль Код.

Вставка модуля Код

В открывшемся окне вводим требуемый код. В рассматриваемом примере это будет

Вставка модуля Код

Результат, так сказать налицо… то есть код на странице

 код, который надо отобразить 
Элементы кода в записи | foto avtora 1

Автор блога — DiviLancer Леонид

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

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