nav_menu_css_class
Позволяет изменять набор CSS классов у пункта меню.
О том, как формируются css классы у пунктов меню читайте в документации к функции wp_nav_menu().
Использование
add_filter( 'nav_menu_css_class', 'wp_kama_nav_menu_css_class_filter', 10, 4 ); /** * Function for `nav_menu_css_class` filter-hook. * * @param string[] $classes Array of the CSS classes that are applied to the menu item's `<li>` element. * @param WP_Post $menu_item The current menu item object. * @param stdClass $args An object of wp_nav_menu() arguments. * @param int $depth Depth of menu item. Used for padding. * * @return string[] */ function wp_kama_nav_menu_css_class_filter( $classes, $menu_item, $args, $depth ){ // filter... return $classes; }
- $classes(массив)
Классы CSS, которые применяются к элементу <li> пункта меню. Пример:
Array( [1] => menu-item [2] => menu-item-type-post_type [3] => menu-item-object-page [4] => menu-item-265 )
- $item(WP_Post)
Объект текущего пункта меню. Пример:
- $args(stdClass)
Объект с аргументами из функции wp_nav_menu(). Пример:
- $depth(число)
- Уровень пункта меню. Добавлен в версии 4.1.0. Используется для отступов. Верхние пункты меню имеют $depth = 0, вложенные в них $depth = 1 и так далее.
Примеры
#1 Удалим CSS классы у всех пунктов меню
Удалим все CSS классы у всех пунктов меню сайта.
add_filter( 'nav_menu_css_class', '__return_empty_array' );
Получим вёрстку:
<ul id="menu-moe-pervoe-menu" class="primary-menu"> <li id="menu-item-265"> <a href="http://wp-test.ru/post-99">Обратная связь</a> </li> <li id="menu-item-266"> <a href="http://wp-test.ru/post-98">Все статьи</a> </li> <li id="menu-item-267"> <a href="http://wp-test.ru/post-97">Карта сайта</a> </li> </ul>
Чтобы удалить или изменить CSS атрибут id у элемента меню, используйте фильтр nav_menu_item_id.
Также, как и в первом примере, можно использовать условия. Удалим у всех пунктов меню CSS классы, а пунктам меню из области меню primary добавим свой css класс:
add_filter( 'nav_menu_css_class', 'change_menu_item_css_classes', 10, 4 ); function change_menu_item_css_classes( $classes, $item, $args, $depth ) { if ( 'primary' === $args->theme_location ) { $classes = [ 'my-css' ]; } else { $classes = []; } return $classes; }
Получим вёрстку:
<ul id="menu-moe-pervoe-menu" class="primary-menu"> <li id="menu-item-265" class="my-css"> <a href="http://wp-test.ru/post-99">Обратная связь</a> </li> <li id="menu-item-266" class="my-css"> <a href="http://wp-test.ru/post-98">Все статьи</a> </li> <li id="menu-item-267" class="my-css"> <a href="http://wp-test.ru/post-97">Карта сайта</a> </li> </ul>
#2 Добавим CSS класс только определенному пункту меню
Пусть нам нужно добавить к пункту меню "Обратная связь" (id=265) дополнительный CSS класс, причем только если этот пункт выводится в меню, прикреплённом к области меню primary
, тогда:
add_filter( 'nav_menu_css_class', 'change_menu_item_css_classes', 10, 4 ); function change_menu_item_css_classes( $classes, $item, $args, $depth ) { if( 265 === $item->ID && 'primary' === $args->theme_location ){ $classes[] = 'special-css-class'; } return $classes; }
Получим в вёрстке:
<ul id="menu-moe-pervoe-menu" class="primary-menu"> <li id="menu-item-265" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-265 special-css-class"> <a href="http://wp-test.ru/post-99">Обратная связь</a> </li> <li id="menu-item-266" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-266"> <a href="http://wp-test.ru/post-98">Все статьи</a> </li> <li id="menu-item-267" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-267"> <a href="http://wp-test.ru/post-97">Карта сайта</a> </li> </ul>
Заметки
- C версии 4.1.0 был добавлен параметр $depth.
Список изменений
С версии 3.0.0 | Введена. |
С версии 4.1.0 | The $depth parameter was added. |
Где вызывается хук
$class_names = implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $menu_item, $args, $depth ) );
Где используется хук в WordPress
add_filter( 'nav_menu_css_class', 'wp_nav_menu_remove_menu_item_has_children_class', 10, 4 );