非插件实现WordPress彩色背景标签云

2018年3月20日15:16:49 发表评论 475

WordPrss是用wp_tag_cloud函数来调用文章标签的显示边栏小工具标签云列表,默认标签是有自带颜色的,网上也有很多教程改变每个自带标签的颜色。

那如何来给标签加上不同背景色?而不只是改变标签本身的颜色,效果如下图(或看我网站的标签云):
非插件实现WordPress彩色背景标签云
实现方法:
1、下载支持php语言的文本小工具插件Enhanced Txet;安装后,在外观--小工具,添加Enhanced Txet小工具,并在里面添加下面php代码:

  1. <aside class="tags">  
  2. <?php wp_tag_cloud ('smallest=14&largest=14&unit=px&number=30&orderby=count&order=DESC'); ?>  
  3. </aside>  

注释:smallest是最小字体,largest是最大字体,unit是字体大小的单位,number是显示的标签总数量,orderby=count是以话题最多到最少的顺序排列,order=DESC降序排列
2、编辑主题的样式表 (style.css),在最下面加上以下代码:

  1. .tags{}  
  2. .tags a:nth-child(12n){background-color#4A4A4A;}  
  3. .tags a:nth-child(12n+1){background-color#428BCA;}  
  4. .tags a:nth-child(12n+2){background-color#5CB85C;}  
  5. .tags a:nth-child(12n+3){background-color#D9534F;}  
  6. .tags a:nth-child(12n+4){background-color#567E95;}  
  7. .tags a:nth-child(12n+5){background-color#FEC42D;}  
  8. .tags a:nth-child(12n+6){background-color#B433FF;}  
  9. .tags a:nth-child(12n+7){background-color#6E8B3D;}  
  10. .tags a:nth-child(12n+8){background-color#00ABA9;}  
  11. .tags a:nth-child(12n+9){background-color#969696;}  
  12. .tags a:nth-child(12n+10){background-color#B37333;}  
  13. .tags a:nth-child(12n+11){background-color#FF6600;}  
  14. .tags a{opacity: 0.80;filter:alpha(opacity=80);color#fff;font-size14px;background-color#428BCA;displayinline-block;margin: 0 5px 4px 0;padding3px 6px;border-radius: 2px;}  
  15. .tags a:hover{opacity: 1;filter:alpha(opacity=100); color#fff;}  
weinxin
微信公众号名称:IT青年时代
微信搜索IT青年时代或者扫描左边二维码进行关注,这样可以及时查看久伴博客每日内容推送
久伴

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: