WP BOX
Hansel & Gretel
Баннер

Хлебные Крошки Продвинутого Уровня в WordPress

В этой секции:

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

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

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

Почему элемент называется хлебные крошки

Название пришло из сказки братьев Гримм «Гензель и Гретель», в которой дети уходя в лес, оставляли себе след из хлебных крошек, чтобы вернуться домой. На сайтах самый первый элемент хлебных крошек — это главная страница, которую по-английски все же называют «домашней страницей» или коротко «Home», то есть «Дом».

Где применяют хлебные крошки

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

Исключения

  • Главная страница: с нее переход будет только на себя и смысла в хлебных крошках нет
  • Тематические посадочные страницы на внутренних страницах: они могут быть в другом дизайне и на другую тему, и не иметь отношения к главной странице вообще
  • Страницы второго уровня: тут по желанию. с одной стороны хлебные крошки ведут только на главную, что не очень полезно, с другой стороны такой UI элемент сразу дает понять что это страница второго уровня, что может быть ценно в некоторых случаях

Сочетание хлебных крошек и адреса страниц

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

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

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

Генерация хлебных крошек

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

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

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

<?php
$object = get_queried_object();

if ($object instanceof WP_Post) {
	$object_type = 'post-type';
	$current_page_title = $object->post_title;

	if ($object->post_type !== 'page') {
    //
	} else {
    //
	}
} else if ($object instanceof WP_Term) {
	//
} else if ($object instanceof WP_User) {
	//
} else {
	//
}

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

Полную реализацию хлебных крошек WP BOX можно увидеть в коде проекта.

Хлебные крошки и микроразметка

Имеет смысл добавить в верстку дополнительные атрибуты микроразметки, они помогают поисковым системами лучше понять, что это за элемент, и возможно как-то косвенно влияют на SEO. По-крайней мере, правильно размеченные хлебные крошки, как и некоторые другие выводятся в UI Google Search Console в разделе Enhancements (Улучшения). Пример из другого моего проекта:

Breadcrumbs in Google Search Console
Хлебные Крошки в Google Search Console

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

Код хлебных крошек с микроразметкой можно проверить в валидаторе разметки — https://validator.schema.org/.

Микроразметка немного усложняет структуру, так как потребуется добавить атрибуты и мету. HTML элемент не может иметь несколько одинаковых атрибутов, поэтому придется сделать такую структуру, в которой разные itemprop атрибуты одного элемента, реализованы через вложенные <meta> и <span> элементы.

<nav itemscope="" itemtype="http://schema.org/BreadcrumbList">
 <ul>
  <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
   <a itemprop="item">
    <span itemprop="name"> </span>
   </a>
   <meta itemprop="position">
  </li>
 </ul>
</nav>