[wordpress] タグリストのタグ(tag)にclass(スラッグ)を付与して出力

公開日:2015年1月30日

タグを追加したら、投稿→タグで、スラッグ名を指定しておきます。

タグ(tag)にclass(スラッグ)を付与して出力したHTML例

<ul class="post_tags">
<li><a href='「おすすめ」タグで検索したリストへのURL' title='osusume Tag' class='osusume'>おすすめ</a>
<li>
</ul>

タグリストを出力したい場所に記述

<!--▼タグをリストする -->
<?php
$tags = get_tags();
$html = '<ul class="post_tags">';
foreach ( $tags as $tag ) {
	$tag_link = get_tag_link( $tag->term_id );
	$html .= "<li><a href='{$tag_link}' title='{$tag->name} Tag' class='{$tag->slug}'>";
	$html .= "{$tag->name}</a></li>";
}
$html .= '</ul>';
echo $html;
?>
<!--▲タグをリストする-->

角丸の枠で囲ったタグを、floatで横並びするCSS例

タグごとに背景色を変えてみた

/* タグリスト*/
ul {
width:100%;
margin:0;
padding:0;
list-style:none;
}
li a {
float:left;
text-align: center;
line-height:100%;
margin:0px 3px 3px 0px;
display:block;
padding:4px;
border-radius: 3px; 
-webkit-border-radius: 3px; /* Safari,Google Chrome用 */
-moz-border-radius: 3px; /* Firefox用 */
}
/* タグごとに背景色を変更 (例)おすすめ */
a.osusume {
background-color:#fcd6eb;
}