Как создать уникальный breadcrumb в WordPress с помощью кода

Автор: Олеся Семенова | Опубликовано: 07.03.2026

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

Что такое breadcrumb и зачем он нужен в WordPress

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

Основные преимущества использования breadcrumb:

Улучшение навигации для пользователей;
Снижение показателя отказов;
Оптимизация SEO;
Удобство при работе с крупными сайтами и интернет-магазинами.

Тем не менее, стандартные решения, например, от темы Reboot или плагинов, могут не учитывать все нюансы структуры сайта. Поэтому написание собственного breadcrumb — это гибкий и эффективный способ.

Создаем базовую функцию для breadcrumb в WordPress

Начнем с простого универсального кода, который будет работать для страниц, записей, категорий и тегов. Добавим функцию wplesson_breadcrumb() в файл functions.php вашей темы или в кастомный плагин.

function wplesson_breadcrumb() {
  echo '<nav class="breadcrumb">';
  if (!is_front_page()) {
    echo '<a href="' . home_url() . '">Главная</a> » ';
    if (is_category() || is_single()) {
      $category = get_the_category();
      if ($category) {
        $cat_link = get_category_link($category[0]->term_id);
        echo '<a href="' . esc_url($cat_link) . '">' . esc_html($category[0]->name) . '</a> » ';
      }
      if (is_single()) {
        echo '<span>' . get_the_title() . '</span>';
      }
    } elseif (is_page()) {
      echo '<span>' . get_the_title() . '</span>';
    } elseif (is_tag()) {
      echo '<span>Метка: ' . single_tag_title('', false) . '</span>';
    } elseif (is_archive()) {
      echo '<span>' . post_type_archive_title('', false) . '</span>';
    }
  } else {
    echo '<span>Главная</span>';
  }
  echo '</nav>';
}

Эта функция выводит навигацию в формате "Главная » Категория » Заголовок". Она покрывает основные типы страниц и легко расширяется.

Где и как использовать функцию wplesson_breadcrumb()

Вставьте вызов функции в нужное место темы, обычно в header.php или шаблонах content-page.php, single.php:

<?php wplesson_breadcrumb(); ?>

Если хотите стилизовать breadcrumb, добавьте CSS по классу .breadcrumb:

.breadcrumb {
  font-size: 14px;
  margin-bottom: 20px;
}
.breadcrumb a {
  color: #0073aa;
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}
.breadcrumb span {
  color: #555;
}

Расширение breadcrumb для кастомных типов записей и таксономий

Если на вашем сайте используются кастомные типы записей (например, 'product') или таксономии ('portfolio_category'), нужно добавить поддержку и для них.

Добавим в функцию wplesson_breadcrumb() обработку кастомных типов:

if (is_singular('product')) {
  $terms = get_the_terms(get_the_ID(), 'product_category');
  if ($terms && !is_wp_error($terms)) {
    $term = array_shift($terms);
    $term_link = get_term_link($term);
    echo '<a href="' . esc_url($term_link) . '">' . esc_html($term->name) . '</a> » ';
  }
  echo '<span>' . get_the_title() . '</span>';
} elseif (is_post_type_archive('product')) {
  echo '<span>Каталог продуктов</span>';
}

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

Пример: breadcrumb для интернет-магазина на WordPress

Допустим, у вас есть кастомный тип 'product' и таксономия 'product_category'. Вы можете добавить следующие условия в функцию:

if (is_singular('product')) {
  $terms = get_the_terms(get_the_ID(), 'product_category');
  if ($terms && !is_wp_error($terms)) {
    $term = array_shift($terms);
    $term_link = get_term_link($term);
    echo '<a href="' . esc_url($term_link) . '">' . esc_html($term->name) . '</a> » ';
  }
  echo '<span>' . get_the_title() . '</span>';
} elseif (is_tax('product_category')) {
  echo '<span>Категория продуктов: ' . single_term_title('', false) . '</span>';
} elseif (is_post_type_archive('product')) {
  echo '<span>Каталог продуктов</span>';
}

Использование плагина Clearfy Pro для оптимизации breadcrumb

Если вы предпочитаете готовые решения с расширенными возможностями, обратите внимание на Clearfy Pro. Этот плагин позволяет гибко настраивать breadcrumb, улучшать SEO и оптимизировать работу сайта.

Особенности Clearfy Pro для breadcrumb:

Автоматическое формирование цепочки с учетом всех типов контента;
Настройка отображения и стилей через админку;
Совместимость с популярными темами и плагинами;
Интеграция с SEO-плагинами.

Для интеграции Clearfy Pro достаточно установить и активировать плагин, после чего настроить breadcrumb в разделе оптимизации.

Советы по улучшению breadcrumb и SEO

Чтобы breadcrumb максимально помогал пользователям и поисковым системам, используйте следующие рекомендации:

Добавьте микроразметку Schema.org для хлебных крошек. Это улучшит отображение в поисковой выдаче. Пример микроразметки можно сгенерировать на TechnicalSEO.
Обеспечьте адаптивный дизайн и удобочитаемость на мобильных устройствах.
Не перегружайте breadcrumb лишними уровнями — показывайте только релевантные ссылки.
Используйте транслит или человекопонятные URL в ссылках breadcrumb для лучшего восприятия.

Вот пример добавления микроразметки Schema.org к нашей функции:

function wplesson_breadcrumb() {
  echo '<nav class="breadcrumb" aria-label="breadcrumb">';
  echo '<ol itemscope itemtype="https://schema.org/BreadcrumbList">';
  if (!is_front_page()) {
    echo '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">';
    echo '<a itemprop="item" href="' . home_url() . '"><span itemprop="name">Главная</span></a>';
    echo '<meta itemprop="position" content="1" /></li>';
    // Далее аналогично добавляем остальные элементы с увеличением position
  }
  echo '</ol>';
  echo '</nav>';
}