Что такое хлебные крошки на сайте wordpress

«Хлебные крошки» для WordPress без использования плагина

«Хлебные крошки» — это важный элемент навигации веб-сайта, который повышает его юзабилити. Особенно это касается сайтов со сложной структурой. Я, к сожалению (а, может, и не к сожалению), не использую их на большинстве своих сайтов, возможно, потому, что у них слишком простая структура (для такого сайта, как этот, они, вроде бы, и не нужны). Когда я решаю какую-либо задачу на WordPress-сайте, то всегда стараюсь обходится без плагинов, где это бывает возможно. Зачастую одна и та же задача может быть решена с меньшим количеством кода и бывает менее ресурсоемкой по сравнению с применением плагинов. В Интернете я находил разные варианты реализации «хлебных крошек» без использования плагинов, но ни один из них меня не устроил, поскольку все они не показывали полную цепочку ссылок. Поэтому я создал свою функцию «хлебных крошек» для WordPress. И в данном посте хочу поделиться этой функцией с вами.

Особенности функции

Отображается полная цепочка ссылок до текущей страницы. Например, если текущая страница находится в рубрике второго уровня, то цепочка будет выглядеть следующим образом: Главная > Рубрика > Подрубрика > Название статьи Во всех решениях, которые я встречал (за исключением плагинов), такая цепочка выглядела вот так: Главная > Подрубрика > Название статьи одно звено потеряно. Аналогично у меня выглядят и «крошки» для страниц. К примеру, для страницы 3-го уровня вложенности цепочка будет такой: Главная > Страница 1-го уровня > Страница 2-го уровня > Страница 3-го уровня
«Хлебные крошки» выводятся для следующих типов страниц WordPress-сайта:
- постраничная навигация с главной страницы (вида site.ru/page/2/ );
- архив рубрики;
- архив тега;
- архив за день;
- архив за месяц;
- архив за год;
- архив автора;
- произвольный тип записи;
- страница;
- пост;
- результаты поиска;
- страница с ошибкой 404.
Функция «Хлебные крошки» для WordPress (обновлено: 03.03.2019)
```
/* * "Хлебные крошки" для WordPress * автор: Dimox * версия: 2019.03.03 * лицензия: MIT */ function dimox_breadcrumbs() < /* === ОПЦИИ === */ $text['home'] = 'Главная'; // текст ссылки "Главная" $text['category'] = '%s'; // текст для страницы рубрики $text['search'] = 'Результаты поиска по запросу "%s"'; // текст для страницы с результатами поиска $text['tag'] = 'Записи с тегом "%s"'; // текст для страницы тега $text['author'] = 'Статьи автора %s'; // текст для страницы автора $text['404'] = 'Ошибка 404'; // текст для страницы 404 $text['page'] = 'Страница %s'; // текст 'Страница N' $text['cpage'] = 'Страница комментариев %s'; // текст 'Страница комментариев N' $wrap_before = ''; // открывающий тег обертки $wrap_after = '
'; // закрывающий тег обертки $sep = ' '; // разделитель между "крошками" $before = 'post_parent : ''; $home_link = sprintf( $link, $home_url, $text['home'], 1 ); if ( is_home() || is_front_page() ) < if ( $show_on_home ) echo $wrap_before . $home_link . $wrap_after; >else < $position = 0; echo $wrap_before; if ( $show_home_link ) < $position += 1; echo $home_link; >if ( is_category() ) < $parents = get_ancestors( get_query_var('cat'), 'category' ); foreach ( array_reverse( $parents ) as $cat ) < $position += 1; if ( $position >1 ) echo $sep; echo sprintf( $link, get_category_link( $cat ), get_cat_name( $cat ), $position ); > if ( get_query_var( 'paged' ) ) < $position += 1; $cat = get_query_var('cat'); echo $sep . sprintf( $link, get_category_link( $cat ), get_cat_name( $cat ), $position ); echo $sep . $before . sprintf( $text['page'], get_query_var( 'paged' ) ) . $after; >else < if ( $show_current ) < if ( $position >= 1 ) echo $sep; echo $before . sprintf( $text['category'], single_cat_title( '', false ) ) . $after; > elseif ( $show_last_sep ) echo $sep; > > elseif ( is_search() ) < if ( get_query_var( 'paged' ) ) < $position += 1; if ( $show_home_link ) echo $sep; echo sprintf( $link, $home_url . '?s=' . get_search_query(), sprintf( $text['search'], get_search_query() ), $position ); echo $sep . $before . sprintf( $text['page'], get_query_var( 'paged' ) ) . $after; >else < if ( $show_current ) < if ( $position >= 1 ) echo $sep; echo $before . sprintf( $text['search'], get_search_query() ) . $after; > elseif ( $show_last_sep ) echo $sep; > > elseif ( is_year() ) < if ( $show_home_link && $show_current ) echo $sep; if ( $show_current ) echo $before . get_the_time('Y') . $after; elseif ( $show_home_link && $show_last_sep ) echo $sep; >elseif ( is_month() ) < if ( $show_home_link ) echo $sep; $position += 1; echo sprintf( $link, get_year_link( get_the_time('Y') ), get_the_time('Y'), $position ); if ( $show_current ) echo $sep . $before . get_the_time('F') . $after; elseif ( $show_last_sep ) echo $sep; >elseif ( is_day() ) < if ( $show_home_link ) echo $sep; $position += 1; echo sprintf( $link, get_year_link( get_the_time('Y') ), get_the_time('Y'), $position ) . $sep; $position += 1; echo sprintf( $link, get_month_link( get_the_time('Y'), get_the_time('m') ), get_the_time('F'), $position ); if ( $show_current ) echo $sep . $before . get_the_time('d') . $after; elseif ( $show_last_sep ) echo $sep; >elseif ( is_single() && ! is_attachment() ) < if ( get_post_type() != 'post' ) < $position += 1; $post_type = get_post_type_object( get_post_type() ); if ( $position >1 ) echo $sep; echo sprintf( $link, get_post_type_archive_link( $post_type->name ), $post_type->labels->name, $position ); if ( $show_current ) echo $sep . $before . get_the_title() . $after; elseif ( $show_last_sep ) echo $sep; > else < $cat = get_the_category(); $catID = $cat[0]->cat_ID; $parents = get_ancestors( $catID, 'category' ); $parents = array_reverse( $parents ); $parents[] = $catID; foreach ( $parents as $cat ) < $position += 1; if ( $position >1 ) echo $sep; echo sprintf( $link, get_category_link( $cat ), get_cat_name( $cat ), $position ); > if ( get_query_var( 'cpage' ) ) < $position += 1; echo $sep . sprintf( $link, get_permalink(), get_the_title(), $position ); echo $sep . $before . sprintf( $text['cpage'], get_query_var( 'cpage' ) ) . $after; >else < if ( $show_current ) echo $sep . $before . get_the_title() . $after; elseif ( $show_last_sep ) echo $sep; >> > elseif ( is_post_type_archive() ) < $post_type = get_post_type_object( get_post_type() ); if ( get_query_var( 'paged' ) ) < $position += 1; if ( $position >1 ) echo $sep; echo sprintf( $link, get_post_type_archive_link( $post_type->name ), $post_type->label, $position ); echo $sep . $before . sprintf( $text['page'], get_query_var( 'paged' ) ) . $after; > else < if ( $show_home_link && $show_current ) echo $sep; if ( $show_current ) echo $before . $post_type->label . $after; elseif ( $show_home_link && $show_last_sep ) echo $sep; > > elseif ( is_attachment() ) < $parent = get_post( $parent_id ); $cat = get_the_category( $parent->ID ); $catID = $cat[0]->cat_ID; $parents = get_ancestors( $catID, 'category' ); $parents = array_reverse( $parents ); $parents[] = $catID; foreach ( $parents as $cat ) < $position += 1; if ( $position >1 ) echo $sep; echo sprintf( $link, get_category_link( $cat ), get_cat_name( $cat ), $position ); > $position += 1; echo $sep . sprintf( $link, get_permalink( $parent ), $parent->post_title, $position ); if ( $show_current ) echo $sep . $before . get_the_title() . $after; elseif ( $show_last_sep ) echo $sep; > elseif ( is_page() && ! $parent_id ) < if ( $show_home_link && $show_current ) echo $sep; if ( $show_current ) echo $before . get_the_title() . $after; elseif ( $show_home_link && $show_last_sep ) echo $sep; >elseif ( is_page() && $parent_id ) < $parents = get_post_ancestors( get_the_ID() ); foreach ( array_reverse( $parents ) as $pageID ) < $position += 1; if ( $position >1 ) echo $sep; echo sprintf( $link, get_page_link( $pageID ), get_the_title( $pageID ), $position ); > if ( $show_current ) echo $sep . $before . get_the_title() . $after; elseif ( $show_last_sep ) echo $sep; > elseif ( is_tag() ) < if ( get_query_var( 'paged' ) ) < $position += 1; $tagID = get_query_var( 'tag_id' ); echo $sep . sprintf( $link, get_tag_link( $tagID ), single_tag_title( '', false ), $position ); echo $sep . $before . sprintf( $text['page'], get_query_var( 'paged' ) ) . $after; >else < if ( $show_home_link && $show_current ) echo $sep; if ( $show_current ) echo $before . sprintf( $text['tag'], single_tag_title( '', false ) ) . $after; elseif ( $show_home_link && $show_last_sep ) echo $sep; >> elseif ( is_author() ) < $author = get_userdata( get_query_var( 'author' ) ); if ( get_query_var( 'paged' ) ) < $position += 1; echo $sep . sprintf( $link, get_author_posts_url( $author->ID ), sprintf( $text['author'], $author->display_name ), $position ); echo $sep . $before . sprintf( $text['page'], get_query_var( 'paged' ) ) . $after; > else < if ( $show_home_link && $show_current ) echo $sep; if ( $show_current ) echo $before . sprintf( $text['author'], $author->display_name ) . $after; elseif ( $show_home_link && $show_last_sep ) echo $sep; > > elseif ( is_404() ) < if ( $show_home_link && $show_current ) echo $sep; if ( $show_current ) echo $before . $text['404'] . $after; elseif ( $show_last_sep ) echo $sep; >elseif ( has_post_format() && ! is_singular() ) < if ( $show_home_link && $show_current ) echo $sep; echo get_post_format_string( get_post_format() ); >echo $wrap_after; > > // end of dimox_breadcrumbs() 
```
Функцию необходимо поместить в файл functions.php вашей WordPress-темы. После этого в то место шаблона, где хотите выводить «хлебные крошки», добавьте следующий код:

