Хлебные крошки в WordPress: как добавить и настроить

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

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

Различают три вида крошек. Иерархические отражают структуру сайта: главная, рубрика, подрубрика, запись. Исторические показывают путь, по которому пользователь пришёл, — их почти не используют в блогах, потому что путь у каждого свой. Атрибутные строятся по признаку: например, товары одного бренда или автора. Для WordPress-сайтов на практике применяют иерархические.

Польза для SEO тоже практическая: поисковики понимают структуру разделов, а размеченная цепочка может попасть в сниппет — пользователь видит «delai-sait.ru › Блог › Разработка WordPress» вместо сухого адреса. Вместе с корректными постоянными ссылками и картой сайта крошки формируют понятную иерархию: об этом — в гайдах ЧПУ и настройка ссылок WordPress и XML-карта сайта: как настроить для Яндекса и Google.

Три способа добавить крошки: что выбрать

Выбор сводится к трём вариантам, и каждый хорош в своей ситуации. Первый — SEO-плагин, который уже установлен: в Rank Math и Yoast SEO крошки включаются галочкой, а выводятся одной строкой кода в шаблоне. Второй — отдельный плагин крошек, если нужны гибкие настройки и поддержка нестандартных типов записей. Третий — своя функция в дочерней теме: полный контроль над разметкой и никаких лишних плагинов.

Способ	Плюсы	Минусы	Кому подходит
Rank Math или Yoast SEO	Уже стоит на сайте, микроразметка из коробки, настройка галочкой	Разметку сложно изменить под свой дизайн	Большинству сайтов, где плагин уже установлен
Отдельный плагин (Breadcrumb NavXT и аналоги)	Гибкие настройки, поддержка CPT и таксономий	Ещё один плагин и обновления	Сложным каталогам и нестандартным структурам
Своя функция в теме	Полный контроль над HTML, CSS и разметкой, нет лишнего кода	Нужно писать и поддерживать код самому	Проектам с дочерней темой и своим дизайном

Если сайт уже использует Rank Math или Yoast, начинать стоит с них: это самый быстрый путь. Как настроить плагин по шагам, разобрано в статье SEO-плагин для WordPress: настройка Rank Math и Yoast.

Вариант 1: крошки в Rank Math и Yoast SEO

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

В Rank Math функция называется rank_math_the_breadcrumbs, в Yoast — yoast_breadcrumb. Обёртка с проверкой function_exists защищает тему от фатальной ошибки, если плагин отключат.

<?php
if ( function_exists( 'rank_math_the_breadcrumbs' ) ) {
    rank_math_the_breadcrumbs();
}

if ( function_exists( 'yoast_breadcrumb' ) ) {
    yoast_breadcrumb( '<nav class="breadcrumbs">', '</nav>' );
}

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

<?php
add_action( 'wp_body_open', function () {
    if ( function_exists( 'rank_math_the_breadcrumbs' ) ) {
        rank_math_the_breadcrumbs();
    }
}, 5 );

Микроразметку Rank Math и Yoast добавляют автоматически, отдельный JSON-LD писать не нужно — иначе в коде страницы окажутся два блока BreadcrumbList, и валидаторы начнут ругаться на дубли. Ниже разберём, как выглядит своя разметка, если крошки выводятся собственной функцией.

Вариант 2: своя функция вывода крошек

Своя функция даёт полный контроль. Логика простая: определить текущий контекст проверками is_front_page, is_singular, is_page, is_category, is_search и собрать цепочку ссылок. Ниже — рабочий пример, который можно вставить в functions.php дочерней темы. Обратите внимание на экранирование: esc_url для адресов, esc_html для названий.

<?php
function mytheme_breadcrumbs() {
    if ( is_front_page() ) {
        return;
    }

    echo '<nav class="breadcrumbs" aria-label="Хлебные крошки"><ol>';
    echo '<li><a href="' . esc_url( home_url( '/' ) ) . '">Главная</a></li>';

    if ( is_singular( 'post' ) ) {
        $cats = get_the_category();
        if ( ! empty( $cats ) ) {
            $cat = $cats[0];
            echo '<li><a href="' . esc_url( get_category_link( $cat ) ) . '">' . esc_html( $cat->name ) . '</a></li>';
        }
        echo '<li aria-current="page">' . esc_html( get_the_title() ) . '</li>';
    } elseif ( is_page() ) {
        $ancestors = array_reverse( get_post_ancestors( get_the_ID() ) );
        foreach ( $ancestors as $ancestor ) {
            echo '<li><a href="' . esc_url( get_permalink( $ancestor ) ) . '">' . esc_html( get_the_title( $ancestor ) ) . '</a></li>';
        }
        echo '<li aria-current="page">' . esc_html( get_the_title() ) . '</li>';
    } elseif ( is_category() || is_tag() || is_tax() ) {
        $term = get_queried_object();
        echo '<li aria-current="page">' . esc_html( $term->name ) . '</li>';
    } elseif ( is_post_type_archive() ) {
        echo '<li aria-current="page">' . esc_html( post_type_archive_title( '', false ) ) . '</li>';
    } elseif ( is_search() ) {
        echo '<li aria-current="page">Поиск: ' . esc_html( get_search_query() ) . '</li>';
    } elseif ( is_404() ) {
        echo '<li aria-current="page">Страница не найдена</li>';
    }

    echo '</ol></nav>';
}

Ключевые моменты. Текущая страница выводится текстом с атрибутом aria-current, а не ссылкой на себя: ссылка на саму себя раздражает пользователя и считается ошибкой вёрстки. Для записей берётся первая рубрика через get_the_category и get_category_link. Для страниц используется get_post_ancestors — он возвращает массив родителей, поэтому его переворачивают, чтобы порядок шёл от старшего к младшему.

