wp_nav_menu中的walker详解

我们看到不少WP中都用到了.nav li a:hover .#menu-item-8{}这样的样式,再加上CSS3中的一些特效,显示真是非常炫丽,比如本站首页的导航。

当然关于这个,有一点小小的要求就是要求a:hover后面的代码指带分明,比如说menu-item-8这个是一个表示一个span才能有效,如果写成.nav li a:hover #menu-item-8 span{}这样的样式是不能生效的。

这们的效果在wp中很常用,而我们经常使用的wp_nav_menu()这个函数,其输出相对来说又比较死板,当然碰到这们的情况,还是有办法解决的。

第一种办法,直接修改function start_el这个函数,这也是很多新手都能想到得一个问题,在这里我也不推荐给大家,因为这样修改的结果是,每当WP在后台升级,我们都要回头修改这里面的输出,实在是一个下下策。不易于主题的流传。

第二种方法就是用WP_nav_menu中的一个参数了,以本站为例:

<?PHP
wp_nav_menu(array(
'theme_location'    => 'primary',
'menu'              => '',
'container'         => 'div',
'container_class'   => 'menu-header',
'container_id'      => '',
'menu_class'        => 'menu',
'menu_id'           => '',
'echo'              => true,
'fallback_cb'       => 'wp_page_menu',
'before'            => '',
'after'             => '',
'link_before'       => '',
'link_after'        => '',
'items_wrap'        => '<ul>%3$s</ul>',
'depth'             => 0,
'walker'            => new hnnyistMenu('')
));

?>

最后一行,就是关键所在,这个参数实际是一个扩展类,写在我们的function.php文件里面,也就是我说我们在主题里面写下这个扩展类。

class hnnyistMenu extends Walker_Nav_Menu

我们可以重写这个类里面的任何一个函数的输出,当然水平高得话,写得再面目全非也是可以的。

用这种方法,我们就可以大胆在后台升级了。