Travelogue

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

公開日：

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

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

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

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

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

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

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

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

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

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.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については他の書き方もあります。以下のエントリーが参考になります。