WordPress自定义标签云随机背景颜色

从wordpress 2.3版本开始，使用wp_tag_cloud函数来调用文章标签显示列表，WP博主可以轻易地通过设置wp_tag_cloud函数的标签参数属性，使标签实现多样化显示。相信大家都见过各种各样色彩纷杂的标签云吧，但是我们以往都是做的标签字体颜色，今天给大家分享如何自定义标签的背景色。wp-pic-mobie-v1-0-12实现方法如果我们想实现多彩WP标签云背景的话方法很多，js、css、php都可以实现，今天我们介绍css和php这两种方法：css实现多彩标签云背景色这种方法是通过css的:nth-child伪类来实现的。评价：可自定义每一个标签特定的背景色、设置复杂、没有随机php实现随机标签云背景色这种方法是通过php关联wp的内置wp_tag_cloud函数来调整WP默认参数来实现随机标签云背景色的，使用灵活，可自定义颜色范围。评价：使用方便、设置简单、随机显示看完了这两种方法的介绍，您可以根据自己网站的实际情况选择适合自己的方法，下面我就把两种方法的实现步骤写出来方便大家使用。如何调用标签云生成标签云我们可以使用WP的内置函数wp_tag_cloud($args)用法如下：

smallest=12定义标签云最小字体；largest=12定义标签云最大字体；number=45定义需要显示的数量；order=DESC定义标签云的排序方式；我们在使用过程中我们如果不需要随机字体大小的话可以把smallest和largest的值设置为相同的即可。CSS实现彩色背景标签云方法我们先来看看WP生成的标签的html格式：有了上面的格式我们可以得出，用css实现标签云的多彩背景是通过控制tags选择器下面的a标签实现了，那么结合前面提到的:nth-child伪类就可以实现这个功能了。实现代码/* 定义 标签云a标签的通用属性*/.tags a{color: #fff;background-color: #428BCA;display: inline-block;margin: 0 5px 5px 0;padding: 0 6px;line-height: 21px}/* 使用nth-child定义 标签云每个a标签的独立属性*/.tags a:nth-child(9n){background-color: #4A4A4A;}.tags a:nth-child(9n+1){background-color: #428BCA;}.tags a:nth-child(9n+2){background-color: #5CB85C;}.tags a:nth-child(9n+3){background-color: #D9534F;}/* 定义标签云鼠标经过a标签的属性*/.tags a:hover{opacity: 1;filter:alpha(opacity=100);}代码说明：.tags a:nth-child(9n)就是我们定义WP标签云中第一个标签的背景色，那么.tags a:nth-child(9n+2)就是定义第二个标签的背景色，依次类推。所以呢我们得出一个结论也就是：我们生成了多少个标签就要定义多少次.tags a:nth-child(9n+n)属性，灵活度降低。php实现彩色背景标签云方法这种方法相对简单了很多，就是通过一段php控制WP在生成标签云时使用什么样的格式具体看代码：/* 彩色静态标签云 Color Tag Cloud /* -------------------------------- */function colorCloud($text) { $text = preg_replace_callback(\'||i\', \'colorCloudCallback\', $text); $text=preg_replace(\'/\";}//把php代码挂载到wp_tag_cloud钩子上add_filter(\'wp_tag_cloud\', \'colorCloud\', 1);通过把上面的代码添加到functions.php文件中我们就简单的实现了WP多彩背景云标签的功能了，赶紧给自己也设置一个吧。

标签： WordPress自定义标签云随机背景颜色