从 wp_nav_menu 的输出中移除 LI 元素

Steven D. Sanders

# 2012 年 5 月 7 日

仅仅出于好奇，您为什么要这样做？列表项不是构建导航菜单的标准方式吗？

Chris Coyier

评论永久链接# 2012 年 5 月 7 日
我认为
```
<nav>
  <a>
  <a>
  <a>
</nav>
```
完全合理。
Nemes Sorin

评论永久链接# 2015 年 1 月 27 日

+Steven D. Sanders
..嗯，“标准方式”——仅仅因为……没有这样的概念。

一般来说，nav->ul->li->a 只是对简单事物（nav->a）的复杂化。

正如这条帖子中的人们所指出的那样
<nav><a>...</nav> 或为了额外的装饰 <nav><div><a></a></div> ...</nav> ……不可能比这更简单。
Akira

评论永久链接# 2015 年 5 月 18 日

我一直在努力将一个非 WP 模板导入 WP 模板，并且我希望保持相同的 DOM 结构和样式。现有结构恰好是
Chris 在下面的评论中发布的内容

Phil

# 2012 年 5 月 10 日

非常合理！尽管 HTML5 很棒，但我不喜欢在导航链接周围再包一层标签。我一直在使用 <nav> 以及我的导航菜单中的锚标签，并将 <ul> 保留给内容中的实际无序列表。在我看来，这更有意义，也更加简洁。
谢谢 Chris。

Phillip

# 2012 年 5 月 12 日

我一直在寻找与评论中看到的类似的输出，但我无法让这个片段为我工作。请有人帮我一下。我承诺稍后将传播 WP 中 HTML 菜单的这种好方法，好吗？

Phil

评论永久链接# 2012 年 5 月 12 日

确保在数组中放置菜单的主题位置。

‘theme_location’ => ‘primary’，

默认的 WordPress 菜单是“primary”。如果您使用的是自定义菜单，请使用其句柄代替。然后将整个代码片段放在 <nav></nav> 标签之间。希望这能有所帮助。

Phillip

# 2012 年 5 月 13 日

我尝试过用各种方法使用这段代码，但我能获得的最好的结果是在我的开头出现一个菜单，而我想要使用它来设计我创建的自定义菜单。这是否有什么特殊的工作方式？

Phillip

评论永久链接# 2012 年 5 月 13 日

“…我的开头出现一个菜单..”。
Phil

评论永久链接# 2012 年 5 月 15 日

我不确定您指的是什么，您在管理端选择了该菜单吗？
转到外观 > 菜单并创建菜单，然后在“主题位置”下选择它。
例如：http://codex.wordpress.org/Appearance_Menus_Screen

或者您是在询问如何使用 CSS 进行样式设置？只需给您的 <nav> 一个 ID，就可以使用样式选择它。

如果这没有帮助，请不要见怪。如果所有方法都失败，请搜索 WordPress Codex，它应该能为您找到正确的答案。 http://codex.wordpress.org/Navigation_Menus

祝您好运

Pedro

# 2012 年 5 月 16 日

子菜单呢？如果它有下拉菜单，它应该是什么样子？

Arie Putranto

评论永久链接# 2012 年 7 月 13 日

将您的子菜单包裹在 DIV 中可以工作

BasilCraft

# 2012 年 6 月 10 日

谢谢 Chris！

很棒的网站，这里和 http://www.lynda.com 上都有很棒的教程。我还购买了你的书“深入了解 WordPress”，我强烈推荐它给所有想要学习 WordPress 的人。感谢您的帮助！

Jack Durrant

# 2012 年 6 月 14 日

我一直想知道如何在 WordPress 主题中去掉列表标签。我不知道为什么它不默认使用锚标签，但感谢您的教程。这将使开发 WordPress 主题变得容易得多。

Rafique

# 2012 年 6 月 14 日

您好 Chris，
您激发了我学习 WordPress 的兴趣。谢谢。

我需要知道如何在 WordPress 动态菜单项中添加 span 标签，以添加额外的词语，就像您在您的菜单中所做的那样？

在这篇文章中，您剥离了所有自动生成的用于菜单的 WP HTML 标签。如果您必须设计下拉导航，您将如何设置它们的样式？

Trisha

# 2013 年 10 月 1 日

我是这样做的……
将 span 标签添加到 link_before 和 after
不要忘记添加 span 标签（在 a 标签旁边），这样它就不会被剥离。

