Question

我有一个HTML菜单，我希望在WordPress中使用wp_nav_menu显示。

HTML

<nav id="navigation" class="ddsmoothmenu">
<ul id="main-menu">
    <li><a href="index.html" class="current"><span>Home</span></a>
        <ul>
            <li><a href="index-2.html">Home Alternate 2</a></li>
            <li><a href="index-3.html">Home Alternate 3</a></li>
            <li><a href="index-4.html">Home Alternate 4</a></li>
            <li><a href="index-5.html">Home Alternate 5</a></li>
            <li><a href="index-6.html">Home Alternate 6</a></li>
        </ul>
    </li>
 </ul>

我在我的Wordpress header.php文件中添加以下内容以显示导航菜单

$defaults = array(
               'theme_location'  => 'primary',
               'menu'            => 'Primary Menu',
               'container'       => '',
               'container_class' => '',
               'container_id'    => '',
               'menu_class'      => 'menu',
               'menu_id'         => '',
               'echo'            => true,
               'fallback_cb'     => 'wp_page_menu',
               'before'          => '',
               'after'           => '',
               'link_before'     => '<span>',
               'link_after'      => '</span>',
               'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
               'depth'           => 0,
               'walker'          => ''
             );
wp_nav_menu($defaults);

但是输出也是在菜单项的第二级添加标签

<nav id="navigation" class="ddsmoothmenu">
<ul id="main-menu">
    <li><a href="index.html" class="current"><span>Home</span></a>
        <ul>
            <li><a href="index-2.html"><span>Home Alternate 2</span></a></li>
            <li><a href="index-3.html"><span>Home Alternate 3</span></a></li>
            <li><a href="index-4.html"><span>Home Alternate 4</span></a></li>
            <li><a href="index-5.html"><span>Home Alternate 5</span></a></li>
            <li><a href="index-6.html"><span>Home Alternate 6</span></a></li>
        </ul>
    </li>
 </ul>

有没有办法只为顶级菜单项添加范围或从第二级项目中删除范围？

Answer 1

add_filter( 'wp_nav_menu_objects', function( $items ) {
      foreach ( $items as $item ) {
        if (!$item->menu_item_parent) {
           $item->title = '<span>' . $item->title . '</span>';
        }
    }
    return $items;
});

Answer 2

好的，虽然walker似乎是完成这项工作的一种好方法，但它似乎很精细，有许多代码行。我刚刚发现删除子菜单项的span的最简单方法是使用jQuery。 Wordpress会自动将子菜单类添加到子ul中，因此对我有用的是

$('ul.sub-menu li a span').contents().unwrap();

希望这有帮助。

Answer 3

使用CSS可以隐藏wp_nav_menu

的子菜单

.sub-menu { display:none; }

删除wp_nav_menu中的子菜单范围

3 个答案: