タグ毎に、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>