共計(jì) 2471 個(gè)字符，預(yù)計(jì)需要花費(fèi) 7 分鐘才能閱讀完成。

因?yàn)殚僮泳W(wǎng)站的文章頁(yè)標(biāo)簽樣式看起來(lái)太乏味，而不少其他站長(zhǎng)用的 tag 樣式感覺(jué)不錯(cuò)，有些還是七彩的，于是也對(duì)本站開(kāi)始修改起來(lái)，如果你也是 WordPress 網(wǎng)站，tag 樣式單調(diào)，也可以參考本站修改方法。

首先是網(wǎng)站文章頁(yè)的標(biāo)簽調(diào)用代碼：

<aside class="tags"> <?php the_tags('<i class="fa fa-tag"aria-hidden="true"></i>', ''); ?></aside>

將上面的代碼放在指定的文章頁(yè)標(biāo)簽調(diào)用的位置，第二步便是調(diào)整 tag 的樣式了，如果是改成五彩的，可以使用如下代碼：

/* 文章頁(yè) TAG 標(biāo)簽七彩樣式 */
.tags{padding: 1px 1px -5px 1px;}
.tags a:nth-child(9n){background-color: #4A4A4A;}
.tags a:nth-child(9n+1){background-color: #428BCA;}
.tags a:nth-child(9n+2){background-color: #706a25;}
.tags a:nth-child(9n+3){background-color: #2d2507;}
.tags a:nth-child(9n+4){background-color: #039075;}
.tags a:nth-child(9n+5){background-color: #ce2004;}
.tags a:nth-child(9n+6){background-color: #0780b9;}
.tags a:nth-child(9n+7){background-color: #fbd9ef;}
.tags a:nth-child(9n+8){background-color: #b2cff3;}
.tags a{opacity: 0.80;filter:alpha(opacity=80);color: #fff;display: inline-block;border-radius: 4px;margin: 0 5px 5px 0;padding: 4px 6px;line-height: 17px}
.tags a:hover{opacity: 1;filter:alpha(opacity=100);}

效果圖

將以上代碼放在 CSS 文件中即可，當(dāng)然了，七彩的 tag 顏色可以自行調(diào)整，替換想要的顏色代碼即可。有時(shí)七彩看起來(lái)太過(guò)于花里胡哨，喜歡簡(jiǎn)潔的朋友還可以做如下調(diào)整，比如改成單色圓角樣式，參考代碼：

/* 文章頁(yè) TAG 標(biāo)簽圓角樣式 */
.tags{padding: 1px 1px -5px 1px;}
.tags a:nth-child(9n){background-color: #f7f7f4;border: 1px rgba(0,0,0,.05) solid;font-size: 15px;border-radius: 4px;color: #380404;}
.tags a:nth-child(9n+1){background-color: #f7f7f4;border: 1px rgba(0,0,0,.05) solid;font-size: 15px;border-radius: 4px;color: #380404;}
.tags a:nth-child(9n+2){background-color: #f7f7f4;border: 1px rgba(0,0,0,.05) solid;font-size: 15px;border-radius: 4px;color: #380404;}
.tags a:nth-child(9n+3){background-color: #f7f7f4;border: 1px rgba(0,0,0,.05) solid;font-size: 15px;border-radius: 4px;color: #380404;}
.tags a:nth-child(9n+4){background-color: #f7f7f4;border: 1px rgba(0,0,0,.05) solid;font-size: 15px;border-radius: 4px;color: #380404;}
.tags a:nth-child(9n+5){background-color: #f7f7f4;border: 1px rgba(0,0,0,.05) solid;font-size: 15px;border-radius: 4px;color: #380404;}
.tags a:nth-child(9n+6){background-color: #f7f7f4;border: 1px rgba(0,0,0,.05) solid;font-size: 15px;border-radius: 4px;color: #380404;}
.tags a:nth-child(9n+7){background-color: #f7f7f4;border: 1px rgba(0,0,0,.05) solid;font-size: 15px;border-radius: 4px;color: #380404;}
.tags a:nth-child(9n+8){background-color: #f7f7f4;border: 1px rgba(0,0,0,.05) solid;font-size: 15px;border-radius: 4px;color: #380404;}
.tags a{opacity: 0.80;filter:alpha(opacity=80);color: #fff;display: inline-block;border-radius: 4px;margin: 0 5px 5px 0;padding: 4px 6px;line-height: 17px}
.tags a:hover{opacity: 1;filter:alpha(opacity=100);}

上面這款簡(jiǎn)潔的 tag 樣式代碼就是本站目前使用的方法，鼠標(biāo)放上去將會(huì)展示圓角樣式，效果圖直接參考本站的 tag 樣式即可。