$menuParameters = array(
                    'container'       => false,
                    'echo'            => false,
                    'items_wrap'      => '%3$s',
                    'link_before'     => '<span>',
                    'link_after'      => '</span>',
                    'depth'           => 0,
                      );

echo strip_tags(wp_nav_menu($menuParameters ), '<a><span>' );

pagol

# 2012 年 8 月 5 日

它真的很棒，而且易于使用..

请问，我还能知道一件事情吗.. 如何像这样

菜单名称
 菜单名称
 菜单名称
 菜单名称
 菜单名称

我已经在这里找到了解决方案 http://stackoverflow.com/questions/5222140/remove-li-class-id-for-menu-items-and-pages-list?answertab=oldest#tab-top

但问题是我总共有 6 个菜单，其中两个是下拉菜单.. 因此，在我添加了该代码后，我看到我的下拉菜单无法正常工作，并且某些 CSS 也无法正常工作，因此……但我现在想要一些我将指定的菜单，它们将没有类。

Michael Caputo

# 2012 年 8 月 17 日

非常有帮助！谢谢！

pagol

# 2012 年 8 月 23 日

另一个解决方案。 http://wpquestions.com/question/show/id/2465

Craig M

# 2012 年 9 月 4 日

这是我工作中遇到的挑战的完美解决方案！但是，我现在需要弄清楚如何保留 .current-menu-item，以便我可以使用它来显示活动页面。

我尝试使用 Foundation 的 Tab 系统，并使用 wp_nav_menu 创建一个流畅且易于管理的导航栏……

ruuter

评论永久链接# 2012 年 11 月 20 日

这里也是同一个问题

ruuter

# 2012 年 11 月 20 日

找到一个简单的解决方案。使用 jQuery

    $(function(){
        var path = location.href;
        if ( path )
        $('nav.main-menu a[href="' + path + '"]').attr('class', 'current');
    });

Johan

# 2012 年 9 月 18 日

效果很好！谢谢

Brad

# 2012 年 10 月 23 日

感谢您在这方面的帮助。但是，我想知道我们如何获得应用于 LI 标签上的 A 标签的类？我想获得当前页面，但我也想获得当前父页面，因此不确定 wp_nav_menu 是否可以帮助您？

Brad

评论永久链接# 2012 年 10 月 23 日

我实际上看到您在 body 中添加了一个类，并且在导航项目上设置了类来处理此问题。确定您实际上在您的屏幕录像中谈论过这个。谢谢

proxo

# 2012 年 11 月 1 日

PHP 代码

<?php    
    $defaults = array(
    'theme_location'  => 'my-menu',
    'container'       => 'nav', 
    'container_class' => 'menu', 
    'echo'            => false,
    'fallback_cb'     => false,
    'items_wrap'      => '%3$s',
    'depth'           => 0
    );
    echo strip_tags(wp_nav_menu( $defaults ), '<nav><a>');
?>

HTML 结果

<nav class="menu">
   <a></a>
   <a></a>
   <a></a>
</nav>

它更好；)

Kashish

评论永久链接# 2013 年 11 月 20 日

谢谢 proxo！！！它对我有用！！ :)
asad

评论永久链接# 2015 年 7 月 3 日

这很好.. 现在我想动态地给 <a> 赋值类

输出应该像这样
<div class="ui secondary menu"> <a href="https://127.0.0.1/wordpress/lbs/" class="item">主页</a> </div>

James Morgan

# 2012 年 11 月 7 日

这很方便。谢谢！

nik

# 2012 年 11 月 9 日

你好，你能告诉我如何在 WordPress 菜单中添加额外的元素吗？我们能使用 JavaScript 来做到吗？例如，在我的网站上，我希望主菜单上有一个带大型下拉框的最后一个元素，用于显示社交按钮！

Ryan Hidajat

# 2013 年 1 月 23 日

有没有办法只删除 LI 类和 ID？

Adrian

评论永久链接# 2013 年 1 月 31 日

试试 Revelation Travis 发布的这个解决方案。也许它能帮助你？

“这是我想到的一个解决方案。它从 wp_nav_menu 中删除了所有 ID 和类，但允许你创建自己的“批准”类和/或 ID 列表。它还将冗长的“current-menu-item”更改为“active”。如果你希望保留默认的 WordPress CSS 样式，只需删除该部分代码。为了使这篇文章保持简洁，以下是代码粘贴到 Pastebin 的链接：
http://pastebin.com/W16cxDfY - 用于你的 functions.php 文件
http://pastebin.com/CGx4aprf - 用于你的模板，无论菜单在哪里”

