默认方式的 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 文件)有所顾虑,于是,可以有另一种方式:
此方式的调用方式也有所不同,不控制宽度值,把最小与最大字体都设置为12号字:
<?php wp_tag_cloud('smallest=12&largest=12&unit=px&number=20&format=list&orderby=count&order=DESC'); ?>
介绍完毕,这不一定是较佳方法,只是我自己使用的方法,主要原因是为了避免使用插件。