Как сделать динамическое меню в WordPress с изменяющимся активным пунктом

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

Почему важно выделять активный пункт меню в WordPress

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

WordPress автоматически добавляет класс current-menu-item к пункту меню, если меню создается через штатный механизм wp_nav_menu(). Однако в кастомных меню или при использовании нестандартных структур могут возникать проблемы, когда активный пункт не подсвечивается корректно.

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

Создание динамического меню с помощью wp_nav_menu и фильтров WordPress

Самый простой способ — использовать встроенную функцию wp_nav_menu() и убедиться, что меню правильно назначено и зарегистрировано. Вот пример регистрации меню в файле functions.php вашей темы:

function wpskins_register_menus() {
    register_nav_menus(array(
        'primary' => __('Основное меню', 'wpskins'),
    ));
}
add_action('after_setup_theme', 'wpskins_register_menus');

Затем выводим меню в шаблоне:

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

WordPress автоматически добавит класс current-menu-item к активному пункту. Однако если у вас кастомная логика или вы хотите расширить поведение, можно применить фильтр nav_menu_css_class для добавления или изменения классов.

Добавление пользовательского класса активному пункту меню

Пример функции, которая выделит пункт меню, если пользователь находится на странице с указанным условием:

function wpskins_custom_active_nav_class($classes, $item) {
    // Проверяем, если текущая страница - страница с ID 42
    if (is_page(42) && in_array('menu-item-' . $item->ID, $classes)) {
        $classes[] = 'wpskins-active';
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'wpskins_custom_active_nav_class', 10, 2);

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

Динамическое меню с изменением активного пункта для пользовательских типов записей и таксономий

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

Рассмотрим пример, когда у вас есть CPT portfolio и таксономия project_category. Нужно, чтобы при просмотре записи CPT или архива таксономии выделялся пункт меню «Портфолио».

function wpskins_highlight_portfolio_menu($classes, $item) {
    // ID или URL пункта меню, который ведет на архив портфолио
    $portfolio_url = get_post_type_archive_link('portfolio');
    $menu_url = $item->url;

    if ((is_singular('portfolio') || is_post_type_archive('portfolio') || is_tax('project_category')) && $menu_url == $portfolio_url) {
        $classes[] = 'current-menu-item';
    }

    return $classes;
}
add_filter('nav_menu_css_class', 'wpskins_highlight_portfolio_menu', 10, 2);

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

Создание кастомного меню с динамическим активным пунктом без использования wp_nav_menu

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

function wpskins_get_dynamic_menu() {
    $menu_items = array(
        array('title' => 'Главная', 'url' => home_url('/')),
        array('title' => 'Блог', 'url' => home_url('/blog/')),
        array('title' => 'Портфолио', 'url' => home_url('/portfolio/')),
        array('title' => 'Контакты', 'url' => home_url('/contacts/')),
    );

    $current_url = (isset($_SERVER['HTTPS']) ? 'https://' : 'http://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];

    echo '<ul class="custom-menu">';
    foreach ($menu_items as $item) {
        $active_class = '';
        if (strpos($current_url, $item['url']) === 0) {
            $active_class = 'active';
        }
        echo '<li class="menu-item ' . $active_class . '"><a href="' . esc_url($item['url']) . '">' . esc_html($item['title']) . '</a></li>';
    }
    echo '</ul>';
}

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

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

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

Особенно полезен для сайтов с кастомными скинами, где требуется тонкая настройка и оптимизация.

Вывод

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

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