WordPress 3.0自定义菜单链接添加栏目图标

概述默认情况下能修改的参数很少，这时点击屏幕左上角的“Screen Options（屏幕参数）”，把“Show advanced menu properties（显示高级菜单属性）”里的项目全部勾选，我们就可以看到更多的参数。以本文题图为例，为各个项目分别加上 Home、Advertise、Contact、Archives 和 …

 

默认情况下能修改的参数很少，这时点击屏幕左上角的“Screen Options（屏幕参数）”，把“Show advanced menu propertIEs（显示高级菜单属性）”里的项目全部勾选，我们就可以看到更多的参数。以本文题图为例，为各个项目分别加上 Home、Advertise、Contact、Archives 和 About 的 CSS Class，这样在前台调用菜单时，这些项目将拥有一个自定义的 CSS Class，接下来我们可以通过 CSS 为这些项目加上图标。

#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 里可以这样写：

$(document).ready(function(){
$('ul.navigation li a').addClass(function() {
return $(this).attr('Title');
});
});

原文链接：Bolo的博客

总结

以上是内存溢出为你收集整理的WordPress 3.0自定义菜单链接添加栏目图标全部内容，希望文章能够帮你解决WordPress 3.0自定义菜单链接添加栏目图标所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。