網生@誌 | zEUS.’Blog

何为分类图片？——我们的每篇日志都有自己的分类，一般来说在文章栏中我们会用文字链接来描述文章所属分类，但有时候出于美观和页面整体效果的需要我们要用不同的图片来代替各种分类。那么如何来达到这种效果呢？

其实 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.