Adrian

# 2013 年 1 月 31 日

我在外观 > 菜单中创建了几个菜单，我只需要在每个菜单中拥有不同的 .current-menu-item 类，因为左侧菜单的超链接中有三角形箭头，但标题菜单和底部菜单不同。Chrome、Safari IE 10 和 Firefox 正确地显示了菜单，但在 IE 6、7、* 和最新的 Opera 中，菜单以错误的方式显示，在旧版本中也是如此。因为所有菜单都继承了 .current-menu-item 类。

例如，继承并加载到标题菜单和底部菜单中的 css 代码。

左侧侧边栏菜单的 css current-menu-item 类

.menu-wynajem-akcesoriow-container li.current-menu-item a {
margin-left:37px;
color: #000000;
font-weight:bold;
background: transparent url(images/arrow.png) 0px 15px no-repeat;

标题菜单的 css current-menu-item 类

div#header-content-menu li.current-menu-item a {
color: #ffffff;
background-color:#445d8a;
height:52px;
}

底部菜单的 css current-menu-item 类

.columns-bottom .col-02 li.current_page_item a {
color: #4d74bc;
}

我知道我需要为每个菜单使用不同的 current 类或 ID，这样每个浏览器都能正确地显示它。有什么想法吗？

Adrian

# 2013 年 1 月 31 日

http://stackoverflow.com/questions/5222140/remove-li-class-id-for-menu-items-and-pages-list?answertab=oldest#tab-top

最后一篇帖子，其中包含指向 Pastebin 的链接可能是一个解决方案？

abby normal

# 2013 年 2 月 15 日

谢谢 proxo - 那段代码片段正是我需要的 :-)

vaigundaraja

# 2013 年 6 月 14 日

嗨，朋友们，

我在更改方面遇到了问题

<

ul> 标签到

<

div> 标签在 wp_nav_menu 中。

请帮助我..

我的导航格式如下。

主页
 关于我们

谁能帮帮我…

Mark

# 2013 年 6 月 19 日

你能保留在 WP 管理员中添加的类的输出吗？

<a class="" href="">

Shrinath

# 2013 年 8 月 7 日

大家好，

我正在从 HTML 创建 WordPress 菜单。我的导航菜单如下所示

<ul>
<li class=”current”><a href=”index.html” class=”m1″>主页</a></li>
<li><a href=”about-us.html” class=”m2″>关于我们</a></li>
<li><a href=”articles.html” class=”m3″>我们的文章</a></li>
</ul>

所以任何人都可以建议我如何在 WordPress 菜单中做到这一点

目前我已经这样做了

<?php wp_nav_menu( array( ‘theme_location’ = > ‘primary’,’container_id’ = > ‘nav’,) );? >

