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

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

Почему важно уметь удалять CSS-классы из меню WordPress

По умолчанию WordPress добавляет в <li> и <a> элементы меню ряд классов, таких как current-menu-item, menu-item-has-children и другие. Они помогают CSS и JS скриптам определить активный пункт, наличие вложенных элементов и прочее. Но в некоторых случаях эти классы могут мешать кастомному дизайну или логике, особенно при создании сложных тем или плагинов.

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

Рассмотрим, как с помощью фильтра nav_menu_css_class и собственной функции wpdo_remove_menu_class динамически удалять нужные классы.

Использование фильтра nav_menu_css_class для удаления классов меню

Фильтр nav_menu_css_class позволяет изменить массив CSS-классов, которые WordPress добавляет к каждому элементу меню. В функцию-обработчик передаются следующие параметры:

• $classes — массив текущих классов элемента;
• $item — объект элемента меню;
• $args — аргументы меню;
• $depth — глубина элемента в меню.

Чтобы удалить класс, нужно вывести из массива нужный элемент по названию.

Пример функции для удаления класса current-menu-item у пункта с определённым ID

function wpdo_remove_menu_class($classes, $item, $args, $depth) {
    // ID пункта меню, у которого нужно убрать класс
    $target_menu_item_id = 42;
    if ($item->ID === $target_menu_item_id) {
        // Убираем класс current-menu-item
        $classes = array_diff($classes, array('current-menu-item'));
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'wpdo_remove_menu_class', 10, 4);

В этом примере у пункта меню с ID 42 будет удалён класс current-menu-item, даже если он активен. Это полезно, если для этого пункта нужен кастомный стиль без выделения активного состояния.

Удаление нескольких классов и условная логика

Можно удалять сразу несколько классов и делать условия более сложными. Например, убрать классы menu-item-has-children и current-menu-parent у всех пунктов меню для определённого меню по имени.

function wpdo_remove_multiple_menu_classes($classes, $item, $args, $depth) {
    // Проверяем, что это нужное меню по имени локации
    if ($args->theme_location === 'primary') {
        $classes = array_diff($classes, array('menu-item-has-children', 'current-menu-parent'));
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'wpdo_remove_multiple_menu_classes', 10, 4);

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

Удаление класса на основе URL или названия пункта меню

Иногда нужно удалить класс в зависимости от URL ссылки или названия пункта меню. Для этого можно обратиться к свойствам $item->url или $item->title.

function wpdo_remove_class_by_url($classes, $item, $args, $depth) {
    // Удаляем класс 'current-menu-item' у пункта с конкретным URL
    if (strpos($item->url, 'https://example.com/special-page') === 0) {
        $classes = array_diff($classes, array('current-menu-item'));
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'wpdo_remove_class_by_url', 10, 4);

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

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

Плагин Clearfy Pro https://wpshop.ru/clearfy-pro?utm_source=wpdo.ru&utm_medium=article&utm_campaign=kak-udalit-klass-v-menu-wordpress-dinamicheski предоставляет множество опций для оптимизации и управления WordPress, включая опции по очистке и изменению классов меню без написания кода. Если вы хотите быстро решить задачу без правок функций темы — Clearfy Pro поможет убрать лишние классы и оптимизировать разметку меню.

Практические советы и лучшие практики

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

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