yaleksandr89
@yaleksandr89
Junior backend developer

Как добавить класс пункту меню, у которого есть подменю?

Всем привет.
Формирую меню (подгоняю разметку под предоставленную верстку). У элементов меню первого уровня фильтром убрал штатные и добавил свой класс:
add_filter( 'nav_menu_css_class', function ( $classes, $item, $args, $depth ) {
	if ( $args->theme_location === 'header-blog' ) {
		$classes = [ 'nav-item' ];
	} else {
		$classes = [];
	}
	return $classes;
}, 10, 4 );

Теперь задача несколько усложнилась и требуется пунктам меню верхнего уровня, у которых есть свои пункты добавить ещё один класс dropdown, то есть должно получиться: <li class="nav-item dropdown">...</li>.

Аналогичная ситуация с ссылками в меню, фильтром добавляю класс:
add_filter( 'nav_menu_link_attributes', function ( $atts, $item, $args, $depth ) {
	if ( $args->theme_location === 'header-blog' ) {
		$atts['class'] = 'nav-link';
	}

	return $atts;
}, 10, 4 );


И ссылкам, которые находятся в пунктах меню, у которых есть свои подпункты (прошу прощения за каламбур :) ) добавить класс "dropdown-toggle", то есть должно получиться: <a class="nav-link dropdown-toggle">...</a>.

Подскажите пожалуйста, как реализовать такую штуку?
  • Вопрос задан
  • 38 просмотров
Решения вопроса 1
Судя по всему у вас в размете бутстрап навигация, поэтому вам вполне подойдет WP Bootstrap Navwalker https://github.com/wp-bootstrap/wp-bootstrap-navwalker , либо свой собственный walker писать.
Либо пробовать через фильтры добавлять нужные классы https://wp-kama.ru/function/wp_nav_menu#filtry-izm...
Либо переходить на сторону Timber https://github.com/timber/timber и twig - там то в шаблоне можно любые классы сразу задавать.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
deniscopro
@deniscopro Куратор тега WordPress
WordPress-разработчик, wpcute.ru
Привет.

Можно попробовать проверять класс:
add_filter( 'nav_menu_css_class', function ( $classes, $item, $args, $depth ) {
  if ( $args->theme_location === 'header-blog' ) {
    if (in_array('menu-item-has-children', $classes)) {
            $classes = [ 'nav-item', 'dropdown' ];    
    } else {
            $classes = [ 'nav-item' ];    
    }
  } else {
    $classes = [];
  }
  return $classes;
}, 10, 4 );


Подскажите пожалуйста, как реализовать такую штуку?

Также не стоит исключать вариант, что, возможно, будет быстрее и дешевле заменить названия классов в верстке.
Ответ написан
yaleksandr89
@yaleksandr89 Автор вопроса
Junior backend developer
не получается допилить проверку, вот для примера добавление класса к ссылка, которые лежат в пунктах меню верхнего уровня.
if ( $args->theme_location === 'header-blog'){
		$atts['class'] .= '111';
	}

Все норм, только не могу понять, как написать проверку, что бы классы добавлялись имено у пунктов (ссылок), у которых есть подпункты, пробовал через depth:
if ( $depth==0 && $args->theme_location === 'header-blog'){
		$atts['class'] .= '111';
	}

Но в таком случае, класс добавляется уже к вложенному элементу, что вполне логично. К чему тогда привязаться...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы