轻松打造 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 条评论:

发表评论

6 x 9 =