【WordPress】カテゴリー一覧をドロップダウンで表示する方法

2021.08.10 WordPress

サイドバーなどにあるカテゴリー一覧をドロップダウンで表示する方法。

WordPressにはwp_dropdown_categoriesという関数があり、これを使うことでカテゴリー一覧をドロップダウン形式で表示することができます。

しかしこれだけだと一覧からカテゴリーを選択してもページ遷移しないため、formタグとJavaScriptで動くようにしてやります。

カテゴリー一覧をドロップダウンで表示する方法

<form class="cat_list" action="<?php echo esc_url(home_url('/')); ?>" method="get">
	<?php
	$cat_list = wp_dropdown_categories(array(
		'show_option_all' => 'すべてのカテゴリー', //クリックすると「すべてのカテゴリー」を選択できるテキスト
		'show_option_none' => '未分類' //クリックするとカテゴリー「未分類」を選択できるテキスト
		'option_none_value' => '-1' //カテゴリー「未分類」のoption要素のvalue属性
		'orderby' => 'ID', //カテゴリーを何を基準に並べるか
		'order' => 'ASC', //カテゴリーをどの方向に並べるか
		'show_count' => 0, //カテゴリーに属する投稿数を表示するか
		'hide_empty' => 1, //投稿のないカテゴリーを表示するか
		'child_of' => 0, //カテゴリーIDで指定されたカテゴリーの子孫カテゴリーを取得
		'exclude' => '', //除外したいカテゴリーIDをコンマ区切りで指定
		'echo' => 0, //カテゴリー一覧を表示する（1）、またはPHPで使うための値を返す（0）
		'selected' => 0, //初期状態で選択された状態にしておきたいカテゴリーのID（option要素にselectedが追加される）
		'hierarchical' => 0, //カテゴリー一覧を階層形式（子孫カテゴリーをインデント）で表示するか
		'name' => 'cat', //select要素のname属性
		'id' => 'name', //select要素のid属性
		'class' => 'postform', //select要素のclass属性
		'depth' => 0, //カテゴリーをどの階層まで出力するか
		'tab_index' => 0, //select要素のtabindex属性の値
		'taxonomy' => 'category', //取得するタクソノミー
		'hide_if_empty' => 0, //タームが一つもない場合はドロップダウン自体を非表示
		'value_field' => 'term_id' //option要素のvalue属性に入れるターム情報
	));
	$replace = "<select$1 onchange='return this.form.submit()'>";
	$cat_list  = preg_replace( '#<select([^>]*)>#', $replace, $cat_list );
	echo $cat_list;
	?>
	<noscript>
		<input type="submit" value="View" />
	</noscript>
</form>

taxonomyという引数で取得するタクソノミーを取得できるので、カスタムタクソノミーのドロップダウンリストも表示できそうな雰囲気ですよね。

しかし出力自体はできるのですが、ページ遷移がうまくいかないため僕は別の方法で実装するようにしています。