非插件实现WordPress彩色背景标签云

科学软件(梯子)

WordPrss是用wp_tag_cloud函数来调用文章标签的显示边栏小工具标签云列表,默认标签是有自带颜色的,网上也有很多教程改变每个自带标签的颜色。

那如何来给标签加上不同背景色?而不只是改变标签本身的颜色,效果如下图(或看我网站的标签云):

编辑主题的样式表 (style.css),在最下面加上以下代码

.tags{}
.tags a:nth-child(12n){background-color: #4A4A4A;}
.tags a:nth-child(12n+1){background-color: #428BCA;}
.tags a:nth-child(12n+2){background-color: #5CB85C;}
.tags a:nth-child(12n+3){background-color: #D9534F;}
.tags a:nth-child(12n+4){background-color: #567E95;}
.tags a:nth-child(12n+5){background-color: #FEC42D;}
.tags a:nth-child(12n+6){background-color: #B433FF;}
.tags a:nth-child(12n+7){background-color: #6E8B3D;}
.tags a:nth-child(12n+8){background-color: #00ABA9;}
.tags a:nth-child(12n+9){background-color: #969696;}
.tags a:nth-child(12n+10){background-color: #B37333;}
.tags a:nth-child(12n+11){background-color: #FF6600;}
.tags a{opacity: 0.80;filter:alpha(opacity=80);color: #fff;font-size: 14px;background-color: #428BCA;display: inline-block;margin: 0 5px 4px 0;padding: 3px 6px;border-radius: 2px;}
.tags a:hover{opacity: 1;filter:alpha(opacity=100); color: #fff;}
赞(0)
分享到: 更多 (0)
广告位招租了啦!!!快来联系
此处应有广告

评论 抢沙发

评论前必须登录!

 



很高兴本文可以为您带来灵感和帮助!

支付宝扫一扫打赏

微信扫一扫打赏

QQ扫一扫打赏