为 WordPress 3.0 的自定义菜单链接添加栏目图标
![]()
WordPress 3.0 为了增强 CMS 功能,加入了自定义菜单的功能,除了定义菜单项目外,还可以菜单定义各个项目的 CSS Class。我们可以利用这个功能来为菜单项目添加一个个性图标。
在 WordPress 3.0 的 Appearance(外观)-> Menus(菜单)面板里我们可以看到自定义菜单的设置,首先点击“Creat Menu”,再在左栏勾选需要的菜单项目后点击“Add to Menu”可以把勾选的项目添加到刚才建立的自定义菜单里。这是展开菜单项可以看到相关项目的参数。

默认情况下能修改的参数很少,这时点击屏幕左上角的“Screen Options(屏幕参数)”,把“Show advanced menu properties(显示高级菜单属性)”里的项目全部勾选,我们就可以看到更多的参数。以本文题图为例,为各个项目分别加上 Home、Advertise、Contact、Archives 和 About 的 CSS Class,这样在前台调用菜单时,这些项目将拥有一个自定义的 CSS Class,接下来我们可以通过 CSS 为这些项目加上图标。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | #header ul.navigation li a.home { background:url("images/home.png") no-repeat 0 1px transparent; } #header ul.navigation li a.about { background:url("images/about.png") no-repeat 0 0px transparent; } #header ul.navigation li a.advertise { background:url("images/advertise.png") no-repeat 0 0px transparent; } #header ul.navigation li a.archive { background:url("images/archive.png") no-repeat 1px 2px transparent; } #header ul.navigation li a.contact { background:url("images/contact.png") no-repeat 0 3px transparent; } |
在 WordPress 3.0 之前的版本里,我们可以通过 JavaScript 等方法为菜单项目加上图标。原理是获取菜单项的 title 值,再为它加上一个和 title 值相同的 Class,在 jQuery 里可以这样写:
1 2 3 4 5 | $(document).ready(function(){ $('ul.navigation li a').addClass(function() { return $(this).attr('title'); }); }); |






3.0除了多站点,就这个功能最方便了
还没升到3.0,又收藏着吧
3.0太欢喜了,我要的就是CMS功能~!
日!又SPAM了?!
现在不舍得升级了..自己改了好多东西..
都3.0了
@Dianso
多站点早就提供接口了,只是很少人知道
@mice
把改的东西提取出来,做成一个私人插件
等正式版呢~
@Jutoy
人品啊
@帅哥
今天出了RC版,正式版也不远了
wp3.0真是强大。。等着正式版
有点太强了
升级怕有些插件不支持咧。
@surda
升级前先建一个测试站点检查自己用的插件是否兼容呗
这个功能确实不错,很值得以用,感谢楼主提示这个方法。
如何增加外链,我的外链1400,如何加到5000,大家是手动加的吗,一个站一个站加的吗,太花时间了