WordPress 标签添加个性化图标的方法

pasckr

---

                　　不少同学问到一个同样的问题，如何给标签添加一个图标。
　　这个展示是大前端D5主题才出现的，也是借鉴国外的一个网站的展示方式，如下图：

　　是不是很好看呢?方法很简单。
第一步：在wordpress循环中加入以下php代码：
$posttags = get_the_tags();if ($posttags) {        foreach($posttags as $tag) {                echo '<a class=&quot;tag-link tag-link-' . $tag->term_id . '&quot; href=&quot;'.get_tag_link($tag).'&quot;>'. $tag->name .'</a>';        }}第二步：在css文件中设置背景图：
.tag-link{color:#888;border:solid 1px #d6d6d6;border-radius:2px;box-shadow:0 1px 1px #eee;padding:2px 6px;margin-right:4px;display:inline-block;}.tag-link:hover{background-color: #fbfbfb;border-color:#bbb;color: #444;box-shadow:0 1px 1px #ddd}.tag-link-101,.tag-link-23{background-image:url(../img/tag.png);background-repeat:no-repeat;padding-left:25px}.tag-link-101{background-position:4px 3px}.tag-link-23{background-position:4px -17px}　　给少数同学讲解一下吧!
　　php中设置了tag的链接，并给与每个链接加上一个公共class=&quot;tag-link&quot;和一个私有class=&quot;tag-link-tag的ID&quot;，css中先给公共class定义tag的公共样式，然后在私有class上写图标(这里一般指的是定位：background-position),完事儿。