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 类自定义输出。
仔细看了文章,确实有效,不过现在的4.8.1的代码已经发生了变化,多了过滤器函数,请问是不是可以用过滤器直接改的办法了?
另外请问这种建立子类的方法是否符合WordPress的扩展规则?这已经是子类的子类了。
不好意思,问题有点多,盼回复。
WordPress模板开发二级导航的问题困扰我好久了,看了您这篇文章有了点启发,谢谢分享!
我的博客在ie9下一级及二级菜单显示不正常,经过排查,是ul 和li 采用了sub-menu标签,如果去掉sub-menu,就正常,请问怎么去掉呢
文中的例子不是刚好可以解答你疑问吗?
板凳怎么变成沙发了?模板作者出来说句话,这个好像是BUG吧
板凳呢?
传说中的沙发
所有评论都是要审核的,请不要留无意义的评论。
得挂