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

Александр Писклов
Александр Писклов
Разрабатываю сайты на WordPress с 2011 года.
110
9 минут на чтение

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

Хлебные крошки с помощью плагина Yoast SEO

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

Если на вашем сайте еще нет плагина Yoast SEO, установите его по этой инструкции.

Шаг 1.

Включение и настройка хлебных крошек

После установки и активации плагина:

  1. Перейдите в админке в раздел Yoast SEO > Настройки.
  2. Откройте раздел Дополнительно > Цепочка навигации.
  3. Промотайте вниз страницы и активируйте переключатель.

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

Основные параметры отображения

  • Разделитель — символ между элементами (например, /, →, »)
  • Текст для главной страницы — можно задать «Главная», «Магазин» или любое другое название
  • Префикс — текст перед всей цепочкой (например: «Вы здесь:»)
  • Префикс для архивов — отдельная подпись для страниц архивов

Управление структурой цепочки

Yoast позволяет влиять на то, как формируется путь:

  • Таксономии (рубрики, категории)
    Можно выбрать, какая категория будет отображаться в хлебных крошках для записей
  • Посты и кастомные типы записей
    Можно настроить, какие таксономии использовать для разных типов контента

Шаг 2.

Добавление хлебных крошек в тему сайта

После включения и настройки хлебных крошек их необходимо добавить в код сайта. Чаще всего хлебные крошки встраиваются в шаблон одиночной записи (single.php) и на станицу (page.php).

  1. Откройте нужный файл в редакторе кода (в админке или через FTP).
  2. Вставьте код вывода хлебных крошек в нужное место
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}

После сохранения файла проверьте результат

 

При необходимости можно стилизовать крошки с помощью CSS:

#breadcrumbs {
  font-size: 14px;
  color: #777;
}
#breadcrumbs a {
  color: #0073aa;
  text-decoration: none;
}

Хуки для изменения хлебных крошек Yoast

Для продвинутых пользователей WordPress плагин Yoast SEO предоставляет набор хуков (filters и actions), которые позволяют тонко управлять выводом хлебных крошек — от изменения структуры до полной кастомизации HTML.

  • wpseo_breadcrumb_links — позволяет изменить массив элементов хлебных крошек до их вывода.
  • wpseo_breadcrumb_single_link — позволяет изменить HTML отдельного элемента крошек.
  • wpseo_breadcrumb_output — фильтр для изменения финального HTML всей цепочки.
  • wpseo_breadcrumb_separator — позволяет изменить разделитель между элементами.

Плагин Breadcrumbs NavXT — это мощный инструмент для создания и настройки хлебных крошек, который даёт больше гибкости по сравнению с базовыми решениями.

После установки откройте: Настройки → Breadcrumbs NavXT.

Здесь доступно несколько вкладок:

  • Основные
  • Записи и страницы
  • Таксономии
  • Другое

Основные параметры

Здесь можно задать разделитель элементов и настроить шаблоны отображения.

Настройка типов записей

Позволяет управлять отображением для записей (posts), страниц (pages), кастомных типов.

Для каждого типа можно:

  • задать шаблон вывода (например: %title%)
  • включить или отключить отображение
  • настроить иерархию

Таксономии

Настройки категорий, меток и других таксономий:

  • выбор основной категории
  • шаблон отображения рубрик
  • иерархия категорий

Добавление кода вывода хлебных крошек Breadcrumbs NavXT

Откройте нужный файл (page.php или single.php) и добавьте:

if(function_exists('bcn_display')) {
    bcn_display();
}
  • Готово! Сохраните изменения и проверьте результат.

Хлебные крошки без плагина (через код)

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

