Как создать иерархию категорий с переходами в WordPress

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

Почему важна иерархия категорий с переходами

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

Это улучшает внутреннюю перелинковку, что положительно влияет на SEO, а также снижает показатель отказов, поскольку посетитель не теряется и остается на сайте дольше.

Создание иерархии категорий в админке WordPress

Для начала создадим иерархию категорий через стандартный интерфейс:

• Зайдите в Консоль > Записи > Рубрики.
• Создайте родительскую категорию, например, "Новости".
• Создайте дочерние категории, например, "Новости IT", "Новости бизнеса", указывая "Новости" как родителя.

После этого WordPress автоматически создаст URL с учетом иерархии, например, site.ru/category/novosti-it/.

Добавление переходов между категориями с помощью кода

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

function wphierarchy_get_category_navigation($category_id) {
    $category = get_category($category_id);
    if (!$category) return '';

    $output = '<nav class="category-navigation">';

    // Ссылка на родителя
    if ($category->parent) {
        $parent = get_category($category->parent);
        $output .= '<div class="parent-category">'
            . '<a href="' . esc_url(get_category_link($parent->term_id)) . '">'
            . '⬆ Родительская категория: ' . esc_html($parent->name) . '</a></div>';
    }

    // Дочерние категории
    $children = get_categories(array('parent' => $category_id, 'hide_empty' => false));
    if ($children) {
        $output .= '<div class="child-categories"><strong>Подкатегории:</strong><ul>';
        foreach ($children as $child) {
            $output .= '<li><a href="' . esc_url(get_category_link($child->term_id)) . '">'
                . esc_html($child->name) . '</a></li>';
        }
        $output .= '</ul></div>';
    }

    // Соседние категории (браты и сестры)
    if ($category->parent) {
        $siblings = get_categories(array('parent' => $category->parent, 'exclude' => $category_id, 'hide_empty' => false));
        if ($siblings) {
            $output .= '<div class="sibling-categories"><strong>Другие категории на этом уровне:</strong><ul>';
            foreach ($siblings as $sibling) {
                $output .= '<li><a href="' . esc_url(get_category_link($sibling->term_id)) . '">'
                    . esc_html($sibling->name) . '</a></li>';
            }
            $output .= '</ul></div>';
        }
    }

    $output .= '</nav>';

    return $output;
}

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

echo wphierarchy_get_category_navigation(get_queried_object_id());

Использование плагинов для расширенной навигации по иерархии категорий

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

• ABC Pagination — плагин для постраничной навигации и отображения иерархий с гибкой настройкой.
• Clearfy Pro — оптимизационный плагин с возможностью улучшить структуру URL и навигацию по категориям.

Эти плагины могут упростить создание навигационных переходов и улучшить SEO.

Кастомизация отображения навигации по иерархии категорий

Чтобы навигация выглядела гармонично с вашим дизайном, можно добавить CSS-стили. Например:

.category-navigation {
    background: #f9f9f9;
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 30px;
}
.category-navigation div {
    margin-bottom: 10px;
}
.category-navigation ul {
    list-style: disc inside;
    margin: 0;
    padding: 0;
}
.category-navigation a {
    color: #0073aa;
    text-decoration: none;
}
.category-navigation a:hover {
    text-decoration: underline;
}

Добавьте стили в файл стилей вашей темы или через кастомайзер.

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

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

• Не перегружайте навигацию слишком большим количеством ссылок — ограничивайте вывод дочерних категорий по количеству.
• Используйте семантические теги, например <nav>, для улучшения доступности и SEO.
• Добавляйте атрибуты title к ссылкам для подсказок.
• Следите за правильным кешированием, чтобы навигация быстро загружалась.

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