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

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

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

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

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

Изменение классов позволяет подстроить меню под нужды конкретных JavaScript-плагинов или CSS-фреймворков.

Как работают CSS-классы в меню WordPress

Меню в WordPress строится с помощью функции wp_nav_menu(). Она выводит <ul> и <li> с набором классов, которые берутся из объекта меню. Классы добавляются автоматически функцией Walker_Nav_Menu.

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

Пример: удаление всех классов из элементов меню

Самый простой способ — полностью очистить массив классов, чтобы в элементе меню не было лишних классов.

function wpkeys_remove_all_menu_classes( $classes, $item, $args, $depth ) {
    return array();
}
add_filter( 'nav_menu_css_class', 'wpkeys_remove_all_menu_classes', 10, 4 );

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

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

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

function wpkeys_filter_menu_classes( $classes, $item, $args, $depth ) {
    // Фильтруем, оставляем только классы без префикса 'menu-item-'
    $filtered_classes = array();
    foreach ( $classes as $class ) {
        if ( strpos( $class, 'menu-item-' ) !== 0 ) {
            $filtered_classes[] = $class;
        }
    }
    return $filtered_classes;
}
add_filter( 'nav_menu_css_class', 'wpkeys_filter_menu_classes', 10, 4 );

В этом варианте удаляются все классы, начинающиеся с menu-item-, а остальные сохраняются.

Добавление своих классов для конкретных пунктов меню

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

function wpkeys_add_custom_class_to_menu_item( $classes, $item, $args, $depth ) {
    if ( $item->ID == 42 ) { // замените 42 на ID пункта меню
        $classes[] = 'my-custom-class';
    }
    return $classes;
}
add_filter( 'nav_menu_css_class', 'wpkeys_add_custom_class_to_menu_item', 10, 4 );

Это полезно, если нужно выделить определённый пункт меню, например, кнопкой или иконкой.

Удаление класса current-menu-item для отключения подсветки активного пункта

Иногда в дизайне нужно убрать подсветку активного пункта меню. Для этого можно удалить класс current-menu-item.

function wpkeys_remove_current_menu_class( $classes, $item, $args, $depth ) {
    $classes = array_diff( $classes, array( 'current-menu-item' ) );
    return $classes;
}
add_filter( 'nav_menu_css_class', 'wpkeys_remove_current_menu_class', 10, 4 );

Этот код удалит только класс, отвечающий за подсветку текущей страницы.

Практические советы и рекомендации

Если вы используете тему из магазина WPShop, например, тему Root или Reboot, внимательно проверьте стили меню после удаления классов — могут потребоваться доработки CSS.

Для более сложных изменений структуры меню стоит рассмотреть создание собственного класса-наследника Walker_Nav_Menu. Это позволяет полностью контролировать вывод HTML меню.

Пример создания кастомного Walker для изменения классов

Ниже пример класса, который изменяет класс для элементов меню с дочерними пунктами:

class WPKeys_Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;

        if ( in_array( 'menu-item-has-children', $classes ) ) {
            $key = array_search( 'menu-item-has-children', $classes );
            if ( false !== $key ) {
                $classes[$key] = 'has-submenu'; // меняем класс
            }
        }

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

        $output .= '<li' . $class_names . '>';

        $attributes  = ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) . '"' : '';
        $item_output = '<a' . $attributes . '>' . apply_filters( 'the_title', $item->title, $item->ID ) . '</a>';

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

Чтобы использовать этот класс, нужно передать его в wp_nav_menu:

wp_nav_menu( array(
    'theme_location' => 'primary',
    'walker' => new WPKeys_Custom_Walker_Nav_Menu()
) );

Заключение

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

Для более сложных случаев создавайте собственные классы-наследники Walker_Nav_Menu и подстраивайте HTML меню под любые задачи.

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