Как перенастроить элементы меню Wordpress?

Question

[Антон Нестеренко]

Доброго времени суток, господа!
Я новичок в познании Wordpress. У меня есть проект статичной верстки, который я хочу натянуть на Wordpress и столкнулся с непониманием каким образом мне осуществить вывод меню на главной странице.
У меня есть вот такое меню:


Я реализовал вывод номеров и правого меню через wp_nav_menu и так как стилизация была разная этого меню - я добавил свои классы через:

add_filter( 'nav_menu_css_class', 'change_menu_header_telmenu', 10, 4 );
function change_menu_header_telmenu( $classes, $item, $args, $depth ) {
	if( $args->theme_location === 'header-telmenu' ){
		$classes[] = 'navbar-phonelist__item';
	}
	return $classes;
}

С этим вроде как понятно, но вот у меня есть другое меню на главной странице.

Это меню по основным категориям сайта.
Я не пойму как мне сделать структуру как в верстке, чтобы внутри li-елементов была такая структура:


Пробовал через wp_nav_menu_items , но он добавляет не к каждому елементу пункта меню , а просто в конце списка то что мне нужно. Пытался понять как работает walker, но так и не понял как он мне может помочь , кроме как сделать просто ступени в моей верстке. А вот как добавить конкретно image или h2 , которые будут выбиратся при создании в административной панеле - я не пойму.

Пожалуйста, помогите с моей запарой. Может я не совсем правильно понимаю верное ли я решение принял в выводе меню в шапке сайта или может просто не вижу простого решения.
Всех с наступающим новым годом и заранее благодарю за помощь!

Comments

[yarovikov]

Использовать wp_nav_menu_items для вывода категорий-сылок с картинками не надо. Для этого есть куча других способов.
Например, написать шорткод для получения нужных категорий/страниц с их превьюшками.

Или, как делаю я - сделать кастомный блок для Gutenberg, где клиент сам выбирает, что показать в таком блоке:

Answer 1

[Владимир Брумер]

И Вас с наступающим. Вариант в общем такой:
оборачиваем в теги так(при регистрации меню)

wp_nav_menu(array(
'theme_location'=>'osnova',
'link_before'=>'<h7 class="задаем класс">','link_after'=>'</h7>',

затем кидаем ссылку на изображение в дескрипшин при оформлении меню:

spoiler

фильтр функция(используем description):

function prefix_nav_description($item_output,$item,$depth,$args){
    if(!empty($item->description)){
        $item_output=str_replace($args->link_before.$item->title,'<img src="'.$item->description.'">'.$args->link_before.$item->title,$item_output);
    }
    return $item_output;
}
add_filter('walker_nav_menu_start_el','prefix_nav_description',10,4);

результат:

spoiler

правда без атрибута alt
ну а классы сами добавите в фильтр функции....
........................
хотя, если атрибут alt это тот же текст ссылки, то:

function prefix_nav_description($item_output,$item,$depth,$args){
    if(!empty($item->description)){
        $item_output=str_replace($args->link_before.$item->title,'<img src="'.$item->description.'" alt="'.$item->title.'"  class="greetings-menu-item__image">'.$args->link_before.$item->title,$item_output);
    }
    return $item_output;
}
add_filter('walker_nav_menu_start_el','prefix_nav_description',10,4);

spoiler

можно не оборачивать при регистрации

wp_nav_menu(array(
'theme_location'=>'osnova',
'link_before'=>'<h7 class="задаем класс">','link_after'=>'</h7>',

а обернуть в той же фильтр функции

$item_output=str_replace($args->link_before.$item->title,'<img src="'.$item->description.'" alt="'.$item->title.'"  class="greetings-menu-item__image">'.$args->link_before.'<h2 class="greetings-menu-item__title">'.$item->title.'</h2>',$item_output);

Answer 2

[Антон Нестеренко]

Спасибо Владимир Брумер за выделенное время и неплохой вариант решения.
Но я через плагин ACF добавил пункты меню в виде изображений и через волкер сделал структуру которая мне была необходима