RiproV2纯代码美化色彩云标签

2022-10-28

字数统计: 379字 | 阅读时长: 1分

WordPress 自带的标签云是一个很实用的小工具。站长可以通过标签对具有相同关健词的文章进行检索分类，利于访客查找相关文章。博主使用的RiproV2主题的标签云虽然有颜色，但是也不是彩色的。所以想到了自定义代码实现圆角彩色标签云。

使用方法：在当前主题目录下面的functions.php里面加入以下代码：

/***圆角背景色标签***/
function colorCloud($text) {  
$text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text);  
return $text;  
}  
function colorCloudCallback($matches) {  
$text = $matches[1];  
$colors = array('48D1CC','a26ff9','fb7da9','666','19B5FE','ff5e5c','ffbb50','1ac756');  
$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 3px; margin: 0 3px 3px 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);

然后到网站后台，依次点击外观——小工具——标签云，添加以后就可以看到圆角彩色标签云了。

默认的就已经非常漂亮了，如果不喜欢也可以自己对照rgb颜色表修改：
colors = array('48D1CC','a26ff9','fb7da9','666','19B5FE','ff5e5c','ffbb50','1ac756');

效果如下图：

你的标签云就变彩色了，是吧！！！

-------本文结束感谢您的阅读-------

本文作者： 榴莲哥
发布时间： 2022-10-28 14:10:00
最后更新： 2022-10-28 14:10:35
本文标题： RiproV2纯代码美化色彩云标签
本文链接： https://liuliange.github.io/archives/7b65b034.html
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！