利用簡單的CSS樣式即可實現(xiàn)WordPress彩色標簽展示

麥子 定制開發(fā)166字數(shù) 1051閱讀3分30秒閱讀模式

我們是否有看到有些WordPress站點的標簽不單調(diào),而是彩色的標簽顯示,那這個是如何顯示的呢?當(dāng)然有些是主題實現(xiàn)的自定義顏色,這里如果我們需要快速實現(xiàn)標簽彩色展示也是可以的,這里我們直接用樣式調(diào)用。當(dāng)然,這個只適合系統(tǒng)自帶的wp_tag_cloud函數(shù)實現(xiàn)的,如果自定義后就無法實現(xiàn)。

我們看看樣式。

.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樣式添加到當(dāng)前主題中,然后可以看看是否標簽是否編程彩色。有些我們還可以根據(jù)需要自行調(diào)整。主要還是需要針對我們的樣式。

投上你的一票
 
  • 本文由 麥子 發(fā)表于 2024年10月18日 08:49:40
  • 轉(zhuǎn)載請務(wù)必保留本文鏈接:http://bjj.org.cn/wpcolor-tags.html
  • WordPress美化標簽