正文

WordPress彩色背景标签云实现

IP云
IP云V管理员/3 阅读
09/10
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

网上有很多的这种效果，但是却几乎没有什么关于彩色背景标签云的教程，网上讲的基本都是让标签云的字体变成彩色而不是背景，我觉得让字体变成彩色有的标签会看不清楚，而且也没有让背景变成彩色好看。先看看效果：

从wordpress 2.3版本开始，使用wp_tag_cloud函数来调用文章标签显示列表，WP博主可以轻易地通过设置wp_tag_cloud函数的标签参数属性，使标签实现多样化显示。
本文所介绍的方法实际是实现标签云背景的彩色，而并非标签本身彩色，后者网上教程比较多见。
用法：

1
<?php wp_tag_cloud( $args ); ?>

具体的参数说明请参考官方说明；例如本站在侧边栏生成标签云，侧边栏sidebar.php文件中合适位置添加以下代码，：

1
<aside class="tags"><?php wp_tag_cloud('smallest=12&largest=12&number=45&order=DESC'); ?></aside>

此外，如果要通过文本小工具加入代码（默认文本小工具不支持php语言），请安装升级版文本小工具插件Enhanced Txet插件，然后可添加支持php语言的文本小工具
添加以下css,具体在每个主题下请自行修改下

1
2
3
4
5
6
7
8
9
10
11
12
.tags{padding: 12px 13px 10px 15px;}
.tags a:nth-child(9n){}
.tags a:nth-child(9n+1){background-color: #428BCA;}
.tags a:nth-child(9n+2){background-color: #5CB85C;}
.tags a:nth-child(9n+3){background-color: #D9534F;}
.tags a:nth-child(9n+4){background-color: #567E95;}
.tags a:nth-child(9n+5){background-color: #B433FF;}
.tags a:nth-child(9n+6){background-color: #00ABA9;}
.tags a:nth-child(9n+7){background-color: #B37333;}
.tags a:nth-child(9n+8){background-color: #FF6600;}
.tags a{opacity: 0.80;filter:alpha(opacity=80);color: #fff;background-color: #428BCA;display: inline-block;margin: 0 5px 5px 0;padding: 0 6px;line-height: 21px}
.tags a:hover{opacity: 1;filter:alpha(opacity=100);}

该功能的实现原理主要是这个nth-child
CSS伪类选择器 nth-child(an+b)
第一种：简单数字序号写法:nth-child(number)直接匹配第number个元素。参数number必须为大于0的整数。

1
li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/

第二种：倍数写法:nth-child(an)匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。

1
li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/

第三种：倍数分组匹配:nth-child(an+b) 与 :nth-child(an-b)
先对元素进行分组，每组有a个，b为组内成员的序号，其中字母n和加号+不可缺省，位置不可调换，这是该写法的标志，其中a,b均为正整数或0。如3n+1、5n+1。但加号可以变为负号，此时匹配组内的第a-b个。（其实an前面也可以是负号，但留给下一部分讲。）

1
2
3
4
5
li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/
li:nth-child(3n+5){background:orange;}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/
li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/
li:nth-child(3n±0){background:orange;}/*相当于(3n)*/
li:nth-child(±0n+3){background:orange;}/*相当于(3)*/

第四种：反向倍数分组匹配:nth-child(-an+b)
此处一负一正，均不可缺省，否则无意义。这时与:nth-child(an+1)相似，都是匹配第1个，但不同的是它是倒着算的，从第b个开始往回算，所以它所匹配的最多也不会超过b个：

1
2
li:nth-child(-3n+8){background:orange;}/*匹配第8、第5和第2个LI*/
li:nth-child(-1n+8){background:orange;}/*或(-n+8)，匹配前8个（包括第8个）LI，这个较为实用点，用来限定前面N个匹配常会用到*/

第五种：奇偶匹配:nth-child(odd) 与 :nth-child(even)
分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。
本文转载自：http://www.zhiyanblog.com/wordpress-colorfulo-background-tag-cloud.html