主页 / 问题 / 1567459
Accepted
BlackStar1991
Asked:2024-02-22 02:04:31 +0800 CST2024-02-22 02:04:31 +0800 CST

ACF 将图像添加到菜单项

  • 772

需要将图像添加到标准菜单项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之前有，但我不明白如何在这里应用它......所有尝试都不成功。告诉我如何将图像添加到标签之外的菜单项<a>？

wordpress

1 个回答

  1. Best Answer

    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);
} }
    • 2

相关问题