Как сделать динамические breadcrumbs в WordPress с поддержкой WooCommerce

Автор: Алексей Карпов | Опубликовано: 13.03.2026

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

Что такое breadcrumbs и зачем они нужны

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

На сайтах с WooCommerce breadcrumbs особенно важны, так как товары могут иметь многоуровневую иерархию: главная > категория > подкатегория > товар.

Плагины для создания breadcrumbs в WordPress с WooCommerce

Для реализации breadcrumbs можно использовать готовые плагины. Вот несколько популярных:

Yoast SEO — помимо SEO-функций, умеет выводить breadcrumbs, которые можно подключить в шаблон.
Breadcrumb NavXT — мощный и гибкий плагин для хлебных крошек, поддерживает WooCommerce.
WooCommerce Breadcrumbs Customizer — специализированный плагин для настройки хлебных крошек в WooCommerce.

Однако у готовых решений иногда возникают ограничения в дизайне и логике. Поэтому рассмотрим пример создания собственных динамических breadcrumbs.

Создание динамических breadcrumbs своими руками

Реализуем функцию wpboard_get_breadcrumbs(), которая выводит хлебные крошки с учётом разных типов страниц, включая WooCommerce.

Основные этапы:

Проверяем, на какой странице находимся (главная, категория, товар, страница, архив и т.д.).
Формируем массив элементов хлебных крошек с URL и названием.
Выводим их с разделителем.

Пример функции для breadcrumbs

function wpboard_get_breadcrumbs() {
    if (is_front_page()) return; // на главной хлебных крошек не нужно

    echo '<nav class="wpboard-breadcrumbs"><ul>';

    // Главная
    echo '<li><a href="' . esc_url(home_url('/')) . '">Главная</a></li>';

    if (function_exists('is_woocommerce') && is_woocommerce()) {
        if (is_product_category()) {
            $term = get_queried_object();
            $ancestors = get_ancestors($term->term_id, 'product_cat');
            $ancestors = array_reverse($ancestors);
            foreach ($ancestors as $ancestor_id) {
                $ancestor = get_term($ancestor_id, 'product_cat');
                echo '<li><a href="' . esc_url(get_term_link($ancestor)) . '">' . esc_html($ancestor->name) . '</a></li>';
            }
            echo '<li>' . esc_html($term->name) . '</li>';
        } elseif (is_product()) {
            $terms = get_the_terms(get_the_ID(), 'product_cat');
            if ($terms && !is_wp_error($terms)) {
                $term = current($terms);
                $ancestors = get_ancestors($term->term_id, 'product_cat');
                $ancestors = array_reverse($ancestors);
                foreach ($ancestors as $ancestor_id) {
                    $ancestor = get_term($ancestor_id, 'product_cat');
                    echo '<li><a href="' . esc_url(get_term_link($ancestor)) . '">' . esc_html($ancestor->name) . '</a></li>';
                }
                echo '<li><a href="' . esc_url(get_term_link($term)) . '">' . esc_html($term->name) . '</a></li>';
            }
            echo '<li>' . get_the_title() . '</li>';
        } elseif (is_shop()) {
            echo '<li>Магазин</li>';
        }
    } elseif (is_category()) {
        $category = get_queried_object();
        $ancestors = get_ancestors($category->term_id, 'category');
        $ancestors = array_reverse($ancestors);
        foreach ($ancestors as $ancestor_id) {
            $ancestor = get_category($ancestor_id);
            echo '<li><a href="' . esc_url(get_category_link($ancestor)) . '">' . esc_html($ancestor->name) . '</a></li>';
        }
        echo '<li>' . esc_html($category->name) . '</li>';
    } elseif (is_single()) {
        $categories = get_the_category();
        if ($categories) {
            $category = $categories[0];
            $ancestors = get_ancestors($category->term_id, 'category');
            $ancestors = array_reverse($ancestors);
            foreach ($ancestors as $ancestor_id) {
                $ancestor = get_category($ancestor_id);
                echo '<li><a href="' . esc_url(get_category_link($ancestor)) . '">' . esc_html($ancestor->name) . '</a></li>';
            }
            echo '<li><a href="' . esc_url(get_category_link($category)) . '">' . esc_html($category->name) . '</a></li>';
        }
        echo '<li>' . get_the_title() . '</li>';
    } elseif (is_page()) {
        $post = get_post();
        if ($post->post_parent) {
            $parents = get_post_ancestors($post->ID);
            $parents = array_reverse($parents);
            foreach ($parents as $parent_id) {
                echo '<li><a href="' . get_permalink($parent_id) . '">' . get_the_title($parent_id) . '</a></li>';
            }
        }
        echo '<li>' . get_the_title() . '</li>';
    } else {
        echo '<li>' . get_the_title() . '</li>';
    }

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

Эту функцию можно вызвать в шаблоне, например, в header.php:

<?php wpboard_get_breadcrumbs(); ?>

Настройка стилей для breadcrumbs

Хлебные крошки удобнее воспринимать, если они красиво оформлены. Вот пример базового CSS для класса .wpboard-breadcrumbs:

.wpboard-breadcrumbs ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
}
.wpboard-breadcrumbs li {
    margin-right: 8px;
}
.wpboard-breadcrumbs li:not(:last-child):after {
    content: '›';
    margin-left: 8px;
    color: #999;
}

В зависимости от дизайна сайта, можно добавить иконки, изменить цвет или шрифт.

Дополнительные советы и рекомендации

Кэширование breadcrumbs

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

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

Для оптимизации сайта с WooCommerce можно использовать Clearfy Pro, который улучшает производительность и SEO, в том числе влияет на работу хлебных крошек.

SEO и микроразметка

Для улучшения видимости в поисковых системах полезно добавить микроразметку Schema.org для breadcrumbs. Пример расширения функции:

function wpboard_get_breadcrumbs_with_schema() {
    if (is_front_page()) return;

    echo '<nav class="wpboard-breadcrumbs" aria-label="breadcrumb"><ol itemscope itemtype="https://schema.org/BreadcrumbList">';

    $position = 1;
    echo '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">';
    echo '<a itemprop="item" href="' . esc_url(home_url('/')) . '"><span itemprop="name">Главная</span></a>';
    echo '<meta itemprop="position" content="' . $position . '" />';
    echo '</li>';

    $position++;
    // Аналогично добавлять остальные элементы с itemprop="itemListElement" и позицией

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

Это повысит шансы на отображение хлебных крошек в сниппете Google.

Динамические breadcrumbs в WordPress с поддержкой WooCommerce: практическое руководство