CSS轻松实现D8彩色云标签(附xiu主题文章标签颜色修改)

Author: 陌小雨Date: 2014-12-10View: 80

D8主题的彩色云标签是这样子的,颜色多样,高度一致。很美观,
20141210123400

只需要三步就可以轻松实现

第1步:在css中加入如下代码:(已经加过了就不用重复添加了,推荐用上面的)

.tagcloud{padding: 12px 13px 10px 15px;}
.tagcloud a:nth-child(9n){background-color: #4A4A4A;}
.tagcloud a:nth-child(9n+1){background-color: #428BCA;}
.tagcloud a:nth-child(9n+2){background-color: #5CB85C;}
.tagcloud a:nth-child(9n+3){background-color: #D9534F;}
.tagcloud a:nth-child(9n+4){background-color: #567E95;}
.tagcloud a:nth-child(9n+5){background-color: #B433FF;}
.tagcloud  a:nth-child(9n+6){background-color: #00ABA9;}
.tagcloud a:nth-child(9n+7){background-color: #B37333;}
.tagcloud a:nth-child(9n+8){background-color: #FF6600;}
.tagcloud 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}
.tagcloud a:hover{opacity: 1;filter:alpha(opacity=100);}

第2步,修改根目录下wp-includes/category-template.php文件中第596行(也可以搜索:wp_tag_cloud),把'smallest' => 8, 'largest' => 8,两个数字8修改为一样的数字就行啦。你可以随便改,改为9、10、11等等,保存。

第3步:刷新下,就ok了。陌小雨值得提醒各位的是,云标签.tagcloud要修改为自己主题对应的标签class名称,里面颜色大家可以根据自己的需要改变顺序或者自己选定其他颜色。

2015年10月23日更新:

下面分享把xiu主题文章页下标签修改为彩色显示:正如上面黑色加粗部分所说,我们只需要找到xiu主题文章页标签的css容器名就可以了,所以将第一步css中.tagcloud全部替换为.article-tags即可,具体效果往下看。。