Единственное, что теперь останется сделать — оформить их с помощью CSS. Для этого к блоку «хлебных крошек» предусмотрен класс .breadcrumbs , для разделителя — .breadcrumbs__separator а для текущей «крошки» — .breadcrumbs__current .

Что такое хлебные крошки и как сделать их на сайте

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

Вместе с Мартой Гофман, SEO-специалистом digital-агентства «Директ Лайн», разберёмся, что такое «хлебные крошки», зачем они нужны в SEO и какие бывают.

Также покажем, как сделать «хлебные крошки» на сайте вручную и с помощью плагинов для WordPress, Joomla, Opencart и других CMS. Расскажем, как проверить правильность настройки навигации и какие ошибки часто допускают в «хлебных крошках».

Что такое «хлебные крошки» (ХК)

«Хлебные крошки» (от англ. breadcrumbs) — это средство навигации на сайте. Оно представляет собой цепочку ссылок, по которой движется пользователь. Цепочка начинается на главной странице сайта и заканчивается в том разделе, в котором на данный момент находится пользователь. По цепочке пользователь может вернуться обратно на любой шаг своего пути.

Почему они так называются

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

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

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

Также «хлебные крошки» можно встретить в сниппетах. Например, в Яндексе они располагаются под заголовком:

А в Google — над заголовком:

Зачем «хлебные крошки» в SEO

Они выполняют две основные функции: улучшение пользовательского опыта и положительное влияние на SEO.

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

«Хлебные крошки» участвуют и в SEO-продвижении:
- Улучшают поведенческие метрики
«Хлебные крошки» помогают пользователю проще ориентироваться на сайте, за счёт чего увеличиваются показатели поведенческих метрик, например время, проведённое на сайте, или глубина просмотра.
- Упрощают работу поисковым роботам
Роботам поисковых систем Яндекс и Google будет легче понять структуру и содержание страниц сайта, а в процессе сканирования — проще переходить к странице на уровень выше.
- Формируют правильную перелинковку
Такая перелинковка увеличивает ссылочный вес верхних уровней за счёт нижних. Таким образом поисковые роботы понимают, что чем больше вес страницы, тем она важнее.
- Создают привлекательный сниппет
«Хлебные крошки» делают сниппет человекочитаемым, а за счёт узнаваемых ключевых слов повышают CTR — количество переходов из поисковой выдачи.

Каким сайтам необходимы

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

«Хлебные крошки» могут также использоваться на информационных сайтах — форумах, порталах, блогах.

Можно не создавать «хлебные крошки» для одноуровневых (одностраничных), сайтов с линейной структурой, без уровней вложенности. Для лендингов, например, где продаётся один товар или услуга, «хлебные крошки» не нужны:

Основные виды «хлебных крошек»

Навигационная цепочка может быть оформлена по-разному. Рассмотрим самые распространённые виды.

Линейные

Этот вид «хлебных крошек» очень распространён, так как является простым и удобным среди остальных способов навигации: он отражает путь от главной до текущей страницы.

С выпадающим списком

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

Динамические

Принцип таких «хлебных крошек» заключается в том, что их формирование происходит исходя из пути пользователя. Другими словами, в «крошках» отражается путь к разделу не через иерархию страниц, а так, как пользователь к нему дошёл. Товар при этом может находиться в нескольких разделах сайта сразу.

Например, на сайте pichshop.ru есть категории товаров «Подарки сестре» и «Подарки подруге» — товар «экобутылка с фильтром» находится одновременно в двух этих категориях. Поэтому «хлебные крошки» до страницы этого товара будут выглядеть по-разному в зависимости от того, как мы попали на эту страницу.

Вот, например, мы пришли через раздел «Сестре»:

А теперь — через раздел «Подруге»:

Как создать «хлебные крошки»

Вручную

Вручную «хлебные крошки» прописываются через PHP-код — тут лучше воспользоваться помощью программиста.

Универсального способа создания «крошек» для сайтов на разных движках нет, и для начала нужно понять, на каком движке сделан сайт. Всё дело в том, что в разных CMS разные разделы, куда нужно вставлять готовый PHP‑код с «крошками».

Приводим усреднённый алгоритм создания breadcrumbs:
1. Берём URL текущей страницы, где нужно отобразить «хлебные крошки», к примеру http://mysite.com/catalogue/svetilniki.
2. Разбираем его на части — каждая часть URL разделена слешем («/»). В нашем случае это:
- корень сайта: mysite.com;
- категория сайта: catalogue;
- объект категории: svetilniki.
То есть новые части добавляются в URL, когда мы движемся по сайту от главной страницы в категории и объекты категорий сайта.
1. Каждой части URL даём название элемента «хлебных крошек» и составляем для неё свой URL. Например, для части mysite.com в «крошках» можно дать название «Главная» с URL http://mysite.com. Для части catalogue элемент «крошек» может называться «Каталог» с URL http://mysite.com/catalogue/ — и так далее.
2. Записываем название элементов и их URL в отдельную конструкцию (массив) для передачи в HTML-шаблон.
3. Передаём полученные данные в HTML-шаблон и отображаем их там.
Далее нужно посмотреть, как отображаются «хлебные крошки» на сайте, перейдя по URL, где создавались «крошки».

Вот на что нужно обратить внимание при проверке:
- как выглядит цепочка: не наезжает ли одна ссылка на другую;
- правильно ли выстроена иерархия: за главной страницей идёт категория сайта, затем объект категории, а не наоборот;
- корректные ли ссылки открываются при нажатии на каждый элемент крошек.
С помощью плагинов для CMS

Рассмотрим, как создать «хлебные крошки» с помощью дополнительных плагинов популярных CMS.

Здесь обычно используют два плагина: Breadcrumb и YoastSEO. Первый заточен именно на создание «хлебных крошек». Второй ставится для SEO-оптимизации сайта в целом и содержит в себе настройку «хлебных крошек».

1. Устанавливаем плагин. Сделать это можно прямо через административную панель WordPress. Для этого переходим в Плагины → Breadcrumb → нажимаем «Активировать».

2. Переходим в раздел Breadcrumb — здесь настраивается отображение «хлебных крошек»:

3. Переходим в Shortcodes и копируем PHP‑функцию:

4. В административной панели нажимаем «Внешний вид» → «Редактор тем» → выбираем файл для вставки → вставляем под хедером → нажимаем «Обновить файл».

После обновления можно проверить, как выглядят «хлебные крошки» на сайте.

Теперь нужно настроить отображение ХК в поисковой выдаче. Для этого понадобится плагин YoastSEO. Пошагово:

1. В административной панели WordPress переходим во вкладку «SEO» → «Отображение в поисковой выдаче» → «Хлебные крошки» → переключаем в положение «Включено».

2. Заполняем поля: указываем значок разделителя (»), отображение главной страницы в ХК, архивы, 404 страницы в ХК и другие параметры. Затем нажимаем «Сохранить изменения».

Но сейчас ХК не отобразятся на сайте, так как WordPress не знает, где их выводить.

3. Чтобы ХК отобразились на сайте, нужно скопировать код:

4. Идём во вкладку «Внешний вид» → «Редактор тем» → переходим в файл темы → ищем место, где нужно вывести ХК, например после тега H1 → вставляем код, который скопировали на предыдущем шаге:

Разместить «хлебные крошки» можно внутри файла single.php и/или page.php прямо над заголовком страницы. Ещё вариант — просто вставить код в header.php в самый конец.

5. Нажимаем «Обновить файл». В итоге в поисковой выдаче у страницы появятся «хлебные крошки».

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

1. В административной панели Joomla заходим в Расширения → Модули → нажимаем кнопку «Создать новый»:

2. Выбираем модуль с названием «Навигатор сайта»:

3. Проходим поочерёдно все поля настроек «хлебных крошек» и указываем нужное. Рекомендуем сделать, как на скрине:

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

