AI智能摘要
本文介绍如何通过自定义代码实现在WordPress博客中生成具有彩色背景效果的标签云，取代插件实现方式。具体方法包括在functions.php文件中添加两个函数colorCloud和colorCloudCallback，通过正则替换为每个标签设置随机背景色和样式。最终实现标签云圆角背景色及过渡动画效果，并附有效果演示链接：https://mingliang.net.cn/。
— 此摘要由AI分析文章内容生成，仅供参考。
一、前言
标签云 对我们的文章画龙点睛，如果让我们的标签云随机产生彩色效果，更是增加了不是个性化，我们现在抛弃插件，自己动手从网上学习DIY自己的彩色标签云。
二、代码部署
在当前主题目录下面的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);效果展示：https://mingliang.net.cn/
评论列表 (6条)：
加载更多评论 Loading...