Travelogue

記事が含まれるカテゴリをリンク付きで表示するWordPressテンプレートタグとCSS参考例

公開日：

the_category()は現在の記事が含まれるカテゴリをリンク付きで表示するためのWordPressテンプレートタグです。
ブログで比較的よく使われるなじみのあるタグです。
引数は3種類あります。

  • カテゴリが複数ある場合の区切り文字
  • 記事が子カテゴリに含まれる場合、その親カテゴリも一覧に表示するかどうか
  • 現在の記事ではなく、特定の記事のIDを指定することも可能

親カテゴリと子カテゴリを別々のli要素にマークアップする

ひとつ目の引数で何も指定しなければ、デフォルトでulのliでカテゴリがマークアップされます。
また、ふたつ目の引数をmultipleにすると、親カテゴリも表示されます。
ところがこのとき、親と子が一緒のli要素の中にマークアップされてしまうようです。
（親子関係にないカテゴリの場合は別々のliになります）

親と子も別々のli要素にしたかったので、以下のようにしてみました。

<ul id="category_list" class="cf">
<li><?php the_category('</li><li>','multiple'); ?></li>
</ul>

横並びのアイコンのように表示するCSS

カテゴリの一覧を横並びのアイコンのような形に整える

上の画像のように、カテゴリの一覧を横並びのアイコンのような形に整えるCSSの一例を参考までに紹介します。
htmlコードは上記のものを使います。

.cf:before,
.cf:after {
	content:"";
	display:table;
}
.cf:after {
	clear:both;
}
.cf {
	zoom:1;
}
#category_list {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
#category_list li {
	display:block;
	float:left;
}
#category_list li a {
	font-size:13px;
	line-height:1;
	color:#fff;
	text-decoration:none;
	display:block;
	padding:5px 8px;
	margin:0px 5px 0px 0px;
	background-color:#666;
}

まずはliをブロック要素に変換し、これをフロートさせて横並びにします。
文字数の増減が予想されるため、liの要素の横幅は指定しません。
通常、ブロック要素は横幅を指定しなければ横幅100パーセントに伸びてしまいますが、フロートされたブロック要素の場合、内包するコンテンツにあわせて横幅が自動的に伸縮するため、この特性を生かします。

liの中にあるaタグもブロック要素に変換し、これにパディングを指定。クリックできるのが文字だけではなくてアイコン全体にします。

liをフロートさせているので、これをクリアするために親要素のulにclearfixを指定しています。
clearfixについては他の書き方もあります。以下のエントリーが参考になります。

Pagetop