Question

众所周知，默认情况下，Wordpress在使用默认菜单功能时会创建一个导航结构。

我在主菜单中有10个“ li”项目（每个类别一个），我正在尝试向每个“ li”中添加不同的图像。但我希望：

将指向类别的链接维护到ahref
内容应包含在ahref中

摘要：

我想改造这个

<li class="casilleroCat">
    <a href="https://categoryurl.com">Name of category2</a>
</li>
<li class="casilleroCat">
    <a href="https://categoryurl2.com">Name of category2</a>
</li>

进入此

<li class="casilleroCat">
    <a href="https://categoryurl.com">
        <img src="https://url.com/customimage1.jpg" alt="name of cateogry"> 
        <br>
        <span>Name of category</span>
    </a>
</li>
<li class="casilleroCat">
    <a href="https://categoryurl2.com">
        <img src="https://url.com/customimage2.jpg" alt="name of category2"> 
        <br>
        <span>Name of category2</span>
    </a>
</li>

为此，我尝试在functions.php中添加以下代码

/** FIRST, I CREATED THE MENUS **/
function register_my_menus() {
  register_nav_menus(
    array(
      'header-menu' => __( 'Header Menu' )
    )
  );
}
add_action( 'init', 'register_my_menus' );

现在，我迷路了，因为我不知道什么是实现这一目标的最佳方法。因为如果添加这样的代码，我将丢失WordPress自动创建的链接，并且必须为每个图像创建一个不同的功能。

function add_customHTML($items, $args) {
    if ($args->theme_location == 'Header Menu') { 

        // My html
        $item = '<li class="casilleroCat">
                    <a href="https://categoryurl.com">
                       <img src="https://url.com/customimage1.jpg" alt="name of cateogry"> 
                       <br>
                       <span>Name of category</span>
                   </a>
               </li>';
        $items = $item.$items;
    }
  return $items;
}
add_filter( 'wp_nav_menu_items', 'add_customHTML', 10, 2 );

Answer 1

最后，我用这个片段实现了

function clean_custom_menus() {
    $menu_name = 'header-menu'; // specify custom menu slug
    if (($locations = get_nav_menu_locations()) && isset($locations[$menu_name])) {
        $menu = wp_get_nav_menu_object($locations[$menu_name]);
        $menu_items = wp_get_nav_menu_items($menu->term_id);

        $menu_list = '<nav>' ."\n";
        $menu_list .= "\t\t\t\t". '<ul>' ."\n";
        foreach ((array) $menu_items as $key => $menu_item) {
            $title = $menu_item->title;
            $url = $menu_item->url;
            $menu_list .= "\t\t\t\t\t". '<li class="casilleroCat"><a href="'. $url .'"><img src="imagen'. $a++ .'.jpg"><br><span>'. $title .'</span></a></li>' ."\n";
        }
        $menu_list .= "\t\t\t\t". '</ul>' ."\n";
        $menu_list .= "\t\t\t". '</nav>' ."\n";
    } else {
        // $menu_list = '<!-- no list defined -->';
    }
    echo $menu_list;
}

并使用此代码在页面中调用函数

<?php wp_nav_menu( array( 'theme_location' => 'extra-menu' ) ); ?>

在WordPress导航菜单中更改默认HTML结构

1 个答案: