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 Відомості про меню. Використовується для 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;
}

Додати свій приклад