WordPress 图文混排之显示分类图标

关注园子博客的朋友们一定注意到了在文章内容页面的开始部分左侧多了一个分类图标,右侧投放了 adsense 广告,这样的图文混排效果可以在一定程度上更加益于阅读,并适当的提高广告的点击率。

这个灵感得益于园子经常关注的月光博客,月光在文章内容页右侧放置了 TAG 图标,左侧是 adsense 广告,但月光使用的是 zblog ,所以他分享的方法并不适用于 WordPress 用户,园子在网上经过一番搜寻,最后借鉴了 zEUS 的方法实现了 WordPress 图文混排显示分类图标的效果。和月光博客有所区别的是我调用的分类图标,月光使用的是 TAG 图标。实现效果如下:

Wordpress 图文混排之显示分类图标

Wordpress 图文混排之显示分类图标

实现显示分类图标的过程:

1.准备好你的每个分类所对应的图片,图片名字一定要采用对应分类的缩略名,分类的缩略名可以在后台看到,最好全部使用英文。

2.在/wp-content/目录建立一个 cat-icons 文件夹,将图片文件全部上传至此文件夹下。

3.打开你想添加分类图标对应的主题文件,如想在首页出现需修改 index.php 文件,在文章页面出现需要修改 single.php 文件,查找类似如下代码:


在这段代码前面加上下面的代码:

category_nicename;
$cattitle=$cat->cat_name;
echo "";
echo "\"$catname\n";
}
?>

园子需要提醒你的是,如果你的分类永久链接形式没有采用默认的 “http://yourdomain/category/分类名” 形式,你需要更改第五行的代码 “/category/ ”为正确的路径。

4.实现左浮动或右浮动。你只需要在上述代码外层加个 div 容器,然后通过 css 定义就可以了。

最后需要提醒你的是,实现此方法最好一篇文章只有一个分类,如果拥有多个分类会将多个图片都显示出来。想看具体的图文混排效果,可以直接参看园子的博客。

本文参考文章:

WordPress 技巧—显示分类图片

再次感谢 zEUS

WordPress 图文混排之显示分类图标》上有27条评论

  1. John

    我把内页(single.php)的图片放大了,大家来看看效果。只改了css,采用默认的图片大小,只限定最大宽度。但还可能需要调一下。对幅宽正好的图片可以。

  2. 巴黎春天

    园子!你好!
    首页连接和内页连接已做,希望你加上内页连接。
    另外:今年我高三了,恐怕不会有时间到访你的博客,虽然还会更新,但是这是别人给我更新的!抱歉了!
    祝你的博客蒸蒸日上

  3. laofan

    你好,我已经把你的这文章在新浪围脖上wordpress时报与人分享了。你也来围观我们呀http://t.sina.com.cn/wordpressnews如果有什么问题可以和wordpressnews@qq.com沟通

发表评论