纯css打造wordpress彩色标签云效果

wordpress自带的标签云效果一般，有时候和主题很不搭调。网上大部分wordpress彩色标签云教程是教在functions文件里加上如下函数段。但是颜色不能自己控制，出来的效果不尽人意，自带的色彩个人感觉十分难看。网上代码如下:

function colorCloud($text) {
$text = preg_replace_callback("||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 "";
}
add_filter("wp_tag_cloud", "colorCloud", 1);

今天八問猫博客教大家如何用css制作彩色标签云，两种效果先对比一下。后者完胜前者。

制作wordpress标签云的之前了解下一个css选择器:nth-child(n).
括号里的可以填数字，也可以填函数。比如n，2n，3n，2n+1。选择器匹配属于其父元素的第 N 个子元素。比如填1的话，就是定义该父元素里的第一个子元素的样式。2的话就是第二个。2n就是2的倍数个元素样式。这里给大家举得是wordpress小工具自带的标签云，但是原理一样。首先查看元素获得自带标签云的class名，如下:

.tagcloud a{color:#fff}
.tagcloud a:nth-child(n){background: #83bf73;}
aside .widget .tagcloud a:nth-child(2n){background: #B37333}
aside .widget .tagcloud a:nth-child(3n){background: #428BCA}
aside .widget .tagcloud a:nth-child(5n){background:#B433FF}
aside .widget .tagcloud a:nth-child(4n){background:#ff7056}

颜色及背景完全可以自己定义，copy到style.css完事。无需functions函数即可打造wordpress彩色标签云，真是简单快捷。
PS:nth-child还可以运用到其他地方去，这个靠自己需要去添加了。