为 wp_nav_menu 设置类

Posted 2023-03-06

【中文标题】为 wp_nav_menu 设置类

【英文标题】：Set class for wp_nav_menu

【发布时间】：2012-11-03 17:12:00

【问题描述】：

如何转换：

<ul class="ulStyle">
<li class="liStyle">
<div class="first">
<div class="second">
menu1
</div>
</div>
</li>
</ul>

到 wp_nav_menu

里面的div和class太多了，谁能帮我解决这个问题？谢谢！

【参考方案1】：

这可以使用 css 中的 nth-child() 选择器来完成

见密码笔here

使用这个 CSS：

.wp_nav_menu div:nth-child(1) 

  background: blue;



.wp_nav_menu div:nth-child(2) 

  background: red;

使用以下标记：

<ul class="wp_nav_menu">
  <li>
    <div>
      Foo
    </div>
    <div>
      Bar
    </div>  
  </li>
</ul>  

【参考方案2】：

我看到您正在使用可能有 Walker 的自定义主题。在 WordPress 中，您可以使用 Walker 来修改由 wp_nav_menu 呈现的 html。

http://codex.wordpress.org/Function_Reference/Walker_Class

先看看有没有，一般在theme/functions.php中

【讨论】：

默认的walker已经有选项来改变你的菜单和菜单项的封装。自定义 walkers 可以做的更多，但对于这个特定问题来说，这可能有点过头了。

看起来他已经有了一个walker，因为默认渲染的HTML只有ul、li和a。他可以先移除它！

【参考方案3】：

在开始使用自定义步行器之前，请使用选项 before、after、link_before、link_after 和 items_wrap。见http://codex.wordpress.org/Function_Reference/wp_nav_menu

它将允许您更改菜单项的封装。