wp_nav_menu 函数经Walker_Nav_Menu 类自定义导航菜单HTML

13,621
wp_nav_menu 函数经Walker_Nav_Menu 类自定义导航菜单HTML
  • 4.67 / 5 5
4.67分(12票)

WordPress 中有一个导航菜单函数wp_nav_menu,通过这个函数可以控制菜单输出的HTML 结构,一般开发者用这个函数的一般是在输出HTML 中自定义一些id 或者class 而已,整体的HTML 结构还是WordPress 默认的。项目的需求是各种各样的,了解如何自定义导航菜单HTML 结构就十分重要了。

wp_nav_menu 函数

囿于篇幅,本文不会教你怎么使用wp_nav_menu 函数,请自行补习。通过设置wp_nav_menu 的参数,前台输出的HTML 结构大概都是这样的(为了简洁,去除了一些id、class):

1
2
3
4
5
6
7
8
9
10
11
12
13
<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"的代码:

1
2
3
4
function start_lvl( &$output, $depth = 0, $args = array() ) {
	                $indent = str_repeat("\t", $depth);
	                $output .= "\n$indent<ul class=\"sub-menu\">\n";
     }

那么根据我的需求,代码应该改成是:

1
2
3
4
function start_lvl( &$output, $depth = 0, $args = array() ) {
	                $indent = str_repeat("\t", $depth);
	                $output .= "\n$indent<ul class=\"child-menu\">\n";
     }

准确来讲,整体的类的代码应该是(dw_walker这个类名是自己取的,请自行定义):

1
2
3
4
5
6
7
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 函数中调用这个自定义的类:

1
2
3
4
<?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 类自定义输出。

喵~本文目前有8条留言,欢迎发表评论!

  1. 6#
    :

    WordPress模板开发二级导航的问题困扰我好久了,看了您这篇文章有了点启发,谢谢分享!

    [回复]
  2. 我的博客在ie9下一级及二级菜单显示不正常,经过排查,是ul 和li 采用了sub-menu标签,如果去掉sub-menu,就正常,请问怎么去掉呢

    [回复]
    • 文中的例子不是刚好可以解答你疑问吗?

      [回复]
  3. 4#
    :

    板凳怎么变成沙发了?模板作者出来说句话,这个好像是BUG吧

    [回复]
  4. 赶上地板鸟
    :

    板凳呢?

    [回复]
  5. 板凳也不错
    :

    传说中的沙发

    [回复]
    • 所有评论都是要审核的,请不要留无意义的评论。

      [回复]
  6. 传说中的沙发
    :

    得挂 😛

    [回复]

打破沉默,我来发表评论鸟~