【Ripro美化】圆角标签云彩色背景效果纯代码实现

本文共1324个字,预计阅读时间需要4分钟 发布时间: 2021-12-19 共48人阅读

标签云

 对我们的文章画龙点睛,如果让我们的标签云随机产生彩色效果,更是增加了不是个性化,我们现在抛弃插件,自己动手用代码来DIY自己的彩色标签云。

教程

放在你的子主题的functions.php代码末,路径:你的域名/wp-content/themes/ripro/functions.php

代码

这里只介绍最简单也最有效的一款代码,其他的也可以在网上搜索,还有很多的,放到子主题的functions.php的末尾处就可以了

/***圆角背景色标签 - ZTmbk.com***/
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: 6px 6px; margin: 0 5px 5px 0; background-color: #{$color}; border-radius: 5px; -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);

 

本站声明:
1. 本站所有资源来源于网络,分享目的仅供大家学习和交流! 2. 不得使用于非法商业用途,不得违反国家法律。否则后果自负! 3. 本站提供的资源,都不包含技术服务请大家谅解! 4. 如有链接无法下载、失效或广告,请联系站长处理!

再次声明:如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。


HI模板网 » 【Ripro美化】圆角标签云彩色背景效果纯代码实现

常见问题FAQ

本站下载资源解压密码是什么?
本站所有资源解压密码均为www.hmoban.com、www.huziy.com或者www.92luntan.com
免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
开通VIP 享更多特权,为了您的账户安全HI模板网建议您使用QQ登录!