共计 2471 个字符，预计需要花费 7 分钟才能阅读完成。

因为橘子网站的文章页标签样式看起来太乏味，而不少其他站长用的 tag 样式感觉不错，有些还是七彩的，于是也对本站开始修改起来，如果你也是 WordPress 网站，tag 样式单调，也可以参考本站修改方法。

首先是网站文章页的标签调用代码：

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

将上面的代码放在指定的文章页标签调用的位置，第二步便是调整 tag 的样式了，如果是改成五彩的，可以使用如下代码：

/* 文章页 TAG 标签七彩样式 */
.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 文件中即可，当然了，七彩的 tag 颜色可以自行调整，替换想要的颜色代码即可。有时七彩看起来太过于花里胡哨，喜欢简洁的朋友还可以做如下调整，比如改成单色圆角样式，参考代码：

/* 文章页 TAG 标签圆角样式 */
.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);}

上面这款简洁的 tag 样式代码就是本站目前使用的方法，鼠标放上去将会展示圆角样式，效果图直接参考本站的 tag 样式即可。