但它不起作用.:(

Chris Hill

评论永久链接# 2013 年 8 月 30 日

嗨，很棒的解决方案，但在 WordPress 3.6 下无法运行。:-(

Chris Hill

# 2013 年 8 月 30 日

这是我设法让 WordPress 3.6 运行的解决方案。

$options =  array(
    'echo'              => false,
    'theme_location'    => 'footer_menu',
    'items_wrap'        => '%3$s', 
    'menu_class'        => false, 
    'menu_id'           => false,
    'container'         => false,
    'container_class'   => false,
    'container_id'      => false,
    'before'            => ' | ',
    'after'             => false
);

$menu = wp_nav_menu($options);

echo strip_tags($menu, '<a>');

Charles Truelson

# 2013 年 9 月 7 日

感谢这个。在我的 3.6 上运行良好。

匿名

# 2013 年 9 月 9 日

<ul>
   <li class=”current”>
     <a href=”index.html” class=”m1″>Home Page</a>
     <a href=”about-us.html” class=”m2″>About Us</a>
     <a href=”articles.html” class=”m3″>Our Articles</a>
  </li>
</ul>

对我有用。

Zoe Rooney

# 2013 年 9 月 9 日

我想到了一种使用 str_replace 的方法来保留所有类，包括当前菜单项的类，在链接上。它非常直观

<?php 
$cleanermenu = wp_nav_menu( array( 
    'theme_location' => 'primary', 
    'container' => false,
    'items_wrap' => '<nav id="%1$s" class="%2$s">%3$s</nav>', 
    'echo' => false,
) );

$find = array('><a','li');
$replace = array('','a')
echo str_replace( $find, $replace, $cleanermenu );

?>

我写了一篇关于它的博文，如果你想了解更多信息/理性。

Vincent

评论永久链接# 2014 年 10 月 20 日

你是救星！

Cris Caducoy

# 2013 年 9 月 30 日

是的，这是一个非常有趣的事实，因为当你在构建页脚导航时，你希望这些自定义菜单基于你在仪表板上的自定义菜单选项构建，你希望这些小链接被动态添加，并且始终居中。将锚点设置为居中比将它们放在 li 中更容易。

Trisha

# 2013 年 10 月 1 日

太棒了！我总是可以依靠这个网站来获取好东西。
卡在最后一步了…
有人知道如何给 a 标签添加一个类（非动态）吗？
我需要在菜单中的每个 a 标签上使用相同的类。

Trisha

评论永久链接# 2013 年 10 月 1 日
我能够使用更简单的 ruuters jquery 解决方案来完成它
```
<script>
jQuery( "#menu a" ).addClass( "my-class" );
</script>
```

Stubby

# 2014 年 4 月 16 日

如果你将它添加到你的 functions 文件中

function mark_active_menu_item( $subject, $indicator ) {
  $menu = explode( "current-menu-item", $subject );
  return $menu[0] . preg_replace( '/href/', 'class="' . $indicator . '" href', $menu[1], 1 );
}

然后像这样包装你的 wp_nav_menu

echo strip_tags(
           mark_active_menu_item(
             wp_nav_menu( 
                $menu_arguments  // Array that Chris provided
            ),
            "active"        // I chose to use "active" for my active menu item.
          ),
          "<a>"
        );

你可以完全用 php 做同样的事情，而且它不会在有人关闭 JavaScript 的情况下崩溃。

Simen Mangseth

# 2013 年 10 月 26 日

嗨！有人可以，请告诉我这部分代码应该放在哪里，因为它在任何地方都没有提到。这真的那么明显吗？我是不是唯一一个找不到它的笨蛋？

Chris Coyier

评论永久链接# 2013 年 10 月 26 日

在任何模板文件中。例如 index.php

LebCit

# 2013 年 11 月 29 日

你好，Chris，

首先，我必须说，感谢你！:) !!!

我一直在谷歌搜索解决方案，第一个答案就是你的！

我的菜单标记没有 wp_nav_menu 的 div / ul / li，只是一个 nav / a - a - a - ... / nav

当然，删除 div 和 ul 很容易，CODEX 就有了！

但当谈到 li 时，我花了几个小时才用谷歌搜索，哈哈！

所以再次感谢你分享你的忍者代码经验！:) !!!

Engineer Saddam

# 2013 年 12 月 6 日

Trisha

谢谢，你解决了我的问题

非常感谢

Dan

# 2014 年 2 月 7 日

有人知道如何获取子菜单（li 中的无序列表）并将其包装在一个 div 中吗？

Ben Hutchings

# 2014 年 8 月 20 日

我回复得太晚了，Dan，我猜，但这可能对其他人有所帮助

你应该能够使用 Walker_Nav_Menu 类的 start_lvl 和 end_lvl 函数。例如，如果你将此添加到 functions.php

class dans_walker extends Walker_Nav_Menu {
 function start_lvl( &$output, $depth = 0, $args = array() ) {
  $output .= "<div class='whatever you want'><ul>";
 }
 function end_lvl( &$output, $depth = 0) {
  $output .= "</ul></div>";
 }
}

并在你的主题中像这样调用你的菜单

<?php
 $defaults = array(
  'container'   => false,
  'menu_class'  => false,
  'walker'      => new dans_walker()
 );
 wp_nav_menu( $defaults );
?>

... 大概就是这样，我认为 :)

Rene

# 2014 年 7 月 3 日

非常感谢你提供这部分代码！！

Ben Hutchings

# 2014 年 8 月 20 日

我最近在为一个网站做这个，发现很难删除列表元素，但保留所有有用的祖先类，比如“current-menu-item”等等。我唯一能做到的是使用一个walker类来直接修改wp_nav_menu的输出。