4. Сохраняем настройки и проверяем «хлебные крошки» на сайте.

Для CMS Opencart навигационную цепочку создают через патч Fix Breadcrumbs, с помощью которого можно управлять «хлебными крошками» и не допускать циклических ссылок в меню навигации.

Циклическая ссылка Внутренняя ссылка, ведущая на ту же страницу, где она сама расположена.

Как это сделать:
1. Скачиваем модуль по ссылке, загрузится архив fix‑breadcrumbs‑3x.ocmod.zip.
2. Загружаем скачанный архив fix‑breadcrumbs‑3x.ocmod.zip в админку сайта через «Расширения» → «Установщик расширений».
3. Обновляем кэш модификаций (нажимаем кнопку «Обновить») в «Расширения» → «Модификации».
4. Обновляем кэш шаблона (theme cache) через «Панель инструментов» → «Настройки разработчика».
Теперь модуль будет убирать ссылку последнего уровня в «хлебных крошках».

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

В плагинах доступны функции:
- вывод всплывающего меню при клике или при наведении;
- возможность редактирования стилей всплывающего меню;
- реализована микроразметка «хлебных крошек» (Schema.org);
- есть выбор разделителя;
- возможность задать иконку или изменить текст ссылки для главной страницы;
- и многое другое.
Как добавить ХК через плагин «Навигация в „хлебных крошках“»:
1. Оплачиваем и устанавливаем плагин (нужно быть авторизованным в системе Webasyst).
2. Чтобы настроить «хлебные крошки» в Webasyst, нужно учитывать особенности каждой отдельной темы дизайна. Подробная инструкция от разработчика для всех тем .
Для корректной работы плагина нужно поменять код дефолтных ХК. В разных темах дизайна они могут находиться в разных файлах, чаще всего в шаблоне main.html.

В 1С‑Битрикс нет отдельного плагина, который отвечает только за «хлебные крошки». По умолчанию в Битриксе используется механизм управления названиями пунктов навигационной цепочки через свойства разделов.

Заголовок раздела сайта задаётся в служебном файле .section.php. Если же хотите упростить создание «хлебных крошек» на 1С Битрикс, можно установить комплексный модуль SEO‑Шаман. Стоимость модуля — 4 900 рублей, перед покупкой его можно протестировать бесплатно в течение 7 дней.

SEO‑Шаман позволяет легко управлять заголовком в цепочке навигации: не изменять (оставить как есть), изменить текущий заголовок, добавить (дополнить цепочку указанным заголовком) и другое.

Интерфейс настройки «хлебных крошек» в модуле:

В CMS Moguta также есть свой бесплатный плагин для создания «хлебных крошек».

Чтобы подключить этот плагин, нужно:

1. Войти в административную панель Moguta → в правом верхнем углу нажать «Маркетплейс» → «Плагины»:

2. Найти плагин «Хлебные крошки» через поисковую строку, скачать и активировать через тумблер:

3. Далее нужно скопировать шорткод [brcr], перейти в «Настройки сайта» → «Шаблоны страниц» → вставить шорткод в файлах темы views/catalog.php и views/product.php.

4. Нажать «Сохранить». «Хлебные крошки» должны появиться на сайте.

Как настроить микроразметку «хлебных крошек»

Чтобы вывести «хлебные крошки» в поисковую выдачу, необходимо настроить специальную микроразметку .

Благодаря микроразметке «хлебные крошки» могут формироваться в расширенном сниппете в поисковых системах, что будет положительно влиять на CTR в выдаче. Кроме того, поисковым роботам будет проще ориентироваться в структуре сайта и индексировать его страницы.

Для отображения «хлебных крошек» в сниппетах Яндекса и Google рекомендуется использовать формат микроразметки Microdata или JSON‑LD. Эти форматы подходят для обоих поисковых систем. Подробнее о создании микроразметки для поисковых систем можно почитать в справках Яндекса и Google.

Пример кода микроразметки в разделе сайта электроники: Роботы‑пылесосы → Xiaomi

После добавления микроразметки в выдаче появится вот такой сниппет:

Как проверить правильность настройки

Проверить правильность настройки «хлебных крошек» можно специальным инструментом — валидатором schema.org от Google. С его помощью возможно проверить как часть кода, который ещё никуда не вставлен, так и существующую микроразметку на сайте по URL.

Алгоритм проверки микроразметки:
1. Вставьте ссылку/фрагмент кода, который нужно проверить:
2. Нажмите «Запустить тест».

3. После проверки валидатор выдаст отчёт:

4. Результаты покажут наличие ошибок и предупреждений в разметке. В идеале их не должно быть.

