轻松打造 WordPress 标签排行榜(免插件)

默认方式的 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说道:

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

    • Dickey说道:

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

      • oioi说道:

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

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

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

  2. Yacca说道:

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

  3. 凯尔说道:

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

  4. fissile说道:

    非常感谢共享这种方式

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

  5. tsman说道:

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

    • Dickey说道:

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

  6. tsman说道:

    搞定了,谢谢诶!

  7. 嗰個人说道:

    .wp-tag-cloud{...}

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

    • Dickey说道:

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

  8. tsman说道:

    升级到2.7后,出现了问题,请问怎么解决????

  9. leesum说道:

    很酷的DIY````

  10. 互惠生之家说道:

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

  11. popershi说道:

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

  12. Jerry说道:

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

    $a[] = "$tag";

    • Dickey说道:

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

  13. freehao123说道:

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

  14. 风也飘泊说道:

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

  15. 正在戒网说道:

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

  16. Gifts说道:

    原来还会这个,犀利

  17. wordpress theme说道:

    学习了,好东西

  18. urethritis说道:

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

  19. wordpressdear说道:

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

  20. 投资理财说道:

    这个老早的了,现在的新版2.8.6可以用吗?

  21. luanpa说道:

    这方法不错

  22. 晓晓说道:

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

    • Dickey说道:

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

  23. 番茄说道:

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

  24. 晨光说道:

    非常不错的功能

  25. armani jeans说道:

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

  26. 整体衣柜说道:

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

  27. 这个非常好啊!

发表评论

4 x 6 =