情绪阁教你怎么生成WordPress彩色标签云

WordPress彩色标签云实现彩色背景标签云方法

铁柱怀疑自己是不是瞎了,找这么个东西找了好久,明明就在我面前,我却没有看到他,后面多亏群里有个好心的大佬把代码发给了我,铁柱对每一个帮助过我的人,都心存感激,没有你们,就没有现在更菜的我(调皮下)。情绪阁作为铁柱自己的笔记,所有内容除了作为笔记加深印象,也是方便大家少走弯路。

第一个代码是大佬发给我的,第二段代码,为了防止我继续菜下去,找人给我写了个备注,防止再次犯浑。修改:放在主题的functions.php文件里面

代码1:

//WordPress圆角彩色背景标签云
function colorCloud($text) {  
$text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text);  
return $text;  
}  
function colorCloudCallback($matches) {  
$text = $matches[1];  
$colors = array('a0d9f6','C9C','F96','2f318b','6C9','37A7FF','E9573F','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: 3px 6px; margin: 0 3px 6px 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);

代码2:

/* 彩色静态标签云 Color Tag Cloud 
/* -------------------------------- */
function colorCloud($text) {
  $text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text);
  $text=preg_replace('/<a /','<a ',$text);
  return $text;
}
function colorCloudCallback($matches) {
  $text = $matches[1];
//这里定义我们背景色的范围,如果不想设置背景色的输出范围我们可以使用
//$color = dechex(rand(0,16777215));从所有颜色中随机出一个
  $a = array('8D7EEA','F99FB2','AEE05B','E8D368','F75D78','55DCAB','F75DB1','ABABAF','7EA8EA');
  $co = array_rand($a,2);
  $color = $a[$co[0]];
//随机颜色代码结束,下面开始吧颜色赋值给每个标签生成背景色
  $pattern = '/style=(\'|\")(.*)(\'|\")/i';
  $text = preg_replace($pattern, "style=\"background:#{$color};\"", $text);
  return "<a $text>";
}
//把php代码挂载到wp_tag_cloud钩子上
add_filter('wp_tag_cloud', 'colorCloud', 1);

除了以上两种方法,铁柱还在一处看到有另一种方法,顺便也记下来吧,一以免下次傻兮兮的又找不到了。

一、把以下代码添加到当前主题中的style.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;
}

二、把以下代码放置到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>

 

笔记

腾讯云服务器被禁ping了 怎么开启?

2020-2-16 14:35:34

笔记

WordPress自定义html美化引导卡片

2020-2-21 17:00:27

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索