导航菜单（下）：当前项高亮与多级菜单
当前项高亮，WordPress 已经帮你做了
导航里“当前所在的页面”要加个高亮，很多人第一反应是写 PHP 判断：
<?php if ( is_page('about') ) echo 'active'; ?>不用这么麻烦。WordPress 会自动给当前页面对应的菜单项加上 class。
它会加哪些 class
菜单项 <li> 上，WordPress 会按情况加：
| class | 什么时候加 |
|---|---|
current-menu-item |
当前正在看的这个页面 |
current-menu-parent |
当前页面的父级菜单项 |
current-menu-ancestor |
当前页面的祖先菜单项（多级） |
current_page_item |
当前页面（page 类型专用） |
menu-item-has-children |
这个菜单项有子菜单 |
你只要在 CSS 里针对这些 class 写样式：
.current-menu-item > a {
color: #d43c33;
font-weight: bold;
}就这么简单。不用写一行 PHP。
一个常见的错
有人在 wp_nav_menu 里自己加 class，结果跟 WordPress 自动加的混在一起，样式冲突。
正确做法：让 WordPress 加，你只管在 CSS 里挑它加的 class 用。
多级菜单（子菜单）
WordPress 的菜单支持无限层级。你在后台把某个菜单项往右拖一格，它就变成子菜单。
输出的结构是：
<li class="menu-item menu-item-has-children">
<a href="#">父级</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">子级</a></li>
</ul>
</li>子菜单的 <ul> 自带 sub-menu 这个 class，你可以用它写样式。
caogenbj 用的是 Bootstrap 的导航，Bootstrap 对 dropdown 有自己的要求（要 data-toggle="dropdown" 之类）。所以它的多级菜单其实没做出来——只有一个平铺的导航。
这说明一件事：导航的样式框架（Bootstrap / 自己写）决定了多级菜单能不能用。如果要支持多级，得按框架的规则来。
移动端的汉堡菜单
caogenbj 的 header.php 里有这段：
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>这是 Bootstrap 的折叠按钮。点它，导航展开/收起。对应的 data-target 要跟导航容器的 id 一致（这里是 #example-navbar-collapse）。
如果点了没反应，常见原因：
data-target跟容器 id 对不上；- Bootstrap 的 JS 没加载；
- jQuery 在 Bootstrap 之后加载（顺序反了）。
小结
一句话记住：当前项高亮不用写 PHP，用 WordPress 自动加的 current-menu-item 等 class；多级菜单靠 sub-menu 结构 + 框架样式。
下一篇讲侧栏和“小工具”。
本系列导航
相关文章
搜索文章：
联系方式：
近期文章