wp_nav_menu 函数经Walker_Nav_Menu 类自定义导航菜单HTML
wp_nav_menu 函数经Walker_Nav_Menu 类自定义导航菜单HTML
WordPress 中有一个导航菜单函数wp_nav_menu，通过这个函数可以控制菜单输出的HTML 结构，一般开发者用这个函数的一般是在输出HTML 中自定义一些id 或者class 而已，整体的HTML 结构还是WordPress 默认的。项目的需求是各种各样的，了解如何自定义导航菜单HTML 结构就十分重要了。
wp_nav_menu 函数
囿于篇幅，本文不会教你怎么使用wp_nav_menu 函数，请自行补习。通过设置wp_nav_menu 的参数，前台输出的HTML 结构大概都是这样的（为了简洁，去除了一些id、class）：
<nav> <div class=""> <ul id="" class=""> <li id="" class=""><a href="">首页</a></li> <li id="" class=""><a href="">存档</a></li> <ul class="sub-menu"> <li><a href="">WP开发</a></li> <li><a href="">WP开发</a></li> </ul> <li id="" class=""><a href="">学习</a></li> </ul> </div> </nav> |
|---|
这个默认的菜单HTML 结构有非常大的限制（比如说我想在每个li前面添加个标签办不了，一些class的名称也定义不了），如果只这么用根本不能适应各种各样的项目需求，好在WordPress 提供了一个类Walker_Nav_Menu ，通过这个类我们可以自定义HTML 结构。
Walker_Nav_Menu 的用法（例子）
wp_nav_menu 函数中有个参数 $walker，“自定义的遍历对象，调用一个对象定义显示导航菜单。”，默认调用的是Walker_Nav_Menu （其实输出默认结构的就是这个在作怪，位于wp-includes/nav-menu-templates.php）。为了能够自定义HTML 结构，你必须打开wp-includes/nav-menu-templates.php，查看默认的代码，搞清楚与前端输出代码的关系，并在其基础上修改，然后自定义为新的一个类供wp_nav_menu 函数调用。
例子：
比如说WordPress 中输出二级菜单的话，ul 中类名默认是sub-menu，那我想改为child-menu，怎么办？
步骤：
打开wp-includes/nav-menu-templates.php，找到产生ul class="sub-menu"的代码：
function start_lvl( &$output, $depth = 0, $args = array() ) { $indent = str_repeat("\t", $depth); $output .= "\n$indent<ul class=\"sub-menu\">\n"; } |
|---|
那么根据我的需求，代码应该改成是：
function start_lvl( &$output, $depth = 0, $args = array() ) { $indent = str_repeat("\t", $depth); $output .= "\n$indent<ul class=\"child-menu\">\n"; } |
|---|
准确来讲，整体的类的代码应该是（dw_walker这个类名是自己取的，请自行定义）：
class dw_walker extends Walker_Nav_Menu { function start_lvl( &$output, $depth = 0, $args = array() ) { $indent = str_repeat("\t", $depth); $output .= "\n$indent<ul class=\"child-menu\">\n"; } } |
|---|
然后在wp_nav_menu 函数中调用这个自定义的类：
<?php wp_nav_menu( array( 'theme_location' => 'mobilemenu', 'walker' => new dw_walker(), 'fallback_cb' => '' ) ); ?> |
|---|
上诉只是举了个简单的例子来告知Walker_Nav_Menu 类的使用，实际项目中肯定不单单那么简单的，这么来讲，除了基本的WordPress 知识、html+CSS，还需要一些PHP 知识。
更多例子的话，最近发布EaseMobile 主题在导航栏上的图标设置就是采用了Walker_Nav_Menu 类自定义输出。
腾讯云开发者
