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

/ 1评 / 0

WordPress 3.0及以上版本为了增强 CMS 功能,加入了自定义菜单的功能,除了定义菜单项目外,还可以菜单定义各个项目的 CSS Class。我们可以利用这个功能来为菜单项目添加一个个性图标。

在 WordPress 的 Appearance(外观)-》 Menus(菜单)面板里我们可以看到自定义菜单的设置,首先点击“Creat Menu”,再在左栏勾选需要的菜单项目后点击“Add to Menu”可以把勾选的项目添加到刚才建立的自定义菜单里。这是展开菜单项可以看到相关项目的参数。

默认情况下能修改的参数很少,这时点击屏幕左上角的“Screen Options(显示选项)”,把“Show advanced menu properties(显示菜单高级属性)”里的项目全部勾选,我们就可以看到更多的参数。

方法一:

为各个项目分别加上 Home、Advertise、Contact、Archives 和 About 的 CSS Class,这样在前台调用菜单时,这些项目将拥有一个自定义的 CSS Class。

#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;
}

方法二:

找到自定义链接,在URL里面填上你的首页地址,标签里面填上:

HomeHome

实测第二种方法对所有模板通用,且操作简单,推荐第二种方法实现。

  1. 屠龙说道:

    支持下代码,还需要学习呢

发表评论

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