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

Question

[Aleksandr Yurchenko]

Всем привет.
Формирую меню (подгоняю разметку под предоставленную верстку). У элементов меню первого уровня фильтром убрал штатные и добавил свой класс:

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>.

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

Answer 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 - там то в шаблоне можно любые классы сразу задавать.

Comments

[Aleksandr Yurchenko]

не встречал ранее, сейчас попробую добавить. Может и костыли делать не прийдется

[Aleksandr Yurchenko]

10 из 10 :)
3 потратил, что бы почти решить задачу. По вашему совету запилил адаптированный Walker и вуаля! Встал без каких либо проблем. Особенно доставило, встроенная шема разметка :) прямо находка блин)

Спасибо за помощь!

P.S. насчет Timber почитал, пока думаю нет необходимости, но штука достаточно гибкая.

Answer 2

[Денис Янчевский]

Привет.

Можно попробовать проверять класс:

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

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

Также не стоит исключать вариант, что, возможно, будет быстрее и дешевле заменить названия классов в верстке.

Comments

[Aleksandr Yurchenko]

Спасибо, класс добавился как надо!

Также не стоит исключать вариант, что, возможно, будет быстрее и дешевле заменить названия классов в верстке.

Есть одна загвоздка, подменю в WP формируются ul.submenu>li>a, но в верстке подменю формируется div.dropdown-menu>a.dropdown-item. Сейчас пробовал адаптировать класс Walker, брал с kama — классы не встали (сайт крашился), взял класс из include/, как раз таки не смог поменять разметку ul на div :(

В целом мне осталось 2 вещи, и меню будет нормальным.
1. ul.submenu в div.dropdown-menu
2. li>a в a.dropdown-item

Есть мысль сделать это через str_replace (), только не могу сообразить, что передать в функцию в качестве subject...

[Денис Янчевский]

Aleksandr Yurchenko, с Walker'ом крайне редко сталкиваюсь.
Если хочется заменить li на div, то, вероятно, можно попробовать через walker_nav_menu_start_el.
А класс добавить к ссылке через nav_menu_link_attributes с проверкой depth.

[Aleksandr Yurchenko]

Денис Янчевский, честно говоря ,сам с ним сталкивался крайне-крайне редко, но ещё ни разу не выходил победителем))

Вадим Кот, выше подсказал классный совет, готовый класс причем с кучей плюшек в комплекте :)