WordPress как на ладони
Прибыльная монетизация. Выгодно. Безопасно. Стабильно.

nav_menu_css_classхук-фильтрWP 3.0.0

Позволяет изменять набор 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)

Объект текущего пункта меню. Пример:

WP_Post Object
(
	[ID] => 265
	[post_author] => 1
	[post_date] => 2018-04-07 09:45:46
	[post_date_gmt] => 2018-04-07 06:45:46
	[post_content] =>
	[post_title] => Обратная связь
	[post_excerpt] =>
	[post_status] => publish
	[comment_status] => closed
	[ping_status] => closed
	[post_password] =>
	[post_name] => 265
	[to_ping] =>
	[pinged] =>
	[post_modified] => 2018-04-19 00:20:29
	[post_modified_gmt] => 2018-04-18 21:20:29
	[post_content_filtered] =>
	[post_parent] => 0
	[guid] => http://wp-test.ru/?p=265
	[menu_order] => 1
	[post_type] => nav_menu_item
	[post_mime_type] =>
	[comment_count] => 0
	[filter] => raw
	[db_id] => 265
	[menu_item_parent] => 0
	[object_id] => 214
	[object] => page
	[type] => post_type
	[type_label] => Страница
	[url] => http://wp-test.ru/post-99
	[title] => Обратная связь
	[target] =>
	[attr_title] =>
	[description] =>
	[classes] => Array
		(
			[0] =>
			[1] => menu-item
			[2] => menu-item-type-post_type
			[3] => menu-item-object-page
		)

	[xfn] =>
	[current] =>
	[current_item_ancestor] =>
	[current_item_parent] =>
)
$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

#1 Добавим 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>
0

#2 Удалим 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>

Заметки

  • C версии 4.1.0 был добавлен параметр $depth.

Список изменений

С версии 3.0.0 Введена.
С версии 4.1.0 The $depth parameter was added.

Где вызывается хук

Walker_Nav_Menu::start_el()
nav_menu_css_class
wp-includes/class-walker-nav-menu.php 158
$class_names = implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $menu_item, $args, $depth ) );

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

Использование не найдено.
campusboy 4176youtube.com/c/wpplus
Создатель YouTube канала wp-plus, на котором делюсь своим опытом. Активный пользователь wp-kama.ru. WordPress-разработчик. Разработка сайтов и лендингов. Доработка существующих проектов. Сопровождение ресурсов.
Редакторы: Kama 9026
5 комментариев
    Войти