Как создать собственный breadcrumb в WordPress с поддержкой Schema.org

Автор: Марина Новикова | Опубликовано: 14.12.2025

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

Почему стоит использовать собственные breadcrumbs в WordPress

Готовые решения часто содержат лишний код, загружают дополнительные стили и скрипты, и не всегда идеально подходят под дизайн сайта. Своё решение позволяет:

Контролировать структуру и внешний вид;
Оптимизировать скорость загрузки;
Добавить актуальную микроразметку Schema.org для улучшения SEO;
Интегрировать хлебные крошки в любую тему или плагин.

Кроме того, код можно адаптировать под свои нужды и расширять функциональность.

Что такое Schema.org разметка для breadcrumbs и зачем она нужна

Schema.org — это стандарт микроразметки, который помогает поисковым системам лучше понимать структуру вашего сайта. Для хлебных крошек используется тип BreadcrumbList, который описывает последовательность страниц от главной до текущей.

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

Пример простой микроразметки breadcrumb в формате JSON-LD:

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Главная",
      "item": "https://example.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Категория",
      "item": "https://example.com/category"
    }
  ]
}

Как разработать собственный breadcrumb в WordPress: пошаговое руководство

Рассмотрим создание функции wptasks_breadcrumb(), которая выведет хлебные крошки с поддержкой Schema.org.

1. Определяем структуру хлебных крошек

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

2. Формируем массив элементов breadcrumb

Для каждого элемента нужно задать название и ссылку. Также необходимо учитывать текущий контекст (страница, пост, архив и т.д.).

3. Выводим HTML с микроразметкой

Создаем список с элементами и добавляем JSON-LD скрипт с микроразметкой.

Пример кода функции wptasks_breadcrumb()

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

    global $post;
    $breadcrumb = [];

    // Добавляем главную страницу
    $breadcrumb[] = [
        'name' => 'Главная',
        'url' => home_url()
    ];

    if (is_single()) {
        // Для записи берем первую категорию
        $categories = get_the_category($post->ID);
        if (!empty($categories)) {
            $category = $categories[0];
            $breadcrumb[] = [
                'name' => esc_html($category->name),
                'url' => get_category_link($category->term_id)
            ];
        }
        $breadcrumb[] = [
            'name' => get_the_title($post->ID),
            'url' => get_permalink($post->ID)
        ];
    } elseif (is_category()) {
        $category = get_queried_object();
        if ($category->parent) {
            $parent_cats = get_ancestors($category->term_id, 'category');
            $parent_cats = array_reverse($parent_cats);
            foreach ($parent_cats as $parent_cat_id) {
                $parent_cat = get_category($parent_cat_id);
                $breadcrumb[] = [
                    'name' => esc_html($parent_cat->name),
                    'url' => get_category_link($parent_cat->term_id)
                ];
            }
        }
        $breadcrumb[] = [
            'name' => esc_html($category->name),
            'url' => get_category_link($category->term_id)
        ];
    } elseif (is_page()) {
        // Для вложенных страниц
        if ($post->post_parent) {
            $parent_id  = $post->post_parent;
            $parents = [];
            while ($parent_id) {
                $page = get_post($parent_id);
                $parents[] = $page;
                $parent_id = $page->post_parent;
            }
            $parents = array_reverse($parents);
            foreach ($parents as $parent_page) {
                $breadcrumb[] = [
                    'name' => get_the_title($parent_page->ID),
                    'url' => get_permalink($parent_page->ID)
                ];
            }
        }
        $breadcrumb[] = [
            'name' => get_the_title($post->ID),
            'url' => get_permalink($post->ID)
        ];
    } elseif (is_tag()) {
        $tag = get_queried_object();
        $breadcrumb[] = [
            'name' => 'Метки',
            'url' => get_post_type_archive_link('post')
        ];
        $breadcrumb[] = [
            'name' => esc_html($tag->name),
            'url' => get_tag_link($tag->term_id)
        ];
    } elseif (is_author()) {
        $author = get_queried_object();
        $breadcrumb[] = [
            'name' => 'Автор: ' . esc_html($author->display_name),
            'url' => ''
        ];
    } elseif (is_search()) {
        $breadcrumb[] = [
            'name' => 'Результаты поиска',
            'url' => ''
        ];
    } elseif (is_archive()) {
        $breadcrumb[] = [
            'name' => 'Архив',
            'url' => ''
        ];
    }

    // Выводим HTML
    echo '<nav class="wptasks-breadcrumb" aria-label="Хлебные крошки">';
    echo '<ol itemscope itemtype="https://schema.org/BreadcrumbList">';

    $count = count($breadcrumb);
    foreach ($breadcrumb as $index => $item) {
        $position = $index + 1;
        echo '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">';
        if (!empty($item['url']) && $position !== $count) {
            echo '<a href="' . esc_url($item['url']) . '" itemprop="item"><span itemprop="name">' . esc_html($item['name']) . '</span></a>';
        } else {
            echo '<span itemprop="name">' . esc_html($item['name']) . '</span>';
        }
        echo '<meta itemprop="position" content="' . $position . '" />';
        echo '</li>';
        if ($position !== $count) {
            echo ' > ';
        }
    }

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

Как использовать функцию wptasks_breadcrumb в теме

Добавьте вызов wptasks_breadcrumb() в нужное место темы, например, в файл header.php или в шаблон страницы перед контентом:

<?php if (function_exists('wptasks_breadcrumb')) wptasks_breadcrumb(); ?>

Стили для хлебных крошек можно добавить самостоятельно или адаптировать под стиль сайта.

Советы по улучшению и расширению хлебных крошек

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

Альтернативы: плагины для хлебных крошек с поддержкой Schema.org

Если не хотите писать код самостоятельно, можно использовать готовые плагины:

Clearfy Pro — многофункциональный плагин с настройками SEO и микроразметки;
ABC Pagination — поддерживает расширенную навигацию и хлебные крошки;
Yoast SEO, Rank Math — популярные SEO-плагины с поддержкой хлебных крошек.

Однако собственный код даёт гибкость и лёгкость, что важно для производительности и точного контроля.