威言威语
我愿像茶,苦涩留心,清香予人。
威言威语
当前位置: 首页 > 设计 > 正文

给WordPress导航菜单前面加上个性小图标

给WordPress的导航上面的菜单添加个性的小图标,方法很简单,但是却能达到很好的展示效果,可以做一些菜单上面的扩展,来美化我们的博客界面。
给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" alt="首页" />首页

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

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

给导航标题前面加上个性小图标

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

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

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

您可能还会对这些文章感兴趣!

给WordPress导航菜单前面加上个性小图标:目前有 68 条评论

  1. kxevin
    41楼
    kxevin:Internet Explorer 11.0 Windows 7

    威哥,在分类目录页面要是文章里全部是图片的话,把整篇文章都显示出来了 ,有文字就不会 ,用什么代码可以设置只显示摘要呢?就像首页显示的一样

    2014-09-27 12:57 回复
    • William
      WilliamFirefox 32.0 Windows 7

      @kxevin仔细看主题使用教程最后一点,只要你填写过摘要的,首先默认显示的就是摘要。

      2014-09-28 10:02 回复
      • kxevin
        kxevin:Internet Explorer 11.0 Windows 7

        @William搞定了 ,加个more标签就好了

        2014-09-28 11:34 回复
        • kxevin
          kxevin:Internet Explorer 11.0 Windows 7

          @kxevin还有个问题 ,侧边栏随窗口滚动的问题,怎么才能实现呢?像你这个边栏一样。。

          2014-09-28 11:54 回复

发表评论

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

gravatar

question razz sad smile redface biggrin eek shock confused cool lol mad rolleyes wink cry