给WordPress的导航上面的菜单添加个性的小图标,方法很简单,但是却能达到很好的展示效果,可以做一些菜单上面的扩展,来美化我们的博客界面。

某日闲得无聊就给『Weisay Simple』主题导航的菜单前面加了一个小图标,然后发布下载的此主题却没有加小图标,于是很多人就问我怎么添加。

因为我们菜单没有那么复杂,就4个分类,所以我就没有使用功能强大的WordPress菜单,而是用了最原始的代码显示出来的,然后那个可以方便定义小图标。

下载的『Weisay Simple』的导航是封装起来的,修改并不是那么的轻松,我之前试过一些方法,可惜在兼容性上一直处理不好,于是就没有修改上去,不过还是有络绎不绝的人来问这个图标的添加方法,发现很多人都喜欢模仿,我博客上有的则下载的主题也要有,比如我没有显示顶部的独立页面的菜单,而之前下载的主题默认显示,于是一大批人看也不看说明就问我怎么去掉顶部独立页面的导航,所以刚刚更新的『Weisay Simple』 1.4版我索性就去掉顶部的独立页面导航。

言归正传,今天我在更新的『Weisay Simple』的时候,一个突发的idea让我想到一个很简单的方法去添加小图标,下面说说方法。

首先你得使用具有WordPress菜单功能的主题,因为添加图标主要就是针对菜单型导航而来的。

我就以『Weisay Simple』主题给首页添加图标为例,后台-外观-菜单

URL里面填上你的首页地址,标签里面填上

img src= http://www.xxx.com/wp-content/themes/weisaysimple/images/home.gif首页 / 首页

图片的路径请根据你的实际情况修改,请使用绝对路径,避免图片显示错误。

填好之后将其“添加到菜单”,将其移到第一的位置就大功告成了,虽然这个看着有点不是很雅观,但是效果却达到了,是不是异常简单。

当然还有重要的一点,就是兼容问题,这个唯有IE6下有点显示问题,然后我给他打了个css补丁就OK了。

.topnav li img{_padding-top:11px;}

刚刚更新的『Weisay Simple』主题我新加了5个home小图标,对应其他的5个颜色,同时css补丁已经加了,所以用这个主题,并且想加图标的直接在菜单里面添加好代码就行,注意你主题用的什么颜色,就选取什么颜色的home图标。