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

Работа с классами CSS в меню WordPress часто требуется для тонкой настройки внешнего вида и функционала навигации. По умолчанию WordPress добавляет множество классов к элементам меню, например, current-menu-item, menu-item-has-children и прочие. В некоторых случаях эти классы мешают кастомизации, и возникает необходимость их удалить или заменить без использования дополнительных плагинов.

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

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

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

Для этого можно использовать встроенный фильтр WordPress nav_menu_css_class, который позволяет модифицировать классы каждого пункта меню на лету.

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

Фильтр nav_menu_css_class применяется к массиву классов у каждого элемента меню. Его задача — принять текущий массив, внести изменения и вернуть обновленный массив. Это позволяет удалять, добавлять или заменять любые классы.

Пример базового использования фильтра для удаления класса current-menu-item у всех пунктов меню:

add_filter('nav_menu_css_class', 'wpkeys_remove_current_menu_item_class', 10, 4);
function wpkeys_remove_current_menu_item_class($classes, $item, $args, $depth) {
    if(($key = array_search('current-menu-item', $classes)) !== false) {
        unset($classes[$key]);
    }
    return $classes;
}

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

Добавление собственного класса вместо стандартного

Если вы хотите заменить стандартный класс на свой, например, active-menu, то можно сделать так:

add_filter('nav_menu_css_class', 'wpkeys_replace_menu_class', 10, 4);
function wpkeys_replace_menu_class($classes, $item, $args, $depth) {
    if(($key = array_search('current-menu-item', $classes)) !== false) {
        $classes[$key] = 'active-menu';
    }
    return $classes;
}

Теперь у активного пункта меню будет класс active-menu, который вы можете стилизовать по своему усмотрению.

Удаление нескольких классов и добавление новых

Иногда нужно не только удалить один класс, а убрать сразу несколько, например, menu-item-has-children или current_page_parent, и добавить взамен свои.

Пример удаления нескольких стандартных классов и добавления кастомных:

add_filter('nav_menu_css_class', 'wpkeys_customize_menu_classes', 10, 4);
function wpkeys_customize_menu_classes($classes, $item, $args, $depth) {
    $remove = ['menu-item-has-children', 'current_page_parent', 'current-menu-item'];
    $classes = array_diff($classes, $remove);
    
    // Добавляем свои классы
    if($item->current) {
        $classes[] = 'wpkeys-active-item';
    }
    if(in_array('menu-item-has-children', $item->classes)) {
        $classes[] = 'wpkeys-has-children';
    }
    return $classes;
}

Здесь мы удаляем стандартные классы и добавляем новые, которые удобно использовать в стилях. Обратите внимание, что для определения текущего пункта меню используется свойство $item->current.

Пример применения: кастомизация темы Reboot с WPKeys

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

Вставьте код фильтра в файл functions.php вашей дочерней темы, чтобы изменения не потерялись при обновлении. Это позволит гибко управлять навигацией без плагинов и избыточного кода.

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

• Всегда проверяйте итоговый HTML меню через инструменты разработчика браузера — так вы увидите, какие классы присутствуют и как они влияют на стили.
• Для сложных изменений используйте условные проверки внутри фильтра, чтобы различные меню на сайте имели разные классы.
• Не удаляйте классы, если они используются темой или плагинами для функционала — это может сломать внешний вид или поведение.
• Для тестирования изменений создайте отдельную локальную копию сайта или используйте staging-сервер.

Заключение

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

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