Если после запуска теста валидатор показывает ошибки или предупреждения, то найти их можно в Google Search Console в разделе «Улучшения» → «Строки навигации»:

Как улучшить микроразметку

Расположите «хлебные крошки» в верхнем левом углу

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

Соблюдайте общую стилистику

Если на всём сайте используется минималистичный шрифт без засечек, а в «хлебных крошках» слишком вычурный декоративный, это будет смотреться странно и, скорее всего, будет отвлекать пользователя от остального контента на странице.

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

Сделайте шрифт «хлебных крошек» на 1–2 пикселя меньше основного

Навигация по «хлебным крошкам» не должна занимать слишком много места на странице. Обычно веб‑дизайнеры делают «хлебные крошки» на 1–2 пикселя меньше остального текста на странице, чтобы они не отвлекали пользователя от основного контента.

Пример «хлебных крошек» с уменьшенным шрифтом на сайте lamoda.ru:

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

Сделайте текущую страницу в «хлебных крошках» некликабельной

Текущая страница в «хлебных крошках» не должна быть кликабельной, иначе это приведёт к большому количеству циклических ссылок на сайте и негативно скажется на SEO.

Используйте разделители между элементами

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

Например, символ «больше» (>):

Оптимизируйте «хлебные крошки» для мобильных устройств

Длинная цепочка «хлебных крошек» не уместится на экране смартфона. Более того, из‑за неё основной контент страницы сдвинется вниз, что неудобно для пользователя — придётся скроллить, чтобы прочитать страницу. Поэтому для мобильной версии сайта нужно уменьшить количество ссылок в «хлебных крошках».

Что тогда размещать в строке навигации, если всё не умещается?

В исследовании NN Group NN Group говорят, что для некоторых страниц может быть достаточно одной «хлебной крошки», которая будет вести на страницу уровнем выше.

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

Такую навигацию использует магазин hoff.ru:

Ещё один вариант оптимизации «хлебных крошек» от UX‑исследователей Baymard Institute: они предлагают использовать горизонтальную прокрутку.

Выглядит это так:

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

Какой из вариантов «хлебных крошек» выбрать, зависит от целей вашего сайта и от того, что важно для ваших посетителей. Понять это можно только через A/B‑тестирование.

Чего избегать при создании «хлебных крошек»
- Чрезмерное употребление ключевых фраз в «хлебных крошках»
Подобная переоптимизация может привести к штрафам от поисковых систем за переспам. Об этом говорится в справке Яндекса (раздел «Использование SEO‑текстов») и в справке Google (раздел «Скрытый текст и/или избыточное количество ключевых слов»).
- Отсутствие основного меню
Верхнее навигационное меню на сайте всё равно должно быть, несмотря на «хлебные крошки». Если верхнее меню отсутствует, это может запутать пользователя и усложнить навигацию.

Например, посетитель интернет‑магазина находится в категории «Шкафы‑купе», а ему нужно перейти в категорию «Диваны».

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

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

Что запомнить
1. «Хлебные крошки» необходимо использовать на многоуровневых сайтах: в интернет‑магазинах, блогах и прочих. На одностраничниках делать ХК не нужно.
2. В мобильной версии сайта также нужны «хлебные крошки». Важно, чтобы они не занимали больше одной строки и не загораживали основной контент страницы. Для этого можно оформить ХК в виде горизонтальной прокрутки или оставить одну «крошку» со ссылкой на верхнюю страницу в иерархии сайта.
3. Перед ручной настройкой ХК узнайте, на какой CMS построен сайт и есть ли плагины для этой CMS. Это упростит создание ХК.
4. Для отображения «хлебных крошек» в сниппетах Яндекса и Google рекомендуется использовать формат микроразметки Microdata или JSON‑LD.
5. На главной «хлебные крошки» не нужны. Страница будет ссылаться на саму себя, а это плохо для SEO.
6. Чтобы посетители сайта понимали, что перед ними «хлебные крошки» и они кликабельны, их нужно подчёркивать и разделять символами «>», «/» или «—».
7. В оформлении ХК важно придерживаться общей стилистики сайта: используйте тот же шрифт, что и на всём сайте, выбирайте приглушённые цвета. Также шрифт в «крошках» можно сделать на 1–2 пикселя меньше, чем остальной текст страницы.
8. «Хлебные крошки» — это дополнение к навигации для пользователя. Не заменяйте ими навигацию в основном верхнем меню сайта, чтобы не запутать посетителей.
Как сделать хлебные крошки

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

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