这是我的方法链接（如果链接被禁止，请告诉我，我会把所有内容粘贴在这里）：http://myquickfix.co.uk/2014/08/remove-and-tags-from-wordpress-menus-while-retaining-all-the-classes/

Muddasir

# 2014年9月5日

http://stackoverflow.com/questions/25680791/trying-to-fetch-wp-nav-menu-dynamically-in-wordpress?noredirect=1#comment40135231_25680791

在这个链接上，我问了一个问题，但没有得到合适的答案，我分享了我的菜单图片和HTML，我卡住了，请帮忙，如果你有解决方案。

谢谢

Guens

# 2014年10月29日

这个教程对我的帮助很大。

非常感谢

Jerry Liu

# 2014年12月16日

很棒的技巧！我正在处理这样一个问题，CSS-Tricks从没让我失望！谢谢Chris!

Philip Ingram

# 2015年3月4日

这很棒，但是如果你想直接将菜单项@ /wp-admin/nav-menus.php中定义的css类应用于锚点，该怎么办？

我感觉preg_replace可能是最简单的方法。我很惊讶在2015年，walker类没有更灵活，而且更容易让初学者主题开发者让菜单结构匹配任何想要的格式。

Philip Ingram

Permalink to comment# 2015年3月4日

实际上阅读Zoe上面博客文章帮助我解决了这个问题。谢谢Zoe！

Munin

# 2015年6月1日

尝试修改Chris Hill为wordpress 4.2.2 版本，奇怪的是无法保留

<

nav> 在strip_tags上，所以我就把它放在echo外面。

asad

# 2015年7月2日

非常棒的答案

请指导如何使用你的代码实现这个目标

服务
 作品集
 商店

我想给<a></a>添加class=”item”

谢谢

asad

# 2015年7月2日

非常棒的答案

请指导如何使用你的代码实现这个目标
<div class="ui secondary menu"> <a href="" class="item">服务</a> <a href="" class="item">作品集</a> <a href="" class="item">商店</a> </div>

我想给<a>添加class="item"

谢谢

Mario

# 2016年3月14日

这个解决方案对我似乎不起作用。显然我忽略了一些东西，所以任何帮助都会非常感谢。

我试图创建一个简单的nav标签，里面嵌套着a标签。使用这个解决方案，我丢失了ul和li，但也丢失了“nav”标签，所以我最终只得到了“a”标签…

Krystian Kociszewski

# 2016年5月10日

$menuParameters = array(
‘theme_location’ => ‘primary’，
‘container’ => false,
‘echo’ => false,
‘items_wrap’ => ‘%3$s’,
‘depth’ => 0,
);

                    $menu = strip_tags(wp_nav_menu( $menuParameters ), '<a>' );

                    $find = array('<a');
                    $replace = array('<a class="mdl-navigation__link mdl-typography--text-uppercase"');
                    echo str_replace( $find, $replace, $menu );

Rodolfo

# 2016年6月2日

你可以使用nav_menu_link_attributes

function add_specific_menu_location_atts( $atts, $item, $args ) {
    // check if the item is in the primary menu
    if( $args->theme_location == 'primary' ) {
      // add the desired attributes:
      $atts['class'] = 'menu-link-class';
    }
    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_specific_menu_location_atts', 10, 3 );

Mamta

# 2016年10月6日

抱歉上次发错了帖子…

对我来说，它用这个工作
‘menu’=>‘mainmenu’,
‘echo’ => false,

);

echo strip_tags(wp_nav_menu( $menuParameters ), ‘‘ );
?>

Nimitz

# 2017年3月2日

我怎样才能使用这个片段添加类？

nav > a.class

我设法让a部分工作，但无法添加类

$menuParameters = array(
                  'menu' => 'simpl_footer',
                  'container'       => false,
                  'echo'            => false,
                  'items_wrap'      => '%3$s',
                  'depth'           => 0,
                  'link_before'     => '',
                   'link_after'      => '',
                  'menu_class' => 'general-footer__link ',
                );
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );

Saskia Lund (@SaskiaLund)

# 2018年6月1日

我们能够限制菜单深度输出，这很酷。
然而，我不理解的是，它 somehow 没有自动与这个过滤器集成，在WP Admin -> Design -> Menus -> 深度设置为3的特定菜单中

用户仍然可以在深度层4、5、6等设置菜单项。这对用户来说很令人困惑。有什么建议吗？

评论

发表评论 取消回复

发表评论取消回复