实现WordPress彩色标签云的N种方法

作者 : admin 本文共1835个字,预计阅读时间需要5分钟 发布时间: 2020-06-25 共126人阅读

相信很多朋友看到很多WordPress博主的网站标签云是彩色的都羡慕不已,可自己又不知道怎么弄,今天我们就来讲讲实现WordPress彩色标签云的N种方法,本教程由360模板吧出品!

第一种:wordpress纯代码实现圆角彩色背景标签云

1.最简单的一种,复制如下代码到你的主题文件下的“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);
第二种:css实现wordpress标签云彩色背景的方法

1.把以下代码添加到当前主题中的style.css文件中(就是你主题的CSS样式)

/*彩色标签*/
.tagcloud{
padding:14px 0 14px 12px;
}
.tagcloud a{
float:left;
margin:3px;
line-height:26px;
text-align:center;
border:1px solid #ddd;
border-radius:2px;
padding-top:0;
padding-right:5px;
padding-bottom:0;
padding-left:5px;
overflow:hidden;
display:block;
width:92px;
height:28px;
}
.tagcloud a{
color:#fff;
}

2.把以下代码放置到head.php或footer.php(也就是主题公共头部或尾部文件)

<script type=“text/javascript”>box_width = $(“#cx_tag_cloud-5”).width();
/*彩色标签*/
len = $(“.tagcloud a”).length – 1;
$(“.tagcloud a”).each(function(i) {
    var let = new Array(‘3366FF’, ’31ac76′, ‘ea4563′, ’31a6a0’, ‘8e7daa’, ‘4fad7b’, ‘f99f13’, ‘f85200’, ‘666666’);
    var random1 = Math.floor(Math.random() * 9) + 0;
    var num = Math.floor(Math.random() * 6 + 9);
    $(this).attr(‘style’, ‘background:#’ + let[random1] + ”);
    if ($(this).next().length > 0) {
        last = $(this).next().position().left
    }
});</script>

实现WordPress彩色标签云的方法有很多,360模板吧也就是本站是使用的第一种,更多方法可以自行百度

 

 

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长
2. 如遇需要解压密码,则解压密码为"www.360mb.net"!
3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 本站不保证所提供下载的资源的准确性、安全性和完整性,源码仅供下载学习之用!
8. 如用于商业或者非法用途,与本站无关,一切后果请用户自负!
360模板吧 » 实现WordPress彩色标签云的N种方法

Leave a Reply