Как добавить автоматический хлебные крошки в WordPress: практическое руководство

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

Почему важно использовать хлебные крошки в WordPress

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

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

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

Автоматические хлебные крошки с помощью плагинов

Плагин Breadcrumb NavXT

Один из самых популярных и функциональных плагинов для создания хлебных крошек — Breadcrumb NavXT. Он позволяет гибко настроить внешний вид и логику хлебных крошек.

После установки и активации плагина перейдите в настройки Breadcrumb NavXT и настройте параметры отображения. Чтобы вывести хлебные крошки в шаблоне, вставьте следующий код в нужное место, например, в header.php:

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

Плагин поддерживает разные типы страниц: архивы, страницы, записи, таксономии и т.д. Можно настроить разделители, префиксы и отображение текущей страницы.

Плагин Yoast SEO

Если вы используете Yoast SEO, то хлебные крошки уже встроены в плагин. Чтобы их включить, перейдите в раздел SEO - Внешний вид поиска - Хлебные крошки и активируйте их.

Для вывода в шаблоне используйте следующий код:

<?php if (function_exists('yoast_breadcrumb')) { yoast_breadcrumb('<p id="breadcrumbs">', '</p>'); } ?>

Yoast SEO автоматически строит хлебные крошки, учитывая иерархию страниц и категорий.

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

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

function wpbloger_breadcrumbs() {
    global $post;
    $home_link = home_url('/');
    $delimiter = ' » ';
    $home_text = 'Главная';
    echo '<nav class="wpbloger-breadcrumbs">';
    echo '<a href="' . $home_link . '">' . $home_text . '</a>' . $delimiter;

    if (is_home() || is_front_page()) {
        echo '<span>Блог</span>';
    } elseif (is_single()) {
        $category = get_the_category();
        if ($category) {
            $cat = $category[0];
            $cat_link = get_category_link($cat->term_id);
            echo '<a href="' . esc_url($cat_link) . '">' . esc_html($cat->name) . '</a>' . $delimiter;
        }
        echo '<span>' . get_the_title() . '</span>';
    } 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 . $delimiter;
            }
        }
        echo '<span>' . get_the_title() . '</span>';
    } elseif (is_category()) {
        $cat = get_queried_object();
        if ($cat->parent != 0) {
            $parent_cats = get_category_parents($cat->parent, true, $delimiter);
            echo $parent_cats;
        }
        echo '<span>' . single_cat_title('', false) . '</span>';
    } elseif (is_tag()) {
        echo '<span>Метка: ' . single_tag_title('', false) . '</span>';
    } elseif (is_search()) {
        echo '<span>Результаты поиска: ' . get_search_query() . '</span>';
    } elseif (is_404()) {
        echo '<span>Ошибка 404 - страница не найдена</span>';
    }
    echo '</nav>';
}

Для вывода хлебных крошек в шаблоне добавьте:

<?php wpbloger_breadcrumbs(); ?>

Это простейший пример, который можно доработать под свои нужды, добавив поддержку таксономий, архивов авторов, форматов и т.п.

Советы по стилизации и оптимизации хлебных крошек

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

Пример простого CSS для хлебных крошек:

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

Для SEO важно использовать разметку schema.org. Многие плагины это делают автоматически. Если пишете код сами, добавьте микроразметку:

<nav aria-label="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
<!-- каждый элемент с itemprop="itemListElement" и т.д. -->
</nav>

Заключение

Автоматические хлебные крошки значительно улучшают пользовательский опыт и SEO сайта на WordPress. Вы можете использовать готовые плагины, такие как Breadcrumb NavXT или встроенный функционал Yoast SEO, либо написать собственное решение. В любом случае важно, чтобы хлебные крошки были логичными, удобными и соответствовали структуре сайта.

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

Если хотите расширить функционал сайта, обратите внимание на плагины с wpshop.ru, которые помогут автоматизировать и улучшить работу с навигацией, SEO и контентом.