![サイドバーを追加する[WordPressテーマ作成#4]](http://scianto.net/paolog-wp/wp-content/uploads/2009/02/20090219_01.png)
今回は2カラムを想定してサイドバーをつけてみたいと思います。
まずは簡単に次のものをつけてみます。
- カテゴリ一覧
- タグクラウド
- (月別)アーカイブ
カテゴリ一覧
カテゴリを取得するにはwp_list_categories()タグを使います。
<?php wp_list_categories(); ?>
引数に何も指定しないときは次のように出力されます。
<li class="categories">Categories
<ul>
<li class="cat-item cat-item-ID"> <a href="カテゴリページへのリンク" title="カテゴリ概要">カテゴリ名</a> </li>
<li class="cat-item cat-item-ID"> <a href="カテゴリページへのリンク" title="カテゴリ概要">カテゴリ名</a> </li>
</ul>
</li>
wp_list_categories()タグの詳しい説明はドキュメントをご覧ください。
テンプレートタグ/wp list categories – WordPress Codex 日本語版
これはウィジェットで使うことが前提の出力です。テンプレートを公開するときなどはウィジェット対応のほうがいいと思いますが、そうでなければ独自スタイルにしたいですね。
title_liパラメータでリストのタイトル(この場合は「Categories」)表示を変えることができますが、これを空にするとリスト項目以外の出力はされなくなります。
<?php wp_list_categories(’title_li=’); ?>
出力はこのようになります。
<li class="cat-item cat-item-ID"> <a href="カテゴリページへのリンク" title="カテゴリ概要">カテゴリ名</a> </li> <li class="cat-item cat-item-ID"> <a href="カテゴリページへのリンク" title="カテゴリ概要">カテゴリ名</a> </li>
この場合、自分で外側に<ul></ul>をつけないといけないのでわすれないようにしましょう。
今回はタイトルのマークアップを変更し、カテゴリごとの記事数を表示することにします。
<?php wp_list_categories('show_count=1&title_li=<h2>カテゴリ</h2>'); ?>
アーカイブ(月別)
アーカイブを出力するにはwp_get_archives()タグを使います。月別のアーカイブの場合は次のようにします。
<?php wp_get_archives('type=monthly'); ?
テンプレートタグ/wp get archives – WordPress Codex 日本語版
デフォルトで月別アーカイブを表示するようになっているので引数がなくてもOKです。ただ、カテゴリと違ってリストのタイトルは表示されないので自分で追加します。
<li><h2>アーカイブ</h2><ul><?php wp_get_archives('type=monthly'); ?></ul></li>
タグクラウド
wp_tag_cloud()タグを使って記事につけられたタグの一覧を表示します。
<?php wp_tag_cloud()?>
テンプレートタグ/wp tag cloud – WordPress Codex 日本語版
デフォルトではホワイトスペースで区切られただけになってしまうので引数をformat=listとしてulリストとして表示します。タグクラウドではulがつくようです。
カテゴリやアーカイブ、そしてタグクラウドと出力がまちまちなのがちょっと気に入らないです。今回は次のようにしました。
<li><h2>タグ</h2><?php wp_tag_cloud('format=list')?></li>
まとめ
ここまでやったコードをまとめると次のようになります。次回はテンプレートを増やしてみようと思います。
<ul>
<?php wp_list_categories('show_count=1&title_li=<h2>カテゴリ</h2>'); ?>
<li><h2>アーカイブ</h2><ul><?php wp_get_archives('type=monthly'); ?></ul></li>
<li><h2>タグ</h2><?php wp_tag_cloud('format=list')?></li>
</ul>

名前:paon
1 comment