WordPress как на ладони
WordCamp Saint Petersburg 2018 wordpress jino

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', 'filter_function_name_8769', 10, 3 );
function filter_function_name_8769( $classes, $args, $depth ){
	// Изменяем...

	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 и так далее.

Примеры

#1 Удалить все css классы

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

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

#2 Добавить css классы

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;
}

#4 Изменить css класс(ы)

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;
}

Где используется хук

Код хука-фильтра nav_menu_submenu_css_class

Фрагмент из: wp-includes/class-walker-nav-menu.php VER 4.9.6
...
		}
		$indent = str_repeat( $t, $depth );

		// Default class.
		$classes = array( 'sub-menu' );

		/**
		 * Filters the CSS class(es) applied to a menu list element.
		 *
		 * @since 4.8.0
		 *
		 * @param array    $classes 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.
		 */
		$class_names = join( ' ', apply_filters( 'nav_menu_submenu_css_class', $classes, $args, $depth ) );
		$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

		$output .= "{$n}{$indent}<ul$class_names>{$n}";
	}

	/**
	 * Ends the list of after the elements are added.
	 *
	 * @since 3.0.0
	 *
	 * @see Walker::end_lvl()
	 *
	 * @param string   $output Used to append additional content (passed by reference).
	 * @param int      $depth  Depth of menu item. Used for padding.
	 * @param stdClass $args   An object of wp_nav_menu() arguments.
...
campusboy 2732youtube.com/c/wpplus
Активный пользователь wp-kama.ru. WordPress-разработчик. Разработка сайтов и лендингов. Доработка существующих проектов. Сопровождение ресурсов.
nav_menu_submenu_css_class Комментариев нет

    Здравствуйте, !