当前位置:园子博客 » Wordpress » WordPress 图文混排之显示分类图标

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

8月 31st, 2009 | Filed under Wordpress | 共有11,542次浏览

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

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

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

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

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

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

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

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

<?php the_content(); ?>

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

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://www.yzznl.cn/wp-content/cat-icons/";
echo $catname;
echo ".gif alt=\"$catname category \" title=\"$cattitle\" /></a>\n";
}
?>

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

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

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

本文参考文章:

WordPress 技巧—显示分类图片

再次感谢 zEUS

  1. 陌凡
    1月 16th, 201216:40

    我是来学习的,呵呵

  2. 某人
    5月 12th, 201011:46

    如果要改模板就会觉得有些麻烦。

  3. keelii
    1月 5th, 201012:06

    这个直接用CSS加上就行了呀,就是新增后又得再加,也不是很麻烦呀!

  4. 理想博客
    10月 12th, 200923:11

    这个效果不错。不过我想用的是用第一个Tag来展示图标,呵呵。不过分类也不错。这样工作量会小点。

    • 园子
      10月 13th, 200908:56

      @理想博客
      使用 tag 思路差不多
      修改下代码应该可以~

  5. john
    9月 20th, 200916:11

    今天在本地试了一下这个功能,图片怎么不显示呢?png后缀的图片应该也支持吧?

    • 园子
      9月 20th, 200922:22

      @john
      现在应该都支持 PNG 了,不行你就导出个GIF的,图片路径对的话应该没什么问题~

  6. John
    9月 1st, 200911:53

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

  7. 仁心博客
    9月 1st, 200910:37

    干净清爽

  8. sck
    8月 31st, 200923:10

    调用分类的方法不错,不用每次都调用这么麻烦,学习一下
    让我手痒着加上这种图文混排效果 :mrgreen:

    • 园子
      9月 1st, 200911:05

      @卢松松
      嘿嘿
      适当放了点adsense广告~
      @laofan
      谢谢推荐~
      @sck
      呵呵,想放了可以试试看的
      方法很简单~

  9. 蛋王
    8月 31st, 200922:28

    就不放,我审美差,不敢放图片。。。 :mrgreen:

  10. 仁心博客
    8月 31st, 200922:11

    恭喜广告收入多多啊

  11. ca
    8月 31st, 200917:49

    我也架了广告 大家相互点点哦……

  12. spookzang
    8月 31st, 200917:43

    学习啦~

  13. 巴黎春天
    8月 31st, 200915:54

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

    • 园子
      8月 31st, 200917:39

      @巴黎春天
      内页链接已经加上
      高三了学习很忙,加油哦!
      祝你考上理想的大学~

  14. goldapple
    8月 31st, 200915:46

    干净利索

  15. 我想想
    8月 31st, 200915:23

    什么时候把z-blog也试试。

  16. A.shun
    8月 31st, 200912:59

    。。
    我的是手动插入的。。是有点麻烦

  17. laofan
    8月 31st, 200912:19

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

  18. 卢松松
    8月 31st, 200911:23

    嘿,广告都架上了 啊

  19. 乒乓器材
    8月 31st, 200910:55

    过来看看!

  20. 361酷
    8月 31st, 200909:43

    我想到了 WORD 中的图文混排。

  21. john
    8月 31st, 200909:36

    坐个沙发先。

您必须在 登录 后才能发布评论.