在 WordPress 技巧—显示分类图片 一文中我大致介绍了如何让文章所属的分类图片显示在文章旁边的方法，其调用代码借鉴自国外的 WordPress 高手：

1
2
3
4
5
6
7
8
9
10
11
12

<?php foreach((get_the_category()) as $cat)
{
$catname =$cat->category_nicename;
<span id="more-485"></span>
echo "<a href=/category/";
echo $catname;
echo "/>";
echo "<img src=http://yourdomain/wp-content/cat-icons/";
echo $catname;
echo ".jpg alt=\"$catname category \" title=\"$catname 分类 \" /></a>\n";
}
?>

虽然我不是很懂 PHP ，但大致能理解上述代码的作用（理解如果有误，请指正）：
第一行调用 WordPress 默认的分类函数并起了一个别名 $cat
第三行将函数中的 category_nicename 分类缩略名变量赋值给 $catname
下面的几行就是输出图像链接和拼接。
看到倒数第三行中的 title=\”$catname 分类 \” ，这是输出图片的 title 属性，也就是我们鼠标移动到图片上所出现的简介文字。
由于我们使用中文分类名和英文缩略名，所以这里的 title 输出的并不是分类的名称，而是一串英文缩略名。这种效果对于中文来说这并不合适，所以我就想到何不仿造 $catname 来做个 $cattitle 以实现下图的效果呢？

那么现在的问题是如何获取 WordPress 分类函数里定义分类名称的变量呢？

此时就轮到 Firefox 的著名插件 Firebug 登场了～
进入 WordPress 后台-管理-分类，使用 Firebug 查看元素属性和样式，于是我就轻而易举的得到了我想要的变量名：

cat_name 这个变量即是我们的目标～ 找到对应的变量名之后，代码稍作修改即可（增加一个变量：$cattitle 和修改 title 的值：\”$cattitle\ ）：

1
2
3
4
5
6
7
8
9
10
11
12

<?php foreach((get_the_category()) as $cat)
{
$catname =$cat->category_nicename;
$cattitle=$cat->cat_name;
echo "<a href=/category/";
echo $catname;
echo "/>";
echo "<img src=http://yourdomain/wp-content/cat-icons/";
echo $catname;
echo ".jpg alt=\"$catname category \" title=\"$cattitle\" /></a>\n";
}
?>

Ok , that ‘s all~~ 修改完毕，这样整个效果就基本完美了

zEUS.

日志评论

