Как добавить и настроить хлебные крошки WordPress - Блог о создании сайтов на WordPress

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

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

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

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

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

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

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

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

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

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

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

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

Таксономии (категории, рубрики)
Вы можете выбрать, какая категория будет показана в хлебных крошках для записей.
Записи и кастомные типы записей
Есть возможность задать, какие таксономии использовать для различных типов контента.

Вставка хлебных крошек в шаблон сайта

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

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

if ( function_exists('yoast_breadcrumb') )

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

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

#breadcrumbs { font-size: 14px; color: #777; } #breadcrumbs a {}

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

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

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

Плагин Breadcrumbs NavXT для хлебных крошек

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

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

Вы увидите несколько вкладок:

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

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

В этой секции можно задать разделитель элементов и настроить шаблоны их отображения.

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

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

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

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

Таксономии

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

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

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

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

if(function_exists('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()]; } // Page 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()]; } // Category 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)]; } // Tag elseif (is_tag()) { $breadcrumbs[] = ['url' => '', 'title' => single_tag_title('', false)]; } // Custom post type archive elseif (is_post_type_archive()) { $breadcrumbs[] = ['url' => '', 'title' => post_type_archive_title('', false)]; } // Date 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')]; } // Search 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 ''; foreach ($breadcrumbs as $index => $crumb) { if ($index === $last_index) echo sprintf('%s', esc_html($crumb['title'])); else echo sprintf('%s', esc_url($crumb['url']), esc_html($crumb['title'])); echo ''; } echo '
'; }

Ключевые особенности функции:

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

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

if(function_exists('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
Разделитель элементов хлебных крошек.
По умолчанию: /
wrap_before
HTML-код, который инициирует и открывает присутствие блока хлебных крошек.
По умолчанию:
wrap_after
HTML-код, который завершает и закрывает основной контейнер.
По умолчанию:
before
HTML-код, который вставляется перед каждой отдельной крошкой.
По умолчанию: »
after
HTML-код, который добавляется после каждой отдельной крошки.
По умолчанию: »
home
Текст, который отображается для первой крошки (Главная страница)
По умолчанию: _x( ‘Home’, ‘breadcrumb’, ‘woocommerce’ )

woocommerce_breadcrumb_home_url

Модифицирует 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; });

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

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

Если хлебные крошки генерируются плагином Yoast, необходимо зайти в настройки плагина Yoast SEO > Настройки > Дополнительно > Цепочка навигации и отключить соответствующий переключатель.
Нередко разработчики тем интегрируют модуль хлебных крошек в функционал своей темы. В таком случае следует найти параметр, который отвечает за активацию крошек. Обычно это можно найти в административной панели в таких разделах, как Внешний вид > Настроить > Breadcrumbs или Theme Options > Breadcrumbs.
В WooCommerce хлебные крошки можно просто удалить, отключив необходимый хук.

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

Есть возможность скрыть их с помощью CSS. Этот способ не рекомендуется, поскольку HTML-код хлебных крошек останется в разметке страницы.

.breadcrumb, .breadcrumbs