加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > CMS系统 > wordpress > 正文

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

发布时间:2020-12-14 14:15:44 所属栏目:wordpress 来源:网络整理
导读:默认情况下能修改的参数很少,这时点击屏幕左上角的Screen Options(屏幕参数),把Show advanced menu properties(显示高级菜单属性)里的项目全部勾选,我们就可以看到更多的参数。以本文题图为例,为各个项目分别加上 Home、Advertise、Contact、Archive

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

 

默认情况下能修改的参数很少,这时点击屏幕左上角的“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的博客

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读