nav_menu_submenu_css_class │ хук-фильтр │ WP 4.8.0

Позволяет изменить CSS классы, добавленные к вложенным ul элементам (спискам меню). По умолчанию добавляется класс sub-menu.

Пример меню с двумя вложенными ul элементами.

Структура:

• Овощи
  • Моя статья (вложенный элемент)
    • Ещё статья (вложенный элемент)

Вёрстка:

<div class="menu-vtoroe-menyu-container">
	<ul id="menu-vtoroe-menyu" class="menu">
		<li id="menu-item-317" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-317">
			<a href="http://wp-test.ru/category/ovoshhi">Овощи</a>
			<ul class="sub-menu">
				<li id="menu-item-322" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-322">
					<a href="http://wp-test.ru/moya-statya">Моя статья</a>
					<ul class="sub-menu">
						<li id="menu-item-321" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-321">
							<a href="http://wp-test.ru/eshhyo-statya">Ещё статья</a>
						</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>

Использование

add_filter( 'nav_menu_submenu_css_class', 'wp_kama_nav_menu_submenu_css_class_filter', 10, 3 );

/**
 * Function for `nav_menu_submenu_css_class` filter-hook.
 * 
 * @param string[] $classes Array of the CSS classes that are applied to the menu `<ul>` element.
 * @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_submenu_css_class_filter( $classes, $args, $depth ){

	// filter...
	return $classes;
}

$classes(массив)

Классы CSS, которые применяются к вложенным ul элементам. Пример:

Array(
	[1] => sub-menu
)

$args(stdClass)

Объект с аргументами из функции wp_nav_menu(). Пример:

stdClass Object
(
	[menu] => WP_Term Object
		(
			[term_id] => 21
			[name] => Моё первое меню
			[slug] => moe-pervoe-menu
			[term_group] => 0
			[term_taxonomy_id] => 21
			[taxonomy] => nav_menu
			[description] =>
			[parent] => 0
			[count] => 3
			[filter] => raw
		)

	[container] => div
	[container_class] =>
	[container_id] =>
	[menu_class] => primary-menu
	[menu_id] =>
	[echo] => 1
	[fallback_cb] => wp_page_menu
	[before] =>
	[after] =>
	[link_before] =>
	[link_after] =>
	[items_wrap] => <ul id="%1$s" class="%2$s">%3$s</ul>
	[item_spacing] => preserve
	[depth] => 0
	[walker] =>
	[theme_location] => primary
)

$depth(число)

Уровень пункта меню. Добавлен в версии 4.1.0. Используется для отступов. Верхние пункты меню имеют $depth = 0, вложенные в них $depth = 1 и так далее.

Примеры

add_filter( 'nav_menu_submenu_css_class', 'change_wp_nav_menu', 10, 3 );

function change_wp_nav_menu( $classes, $args, $depth ) {
	return [];
}

add_filter( 'nav_menu_submenu_css_class', 'change_wp_nav_menu', 10, 3 );

// 1 вариант - добавить у всех меню
function change_wp_nav_menu( $classes, $args, $depth ) {
	$classes[] = 'my-css-1';
	$classes[] = 'my-css-2';

	return $classes;
}

// 2 вариант - только у меню, прикрепленное к области меню header-menu
function change_wp_nav_menu( $classes, $args, $depth ) {
	if ( $args->theme_location == 'header-menu' ) {
		$classes[] = 'my-css-1';
		$classes[] = 'my-css-2';
	}

	return $classes;
}

add_filter( 'nav_menu_submenu_css_class', 'change_wp_nav_menu', 10, 3 );

function change_wp_nav_menu( $classes, $args, $depth ) {
	foreach ( $classes as $key => $class ) {
		if ( $class == 'sub-menu' ) {
			$classes[ $key ] = 'my-sub-menu';
		}
	}

	return $classes;
}

Добавить свой пример