ACF Добавление изображения к пункту меню

Question

Есть необходимость добавлять изображения к стандартным пунктам меню WordPress. Поскольку на сайте уже использовался плагин ACF то решил воспользоваться его функционалом описаным в документации.

Вот такой код получился.

add_filter('wp_nav_menu_objects', 'my_wp_nav_menu_objects', 10, 2);
function my_wp_nav_menu_objects($items, $args) {
    foreach ($items as &$item) {
        $icon = get_field('image_icon', $item);
        if ($icon !== false) {
            $icon_html = '<div class="decor-block_wrapper"><img class="decor-block_stars" src="' . esc_url($icon['url']) . '" alt="' . esc_attr($icon['alt']) . '" /></div>';
            $item->title = $icon_html . '<a href="' . $item->url . '">' . $item->title . '</a>';
        }
    }
    return $items;
}

Оно действительно добавляет изображение, но почему-то оборачивает его в тег ссылки. Как от этого избавиться? Как сделать так что б $icon_html не оборачивало в ссылки? Я читал в докуметации что у wp_nav_menu_items есть before но не понимаю, как это тут применить... Все пробы не увенчались успехом. Подскажите, как добавлять изображение к пункту меню вне тега <a> ?

Answer 1

wp_nav_menu_objects работает с объектами меню. то есть со ссылками. Твой код перебирает объекты и меняет их содержимое. У тебя в коде ошибка. ты пытаешься ссылку положить внутрь ссылки, так не бывает и тебе исправляет на выводе как может, разорвав на две ссылки. Для вывода картинки в меню лучше использовать Walker

Например выводим меню

    <?php wp_nav_menu(
        array(
            'container' => false,
            'theme_location' => 'primary',
            'menu_class' => 'list-nav',
            'walker' => new True_Walker_Nav_Menu()
            )
          ); ?>

Пишем свою функцию

class True_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_lvl(&$output, $depth = 0, $args = array())
{
    if ($depth == 0) {
        $output .= '<ul class="sub-menu">';
    } else {
        $output .= '<ul class="sub-sub-menu">';
    }
}

function end_lvl(&$output, $depth = 0, $args = array())
{
    if ($depth == 0) {
        $output .= '</ul>';
    } else {
        $output .= '</ul>';
    }
}

function start_el(&$output, $item, $depth = 0, $args = NULL, $id = 0)
{
    global $wp_query;

    $indent = ($depth) ? str_repeat("\t", $depth) : '';
    $class_names = $value = '';
    $classes = empty($item->classes) ? array() : (array) $item->classes;
    $classes[] = 'menu-item-' . $item->ID;
    $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
    $class_names = ' class="' . esc_attr($class_names) . '"';
    $id = apply_filters('nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args);
    $id = strlen($id) ? ' id="' . esc_attr($id) . '"' : '';

    //получим картинку и сделаем условие вывода
    $image = get_field('image_icon', $item->ID);
    if ($image) {
        $image_html = '<img src="' . $image . '" alt="img" class="svg">';
    } else {
        $image_html = '';
    }
    
    $output .= $indent . '<li' . $id . $value . $class_names . '>';

    // атрибуты элемента, title="", rel="", target="" и href=""
    $attributes  = !empty($item->attr_title) ? ' title="'  . esc_attr($item->attr_title) . '"' : '';
    $attributes .= !empty($item->target)     ? ' target="' . esc_attr($item->target) . '"' : '';
    $attributes .= !empty($item->xfn)        ? ' rel="'    . esc_attr($item->xfn) . '"' : '';
    $attributes .= !empty($item->url)        ? ' href="'   . esc_attr($item->url) . '"' : '';

    // ссылка и околоссылочный текст
    $item_output = $args->before;
    $item_output .= $image_html;
    $item_output .= '<a' . $attributes . '>';       
    $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
    $item_output .= '</a>';
    $item_output .= $args->after;
    $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
} }

БЛОГ НА HUSL

ACF Добавление изображения к пункту меню

Ответы (1 шт):