芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
12

为 WordPress 添加分类图标

作者 芒果/分类 教程/发布于 2009-06-08 17:46

WordPress 默认没有添加分类图标的选项。通过 get_the_category() 函数,可以实现类似芒果首页的分类图标效果。

实现此功能的核心问题是,在主循环中能根据分类自动调用不同图标。而利用 get_the_category() 函数获取分类名称的代码为:

<?php foreach((get_the_category()) as $cat){echo $cat->category_nicename;}?>

这样就得到了因分类而异的代码。基于此,只需在模板中嵌入图标调用路径即可:

<img src="<?php bloginfo('template_url');?>/image/icon_<?php foreach((get_the_category()) as $cat){echo $cat->category_nicename;}?>.gif" />

当然,需要为每个分类定制不同图标,并存为 “icon_分类名称.gif” 的形式至指定目录。

为分类图标加上链接和描述文字后,完整代码如下:

<a href="<?php bloginfo('url'); ?>/category/<?php foreach((get_the_category()) as $cat){echo $cat->category_nicename;}?>" title="<?php foreach((get_the_category()) as $cat){echo $cat->cat_name;}?>">
<img src="<?php bloginfo('template_url');?>/image/icon_<?php foreach((get_the_category()) as $cat){echo $cat->category_nicename;}?>.gif" />
</a>

如果嫌修改代码过于麻烦,也可以使用 Category Icons 插件,该插件可以为分类指定不同图标,提供了详细的后台设置面板,操作更为简便,容易上手。

插件主页 / 下载地址

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/add-category-icon-for-wordpress/" title="为 WordPress 添加分类图标" rel="bookmark">为 WordPress 添加分类图标 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 12 条群众意见

  1. bolo /2009-06-08 18:11

    把图标放到背景里更好。 回应

    #1
  2. bolo /2009-06-09 10:43

    怎么不做一个留言板呢? 回应

    #2
  3. 芒果bolo/2009-06-09 11:17

    邮件联系即可。 回应

    #3
  4. ?
    wordpress中文教程技巧 - 基础与设计布局 | 鸭脖客 /2009-08-28 01:12

    […] 为wordpress分类添加图标 […] 回应

    #4
  5. ?
    wordpress中文教程技巧 – 基础与设计布局 | 梦幻天坛 /2009-12-01 11:29

    […] 为wordpress分类添加图标 […] 回应

    #5
  6. riant /2009-12-27 21:01

    如果一篇文章同属于两个分类,那上面的代码会输出哪一个分类啊?

    谢谢。 回应

    #6
  7. seri /2010-11-19 15:42

    之前知道这个,但是一直没涉及到要用,
    今天准备要用的时候,拿来研究了下,还是用cat-id命名会比较方便。 回应

    #7
  8. 五行 /2010-12-04 09:21

    很好,很有用.可以美化主题.谢谢.方法实用喜欢. 回应

    #8
  9. ?
    再发两个替换补丁:分类图标及最近留言模板 | 陈可逆 's Blog /2011-04-24 05:36

    […] 点此下载之前的分类图标功能,当程序安装在子目录时,会造成图标链接错误,无法显示,换上芒果提供的代码,适应性好。 […] 回应

    #9
  10. 他和她 /2011-04-27 21:03

    呵呵 学习了 谢谢芒果 提供 http://www.ta1ta.com 他和她 回应

    #10
  11. ?
    暗暗的世界 » 为Wordpress增加分类图标 /2011-07-14 10:19

    […] 转载自 为 WordPress 添加分类图标 | 芒果小站 分类: WordPress 标签: 评论 (0) Trackbacks (0) 发表评论 […] 回应

    #11
  12. ?
    wordpress分类图标自定义»LaoZhuHome Beta /2011-08-05 18:08

    […] 上图右上角的时钟就是“时光机的”分类图标,下面就来说说如何来实现这个功能。我参照了芒果小站的一些代码,但是没有使用img标签来实现。 category_nicename;}?> […] 回应

    #12

下面我简单说几句