标签云对我们的文章画龙点睛，如果让我们的标签云随机产生彩色效果，更是增加了不是个性化，我们现在抛弃插件，自己动手从网上学习DIY自己的彩色标签云。
一、网上通用方法
1、在你的主题文件夹中functions.php文件中加入以下代码:
function colorCloud($text) { // 实现彩色标签云 $text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text); return $text; } function colorCloudCallback($matches) { $text = $matches[1]; $color = dechex(rand(0,16777215)); $pattern = '/style=(\'|\")(.*)(\'|\")/i'; $text = preg_replace($pattern, "style=\"color:#{$color};$2;\"", $text); return "<a $text>"; } add_filter('wp_tag_cloud', 'colorCloud', 1);
代码中$color= dechex(rand(0,16777215));作用是定义标签随机颜色的十进制数值范围,0 等于 #000000,16777215 等于 #ffffff,你也可以重定义标签云显示的颜色范围,只要查找出相应颜色的十六进制转换为相应的十进制就可以了。
2、自定义WordPress 标签云小工具相关参数
//custom widget tag cloudadd_filter( 'widget_tag_cloud_args', 'theme_tag_cloud_args' );function theme_tag_cloud_args( $args ){$newargs = array('smallest' => 8, //最小字号'largest'=> 22, //最大字号'unit' => 'pt', //字号单位，可以是pt、px、em或%'number'=> 45,//显示个数'format'=> 'flat',//列表格式，可以是flat、list或array'separator' => "\n", //分隔每一项的分隔符'orderby'=> 'name',//排序字段，可以是name或count'order' => 'ASC', //升序或降序，ASC或DESC'exclude'=> null, //结果中排除某些标签'include'=> null, //结果中只包含这些标签'link' => 'view', //taxonomy链接，view或edit'taxonomy' => 'post_tag', //调用哪些分类法作为标签云);$return = array_merge( $args, $newargs);return $return;}
强烈建议您阅读：WordPress函数:wp_tag_cloud(标签云)详解和举例
上诉代码中的数组可适当取舍，如果要采用默认的参数，就可以将相关自定义的参数（数组）删除。
默认参数解析：
smallest：标签文字最小字号，默认为8pt；
largest：标签文字最大字号，默认为22pt；
unit：标签文字字号的单位，默认为pt，可以为px、em、pt、百分比等；
number：调用的标签数量，默认为45个，设置为“0”则调用所有标签；
format：调用标签的格式，可选“flat”、“list”和“array”，默认为“flat”平铺，“list”为列表方式；
orderby：调用标签的排序，默认为“name”按名称排序，“count”则按关联的文章数量排列；
order：排序方式，默认为“ASC”按正序，“DESC”按倒序，“RAND”按任意顺序。
exclude：排除部分标签，输入标签ID，并以逗号分隔，如“exclude=1,3,5,7”不显示ID为1、3、5、7的标签；
include：包含标签，与exclude用法一样，作用相反，如“include=2,4,6,8”则只显示ID为2、4、6、8的标签。
3、wordpress彩色标签云小工具调用。
修改完成后,直接在仪表盘的”外观—>小工具”中把”标签云”小工具拖动到右侧小工具中就可以了。
也可以在主题需要调用的地方添加下面这行代码调用：
在边栏中的调取方法，添加如下代码（具体参数自己修改，smallest表示最小字体，largest表示最大字体，unit表示字体单位pt/px，number表示调取标签的数量）：
<?php wp_tag_cloud('smallest=12&largest=18&unit=px&number=20');?>
二、WordPress彩色背景标签云实现
下面所介绍的方法实际是实现标签云背景的彩色，而并非标签本身彩色
1、在调用的地方加入以下代码：
<aside class="tags"><?php wp_tag_cloud('smallest=12&largest=12&number=45&order=DESC'); ?></aside>
你的标签不同的话，请设置class为tags
如果你想在边栏中通过文本小工具直接添加的话，需要文本小工具支持PHP代码，实现的方法阅读文章让你的WordPress文本小工具运行PHP，这样的话更加方便灵活。
2、在你的主题style.css添加以下css样式
.tags{padding: 12px 13px 10px 15px;}.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;}.tags a:nth-child(9n+4){background-color: #567E95;}.tags a:nth-child(9n+5){background-color: #B433FF;}.tags a:nth-child(9n+6){background-color: #00ABA9;}.tags a:nth-child(9n+7){background-color: #B37333;}.tags a:nth-child(9n+8){background-color: #FF6600;}.tags a{opacity: 0.80;filter:alpha(opacity=80);color: #fff;background-color: #428BCA;display: inline-block;margin: 0 5px 5px 0;padding: 0 6px;line-height: 21px}.tags a:hover{opacity: 1;filter:alpha(opacity=100);}
三、wordpress纯代码实现圆角彩色背景标签云
原理与添加彩色标签云相似，在当前主题目录下面的functions.php里面加入以下代码：
//圆角背景色标签 function colorCloud($text) { $text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text); return $text; } function colorCloudCallback($matches) { $text = $matches[1]; $colors = array('F99','C9C','F96','6CC','6C9','37A7FF','B0D686','E6CC6E'); $color=$colors[dechex(rand(0,7))]; $pattern = '/style=(\'|\")(.*)(\'|\")/i'; $text = preg_replace($pattern, "style=\"display: inline-block; *display: inline; *zoom: 1; color: #fff; padding: 1px 5px; margin: 0 5px 5px 0; background-color: #{$color}; border-radius: 3px; -webkit-transition: background-color .4s linear; -moz-transition: background-color .4s linear; transition: background-color .4s linear;\"", $text); $pattern = '/style=(\'|\")(.*)(\'|\")/i'; return "<a $text>"; } add_filter('wp_tag_cloud', 'colorCloud', 1);
四、WordPress 3D旋转彩色标签云
你如果想实现彩色3D旋转标签云的话，直接阅读 WordPress3D旋转彩色标签云
您可能感兴趣的文章:
▪Wordpress主题制作基本模版文件以及基本函数
▪wordpress主题开发集成图像延迟加载
▪第11课WordPress主题制作启用特色图像
▪利用Bootstrap构建你的响应式WordPress主题(四）
▪wordpress主题制作index.php基本框架代码
▪利用Bootstrap构建你的响应式WordPress主题( 七）
▪wordpress首页排除某些分类
▪第十课:wordpress主题制作主题布局
▪WordPress 快速添加友情链接的另类方法
▪利用Bootstrap构建你的响应式WordPress主题( 五）
