Фильтр nav_menu_css_class в WordPress позволяет добавлять, изменять или удалять CSS-классы, которые применяются к элементам меню навигации. Это полезный инструмент для настройки внешнего вида меню и улучшения его адаптивности.
apply_filters( 'nav_menu_css_class', array $classes, WP_Post $menu_item, stdClass $args, int $depth )
$classes(array) — Массив CSS-классов, применяемых к элементу<li>меню.$menu_item(WP_Post) — Объект текущего элемента меню.$args(stdClass) — Объект аргументов функцииwp_nav_menu().$depth(int) — Уровень вложенности пункта меню. Начальный уровень — 0.
Пример 1: Удаление всех CSS-классов у пунктов меню
Следующий код полностью удаляет все CSS-классы у элементов меню:
add_filter( 'nav_menu_css_class', '__return_empty_array' );
Результат в HTML:
<ul id="menu-custom-menu" class="primary-menu">
<li id="menu-item-102">
<a href="http://example.com/page1">Страница 1</a>
</li>
<li id="menu-item-103">
<a href="http://example.com/page2">Страница 2</a>
</li>
</ul>
Пример 2: Добавление кастомного класса к элементам в области primary
Этот код удаляет все классы у элементов меню и добавляет новый класс my-custom-class для меню с расположением primary.
add_filter( 'nav_menu_css_class', 'add_custom_class_to_menu', 10, 4 );
function add_custom_class_to_menu( $classes, $item, $args, $depth ) {
if ( 'primary' === $args->theme_location ) {
$classes = [ 'my-custom-class' ];
} else {
$classes = [];
}
return $classes;
}
Результат в HTML:
<ul id="menu-primary-menu" class="primary-menu">
<li id="menu-item-104" class="my-custom-class">
<a href="http://example.com/page3">Страница 3</a>
</li>
<li id="menu-item-105" class="my-custom-class">
<a href="http://example.com/page4">Страница 4</a>
</li>
</ul>
Пример 3: Добавление CSS-класса к определенному пункту меню
Этот код добавляет дополнительный CSS-класс highlight-item только для элемента меню с ID 105, если он отображается в меню primary.
add_filter( 'nav_menu_css_class', 'add_class_to_specific_menu_item', 10, 4 );
function add_class_to_specific_menu_item( $classes, $item, $args, $depth ) {
if ( 105 === $item->ID && 'primary' === $args->theme_location ) {
$classes[] = 'highlight-item';
}
return $classes;
}
Результат в HTML:
<ul id="menu-primary-menu" class="primary-menu">
<li id="menu-item-105" class="menu-item highlight-item">
<a href="http://example.com/page5">Особая страница</a>
</li>
<li id="menu-item-106" class="menu-item">
<a href="http://example.com/page6">Обычная страница</a>
</li>
</ul>
Пример 4: Добавление классов на основе уровня вложенности
Код ниже добавляет класс top-level-item для пунктов меню верхнего уровня (глубина 0) и sub-level-item для подуровней.
add_filter( 'nav_menu_css_class', 'add_depth_based_class', 10, 4 );
function add_depth_based_class( $classes, $item, $args, $depth ) {
if ( $depth === 0 ) {
$classes[] = 'top-level-item';
} else {
$classes[] = 'sub-level-item';
}
return $classes;
}
Результат в HTML:
<ul id="menu-primary-menu" class="primary-menu">
<li id="menu-item-107" class="menu-item top-level-item">
<a href="http://example.com/page7">Главная</a>
<ul class="sub-menu">
<li id="menu-item-108" class="menu-item sub-level-item">
<a href="http://example.com/subpage">Подстраница</a>
</li>
</ul>
</li>
</ul>
Заключение
Хук nav_menu_css_class предоставляет мощные возможности для изменения и настройки меню в WordPress, что позволяет гибко управлять отображением и стилизацией меню на основе различных условий.