Код готовой функции хлебных крошек WordPress:

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

    $separator = ' > ';
    $breadcrumbs = [];

    // Главная
    $breadcrumbs[] = [
        'url'   => home_url('/'),
        'title' => 'Главная'
    ];

    // Блог (если задана страница записей)
    if (is_home()) {
        $breadcrumbs[] = [
            'url'   => '',
            'title' => get_the_title(get_option('page_for_posts'))
        ];
    }

    // Single
    elseif (is_single() && !is_attachment()) {
        global $post;

        // Custom post
        if (get_post_type() !== 'post') {
            $post_type = get_post_type_object(get_post_type());

            if ($post_type && !empty($post_type->has_archive)) {
                $breadcrumbs[] = [
                    'url'   => get_post_type_archive_link($post_type->name),
                    'title' => $post_type->labels->singular_name
                ];
            }
        } 
        // Запись
        else {
            $categories = get_the_category($post->ID);

            if (!empty($categories)) {
                $main_cat = $categories[0];
                $parents = get_ancestors($main_cat->term_id, 'category');

                if (!empty($parents)) {
                    $parents = array_reverse($parents);
                    foreach ($parents as $parent_id) {
                        $cat = get_category($parent_id);
                        $breadcrumbs[] = [
                            'url'   => get_category_link($cat->term_id),
                            'title' => $cat->name
                        ];
                    }
                }

                $breadcrumbs[] = [
                    'url'   => get_category_link($main_cat->term_id),
                    'title' => $main_cat->name
                ];
            }
        }

        $breadcrumbs[] = [
            'url'   => '',
            'title' => get_the_title()
        ];
    }

    // Страница
    elseif (is_page()) {
        global $post;

        if ($post->post_parent) {
            $parents = [];

            $parent_id = $post->post_parent;
            while ($parent_id) {
                $page = get_post($parent_id);

                $parents[] = [
                    'url'   => get_permalink($page->ID),
                    'title' => get_the_title($page->ID)
                ];

                $parent_id = $page->post_parent;
            }

            $parents = array_reverse($parents);
            $breadcrumbs = array_merge($breadcrumbs, $parents);
        }

        $breadcrumbs[] = [
            'url'   => '',
            'title' => get_the_title()
        ];
    }

    // Категория
    elseif (is_category()) {
        $cat = get_queried_object();

        if ($cat->parent) {
            $parents = get_ancestors($cat->term_id, 'category');
            $parents = array_reverse($parents);

            foreach ($parents as $parent_id) {
                $parent = get_category($parent_id);
                $breadcrumbs[] = [
                    'url'   => get_category_link($parent->term_id),
                    'title' => $parent->name
                ];
            }
        }

        $breadcrumbs[] = [
            'url'   => '',
            'title' => single_cat_title('', false)
        ];
    }

    // Тэг
    elseif (is_tag()) {
        $breadcrumbs[] = [
            'url'   => '',
            'title' => single_tag_title('', false)
        ];
    }

    // Архив кастомого типа
    elseif (is_post_type_archive()) {
        $breadcrumbs[] = [
            'url'   => '',
            'title' => post_type_archive_title('', false)
        ];
    }

    // Дата
    elseif (is_day()) {
        $breadcrumbs[] = [
            'url'   => '',
            'title' => get_the_date()
        ];
    }
    elseif (is_month()) {
        $breadcrumbs[] = [
            'url'   => '',
            'title' => get_the_date('F Y')
        ];
    }
    elseif (is_year()) {
        $breadcrumbs[] = [
            'url'   => '',
            'title' => get_the_date('Y')
        ];
    }

    // Поиск
    elseif (is_search()) {
        $breadcrumbs[] = [
            'url'   => '',
            'title' => 'Поиск: ' . get_search_query()
        ];
    }

    // 404
    elseif (is_404()) {
        $breadcrumbs[] = [
            'url'   => '',
            'title' => '404'
        ];
    }

    // =========================
    // ВЫВОД
    // =========================

    if (empty($breadcrumbs)) return;

    $last_index = count($breadcrumbs) - 1;

    echo '<nav class="breadcrumbs">';

    foreach ($breadcrumbs as $index => $crumb) {

        if ($index === $last_index) {
            echo sprintf(
                '<span class="breadcrumbs__item breadcrumbs__item--current">%s</span>',
                esc_html($crumb['title'])
            );
        } 
        else {
            echo sprintf(
                '<a class="breadcrumbs__item" href="%s">%s</a>',
                esc_url($crumb['url']),
                esc_html($crumb['title'])
            );

            echo '<span class="breadcrumbs__separator">' . $separator . '</span>';
        }
    }

    echo '</nav>';
}

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

  • логика отделена от вывода
  • возможность повторного использования массива $breadcrumbs (например, для JSON-LD)
  • корректная иерархия страниц
  • иерархия категорий через get_ancestors
  • поддержка разных типов страниц
  • последний элемент выводится без ссылки
  • безопасный вывод esc_url и esc_html

