[wordpress] 投稿毎に設定されているタグを出力(タグ毎にclassを付与)

公開日:2015年2月19日

タグ毎に、classをタグのスラッグ名で出力してみました。
タグを追加したら、投稿→タグで、スラッグ名を指定しておきます。

単一ページ(single.php)、アーカイブページ等の、出力したい場所に記述

<ul>
<?php
$posttags = get_the_tags();
if ( $posttags ) {
 foreach ( $posttags as $tag ) {
   $tag_link = get_tag_link( $tag->term_id );
   echo '<li class="'.$tag->slug.'"><a href="'.$tag_link.'">'.$tag->name.'</a></li>';
 }
}
?>
</ul>

CSS例

角丸で囲い、それぞれ背景色を変えて横並びに出力

/* タグリスト */
ul{
width:100%;
margin:0 auto;
list-style:none;
}
ul li  {
float:left;
text-align:center;
line-height:100%;
}
ul li a {
padding:4px;
margin:3px;
border-radius: 4px;
-webkit-border-radius: 4px;  /* Safari,Google Chrome用 */
-moz-border-radius: 4px;  /* Firefox用 */
display:block;
}
/* タグを追加するたびに、スラッグ名でCSSを追加して背景色を指定 */
li.osusume a {  /* 例)おすすめ(osusume) */
background-color:#fcd6eb;
}

HTML 出力例

タグをクリックで、そのタグが設定されている投稿ページを一覧する

<ul>
<li class="osusume"><a href="http://(URL)/tag/osusume">おすすめ</a></li>
</ul>