/* 336x280*/
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 插件,该插件可以为分类指定不同图标,提供了详细的后台设置面板,操作更为简便,容易上手。
/* 336x280*/
版权所有,转载请注明出处。
转载自 <a href="http://www.mangguo.org/add-category-icon-for-wordpress/" title="为 WordPress 添加分类图标" rel="bookmark">为 WordPress 添加分类图标 | 芒果小站</a>
已经有 12 条群众意见
- bolo
#1/2009-06-08 18:11把图标放到背景里更好。 回应
- bolo
#2/2009-06-09 10:43怎么不做一个留言板呢? 回应
- 芒果 对 说
#3/2009-06-09 11:17邮件联系即可。 回应
- wordpress中文教程技巧 - 基础与设计布局 | 鸭脖客
#4/2009-08-28 01:12[...] 为wordpress分类添加图标 [...] 回应
- wordpress中文教程技巧 – 基础与设计布局 | 梦幻天坛
#5/2009-12-01 11:29[...] 为wordpress分类添加图标 [...] 回应
- riant
#6/2009-12-27 21:01如果一篇文章同属于两个分类,那上面的代码会输出哪一个分类啊?
谢谢。 回应
- seri
#7/2010-11-19 15:42之前知道这个,但是一直没涉及到要用,
今天准备要用的时候,拿来研究了下,还是用cat-id命名会比较方便。 回应
- 五行
#8/2010-12-04 09:21很好,很有用.可以美化主题.谢谢.方法实用喜欢. 回应
- 再发两个替换补丁:分类图标及最近留言模板 | 陈可逆 's Blog
#9/2011-04-24 05:36[...] 点此下载之前的分类图标功能,当程序安装在子目录时,会造成图标链接错误,无法显示,换上芒果提供的代码,适应性好。 [...] 回应
- 他和她
#10/2011-04-27 21:03呵呵 学习了 谢谢芒果 提供 http://www.ta1ta.com 他和她 回应
- 暗暗的世界 » 为Wordpress增加分类图标
#11/2011-07-14 10:19[...] 转载自 为 WordPress 添加分类图标 | 芒果小站 分类: WordPress 标签: 评论 (0) Trackbacks (0) 发表评论 [...] 回应
- wordpress分类图标自定义»LaoZhuHome Beta
#12/2011-08-05 18:08[...] 上图右上角的时钟就是“时光机的”分类图标,下面就来说说如何来实现这个功能。我参照了芒果小站的一些代码,但是没有使用img标签来实现。 category_nicename;}?> [...] 回应
我简单说几句