Как изменить каждый пункт меню, и вставить в ссылку новые атрибуты из ACF field пункта меню?

Question

[avprinciple]

Приветствую!

Через ACF добавляю в каждый пункт кастомного меню поле с изображением.

<li class="menu__item"> // В каждом пункте хранится ACF поле - объект картинки.
  <a class="menu__link">Any link</a>
</li>

Задача такая, нужно брать из пунка меню <li>ACF field - в данном случае изображение в виде объекта, беру из объекта ссылку и альт, и эти данные нужно вставить в ссылку <a>data-атрибутами.

$menu_name = 'tab-menu';
    $locations = get_nav_menu_locations();

    if( $locations && isset( $locations[ $menu_name ] ) ) {
      $menu_items = wp_get_nav_menu_items( $locations[ $menu_name ] );

      foreach( $menu_items as &$menu_item ) {
        $field = get_field('tab-menu-image', $menu_item);

        var_dump($field['url']);
        var_dump($field['alt']);
      }
    }

Я эти атрибуты получаю с каждого пункта <li> кастомного меню.
Как мне эти данные записать в соответствующую ссылку в data-атрибуты?

Как изменить каждый пункт меню?

add_filter( 'wp_nav_menu_objects', 'filter_wp_nav_menu_objects', 10, 2 );
  function filter_wp_nav_menu_objects( $items, $args ) {
    if ( 
        $args->theme_location == 'tab-menu' ||
        $args->theme_location == 'materials-menu' ||
        $args->theme_location == 'septics-menu'
       ) {
      foreach ( $items as $item ) {
        $field = get_field('tab-menu-image', $item);
        $item = // Как менять каждый пункт меню - её html структуру?
    }
    return $items;
  }

Должно получится:

<li class="menu__item">
  <a class="menu__link" data-image="Какая-то ссылка" data-alt="Какой-то альт">Any link</a>
</li>

Answer 1

[avprinciple]

Гуглил, не нашел как мне менять html каждого пункта меню. Везде только .= то есть только дописать какой-то html к существующему меню или правки по атрибутам пункта меню (url, title, classes и т.д.)

Написал себе такое вместо дата-атрибутом в ссылки :D

add_filter( 'wp_nav_menu_objects', 'filter_wp_nav_menu_objects', 10, 2 );
  function filter_wp_nav_menu_objects( $items, $args ) {
    if ( 
        $args->theme_location == 'tab-menu'
       ) {
      foreach ( $items as $item ) {
        $field = get_field('tab-menu-image', $item);
        $item->title .= 
          '
            <i class="menu-tab__list-link-img-url">'.$field['url'].'</i>
            <i class="menu-tab__list-link-img-alt">'.$field['alt'].'</i>
          ';
      }
    }
    return $items;
  }

Comments

[Sergey Bro]

Я сделал такую функцию в functions.php
Где надо, получал массив меню и строил менюху со своей версткой ))

/**
 * Возвращает массив ссылок и их названий указанного меню.
 *
 * @param $name
 * @return array
 */
function getMenuLinks($name) {
    $DOMDocument = new DOMDocument();

    $menu = wp_nav_menu([
        'theme_location' => $name,
        'container'      => '',
        'echo'           => false,
        'items_wrap'     => '%3$s',
        'depth'          => 0,
    ]);

    // <xml encoding="utf-8"> нужен для правильной интерпретации кодировки UTF-8.
    $DOMDocument->loadHTML('<?xml encoding="utf-8" ?>' . $menu);
    $menuLinks = $DOMDocument->getElementsByTagName('a');
    $result    = [];
    foreach ($menuLinks as $item => $link) {
        $result[$item]['name'] = $link->nodeValue;
        $result[$item]['slug'] = mb_strtolower($link->nodeValue);
        $result[$item]['href'] = $link->getAttribute('href');
    }

    return $result;
}

Answer 2

[Sergey Bro]

На одном проекте я психанул, распарсил html менюхи через DomDocument и вытащил только ссылки. Потом верстал менюху по своему желанию.

Comments

[hellion35]

Если так делать, нет разделения массива на пункты и подпункты меню. Можно как то решить этот вопрос твоим способом?