• 2008年, 九月 10日, Yacca writes: 据说是沙发么...好吧 继续学习 今天要写半年工作计划...明天交掉了慢慢学习 我要减少自己的首页图片量...
• 2008年, 九月 10日, zEUS. writes: @Yacca：还好～ 没有我的多 :razz:
• 2008年, 九月 11日, fiorano writes: 我已经没兴趣研究这东西了。。。不过好在你喜欢研究，哈哈！ :mrgreen:
• 2008年, 九月 11日, zEUS. writes: 呵呵，是啊，打算以后主攻这个了...
• 2008年, 九月 11日, zEUS. writes: 测试是否会发送邮件～
• 2008年, 九月 11日, 花果山寨 writes: PHP就是好，简单的几句代码就搞定！
• 2008年, 九月 12日, freesky writes: 说实话，真没看懂，惭愧还要多学习！
• 2008年, 九月 12日, zEUS. writes: :?: 其实我觉得我的表达也不是很清楚...
• 2008年, 九月 19日, 美丽星点 writes: zEus.真是把firebug的作用发挥到了极致了，
• 2008年, 十月 30日, 10＋少见的Wordpress经典技巧 | 诸葛布袋 writes: [...] WordPress 显示分类图片的补充 [...]
• 2008年, 十一月 2日, Centeur writes: 这个方法还比较巧妙。 :mrgreen:
• 2008年, 十二月 1日, 我要博客 » 内容索引 » 为WordPress主题添加分类图标 - 网络 知识 分享 生活 writes: [...] 可正如原作者在Wordpress 显示分类图片的补充一文中所言，如上的代码还略有不足，主要是鼠标悬停于图标上时，显示的文字不是我们设置的汉字分类，而是我们设置的分类的英文缩写。原作者将上面的代码修改如下： [...]
• 2008年, 十二月 25日, 周公解梦 writes: 谢谢你啊，这个我学习了。。
• 2009年, 三月 5日, 淘友 » 为WordPress主题添加分类图标 writes: [...] 可正如原作者在Wordpress 显示分类图片的补充一文中所言，如上的代码还略有不足，主要是鼠标悬停于图标上时，显示的文字不是我们设置的汉字分类，而是我们设置的分类的英文缩写。原作者将上面的代码修改如下： [...]
• 2009年, 四月 14日, Sean writes: <?php foreach((get_the_category()) as $cat) 这句不是起别名的，是用来遍历数组的 也就是说从数组 (get_the_category()中取数据。
• 2009年, 四月 14日, zEUS. writes: 多谢指正，遍历应该是 foreach() 这句，as $cat 应该是把遍历的结果丢到 $cat 这个变量里了。不知道我这样理解对不对...
• 2009年, 四月 26日, Yangtx writes: 正有此打算。很久没来了，变化不小。
• 2009年, 九月 30日, WordPress 显示分类图片 « 居龙闲志 writes: [...] 显示分类图片 daitui.init(); 转至 網生@誌網生@誌  WordPress 显示分类图片          [...]

本文地址：http://zeuscn.net/archives/2008/09/10/wordpress-category-icon-plus.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

• 近期关于 WordPress 主题的一些计划 (23)
• wordpress后台无法汉化的解决办法 (11)
• WOW Theme — 魔兽风格的 WordPress 主题模板！ (28)
• wordpress模板：pink-kupy-10 (7)
• Why WordPress Themes (8)
• 又一个 WordPress 主题全力制作中… (9)
• ipple utral beta 上线试运行 (23)
• DZTHEME.COM 一期改版完成 (22)
• WordPress 表情插件和主题切换插件 (28)
• WordPress 主题计划 (101)

其实 WordPress 已经有了个叫做 Category Icons 的插件可以帮助我们在文章需要的地方显示分类图片，并且还能显示在 Feed 中，该插件还提供一些其它的功能。可惜的是插件作者主页国内无法访问，我找不到详细的使用说明文档，无奈只有放弃这款插件。

在继续搜寻互联网之后，我寻找到了另外一种同样非常有效方法——不用插件也能显示分类图片！该方法基于 Styling Posts by Category and Category-Specific Images 并修改自 Very Easy WordPress Theme Hack: Show Category Images ，下面我来谈谈我是如何在博客首页上实现这个效果的，效果如下图：

1. 准备好各个对应分类的图片，并且图片的名称需要和分类名一致！比如我有一个 “与我有关” 的文章分类，其缩略名是 “sth-about-me” ，那么我就将对应的分类图片命名为 “sth-about-me.jpg” （进入 WordPress 后台-管理-分类，即可修改分类缩略名，最好使用英文）。
2. 使用 FTP 在你的 /wp-contant/ 目录下建立一个 cat-icons 目录，将所有分类图片上传至该目录下。
3. 打开你的 index.php 文件，在 post 容器内，即

   1 2	<div class="post" id="post-<?php the_ID(); ?>"> </div>

   之中的适当位置添加如下代码：

   1 2 3 4 5 6 7 8 9 10 11

   <?php foreach((get_the_category()) as $cat) { $catname =$cat->category_nicename; echo "<a href=/category/"; echo $catname; echo "/>"; echo "<img src=http://yourdomain/wp-content/cat-icons/"; echo $catname; echo ".jpg alt=\"$catname category \" title=\"$catname 分类 \" /></a>\n"; } ?>

   我想稍懂 HTML 和 PHP 的朋友应该能理解上述语句的含义，但请注意，倘若你的分类永久链接形式不是默认的： “http://yourdomain/category/分类名称/” 那么你就需要根据自己的链接形式修改第四行的 “/category/”

4. 最后你还需要有一定的 HTML/CSS 的知识来将上述代码进行定位，你可以让它在 “entry 容器” 旁 float left 或者 right ，如果图片较小的话还能放到文章标题 H2 的旁边等等，这就要看大家的想象力和页面的排版方式了。

完成上述步骤后，分类图片就能自动的添加在文章旁了。有个问题还需要注意，如果你的文章不止属于一个分类，此时对应的所有分类图片都会显示，如果你的版式和我一样只想让它显示一个分类图标的话就需要用 CSS 技巧来 hiden 多余的图片了。根据不同的样式其方法也不一样，所以我也不进行说明了。

比起安装插件，这个方法要更加简洁！也更推荐大家使用～ 不过如果你对 PHP HTML/CSS 相关知识还一无所知的话，就需要慎用了…

zEUS.

日志评论

• 2008年, 九月 10日, dogorgod writes: 哈哈，这么快就制作好了啊～效果不错 真是骇客的技巧，好好学习一下 :smile:
• 2008年, 九月 10日, Love CJ writes: :mrgreen: 顶老大哈。。。这个好教程！
• 2008年, 九月 10日, WordPress 显示分类图片的补充 | 網生@誌 | zEUS.'Blog writes: [...] WordPress 技巧—显示分类图片 [...]
• 2008年, 九月 10日, zEUS. writes: @dogorgod：是啊，呵呵，可是样式我觉得还不是很完美，dogorogod 兄何时设计一下？ @Love CJ：不敢当啊... 我还不是很老呢...
• 2008年, 九月 10日, Yacca writes: 最近考虑着要更新首页...嗯 分类图片的确是个办法...
• 2008年, 九月 11日, 花果山寨 writes: 这样的效果还真不错
• 2008年, 九月 11日, zEUS. writes: 不过分类图片会增加首页的负担哦～
• 2008年, 九月 12日, Yacca writes: 对我而言...我本来就在首页加图滴,无所谓了... 昨天考虑了下,找不到浑然统一的分类图...郁闷 先不换了...
• 2008年, 九月 15日, JoBru writes: :mrgreen: 很好很强大～～！！ Category Icons用代理倒可以上，不过还是大大说的方法简便～～
• 2008年, 十月 9日, scavin writes: 主页打不开可以翻墙啊。。。 这年头上网，什么不会，不能不会翻墙啊 去 google 搜索 tor 就有结果了
• 2008年, 十月 9日, zEUS. writes: 哈哈，前2天我就是在你那边找到的 tor 下载地址呢～ 无界我也有用，不过我这人怕麻烦，懒得翻墙...
• 2008年, 十二月 1日, 我要博客 » 内容索引 » 为WordPress主题添加分类图标 - 网络 知识 分享 生活 writes: [...] 但搞了半天没有成功，在网上搜了一下，发现是用的这样的方法，原文请见：Wordpress 技巧—显示分类图片，代码如下： [...]
• 2008年, 十二月 19日, 沿阶草 writes: 还可以尝试为这篇文章的div创建一个class名字，然后CSS加入背景不是更好么？
• 2008年, 十二月 25日, l啦啦猪娱乐 writes: 恩，看起来很不错的样子
• 2009年, 十月 21日, 为WordPress添加分类图标(二) – T9Labs writes: [...] 但搞了半天没有成功，在网上搜了一下，发现是用的这样的方法，原文请见：Wordpress 技巧—显示分类图片，代码如下： <?php foreach((get_the_category()) as $cat) { $catname =$cat->category_nicename; echo "<a href=/category/"; echo $catname; echo "/>"; echo "<img src=http://yourdomain/wp-content/cat-icons/"; echo $catname; echo ".jpg alt="$catname category " title="$catname 分类 " /></a>n"; } ?> [...]
• 2010年, 一月 7日, 左手烟 writes: 确实是个好方法，难道这就是传说中的日志缩略图么
• 2010年, 七月 9日, 开发日志20100709洪宝书 | 洪宝书 writes: [...] WordPress 技巧-显示分类图片 [...]
• 2011年, 三月 11日, 否何 writes: 不错哦，我来试试，体验一下。

本文地址：http://zeuscn.net/archives/2008/09/10/wordpress-category-icon.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

• 剔除 D&Z Theme 主题“热评日志”列表中的页面 (88)
• 八月十八日 星期一 晴 (111)
• ipple utral beta 上线试运行 (23)
• 09’夏季 WordPress 文化衫第一批团购结束 (92)
• 敬请期待七月主题—Diablo III (141)
• 关于本站的一些说明 (13)
• wordpress模板 FH Freedom blue 0.2 (10)
• 给 D&Z Theme 增加一个额外的悬浮菜单 (26)
• WordPress flv 视频播放插件：flv-player 的安装使用及下载 附带 BitComet FLV 转换器下载 (102)
• 介绍一个 CSS 图片特效 (85)