Для того, чтобы добавить хлебные крошки на сайт на WordPress вам не нужен специальный плагин «хлебные крошки», не нужно самому долго и мучительно придумывать как «сделать» хлебные крошки на сайте, играясь с условными тегами WordPress, а достаточно скопировать и вставить эту строчку в то место в шаблоне, куда вам нужно.
```
true_breadcrumbs();
```
Понятно, что не спешите сохранять файл (особенно не на тестовом сайте), ведь этой функции у вас сейчас нет и вы столкнётесь с ошибкой 500.

Функция хлебных крошек

Теперь распишем саму функцию, сразу говорю, готовьтесь, что будет много кода.

Дело в том, что я выкладываю полностью законченный и 100% рабочий вариант. Здесь учтены все типы страниц, которые только могут быть на WordPress: посты, страницы, вложенные страницы(поддерживается любое количество уровней вложенности), рубрики, подрубрики (неограниченное количество вложений), теги, архивы, страницы поиска, страницы с записями какого-либо одного автора.

Давайте сначала начнём с относительно несложного варианта хлебных крошек, и чуть ниже в этом же уроке я вам расскажу, как их модифицировать под какую-то свою определённую задачу. Для начала добавьте этот код functions.php :
```
function true_breadcrumbs(){ // получаем номер текущей страницы $page_num = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1; $separator = ' / '; // разделяем обычным слэшем, но можете чем угодно другим // если главная страница сайта if( is_front_page() ){ if( $page_num > 1 ) { echo ' . site_url() . '">Главная' . $separator . $page_num . '-я страница'; } else { echo 'Вы находитесь на главной странице'; } } else { // не главная echo ' . site_url() . '">Главная' . $separator; if( is_single() ){ // записи the_category( ', ' ); echo $separator; the_title(); } elseif ( is_page() ){ // страницы WordPress the_title(); } elseif ( is_category() ) { single_cat_title(); } elseif( is_tag() ) { single_tag_title(); } elseif ( is_day() ) { // архивы (по дням) echo ' . get_year_link( get_the_time( 'Y' ) ) . '">' . get_the_time( 'Y' ) . '' . $separator; echo ' . get_month_link( get_the_time( 'Y' ), get_the_time( 'm' ) ) . '">' . get_the_time( 'F' ) . '' . $separator; echo get_the_time('d'); } elseif ( is_month() ) { // архивы (по месяцам) echo ' . get_year_link( get_the_time( 'Y' ) ) . '">' . get_the_time( 'Y' ) . '' . $separator; echo get_the_time('F'); } elseif ( is_year() ) { // архивы (по годам) echo get_the_time( 'Y' ); } elseif ( is_author() ) { // архивы по авторам global $author; $userdata = get_userdata( $author ); echo 'Опубликовал(а) ' . $userdata->display_name; } elseif ( is_404() ) { // если страницы не существует echo 'Ошибка 404'; } if ( $page_num > 1 ) { // номер текущей страницы echo ' (' . $page_num . '-я страница)'; } } }
```
- 4 – при помощи get_query_var() мы определяем, находимся ли мы на странице постраничной навигации, знаю, что это можно сделать при помощи is_paged(), но нам же ведь ещё и номер страницы понадобится.
- 6 – разделитесь между ссылками в хлебных я решил записать в переменную, вы можете использовать что угодно, например стрелки → → , запись его в переменную позволит нам быстро его поменять, если захотим.
- 9 – функция, а точнее условный тег is_front_page() возвращает true , если мы находимся на главной странице, вне зависимости от того, какую роль она выполняет.
- 12 , 19 – функция site_url() динамически возвращает ссылку на главную страницу сайта.
- is_single(), is_page(), is_category(), is_tag(), is_day(), is_month(), is_year(), is_author(), is_404() – различные условные теги, позволяющие легко определить, на каком типе страницы мы в данный момент находимся.
- 25 – я использовал функцию the_category() для вывода списка рубрик для текущей записи через запятую. Обратите внимание, что эта функция не распределяет рубрики в зависимости от их иерархии. О том, как вывести их с соблюдением порядка иерархии, читайте ниже.
- 25 , 29 – функция the_title() отлично подходит для того, чтобы вывести заголовок текущей записи, страницы или записи произвольного типа.
- single_cat_title() и single_tag_title() – для вывода название текущей рубрики или метки соответственно.
Как в хлебные крошки добавить родительские страницы?

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

Это можно хорошо наблюдать в метабоксе Атрибуты страницы:

