利用简单的CSS样式即可实现WordPress彩色标签展示

  • 麦子的头像-WordPress建站笔记
  • 麦子
    2022年1月16日 08:10:00发布

我们是否有看到有些WordPress站点的标签不单调,而是彩色的标签显示,那这个是如何显示的呢?当然有些是主题实现的自定义颜色,这里如果我们需要快速实现标签彩色展示也是可以的,这里我们直接用样式调用。当然,这个只适合系统自带的wp_tag_cloud函数实现的,如果自定义后就无法实现。

利用简单的CSS样式即可实现WordPress彩色标签展示

我们看看样式。

.tags{}
.tags a:nth-child(12n){background-color: #4A4A4A;}
.tags a:nth-child(12n+1){background-color: #428BCA;}
.tags a:nth-child(12n+2){background-color: #5CB85C;}
.tags a:nth-child(12n+3){background-color: #D9534F;}
.tags a:nth-child(12n+4){background-color: #567E95;}
.tags a:nth-child(12n+5){background-color: #FEC42D;}
.tags a:nth-child(12n+6){background-color: #B433FF;}
.tags a:nth-child(12n+7){background-color: #6E8B3D;}
.tags a:nth-child(12n+8){background-color: #00ABA9;}
.tags a:nth-child(12n+9){background-color: #969696;}
.tags a:nth-child(12n+10){background-color: #B37333;}
.tags a:nth-child(12n+11){background-color: #FF6600;}
.tags a{opacity: 0.80;filter:alpha(opacity=80);color: #fff;font-size: 14px;background-color: #428BCA;display: inline-block;margin: 0 5px 4px 0;padding: 3px 6px;border-radius: 2px;}
.tags a:hover{opacity: 1;filter:alpha(opacity=100); color: #fff;}

这里我们将CSS样式添加到当前主题中,然后可以看看是否标签是否编程彩色。有些我们还可以根据需要自行调整。主要还是需要针对我们的样式。

© 版权声明
THE END
喜欢就支持一下吧
点赞5
分享