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

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

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