Если вы планируете отображать в своих хлебных крошках родительские страницы тоже, то вам нужно немного модифицировать соответствующие строчки в коде выше:
```
global $post; // если у текущей страницы существует родительская if ( $post->post_parent ) { $parent_id = $post->post_parent; // присвоим в переменную $breadcrumbs = array(); while ( $parent_id ) { $page = get_page( $parent_id ); $breadcrumbs[] = ' . get_permalink( $page->ID ) . '">' . get_the_title( $page->ID ) . ''; $parent_id = $page->post_parent; } echo join( $separator, array_reverse( $breadcrumbs ) ) . $separator; }
```
То есть вставляете этот код на 27-й строчке ничего не удаляя из первоначального кода.

Как в хлебных крошках вывести родительские рубрики WordPress с учётом иерархии?

В архивах рубрик

Тут ситуация похожа на ситуацию со страницами, но проще, так как существует функция get_category_parents().
```
$current_cat = get_queried_object(); // если родительская рубрика существует if( $current_cat->parent ) { echo get_category_parents( $current_cat->parent, true, $separator ) . $separator; }
```
На страницах записей

Как я уже написал выше, наша функция the_category() не справляется с тем, чтобы вывести рубрики с учетом их иерархичности. Давайте попробуем разобраться, что с этим можно поделать.

Тут есть некоторые тонкости, но смотрите, есть очень классный способ, как можно это всё разрулить!

Прежде всего, обратите внимание, как вы добавляете пост в категории. Нам подходит:

После этого можно спокойно использовать функцию get_category_parents():
```
$post_categories = get_the_category(); // это и будет наша единственная рубрика, присвоенная к посту if( ! empty( $post_categories[0]->cat_ID ) ) { echo get_category_parents( $post_categories[0]->cat_ID, true, $separator ) . $separator; } the_title();
```
Произвольными типы постов и их таксономии в хлебных крошках с учётом иерархии

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

Хлебные крошки для архивов таксономии

Если без иерархии:
```
if( is_tax( $taxonomy_name ) ) { single_term_title(); // название текущего элемента таксономии }
```
```
if( is_tax( $taxonomy_name ) ) { $current_term = get_queried_object(); // если родительский элемент таксономии существует if( $current_term->parent ) { echo get_term_parents_list( $current_term->parent, $taxonomy_name, array( 'separator' => $separator ) ) . $separator; } single_term_title(); }
```
Хлебные крошки для произвольных типов постов

Если мы вообще не хотим отображать никаких таксономий, то наш пример становится очень похож на пример с обычными Страницами:
```
if( is_singular( $post_type_name ) ) { the_title(); }
```
В случае, если нам нужно также добавить какую-то произвольную таксономию:
```
if( is_singular( $post_type_name ) ) { $post_terms = get_the_terms( get_the_ID(), $taxonomy_name ); if( ! empty( $post_terms[0]->term_id ) ) { echo get_term_parents_list( $post_terms[0]->term_id, $taxonomy_name, array( 'separator' => $separator ) ) . $separator; } the_title(); }
```
Кстати, видел на других блогах функцию хлебных крошек длиной в 5-10 строк 🙂 Люди копипастят даже не задумываясь, понятно, что у них очень урезанные варианты.

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Как добавить хлебные крошки в WordPress

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

Что такое хлебные крошки и зачем они вам нужны?

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

Хлебные крошки отличаются от стандартной системы навигации меню в WordPress.

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

Поисковые системы вроде Google уже начали отображать хлебные крошки под названием сайта в результатах поиска. Это позволит вашему сайту стать более заметным в поисковой выдаче и повысит ваш процент кликабельности. Подробнее об этом можно прочитать в официальной справке Google, потому как всё не так просто, как может показаться на первый взгляд. Не всегда Google может принять решение о том, что нужно отобразить крошки в выдаче именно для вашего сайта.

Давайте теперь посмотрим как же добавить хлебные крошки в WordPress.

Добавляем хлебные крошки с помощью плагина Breadcrumb NavXT

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

Первым делом вам необходимо установить и активировать плагин Breadcrumb NavXT. После активации переходим на страницу Настройки » Breadcrumb NavXT для конфигурации настроек плагина.

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

Страница настроек разделена на две различные секции. На вкладке general вы можете определить общее поведение плагина на вашем сайте.

Здесь можно изменить шаблон хлебных крошек. Вы также можете заметить, что эти ссылки шаблонов используют параметры Schema.org в тегах ссылок.

Вкладка post types под настройками плагина позволит вам настроить ссылки хлебных крошек для записей, страниц и любых произвольных типов записей.

Вы можете выбрать как вы хотите отображать иерархию записей. По-умолчанию плагин будет использовать Название сайта > Рубрика > Заголовок записи. Вы можете заменить рубрики на теги, даты или родительские записи.

Вкладка taxonomies и authors содержат схожие шаблоны для ваших ссылок хлебных крошек.

Не забудьте нажать на кнопку сохранения изменений как только закончите настройку.
Похожие публикации: