我们在开发网站使用 WordPress 制作导航菜单，会使用 wp_nav_menu 函数，它可以自动调用出后台创建的导航菜单。但是使用默认的 wp_nav_menu 函数生成的菜单结构比较单调，有时很难达到我们自己的需要。
下面学做介绍一下 WordPress 如何使用 wp_nav_menu 函数生成需要的 class 结构。
1、注册导航菜单：
在WordPress主题中使用wp_nav_menu函数来创建导航菜单。确保你在主题的functions.php文件中注册了一个自定义菜单。
register_nav_menus( array( 'primary' => __( 'Primary Menu', 'xtartheme' ), 'secondary' => __('Secondary Menu', 'xtartheme' )) );2、header.php 添加代码：
在主题模板文件中添加以下代码来显示导航菜单：
<?php
wp_nav_menu(array('theme_location' => 'primary','container' => false,'menu_class' => 'navbar-nav mt-4 mt-lg-0 ml-auto','fallback_cb' => '__return_false',//'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>','walker' => new Custom_Bootstrap_Nav_Walker(),
));
?>需要用到下面这个函数
<?php
wp_nav_menu( array(
'theme_location' => '',//导航别名
'menu' => '', //期望显示的菜单
'container' => 'div', //容器标签
'container_class' => '',//ul父节点class值
'container_id' => '', //ul父节点id值
'menu_class' => 'menu', //ul节点class值
'menu_id' => '', //ul节点id值
'echo' => true,//是否输出菜单，默认为真
'fallback_cb' => 'wp_page_menu', //菜单不存在时，返回默认菜单，设为false则不返回
'before' => '', //链接前文本
'after' => '', //链接后文本
'link_before' => '', //链接文本前
'link_after' => '',//链接文本后
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', //如何包装列表
'depth' => 0, //菜单深度，默认0
'walker' => '' //自定义walker
) );
?>如果使用Bootstrap样式：
使用Bootstrap的CSS类来样式化导航菜单。例如，你可以将导航菜单容器设置为Bootstrap的navbar类，并添加其他所需的类。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<?php
wp_nav_menu(array('theme_location' => 'primary','container' => false,'menu_class' => 'navbar-nav mt-4 mt-lg-0 ml-auto','fallback_cb' => '__return_false',//'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>','walker' => new Custom_Bootstrap_Nav_Walker(),
));
?>
</nav>
wp_nav_menu() 默认使用的菜单项CSS类
以下类适用于菜单项，即HTML生成的HTML 标签wp_nav_menu()：
.menu-item：此类添加到每个菜单项。
.menu-item-has-children：此类已添加到具有子项的菜单项。
.menu-item-object-{object}：此类添加到每个菜单项，其中{object}是发布类型或分类法。
.menu-item-object-category：此类已添加到与类别相对应的菜单项中。
.menu-item-object-tag：此类已添加到与标签相对应的菜单项中。
.menu-item-object-page：此类已添加到与静态页面相对应的菜单项中。
.menu-item-object-{custom}：此类已添加到与自定义帖子类型或自定义分类法相对应的菜单项。
.menu-item-type-{type}：此类添加到每个菜单项，其中{type}是“ post_type”或“分类”。
.menu-item-type-post_type：此类被添加到与帖子类型相对应的菜单项中：静态页面或自定义帖子类型。
.menu-item-type-taxonomy：此类添加到与分类法相对应的菜单项：即类别，标签或自定义分类法。
当前页面菜单项
.current-menu-item：此类已添加到与当前呈现的页面相对应的菜单项中。
当前页面父菜单项
.current-menu-parent：此类已添加到与当前呈现的页面的层次结构父级相对应的菜单项中。
.current-{object}-parent：此类被添加到与当前渲染的对象的层次父级相对应的菜单项中，其中{object}对应于.menu-item-object- {object}所使用的值。
.current-{type}-parent：此类已添加到与当前呈现的类型的层级父级相对应的菜单项中，其中{type}对应于.menu-item-type- {type}所使用的值。
当前页面祖先菜单项
.current-menu-ancestor：此类被添加到与当前呈现的页面的层次祖先相对应的菜单项中。
.current-{object}-ancestor：此类已添加到与当前渲染的对象的层级祖先相对应的菜单项中，其中{object}对应于.menu-item-object- {object}所使用的值。
.current-{type}-ancestor：此类被添加到与当前呈现类型的层次结构祖先相对应的菜单项中，其中{type}对应于.menu-item-type- {type}所使用的值。
网站首页菜单项
.menu-item-home：此类已添加到与网站首页相对应的菜单项中。
并且向后兼容wp_page_menu（）添加了以下类以保持与[[Function Reference / wp_page_menu | wp_page_menu（） ]]函数输出：
.page_item：此类已添加到与静态页面相对应的菜单项中。
.page_item_has_children：此类被添加到具有子页面的菜单项中。
.page-item-$ID：此类被添加到与静态页面相对应的菜单项中，其中$ ID是静态页面ID。
.current_page_item：此类被添加到与当前呈现的静态页面相对应的菜单项中。
.current_page_parent：此类已添加到与当前呈现的静态页面的层次结构父级相对应的菜单项中。
.current_page_ancestor：此类已添加到与当前呈现的静态页面的分层祖先相对应的菜单项中。
3、Walker 类
这个 Walker 类负责生成符合 Bootstrap 样式的导航菜单。请将以上两段代码添加到你的主题的 functions.php 文件中。需要创建一个自定义的导航菜单 Walker 类来处理 Bootstrap 的导航结构。下面是一个 Walker 类：
class Custom_Bootstrap_Nav_Walker extends Walker_Nav_Menu {// 添加导航项的 CSS 类function start_lvl(&$output, $depth = 0, $args = null) { $indent = str_repeat("\t", $depth); $output .= "\n$indent<ul class=\"dropdown-menu\">\n";}
// 添加子导航项的 CSS 类function start_el(&$output, $item, $depth = 0, $args = null, $current_object_id = 0) { $indent = ($depth) ? str_repeat("\t", $depth) : '';
$classes = empty($item->classes) ? array() : (array) $item->classes; $classes[] = 'nav-item';
if ($args->walker->has_children) { $classes[] = 'dropdown'; }
$output .= $indent . '<li class="' . implode(' ', $classes) . '">';
$atts = array(); $atts['href'] = !empty($item->url) ? esc_url($item->url) : ''; $atts['class'] = 'nav-link' . ($args->walker->has_children ? ' dropdown-toggle' : ''); $atts['data-toggle'] = $args->walker->has_children ? 'dropdown' : '';
$output .= '<a ' . $this->html_atts($atts) . '>' . esc_html($item->title);
// 如果有子导航项，添加下拉箭头 if ($args->walker->has_children) { $output .= '<b class="caret"></b>'; }
$output .= '</a>';}
// 生成 HTML 属性function html_atts($atts) { $html = ''; foreach ($atts as $name => $value) { if (!empty($value)) { $html .= $name . '="' . esc_attr($value) . '" '; } } return $html;}
}
上面代码直接放在functions.php文件中即可，当然如果觉得放在functions.php中臃肿，还可以单独放在一个文件中，在functions.php中引用即可。如下：
require_once( TEMPLATEPATH . '/walker.php');4、同步后台编辑到前端
默认情况下，WordPress的后台编辑导航的更改会直接反映在前端。确保在后台WordPress仪表板中创建和编辑导航菜单时，你的更改会在前端生效。
- 登录WordPress后台。
- 转到“外观” -> “菜单”。
- 在菜单编辑器中，添加、删除或重新排序菜单项。
- 确保选择了正确的“位置”（通常是主导航菜单）。
- 点击“保存菜单”按钮。
