Фильтр nav_menu_submenu_css_class в WordPress позволяет изменять или добавлять CSS-классы для вложенных элементов <ul> в меню. По умолчанию для всех подменю добавляется класс sub-menu. Этот хук полезен для стилизации вложенных списков в меню и создания многоуровневых меню с различными эффектами и анимациями.
apply_filters( 'nav_menu_submenu_css_class', string[] $classes, stdClass $args, int $depth );
Этот фильтр позволяет разработчику добавить, изменить или удалить CSS-классы для списка подменю в меню WordPress. Функция применяется к каждому вложенному <ul> элементу, который находится внутри основного меню.
Параметры
$classes(массив строк): Массив CSS-классов, применяемых к элементу<ul>.$args(stdClass): Объект с аргументамиwp_nav_menu().$depth(int): Уровень вложенности пункта меню. Верхний уровень имеет значение 0, первый вложенный — 1 и так далее.
Пример 1: Удаление всех CSS-классов у вложенных меню
Этот пример показывает, как удалить все стандартные CSS-классы у всех подменю. Полезно, если вы хотите назначить свои классы или полностью убрать стилизацию.
add_filter( 'nav_menu_submenu_css_class', 'remove_all_submenu_classes', 10, 3 );
function remove_all_submenu_classes( $classes, $args, $depth ) {
return []; // Удаляем все классы
}
Пример 2: Добавление пользовательских CSS-классов ко всем подменю
Здесь мы добавляем два дополнительных CSS-класса ко всем вложенным меню, чтобы применить общие стили для всех подменю, вне зависимости от уровня вложенности.
add_filter( 'nav_menu_submenu_css_class', 'add_custom_submenu_classes', 10, 3 );
function add_custom_submenu_classes( $classes, $args, $depth ) {
$classes[] = 'custom-submenu';
$classes[] = 'additional-class';
return $classes;
}
Пример 3: Добавление классов только для определенной области меню
В этом примере CSS-классы добавляются только для подменю в области footer-menu. Это позволяет изолировать стилизацию для конкретного меню, не влияя на остальные меню сайта.
add_filter( 'nav_menu_submenu_css_class', 'custom_classes_for_footer_menu', 10, 3 );
function custom_classes_for_footer_menu( $classes, $args, $depth ) {
if ( $args->theme_location === 'footer-menu' ) {
$classes[] = 'footer-submenu-style';
$classes[] = 'footer-submenu-color';
}
return $classes;
}
Пример 4: Замена стандартного класса sub-menu на пользовательский
Если вам нужно заменить стандартный класс sub-menu на другой, это можно сделать с помощью перебора массива $classes. В этом примере класс sub-menu заменяется на custom-sub-menu.
add_filter( 'nav_menu_submenu_css_class', 'replace_submenu_class', 10, 3 );
function replace_submenu_class( $classes, $args, $depth ) {
foreach ( $classes as $key => $class ) {
if ( $class === 'sub-menu' ) {
$classes[ $key ] = 'custom-sub-menu';
}
}
return $classes;
}
Пример 5: Добавление уникальных классов на основе уровня вложенности меню
Этот пример добавляет уникальный класс для каждого уровня вложенности. Например, submenu-depth-1 для первого уровня вложенности, submenu-depth-2 для второго и так далее. Это полезно для управления стилями вложенности.
add_filter( 'nav_menu_submenu_css_class', 'add_depth_based_classes', 10, 3 );
function add_depth_based_classes( $classes, $args, $depth ) {
$classes[] = 'submenu-depth-' . $depth;
return $classes;
}
Пример 6: Добавление классов только для верхнего уровня вложенности
В этом примере класс добавляется только для подменю, находящихся на первом уровне вложенности ($depth === 1). Это полезно, если вам нужно стилизовать именно первый уровень вложенности, а остальные оставить без изменений.
add_filter( 'nav_menu_submenu_css_class', 'add_class_to_first_depth', 10, 3 );
function add_class_to_first_depth( $classes, $args, $depth ) {
if ( $depth === 1 ) {
$classes[] = 'first-depth-submenu';
}
return $classes;
}
Заключение
Хук nav_menu_submenu_css_class — это мощный инструмент для кастомизации и управления стилями подменю в WordPress. С его помощью можно динамически добавлять, изменять или удалять CSS-классы в зависимости от уровня вложенности или других условий.