Как добавить div в li в каждом элементе меню wp_nav_menu()?

Question

[Kryptonit]

<?php
                wp_nav_menu( [
                    'menu'            => 'menu-desktop',
                    'container'       => false,
                    'menu_class'      => 'main-menu-desktop',
                    'echo'            => true,
                    'items_wrap'      => '<ul class="main-menu-desktop">%3$s</ul>',
                    'depth'           => 1,
                    'after'           =>'<div>hello</div>'
                ] );
            ?>
            <!-- <ul class="main-menu-desktop">
                <li class="li-page li-page-desktop"> 
                    <a href="<?php bloginfo('template_url')?>/template-parts/intersting.php" class="li-page-a" >Интересное</a>
                    <div class="blueLineNav"></div>
                </li>
                <li class="li-page li-page-desktop">
                    <a href="<?php bloginfo('template_url')?>/template-parts/contacts.php" class="li-page-a" >Контакты</a>
                    <div class="blueLineNav"></div>
                </li>
            </ul> -->

- это часть header php, нужно, чтобы элементы динамического меню имели такое же наполнение как в закоменченном html
есть возможность сделать это через фильтр или придётся через js по загрузке страницы менять?

Comments

[Ankhena]

Судя о симптомам это <div class="blueLineNav"></div> легко заменяется псевдоэлементом.
И вот это всё будет не нужно.

[Kryptonit]

Ankhena, а там js отрабатывает, так бы можно было

[Ankhena]

Kryptonit, что он делает этот js? Если анимацию, то кастомные свойства могут помочь.

[Kryptonit]

blueLinesArr = document.querySelectorAll('.blueLineNav')
    linksBlueLinesArr = [...document.querySelectorAll('.li-page-a')]
    document.querySelector('.logo').addEventListener('click', ()=>{
        sessionStorage.setItem('clickIndex', -1)
    })
    linksBlueLinesArr.forEach((link) =>{
        link.addEventListener('click', ()=>{
            sessionStorage.setItem('clickIndex', linksBlueLinesArr.indexOf(link))
        })
        blueLinesArr.forEach(item =>{
            item.style.display = 'none'
        })
        try{
            blueLinesArr[sessionStorage.getItem('clickIndex')].style.display = 'block'
        } catch(err){}
        
    })

[Ankhena]

Kryptonit, класс родителю меняйте и дело с концом.

[Антон Литвиненко]

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

Answer 1

[Артем Золин]

В функции wp_nav_menu() есть фильтр wp_nav_menu_items

<li id="menu-item-265" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-265">
	<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>

В нем разметка примерно такого вида, менять ее достаточно сложно, для парсинга HTML я использую Simple HTML Dom Parser

Еще один вариант — переписать полностью Walker, но этот вариант еще сложнее предыдущего

Самый простой вариант — получить массив элементов меню с помощью функции wp_get_nav_menu_items() и вывести свою разметку

// Получаем элементы меню по ID.
$nav_menu_items = wp_get_nav_menu_items( $menu_id );

// Или получаем элементы меню по location.
$menu_location = 'primary';
$locations     = get_nav_menu_locations();

if ( isset( $locations[ $menu_location ] ) ) {
  $nav_menu_items = wp_get_nav_menu_items( $locations[ $menu_location ] );
}

Comments

[Kryptonit]

как в последнем варианте обработать сам html?

[Артем Золин]

Kryptonit, в последнем варианте вы получаете массив элементов меню, а не HTML, разметку вы должны написать самостоятельно

[Kryptonit]

Артем Золин, это я понял, куда именно его внести

[Артем Золин]

Kryptonit, тогда, вероятно, вам стоит для начала изучить основы php, а именно работу с массивами, объектами и циклами