wordpress 彩色标签云-WordPress通过自定义代码小工具实现圆角彩色标签云

115资源网 2 小时前 WordPress教程浏览：1 0

WordPress默认的标签云样式不是很漂亮，颜色也有点单调。小编使用的DUX主题的“DUX标签云”也中规中矩。本来想修改成彩色标签的，只是在网上搜索测试了半天，没有成功。后来我找到了教程，直接修改了WordPress小工具自带的标签云。通过自定义代码，我完美的实现了彩色标签（效果见下图）。而且wordpress 彩色标签云，这个方法理论上不仅适用于dux主题，其他主题应该也可行。

如何操作

在当前主题的functions.php文件中添加以下代码（可以通过外观-主题编辑器修改）：

//圆角背景色标签
function colorCloud($text) {
$text = preg_replace_callback('||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 "";
}
add_filter('wp_tag_cloud', 'colorCloud', 1);

然后进入WordPress后台，通过外观-小部件-标签云，即可看到添加后的效果。

注意：这里的“标签云”是指WordPress自带的，而不是当前主题wordpress 彩色标签云，比如本站使用的DUX主题的“DUX标签云”。

至于标签的颜色，可以通过修改颜色代码来改变成自己喜欢的颜色。

$colors = array('F99','C9C','F96','6CC','6C9','37A7FF','B0D686','E6CC6E');

相关文章