Вставьте функцию в файл functions.php, а вызов добавьте в нужный шаблон:

if(function_exists('wpevo_breadcrumbs')) {
    wpevo_breadcrumbs();
}

Хлебные крошки в Woocommerce

В WooCommerce хлебные крошки встроены по умолчанию и автоматически выводятся на страницах магазина. За это отвечает функция woocommerce_breadcrumb.

По умолчанию хлебные крошки добавлены на хуке woocommerce_before_main_content. Если хотите изменить место вывода крошек, то сначала отключите вывод:

remove_action('woocommerce_before_main_content', 'woocommerce_breadcrumb', 20);

а затем добавьте в новом месте вызов функции:

woocommerce_breadcrumb()

Хуки функции woocommerce_breadcrumb

woocommerce_breadcrumb_defaults

Позволяет изменить параметры:

  • delimeter
    Разделитель элементов хлебных крошек.
    По умолчанию: &nbsp;&#47;&nbsp;
  • wrap_before
    HTML, который открывает весь блок крошек.
    По умолчанию: <nav class="woocommerce-breadcrumb" aria-label="Breadcrumb">
  • wrap_after
    Закрывающий HTML тег для контейнера.
    По умолчанию: </nav>
  • before
    HTML, который добавляется перед каждой крошкой.
    По умолчанию: ''
  • after
    HTML, который добавляется после каждой крошки.
    По умолчанию: ''
  • home
    Текст для первой крошки (Главная страница)
    По умолчанию: _x( 'Home', 'breadcrumb', 'woocommerce' )

woocommerce_breadcrumb_home_url

Изменяет ссылку для первого элемента крошек (Главная).

add_filter( 'woocommerce_breadcrumb_home_url', function() {
    return '/custom-home';
});

woocommerce_get_breadcrumb

Позволяет полностью переопределить логику, порядок вывода элементов.

Например, можно добавить бренд перед товаром

add_filter( 'woocommerce_get_breadcrumb', function( $crumbs ) {

    if ( is_product() ) {

        $brand = get_the_terms( get_the_ID(), 'product_brand' );

        if ( $brand && ! is_wp_error( $brand ) ) {
            $brand = $brand[0];
            array_splice( $crumbs, -1, 0, [
                [$brand->name, get_term_link($brand)]
            ]);
        }
    }

    return $crumbs;
});

Как убрать хлебные крошки

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

  1. Если крошки выводятся с помощью Yoast, то зайдите в настройки плагина Yoast SEO > Настройки > Дополнительно > Цепочка навигации и отключите ползунок.
  2. Часто разработчики шаблонов встраивают модуль хлебных крошек в функционал темы. В таком случае необходимо найти настройку, которая активирует крошки. Чаще всего это разделы в админке: Внешний вид > Настроить > Breadcrumbs или Theme Options > Breadcrumbs.
  3. В Woocommerce крошки легко удаляются с помощью отключения хука 
remove_action('woocommerce_before_main_content', 'woocommerce_breadcrumb', 20);
  1. Скрытие через CSS. Этот способ лучше не использовать, так как html-код крошек все равно остается в разметке страницы.
.breadcrumb,
.breadcrumbs {
    display: none;
}
Содержание:

Похожие материалы

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies.
ОК