轻松打造 WordPress 标签排行榜（免插件）

本文由 发表于 , 浏览41,977次 , 现有66条评论

默认方式的 WordPress 标签云，由于满街都是同一风格，是否觉得些许枯燥了？有没有考虑来点与众不同的？当然，本文不谈标签插件，虽然有很多标签插件非常优秀，但俺是简洁主义者通常尽量少用插件。以下是通过几个简单步骤，不使用插件即可实现热门标签排行榜效果。

先来看看标签栏效果图：

Wordpress 标签排行榜

以下开始介绍全部步骤，写得太过详细，其实操作简单，只需要留意蓝色字体处即可。

第一步：定制 CSS

在 style.css 中加入以下几行以控制 wp-tag-cloud 的显示风格（仅供参考）：

.wp-tag-cloud li{font-size:12px;list-style:none;border-bottom:2px solid #FFF}
.wp-tag-cloud li a{background:#eef5e1;color:#5AAD0C;display:block;line-height:14px;padding:2px 0px 2px 10px}
.wp-tag-cloud li a:hover{background:#e4efd5;color:#5AAD0C;text-decoration:none}

 

第二步：修改 category-template 文件

该文件 category-template.php 位于 wp-includes 目录下，修改前建议先备份一下。

找到第421~423行，这三行代码修改之前是这样的：

$a[] = "<a href='$tag_link' class='tag-link-$tag_id' title='" . attribute_escape( sprintf( __ngettext('%d topic','%d topics',$count), $count ) ) . "'$rel style='font-size: " .
( $smallest + ( ( $count - $min_count ) * $font_step ) )
. "$unit;'>$tag</a>";

 

只修改第421行与第423行（422行不必改动），主要是把控制字体大小 style='font-size:  修改成控制标签背景宽度 style='width:，以及去掉了一些多余的东西。另外就是在423行加入了一点点内容，让标签数目直接显示出来。这三行修改后如下：

$a[] = "<a href='$tag_link' title='" . "$tag' style='width:" .
( $smallest + ( ( $count - $min_count ) * $font_step ) )
. "$unit;'>$tag <span>($count)</span></a>";

 

第三步：在 sidebar 适当位置调用标签

此处调用方式比默认调用方式增加了一些参数值，示例如下（只需留意蓝色字体代码）：

<li><h3>热门标签排行榜</h3>
<?php wp_tag_cloud('smallest=110&largest=200&unit=px&number=20&format=list&orderby=count&order=DESC'); ?>
</li>

 

以上就完成了，其中第三步的调用参数意义说明如下：

1）smallest 与 largest 原来的作用是最小与最大字体大小，现在变成了最小与最大宽度值；

2）unit=px，是单位，使用了 px；

3）number=20，是调用标签的数量，此处是调用20个，可以任意设定（不宜太多或太少）；

4）format=list，以列表方式显示标签；

5）orderby=count，以标签统计次数来排序；

6）order=DESC，以倒序显示（最热的标签在前，最冷的标签在后）。

 

另一种方式：

可能有人会对第二步（修改 category-template 文件）有所顾虑，于是，可以有另一种方式：

Wordpress 标签列表

此方式的调用方式也有所不同，不控制宽度值，把最小与最大字体都设置为12号字：

<?php wp_tag_cloud('smallest=12&largest=12&unit=px&number=20&format=list&orderby=count&order=DESC'); ?>

 

上次提及的 WordPress CMS Theme iNews，现准备放出第一个版本：iNews-v1

其中使用了比较保守的方式，也就是以上的“另一种方式”，避免修改wp文件的麻烦。

至于本文第一张效果图的标签方式，我己应用在这里：中国钟表网

介绍完毕，这不一定是较佳方法，只是我自己使用的方法，主要原因是为了避免使用插件。

本文现有 66 条评论：

  1. oioi说道：
    2008年08月15日 13:33

    标签排行榜！= =这个词很强大

    回复
    • Dickey说道：
      2008年08月15日 15:36

      传统“标签云”有时可能会令访客觉得迷茫，看得云里雾里的，
      所谓“标签排行榜”，列出热门标签及相关数据，应该有助于新访客迅速了解……

      回复
      • oioi说道：
        2008年08月19日 17:29

        我觉得标签云 很多时候只能看 无法用，

        可以通过标签云 很快了解该blog 的主题，

        但，真要通过标签管理文章，我觉得很囧

        回复
  2. Yacca说道：
    2008年08月16日 00:00

    嗯 这个的确好理解 但很浪费空间诶...

    回复
  3. 凯尔说道：
    2008年08月17日 13:50

    我个人不提倡修改WP的includes文件夹，如果硬要修改系统函数，完全可以添加另外的JS来修改样式，或者在主题的function.php添加自己的函数。

    回复
  4. fissile说道：
    2008年08月25日 10:55

    非常感谢共享这种方式

    但有没有可能换成两列或三列显示?

    回复
  5. tsman说道：
    2008年09月18日 13:28

    学习！

    回复
  6. tsman说道：
    2008年09月26日 16:14

    问一个问题，第二种方式可不可以像第一种那样，在标签后面显示文章数量，应该使用什么代码？谢谢！

    回复
    • Dickey说道：
      2008年09月26日 18:43

      第一种方式之所以能够显示文章数量，是因为修改了 category-template.php 以控制所显示的内容（当然，这是安全的修改，并不会有什么不良副作用）。除此之外，你可以找找标签插件。

      回复
  7. tsman说道：
    2008年11月20日 11:01

    搞定了，谢谢诶！

    回复
  8. 嗰個人说道：
    2008年11月27日 01:15

    .wp-tag-cloud{...}

    你的式樣都是寫在這裏的，可是我頁面沒有這個式樣，就算CSS上寫了沒用。怎麽辦？

    回复
    • Dickey说道：
      2008年12月01日 09:50

      有的，程序在输出标签的时候会使用到的，你查看页面代码便知。
      抱歉哦，最近极少上线，所以现在才回复。

      回复
  9. tsman说道：
    2008年12月16日 15:57

    升级到2.7后，出现了问题，请问怎么解决？？？？

    回复
  10. leesum说道：
    2009年04月09日 09:33

    很酷的DIY````

    回复
  11. 互惠生之家说道：
    2009年04月23日 09:22

    怎样把“页面导航栏”提高到“热门标签排行”之前？——我的网站没几个标签。

    回复
  12. popershi说道：
    2009年05月20日 19:04

    非常感谢！
    这个问题我弄了一天了（我是菜鸟的）现在终于解决了。帮了我个大忙啊！

    回复
  13. Jerry说道：
    2009年07月21日 13:44

    我的第421~423行，找不到如下代码是怎么回事情呢：

    $a[] = "$tag";

    回复
    • Dickey说道：
      2009年07月22日 13:07

      你好！由于WP版本的不断提高，相应文件也会有调整，而本文所提及的方法却无法随各个版本而反复更新，所以，使用中请根据不同情况而变通，例如通过搜索找到对应的代码段。

      回复
  14. freehao123说道：
    2009年08月06日 18:50

    非常感谢你提供的模板，小站：http://www.freehao123.com也正在使用你的模板
    其实这个模板做非常不错，再次感谢！

    回复
  15. 风也飘泊说道：
    2009年09月15日 12:00

    这招很不错。。。比较适合CMS类的主题吧

    回复
  16. 正在戒网说道：
    2009年10月16日 22:45

    博主太强大了....
    主题用上你的了,等下我也把标签改改试试,不过现在小站里没什么文章,整体看起来不是很好看

    回复
  17. Gifts说道：
    2009年11月24日 10:40

    原来还会这个，犀利

    回复
  18. wordpress theme说道：
    2009年11月30日 10:40

    学习了,好东西

    回复
  19. urethritis说道：
    2009年12月16日 10:05

    确实很不错，看看我的，侧栏哪里就是用你的代码弄的，很不错吧！哈哈

    回复
  20. wordpressdear说道：
    2009年12月17日 20:45

    的确是很好的文章 先收藏啦

    回复
  21. 投资理财说道：
    2009年12月25日 20:57

    这个老早的了，现在的新版2.8.6可以用吗？

    回复
  22. luanpa说道：
    2009年12月31日 13:21

    这方法不错

    回复
  23. 晓晓说道：
    2010年09月06日 09:11

    太感谢了,按照说明我都改过了,改了一晚上(我是菜鸟),看起来是改好了,呵呵,准备加内容

    回复
    • Dickey说道：
      2010年09月07日 23:38

      回访了你的网站，你用的是iNews-v2主题，主体颜色是蓝色，建议"标签排行榜"中的颜色可以适当修改的，从而匹配整体色调。

      回复
  24. 番茄说道：
    2011年03月05日 22:39

    这倒是个好东西，我要试试看。

    回复
  25. 晨光说道：
    2011年06月19日 07:53

    非常不错的功能

    回复
  26. armani jeans说道：
    2011年09月01日 21:15

    现在的版本不知能不能用，试试先，谢了

    回复
  27. 整体衣柜说道：
    2011年09月13日 10:29

    现在的版本不知能不能用，试试先，谢了

    回复
  28. 宁国同城游戏说道：
    2011年09月13日 10:32

    这个非常好啊！

    回复

发表评论 X

3 x 4 =