WordPrss是用wp_tag_cloud函数来调用文章标签的显示边栏小工具标签云列表,默认标签是有自带颜色的,网上也有很多教程改变每个自带标签的颜色。
那如何来给标签加上不同背景色?而不只是改变标签本身的颜色,效果如下图(或看我网站的标签云):
实现方法:
1、下载支持php语言的文本小工具插件Enhanced Txet;安装后,在外观--小工具,添加Enhanced Txet小工具,并在里面添加下面php代码:
注释:smallest是最小字体,largest是最大字体,unit是字体大小的单位,number是显示的标签总数量,orderby=count是以话题最多到最少的顺序排列,order=DESC降序排列
<aside class="tags"> <?php wp_tag_cloud ('smallest=14&largest=14&unit=px&number=30&orderby=count&order=DESC'); ?> </aside>
2、编辑主题的样式表 (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;}
最后保存样式表,访问自己的网站,看下边栏是不是出现了跟我一样彩色背景的标签云~~
原文链接:非插件实现WordPress彩色背景标签云,转载请注明来源!
不错,如果背景颜色的顺序能随机变动就更完美了