固定ページやサイドバーにカテゴリ一覧を表示し、カスタマイズする

カテゴリー一覧を好きなHTMLタグでカスタマイズする方法を紹介します

カテゴリを出力する

カテゴリーの一覧を表示させるにはテンプレートファイルの表示させたい場所に以下コードを記述します。

<?php wp_list_categories( $args ); ?>

するとHTMLにはデフォルトで以下のように出力されます。

<li class="categories">
	カテゴリー
	<ul>	
		<li class="cat-item cat-item-1">
		<a href="http://www.wp-tech.net/cat1" >カテゴリー１</a>
		</li>
		<li class="cat-item cat-item-2">
			<a href="http://www.wp-tech.net/ca2" >カテゴリー２</a>
		</li>
		<li class="cat-item cat-item-3">
			<a href="http://www.wp-tech.net/cat3" >カテゴリー３</a>
		</li>
		<li class="cat-item cat-item-4">
			<a href="http://www.wp-tech.net/cat4" >カテゴリー４</a>
		</li>
		<li class="cat-item cat-item-5">
			<a href="http://www.wp-tech.net/cat5" >カテゴリー５</a>
		</li>
		<li class="cat-item cat-item-6">
			<a href="http://www.wp-tech.net/cat6" >カテゴリー６</a>
		</li>
	</ul>
</li>

カスタマイズする

上記のような出力でサイドバーやヘッダーを作成するのは簡単ですが、もっとアレンジを加えたいときは少し難しいので、HTMLタグを自由に使えるように出力する方法を紹介します。

まずテンプレートファイルにて変数を宣言し、カテゴリーの情報を取得します。

<?php
	$args = array(
		'orderby' => 'ID', //カテゴリーをIDでソート
		'title_li' => '' //カテゴリーのタイトルを表示しない
	);
	$categories = get_categories($args);
?>

次に表示させたい場所に以下コードを記述します。

<?php
	foreach( $categories as $category ) { 
		echo '<div class="box>';
		echo '<a href="' . get_category_link( $category->term_id ) . '">';
		echo '<h3>' . $category->name . '</h3>';
		echo '<img src="' . get_template_directory_uri() . '/images/ico_category_' . $category->name . '.png">';
		echo '</a>';
		echo '</div>';
	}
?>

取得した情報をHTMLタグと共にに呼び出すことができました。

また、’ . $category->name . ‘などでカテゴリーに適した、画像ファイルを読み込むこともできます。

オプション

最後に、カテゴリーの情報を取得するのに使えるオプションを幾つかご紹介します。

$args = array(
	'show_option_all'    => 'NULL', //全カテゴリーページへのリンクなし
	'orderby'            => 'ID,name,slug,count,term_group', //カテゴリーのソート項目
	'order'              => 'ASC,DESC', //カテゴリーのソート順
	'style'              => 'list,none', カテゴリーリストの表示形式
	'show_count'         => 0,1 , //各カテゴリーに投稿数を表示するか
	'hide_empty'         => 0,1 , //投稿のないカテゴリーを非表示にするか
	'use_desc_for_title' => 0,1 , //title属性を使うか
	'child_of'           => 0, //このパラメータで指定したカテゴリー ID の子カテゴリーのみ表示。初期値なし
	'feed'               => 'URL', //各カテゴリーのrss-2フィードへのリンクを表示、そのリンク文字列を設定する。
	'feed_type'          => '',
	'feed_image'         => 'URI', //各カテゴリーの rss-2 フィードへのリンクを画像で表示したいときに、その画像のURIを設定
	'exclude'            => 'ID', //指定したカテゴリー（複数可）をリストから除外。カテゴリIDを入力
	'exclude_tree'       => 'ID', //結果から除外するカテゴリーツリー。カテゴリIDを入力
	'include'            => '', //指定したカテゴリー ID のみリストに表示。カテゴリIDを入力
	'hierarchical'       => 0,1 , //サブカテゴリーを箇条書き項目の内側（親カテゴリーより下位レベル）に表示するか、親と同レベルで表示するか。
	'title_li'           => __( 'Categories' ), //箇条書きの外側に表示するタイトルと表示形式。デフォルトは"Categories"。中味を空で指定すると、箇条書きの外側には何も表示しません。
	'show_option_none'   => __( 'No categories' ), //表示するカテゴリーが一つも無いときに代わりに表示する文字列。
	'number'             => null, //表示するカテゴリーの個数を設定。SQL の LIMIT 値となります。初期値は無制限。
	'echo'               => 0,1 , //結果を表示するか、変数等へ値を返すか。
	'depth'              => -1,0,1,n , //カテゴリー階層のどのレベルまでをカテゴリーリストに出力するかを指定。
	'current_category'   => 0,1 , //カテゴリーアーカイブページ以外で "current-cat" を表示させる。
	'pad_counts'         => 0,1 , //子カテゴリーからの値を含めてリンク数または投稿数を計算する。
	'taxonomy'           => 'category', //カテゴリーを取得するタクソノミーの名前。
	'walker'             => null //リストをレンダリングする Walker クラス。
);

このように様々な情報を取得することができます。

1,0 は true,false を表しています。

カテゴリーをソートするorderby(ID,name,slug,count,term_group)や投稿のないカテゴリーを非表示にするか判断するhide_empty(0,1)などはよく使います。

紹介しきれませんでしたが、調べるとまだたくさんオプションがあるので興味があれば調べてみてください。