wordpress彩色标签云

从wordpress 2.3版本开始,使用wp_tag_cloud函数来调用文章标签显示列表,WP博主可以轻易地通过设置wp_tag_cloud函数的标签参数属性,使标签实现多样化显示。
用法:

<?php wp_tag_cloud( $args ); ?>

具体的参数说明请参考官方说明;例如本站在侧边栏生成标签云

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

添加以下css,具体在每个主题下请自行修改下

.tags{padding: 12px 13px 10px 15px;}
.tags a:nth-child(9n){background-color: #4A4A4A;}
.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);}

具体实例看这个图就可以,本站测试后已删除
tag-cloud
现在网上大部分彩色标签云只是改变文字的颜色,而这个是改变标签背景色,看到顺手就扒过来,请不要见怪啊
咳咳,代码肯定不是自己写的啊,但为什么会提到呢,主要是这个nth-child

CSS伪类选择器 nth-child(an+b)

第一种:简单数字序号写法:nth-child(number)直接匹配第number个元素。参数number必须为大于0的整数。
li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/

第二种:倍数写法:nth-child(an)匹配所有倍数为a的元素。其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n、5n。
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前面也可以是负号,但留给下一部分讲。)
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个:
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)结果一样。

评论 ( 15)
  1. 沙发
    馒头饭MADfan 2013-12-11 02:58

    好强大的伪类选择器~

  2. 板凳
    逗婦乳 2013-12-06 10:29

    這是D8的風格吧

  3. 地板
    汇有钱途 2013-11-19 05:34

    我去试试看。

  4. 4 楼
    番茄 2013-11-15 13:52

    学习理财知识,建立现金流收入管道让自己收入自由,时间自由,做自己喜欢的事,你有兴趣吗?博客:www.fanqie986.com,QQ:673843545

  5. 5 楼
    Mr.童 2013-11-08 02:35

    学习学习

  6. 6 楼
    深蓝 2013-11-03 16:39

    很好,学习之!不过话说好多主题都集成了这个。

  7. 7 楼
    木篱笆 2013-10-27 14:49

    旁边的百度广告是个很好的例子啊o(∩_∩)o

  8. 8 楼
    麦田一根葱 2013-10-24 03:41

    不用匹配子类,直接随机应该更好

  9. 9 楼
    tiandi 2013-10-22 02:40

    我想说右边的百度广告很像彩色标签。

  10. 10 楼
    海棠秋客 2013-10-17 08:19

    学到,期待更多分享