美化wordpress文章页彩色标签和侧边栏彩色标签云代码

不同风格的wordpress主题会为我们带来各种各样的网站模板，其中标签的展示也很重要，见惯了千篇一律的标签样式，其实我们可以自己动手修改CSS代码让自己的主题拥有与众不同的彩色风格，首先我们来实现文章页的wordpress彩色标签。

文章页彩色标签代码：

/** 文章页面彩色标签 chukuangren.com*/
.article-tags-icon {display:none;}
.article-tags{margin-bottom: 10px}
.article-tags a{padding: 4px 10px;background-color: #19B5FE;color: white;font-size: 12px;font-weight:bold;line-height: 16px;font-weight: 400;margin: 0 5px 5px 0;border-radius: 10px;display: inline-block;opacity:unset;}
.article-tags a:nth-child(5n){background-color: #C0C0C0;color: #FFF}
.article-tags a:nth-child(5n+1){background-color: #008080;color: #FFF}
.article-tags a:nth-child(5n+2){background-color: #B8860B;color: #FFF}
.article-tags a:nth-child(5n+3){background-color: #FF6347;color: #FFF}
.article-tags a:nth-child(5n+4){background-color: #6A5ACD;color: #FFF}
.article-tags a:nth-child(5n+5){background-color: #00BFFF;color: #FFF}
.article-tags a:hover{background-color: #1B1B1B;color: #FFF}

其中article-tags是你的标签调用名称，不同的标题可能有所不同，使用时大家自己修改一下。另一段类似的文章页彩色标签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);}

不同的是这段标签显示的彩色标签不是圆角的，tags根据你的主题模板自行修改。然后我们再看下侧边栏彩色标签云代码。

除了通过CSS代码实现wordpress彩色标签，我们还可通过修改主题的函数来修改彩色标签云效果：

1、圆角彩色背景标签云

原理与添加彩色标签云相似，在当前主题目录下面的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);

2、侧边栏彩色标签云代码：

这个算是简化版，在wordpress主题文件functions.php 中加入以下代码:

function colorCloud($text) { // wordpress彩色标签云 
$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,你也可以重定义标签云显示的颜色范围,只要查找出相应颜色的十六进制转换为相应的十进制就可以了。

自定义WordPress 标签云相关参数

小工具中的彩色标签云各种参数我们也可以自己进行修改，从而改变wordpress主题前台的标签云展示形式。把以下代码加入主题的functions中。

//custom widget tag cloud
add_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默认参数解析：
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的标签。

通过以上几种方法的修改，相信你一定可以获得属于自己风格的wordpress彩色标签，让网站获得更多用户的青睐。