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

Автор: Екатерина Соколова | Опубликовано: 15.02.2026

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

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

По умолчанию WordPress автоматически добавляет классы меню, такие как current-menu-item, current-menu-parent и другие, которые помогают подсвечивать активные пункты. Однако в некоторых случаях стандартных классов и логики недостаточно:

Нужно выделить пункт меню при совпадении с пользовательскими условиями (например, пользовательская роль, дата, GET-параметры).
Необходимо добавить дополнительные классы для стилизации определённых пунктов.
Требуется создавать сложные меню, где пункты меняют стиль в зависимости от контекста.

Динамическое управление классами позволяет гибко решать эти задачи.

Как WordPress формирует классы меню

WordPress использует функцию wp_nav_menu() для вывода меню. При генерации HTML пункты меню получают классы, формируемые в функции walk_nav_menu_tree() через класс Walker_Nav_Menu. Самые популярные классы — menu-item, current-menu-item, menu-item-has-children и т.д.

Чтобы добавить или изменить классы, нужно использовать фильтр nav_menu_css_class. Этот фильтр вызывается для каждого пункта меню и позволяет изменить массив классов.

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

Предположим, нужно добавить класс menu-item-sale к пункту меню, если сегодня праздничный день. Для этого используем фильтр nav_menu_css_class:

add_filter('nav_menu_css_class', 'wpmart_add_sale_class_to_menu', 10, 4); 
function wpmart_add_sale_class_to_menu($classes, $item, $args, $depth) {
    // Список ID пунктов меню, к которым добавим класс
    $sale_menu_item_ids = [42, 58];

    // Пример условия: добавить класс, если сегодня 1 января
    if (in_array($item->ID, $sale_menu_item_ids) && date('m-d') === '01-01') {
        $classes[] = 'menu-item-sale';
    }
    return $classes;
}

В этом примере мы проверяем, что ID пункта меню входит в заданный массив и что сегодня праздничная дата. Если условие истинно, добавляем класс menu-item-sale, который можно оформить в CSS.

Динамическое выделение пункта меню по произвольному GET-параметру

Частая задача — выделить определённый пункт меню, если в URL есть параметр ?promo=summer. Вот как это сделать:

add_filter('nav_menu_css_class', 'wpmart_highlight_menu_by_get_param', 10, 4);
function wpmart_highlight_menu_by_get_param($classes, $item, $args, $depth) {
    if (isset($_GET['promo']) && $_GET['promo'] === 'summer') {
        // Предположим, ID пункта меню для акции – 123
        if ($item->ID == 123) {
            $classes[] = 'current-menu-item';
        }
    }
    return $classes;
}

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

Добавление кастомных классов в меню с помощью поля CSS Classes

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

Для этого можно использовать мета-данные пункта меню или дополнительные поля. Но проще всего реализовать логику через nav_menu_css_class, как показано выше.

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

Допустим, хотим добавить класс category-menu-item для всех пунктов меню, которые ссылаются на категории:

add_filter('nav_menu_css_class', 'wpmart_add_category_class', 10, 4);
function wpmart_add_category_class($classes, $item, $args, $depth) {
    if ($item->object === 'category') {
        $classes[] = 'category-menu-item';
    }
    return $classes;
}

Этот класс можно использовать для особой стилизации или JavaScript-логики.

Пример использования плагина Clearfy Pro для управления классами меню

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

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

Особенности и рекомендации по работе с классами меню

При добавлении классов важно учитывать следующие моменты:

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

Заключение по теме динамического управления классами меню

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