^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 本站wordpress建站教程均通过实践后发布,希望对你有帮助,如果有代码出错,请联系站长解决
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 8年wordpress建站经验,5星服务品质
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人
  • 腾讯云3年2核2G新品轻量限时特惠只需408元

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

D8 主题的彩色云标签是这样子的,颜色多样,高度一致。很美观,
CSS轻松实现D8彩色云标签(附xiu主题文章标签颜色修改)

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

2 核 2G 限时特惠 396 元/3 年    宝塔建站 10850 大礼包

第 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 即可,具体效果往下看。。

赠人玫瑰,手有余香。