当前位置: 首页 > 设计 > 正文
avatar

给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图标。

本文固定链接: http://www.weisay.com/blog/navigation-menu-add-icon.html | 威言威语

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

  1. avatar
    41楼
    kxevin Internet Explorer Windows

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

    2014-09-27 12:57 [回复]
    • avatar
      William Mozilla Firefox Windows

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

      2014-09-28 10:02 [回复]
      • avatar
        kxevin Internet Explorer Windows

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

        2014-09-28 11:34 [回复]
        • avatar
          kxevin Internet Explorer Windows

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

          2014-09-28 11:54 [回复]
  2. avatar
    40楼
    Lizzie Hannah 搜狗浏览器 Windows

    :smile: 主题很棒

    2013-06-07 01:21 [回复]
  3. avatar
    39楼
    半夏阳光 Internet Explorer Windows

    已经弄好,多谢威哥!

    2013-05-07 14:08 [回复]
  4. avatar
    38楼
    潇遥 Google Chrome Windows

    是啊,想做主题肯定要注意这些细节方面的,比如这个“给WordPress导航菜单前面加上个性小图标”方法

    2013-02-28 16:40 [回复]
  5. avatar
    37楼
    潇遥 Google Chrome Windows

    威哥最新的favicon不错哦

    2013-02-28 15:44 [回复]
  6. avatar
    36楼
    cgj Google Chrome Windows

    博主,按照你的方法在标签里面填入这段代码在首页显示的也是这段代码啊,完全不会显示图片

    2013-01-03 20:39 [回复]
  7. avatar
    35楼
    dada Google Chrome Windows

    博主,做个主题大概花多久时间

    2012-11-21 22:37 [回复]
    • avatar
      William Mozilla Firefox Windows

      我写的比较慢,一天写一点点,一个月吧,大概。

      2012-11-22 13:43 [回复]
  8. avatar
    34楼
    joshuazm Google Chrome Windows

    嗯嗯,谢谢啦。。。

    2012-10-26 08:47 [回复]
  9. avatar
    33楼
    偶看 360安全浏览器 Windows

    这个需要好好学习

    2012-08-05 13:14 [回复]
  10. avatar
    32楼
    啊志 Google Chrome Windows

    谢谢老大。

    2012-08-04 17:05 [回复]
  11. avatar
    31楼
    行摄天下 Google Chrome Windows

    这个还没有呢,我也加个看看

    2012-07-16 16:08 [回复]

发表评论

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

快捷键:Ctrl+Enter