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

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

Зачем нужны хлебные крошки в WordPress

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

Пример хлебных крошек: Главная > Блог > Тема статьи.

Создание кастомных хлебных крошек в WordPress с нуля

Если вы хотите делать хлебные крошки без плагинов, то можно написать свою функцию и выводить её в нужном месте темы. Ниже пример простой функции от WPDir, которая создаёт хлебные крошки для основных типов страниц: главная, категория, одиночная запись и страница.

Пример функции wpdir_get_breadcrumbs()

function wpdir_get_breadcrumbs() {
    echo '<nav class="breadcrumbs"><a href="' . home_url() . '">Главная</a>';

    if (is_category() || is_single()) {
        $categories = get_the_category();
        if ($categories) {
            $category = $categories[0];
            echo ' > ' . get_category_parents($category, true, ' > ');
        }
        if (is_single()) {
            echo ' > ' . get_the_title();
        }
    } elseif (is_page()) {
        if ($post->post_parent) {
            $parent_id  = $post->post_parent;
            $breadcrumbs = array();
            while ($parent_id) {
                $page = get_post($parent_id);
                $breadcrumbs[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
                $parent_id  = $page->post_parent;
            }
            $breadcrumbs = array_reverse($breadcrumbs);
            foreach ($breadcrumbs as $crumb) {
                echo ' > ' . $crumb;
            }
        }
        echo ' > ' . get_the_title();
    }

    echo '</nav>';
}

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

<?php wpdir_get_breadcrumbs(); ?>

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

Настройка и расширение хлебных крошек: обработка таксономий и кастомных типов записи

Стандартная функция выше покрывает только базовые сценарии. Для сайтов с кастомными типами записей (Custom Post Types) и таксономиями хлебные крошки нужно строить с учётом их иерархии.

Пример: для типа записи product и таксономии product_cat:

function wpdir_get_breadcrumbs() {
    echo '<nav class="breadcrumbs"><a href="' . home_url() . '">Главная</a>';

    if (is_singular('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) {
                $ancestor_term = get_term($ancestor, 'product_cat');
                echo ' > <a href="' . get_term_link($ancestor_term) . '">' . $ancestor_term->name . '</a>';
            }
            echo ' > <a href="' . get_term_link($term) . '">' . $term->name . '</a>';
        }
        echo ' > ' . get_the_title();
    }

    echo '</nav>';
}

Так вы сохраните правильную иерархию и сделаете хлебные крошки максимально информативными.

Обзор популярных плагинов хлебных крошек для WordPress

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

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

Пример использования Breadcrumb NavXT после установки плагина — вызов функции breadcrumb_navxt() в шаблоне:

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

Подробнее о настройках плагина можно почитать на странице Breadcrumb NavXT на WPSHOP.

Кастомизация внешнего вида хлебных крошек через CSS

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

Пример CSS для базовых хлебных крошек:

.breadcrumbs {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
}
.breadcrumbs a {
    color: #0073aa;
    text-decoration: none;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}
.breadcrumbs > *:not(:last-child)::after {
    content: '›';
    margin: 0 5px;
    color: #999;
}

Такой стиль сделает навигацию аккуратной и понятной.

Заключение по использованию хлебных крошек в WordPress

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

Дополнительно можно изучить плагины из каталога WPSHOP для расширения функционала и оптимизации сайта.