Если сайт работает с нестандартными типами записей, функцию дополняют ветками под свою таксономию. Как устроены такие сущности, разобрано в материале кастомные типы записей в WordPress, а работа с произвольными выборками — в гайде WP_Query: продвинутая работа с запросами.

Куда вставлять вызов в теме

Самый аккуратный путь — вывести крошки хуком, не правя файлы темы: тогда при обновлении шаблона ничего не потеряется. Если хук в теме не срабатывает (не все темы поддерживают wp_body_open), вызов добавляют в header.php дочерней темы или прямо в шаблоны single.php и page.php.

<?php
add_action( 'wp_body_open', 'mytheme_breadcrumbs', 5 );

// Если тема не поддерживает wp_body_open — используем её собственный хук,
// например storefront_before_content или generate_after_header.

Способов вывести цепочку несколько, и выбор зависит от темы и задачи.

Куда вставлять	Как выглядит	Плюсы	Когда выбирать
Хук wp_body_open	add_action в functions.php дочерней темы	Не правит шаблоны, работает на всех страницах сразу	Современные темы, которые поддерживают этот хук
Собственный хук темы	add_action с именем вроде storefront_before_content	Цепочка встаёт точно в нужное место дизайна	Если wp_body_open тема не вызывает
Файл шаблона	Вызов прямо в header.php или single.php	Полный контроль над позицией вывода	Единичные шаблоны и нестандартная вёрстка
Шорткод или блок	Вывод в редакторе на выбранных страницах	Показывает крошки там, где решил редактор	Выборочный вывод без правки кода

Правки в теме лучше делать в дочерней: обновление родительской темы затрёт всё, что написано в её файлах. Как её создать и настроить — в статье дочерняя тема WordPress: как создать и зачем нужна. Если нужен отдельный шаблон под крошки или нестандартную страницу, пригодится материал про кастомные шаблоны страниц в WordPress, а если код выводится только для части записей — пригодятся полезные сниппеты для functions.php.

Микроразметка BreadcrumbList: JSON-LD своими руками

Если крошки выводит своя функция, микроразметку добавляют отдельно — блоком JSON-LD в head. Структура повторяет визуальную цепочку: у каждого элемента есть позиция, название и адрес. Для главной достаточно одного элемента, для записи — трёх.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Главная",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Разработка WordPress",
      "item": "https://example.com/category/razrabotka-wordpress/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Хлебные крошки в WordPress"
    }
    ]
}
</script>

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

Стилизация, адаптив и доступность

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

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .875rem;
}
.breadcrumbs li + li::before {
  content: "/";
  margin-right: .35rem;
  color: #9aa0a6;
}
.breadcrumbs a {
  text-decoration: none;
}
.breadcrumbs [aria-current="page"] {
  color: #6b7280;
}
@media (max-width: 600px) {
  .breadcrumbs ol {
    font-size: .8125rem;
    overflow-x: auto;
    white-space: nowrap;
  }
}

Стили подключают через wp_enqueue_scripts, а не тегом link в шаблоне: так WordPress соблюдает порядок загрузки и не дублирует файлы. Как это делается, подробно разобрано в статье подключение CSS и JS в WordPress: wp_enqueue_scripts. На мобильных вместо скрытия ленты лучше разрешить горизонтальную прокрутку: длинные цепочки останутся доступными, но не сломают вёрстку.

Типичные ошибки при выводе крошек

Первая ошибка — ссылка на текущую страницу в последнем элементе. Она бесполезна и путает: текущий пункт должен быть обычным текстом с aria-current. Вторая — двойная микроразметка: Rank Math или Yoast уже добавляют BreadcrumbList, и собственный JSON-LD создаёт дубль. Проверьте код страницы перед тем, как добавлять разметку вручную.

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

Пятая ошибка — «не работает» из-за кэша: код добавлен, а на сайте старая версия страницы. Сбросьте кэш плагина, CDN и браузера, прежде чем искать проблему в коде; о кэшировании — в материале кэширование WordPress для новичков. Шестая — правки в родительской теме: они потеряются при обновлении, поэтому используйте дочернюю тему и хуки.

Если крошки нужны в WooCommerce, у магазина своя иерархия: каталог, категория товара, товар. Плагины крошек обычно поддерживают WooCommerce из коробки, а свою функцию дополняют проверкой is_product и is_product_category. Как устроен каталог, описано в статье каталог товаров WooCommerce: настройка вывода и категорий.

Как проверить, что крошки работают

Проверка занимает пять минут. Сначала посмотрите исходный код страницы: цепочка должна быть видна в HTML, а не появляться только скриптом. Затем проверьте разметку валидатором структурированных данных — он покажет, видит ли поисковик BreadcrumbList и нет ли дублей.

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

Если крошки не появились, включите отладку и проверьте, вызывается ли функция: как искать такие ошибки, рассказано в гайде WP_DEBUG и отладка WordPress. И не забывайте про постоянные ссылки: при «простых» URL адреса рубрик могут выглядеть иначе, чем вы ожидаете, — об этом в статье ЧПУ и настройка ссылок WordPress. Общий набор плагинов, которые стоит поставить сразу, собран в подборке топ плагинов WordPress для начинающих.

Частые вопросы про хлебные крошки в WordPress

Вывод

Хлебные крошки — небольшая деталь навигации, которая заметно влияет на поведение посетителей и понятность сайта для поисковиков. Если на сайте стоит Rank Math или Yoast SEO, задача решается одной строкой вызова и галочкой в настройках. Если нужен свой дизайн и полный контроль — пишите функцию в дочерней теме: полсотни строк кода, проверки контекста, экранирование и микроразметка BreadcrumbList.

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

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