Как создать динамическую навигацию в теме WordPress с фильтрацией и подсветкой активного пункта

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

Почему важна динамическая навигация в теме WordPress

Статичные меню часто не учитывают особенности текущей страницы или роли пользователя. Динамическая навигация позволяет:

• Отображать пункты меню в зависимости от условий (например, роли пользователя, текущего типа записи, таксономии).
• Подсвечивать активный пункт меню, чтобы пользователь сразу видел, где он находится.
• Фильтровать и изменять пункты меню программно, не меняя вручную структуру в админке.

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

Регистрация меню и базовая разметка

Первым шагом регистрируем меню в файле functions.php вашей темы:

function wp_themes_register_menus() {
    register_nav_menus([
        'primary' => 'Основное меню',
        'footer' => 'Меню в подвале',
    ]);
}
add_action('after_setup_theme', 'wp_themes_register_menus');

Выводим меню в шаблоне, например, header.php:

wp_nav_menu([
    'theme_location' => 'primary',
    'menu_class' => 'main-navigation',
    'container' => 'nav',
    'container_class' => 'primary-nav',
]);

Это базовая структура. Теперь добавим динамику.

Подсветка активного пункта меню

WordPress по умолчанию добавляет класс current-menu-item активному пункту. Но часто нужно добавить свои классы или стили для активного пункта.

Для этого используем фильтр nav_menu_css_class:

function wp_themes_add_active_class($classes, $item) {
    if (in_array('current-menu-item', $classes)) {
        $classes[] = 'active'; // Добавляем класс 'active' для удобства стилизации
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'wp_themes_add_active_class', 10, 2);

Далее в CSS можно использовать класс .active для подсветки:

.main-navigation .active {
    color: #ff6600;
    font-weight: bold;
}

Фильтрация пунктов меню по условиям

Иногда нужно скрыть или изменить пункты меню в зависимости от условий. Например, показывать пункт «Панель пользователя» только авторизованным, или скрыть определённые ссылки на мобильных устройствах.

Для этого применим фильтр wp_get_nav_menu_items:

function wp_themes_filter_menu_items($items, $menu, $args) {
    // Пример: скрыть пункт меню с названием 'Панель пользователя' для гостей
    if (!is_user_logged_in()) {
        foreach ($items as $key => $item) {
            if ($item->title === 'Панель пользователя') {
                unset($items[$key]);
            }
        }
    }
    return $items;
}
add_filter('wp_get_nav_menu_items', 'wp_themes_filter_menu_items', 10, 3);

Так можно динамически управлять составом меню.

Пример: добавление иконок к пунктам меню

Для улучшения UX добавим иконки перед текстом пунктов меню. Для этого в админке у пунктов меню можно использовать поле CSS классов, например, добавить класс icon-home.

Потом через фильтр walker_nav_menu_start_el вставим HTML иконки:

function wp_themes_add_icons_to_menu($item_output, $item, $depth, $args) {
    if (in_array('icon-home', $item->classes)) {
        $icon_html = '<span class="menu-icon">🏠</span> '; // иконка домика
        $item_output = $icon_html . $item_output;
    }
    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'wp_themes_add_icons_to_menu', 10, 4);

В CSS можно оформить иконку:

.menu-icon {
    margin-right: 6px;
    color: #0073aa;
}

Создание кастомного Walker для расширенной разметки меню

Иногда стандартного вывода wp_nav_menu недостаточно. Если нужно добавить сложную структуру, дополнительные атрибуты или динамические данные, создаём свой класс-наследник от Walker_Nav_Menu.

Пример простого кастомного Walker для добавления data-атрибутов:

class WPThemes_Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
        $data_id = 'data-id="' . esc_attr($item->ID) . '"';
        $output .= '<li ' . $data_id . ' class="';
        $classes = empty($item->classes) ? [] : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;
        $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item));
        $output .= esc_attr($class_names) . '">';

        $attributes = '';
        !empty($item->attr_title) and $attributes .= ' title="' . esc_attr($item->attr_title) . '"';
        !empty($item->url) and $attributes .= ' href="' . esc_attr($item->url) . '"';

        $item_output = $args->before;
        $item_output .= '<a' . $attributes . '>';
        $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

        $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
    }
}

Вызываем меню с этим Walker:

wp_nav_menu([
    'theme_location' => 'primary',
    'walker' => new WPThemes_Custom_Walker_Nav_Menu(),
]);

Интеграция с плагином Clearfy Pro для управления меню

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

Выводы

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