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

从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

WordPress彩色背景标签云实现的更多相关文章

  1. 修改WordPress标签云字体大小颜色及标签显示数量

    WordPress 自带的标签云是一个很实用的小工具.站长可以通过标签对具有相同关健词的文章进行检索分类,利于访客查找相关文章.WordPress 默认标签云的字体最小为8pt,最大为22pt,标签显 ...

  2. 让wordpress标签云显示文章数的正确方法

    先看一下效果 在百度经验找到一个教程,可惜,根据实践发现方法是错误的, 百度经验上的代码: 1 2 3 4 5 6 7 8 9 10 11 12 //标签tag所包含的文章数量 function Ta ...

  3. Android自定义控件之自定义ViewGroup实现标签云

    前言: 前面几篇讲了自定义控件绘制原理Android自定义控件之基本原理(一),自定义属性Android自定义控件之自定义属性(二),自定义组合控件Android自定义控件之自定义组合控件(三),常言 ...

  4. python3生成标签云

    标签云是现在大数据里面最喜欢使用的一种展现方式,其中在python3下也能实现标签云的效果,贴图如下: -------------------进入正文--------------------- 首先要 ...

  5. SP2010 3D标签云Web部分--很酷的效果,强烈推荐!!

    SP2010 3D标签云Web部分--很酷的效果.强烈推荐! ! 项目描述叙事         基于简单Flash的3D标签云Web部件.SP Server 2010使用. 建立在内置标签云Web部件 ...

  6. js 标签云

    以前只看到wordpress上面有个标签云的效果挺6,就好奇的弄个试试,还好网上有很多小伙伴的分享了,借鉴过来了  哈哈 html代码 <!DOCTYPE html> <html&g ...

  7. Python3.7+jieba(结巴分词)配合Wordcloud2.js来构造网站标签云(关键词集合)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_138 其实很早以前就想搞一套完备的标签云架构了,迫于没有时间(其实就是懒),一直就没有弄出来完整的代码,说到底标签对于网站来说还是 ...

  8. 原生js文字标签云上下滚动播放

    效果:http://hovertree.com/texiao/js/25/ 效果图: 代码如下: <!DOCTYPE html> <html> <head>< ...

  9. pycloudtag 标签云

    原创,转载请标明 QQ:231469242 # -*- coding: utf-8 -*- """Python3.0 Created on Sat Nov 26 08:5 ...

随机推荐

  1. CentOS7上安装Nginx、PHP、MySQL

    一.安装准备 首先由于nginx的一些模块依赖一些lib库,所以在安装nginx之前,必须先安装这些lib库,这些依赖库主要有g++.gcc.openssl-devel.pcre-devel和zlib ...

  2. Nginx 调优经验记录

    1.2017年连续爆出5.x版本xshell安全问题和intel的cpu设计漏洞 ,此时我就注意到尽量少暴露自己线上使用的工具以及版本.例如:mysql版本,以及缓存层策略,服务器版本等,以下为 隐藏 ...

  3. Jmeter简单介绍与搭配Jenkins实现自动化

    Jmeter简介 Apache JMeter 是 Apache 组织开发的基于 Java 的压力测试工具.用于对软件做压力测试,它最初被设计用于 Web应用测试,但后来扩展到其他测试领域. 它可以用于 ...

  4. mysql常用脚本及命令记录

    mysql导出用户权限 mysql中直接通过授权即可使用对应用户,不必使用创建用户命令(如CREATE USER 'xxx'@'%' IDENTIFIED BY 'XXX';)先建用户再授权. 方法一 ...

  5. 多项式A除以B

    这个问题我是在PAT大区赛题里遇见的.题目如下: 多项式A除以B(25 分) 这仍然是一道关于A/B的题,只不过A和B都换成了多项式.你需要计算两个多项式相除的商Q和余R,其中R的阶数必须小于B的阶数 ...

  6. python 爬取糗事百科 gui小程序

    前言:有时候无聊看一些搞笑的段子,糗事百科还是个不错的网站,所以就想用Python来玩一下.也比较简单,就写出来分享一下.嘿嘿 环境:Python 2.7 + win7 现在开始,打开糗事百科网站,先 ...

  7. 什么是 JSX

    JSX 即 JavaScript XML--一种在 React 组件内部构建标签的类 xml 语法.React 在不使用 JSX 的情况下一样可以工作,然而使用 JSX 可以提高组件的可读性,因此推荐 ...

  8. linux周期性计划任务 进程管理

    周期性计划任务crontab命令系统服务:/etc/init.d/crond(crond必须启动才会生效)用户计划:/var/spool/cron/用户名默认的计划任务全局配置:/etc/cronta ...

  9. 详解Linux Initrd

    在Linux操作系统中,有一项特殊的功能--初始化内存盘INITRD(INITial Ram Disk)技术,而且内核支持压缩的文件系统映像.有了这两项功能,我们可以让Linux系统从小的初始化内存盘 ...

  10. MiniGUI + Hi3531 笔记 .

    一.移动光驱安装Ubuntu 10.04 1.   重启系统按住Delete进入BIOS界面! 2.   退出/高级模式 --> 启动 --> 启动设备选择. 移动光驱正常被识别后这里应该 ...