首页 开发指南

我们看到不少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

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

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

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

会员评论:(0)

声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!
©www.sbmzenith.com 2013-2020 All Rights Reserved.
豫ICP备15009393号