如果你急于给自己的主题添加 WordPress 颜色标签云，可以跳过前面的技术概述，直接跳到最后用 php 实现 WordPress 颜色标签云的方法。
从 WordPress 版本开始，使用 wp_tag_cloud 函数调用文章标签显示列表。WP 博主可以轻松设置 wp_tag_cloud 功能的标签参数属性，实现标签的多样化显示。相信大家都见过各种五颜六色的标签云，但是我们以前做标签字体颜色。今天，我们将与您分享如何自定义标签的背景颜色。
效果图
实现方法:
想要实现多彩的 WP 标签云背景，方法有很多，包括 js、css、php。今天，我们介绍 css 和 php:
利用 css 实现彩色标签云背景色
这个方法是由 css 的:第 n 个子伪类实现的。
php 中随机标签云背景色的实现
该方法通过与 wp 关联的 php 内置的 wp_tag_cloud 函数来调整 wp 的默认参数，实现随机标记云背景色，使用灵活，可自定义颜色范围。
评价:使用方便，设置简单，随机显示。
看完这两种方法的介绍，可以根据自己网站的实际情况选择适合自己的方法。接下来，为了方便大家，我将这两种方法的实现步骤写出来。
怎么叫标签云？
生成标记云我们可以使用 WP 的内置函数 wp_tag_cloud($args)，如下所示:
<aside class="tags"><?php wp_tag_cloud('smallest=12&largest=12&number=45&order=DESC'); ?></aside>
Smash = 12 定义标签云的最小字体；
最大=12 定义标签云的最大字体；
Number=45 定义要显示的数字；
Order=DESC 定义了标签云的排序方法；
如果在使用过程中不需要随机的字体大小，我们可以将最小和最大的值设置为相同。
一种利用 CSS 实现彩色背景标签云方法
我们先来看看 WP 生成的标签的 html 格式:
<aside class="tags">
<a href="https://www.huizhanii.com/wp-pic/tag/chagnfa/">长发美女</a>
<a href="https://www.huizhanii.com/wp-pic/tag/xiaohua/">校花美女</a>
<a href="https://www.huizhanii.com/wp-pic/tag/keting/">客厅</a>
</aside>
有了上面的格式，我们可以得出结论，用 css 实现标签云的多彩背景是通过控制标签选择器下的 A 标签来实现的，然后结合前面提到的:第 n 个子伪类就可以实现这个功能。
实现代码
/* 定义 标签云 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);}
代码描述:
标签 a:第 n 个子标签(9n)是 WP 标签云中第一个标签的背景颜色，然后。标签 a:第 n 个子标签(9n+2)是第二个标签的背景颜色，依此类推。
所以我们得出一个结论，那就是我们必须定义。标记 a:第 n 个子(9n+n)属性的次数与我们生成的次数一样多，这降低了灵活性。
一种在 php 中实现彩色背景标签云方法
这个方法比较简单，就是根据代码的不同，通过一个 php 部分来控制生成标签云时 WP 使用什么格式:
/* 彩色静态标签云 Color Tag Cloud
/* -------------------------------- */
function colorCloud($text) {
$text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text);
$text=preg_replace('/<a /','<a ',$text);
return $text;
}
function colorCloudCallback($matches) {
$text = $matches[1];
//这里定义我们背景色的范围，如果不想设置背景色的输出范围我们可以使用
//$color = dechex(rand(0,16777215));从所有颜色中随机出一个
$a = array('8D7EEA','F99FB2','AEE05B','E8D368','F75D78','55DCAB','F75DB1','ABABAF','7EA8EA');
$co = array_rand($a,2);
$color = $a[$co[0]];
//随机颜色代码结束，下面开始吧颜色赋值给每个标签生成背景色
$pattern = '/style=(\'|\")(.*)(\'|\")/i';
$text = preg_replace($pattern, "style=\"background:#{$color};\"", $text);
return "<a $text>";
}
//把 php 代码挂载到 wp_tag_cloud 钩子上
add_filter('wp_tag_cloud', 'colorCloud', 1);
通过将上述代码添加到functions.php文件中，我们可以简单地实现 WP 多彩背景云标签的功能。请给自己定一个。
这种丰富的颜色标签云是用 php 方法实现的，简单方便，但是添加之后需要稍微调整一下样式代码才能达到理想状态:
查看元素并向中添加装饰样式，如填充。tagcloud 一个标签；2px 增加内边距以缩进字体，并调整字体大小。常规字体大小属性一般为 12-14px。
其中，上面提到的 php 方法
$a = array('8D7EEA','F99FB2','AEE05B','E8D368','F75D78','55DCAB','F75DB1','ABABAF','7EA8EA');
里面的颜色值可以根据自己爱好调整，具体参考下面图表：
HTML CSS 颜色对照表
| FFFFFF | #DDDDDD | #AAAAAA | #888888 | #666666 | #444444 | #000000 |
| #FFB7DD | #FF88C2 | #FF44AA | #FF0088 | #C10066 | #A20055 | #8C0044 |
| #FFCCCC | #FF8888 | #FF3333 | #FF0000 | #CC0000 | #AA0000 | #880000 |
| #FFC8B4 | #FFA488 | #FF7744 | #FF5511 | #E63F00 | #C63300 | #A42D00 |
| #FFDDAA | #FFBB66 | #FFAA33 | #FF8800 | #EE7700 | #CC6600 | #BB5500 |
| #FFEE99 | #FFDD55 | #FFCC22 | #FFBB00 | #DDAA00 | #AA7700 | #886600 |
| #FFFFBB | #FFFF77 | #FFFF33 | #FFFF00 | #EEEE00 | #BBBB00 | #888800 |
| #EEFFBB | #DDFF77 | #CCFF33 | #BBFF00 | #99DD00 | #88AA00 | #668800 |
| #CCFF99 | #BBFF66 | #99FF33 | #77FF00 | #66DD00 | #55AA00 | #227700 |
| #99FF99 | #66FF66 | #33FF33 | #00FF00 | #00DD00 | #00AA00 | #008800 |
| #BBFFEE | #77FFCC | #33FFAA | #00FF99 | #00DD77 | #00AA55 | #008844 |
| #AAFFEE | #77FFEE | #33FFDD | #00FFCC | #00DDAA | #00AA88 | #008866 |
| #99FFFF | #66FFFF | #33FFFF | #00FFFF | #00DDDD | #00AAAA | #008888 |
| #CCEEFF | #77DDFF | #33CCFF | #00BBFF | #009FCC | #0088A8 | #007799 |
| #CCDDFF | #99BBFF | #5599FF | #0066FF | #0044BB | #003C9D | #003377 |
| #CCCCFF | #9999FF | #5555FF | #0000FF | #0000CC | #0000AA | #000088 |
| #CCBBFF | #9F88FF | #7744FF | #5500FF | #4400CC | #2200AA | #220088 |
| #D1BBFF | #B088FF | #9955FF | #7700FF | #5500DD | #4400B3 | #3A0088 |
| #E8CCFF | #D28EFF | #B94FFF | #9900FF | #7700BB | #66009D | #550088 |
| #F0BBFF | #E38EFF | #E93EFF | #CC00FF | #A500CC | #7A0099 | #660077 |
| #FFB3FF | #FF77FF | #FF3EFF | #FF0 0FF | #CC00CC | #990099 | #770077 |
转载请注明：汇站网 » WordPress 无插件+带优化教程实现主题颜色标签云的两种方法
