【WordPress】セレクトボックスにカテゴリーやタクソノミーの一覧を表示する方法

2020/10/24 2020/11/17

ブログのサイドバーなどにカテゴリーやタクソノミーの一覧を表示することがありますが、通常はULタグなどで一覧表示することが多いのではないでしょうか？
今回は、その一覧をセレクトボックスを用いてプルダウンメニューとして実装する方法をご紹介します。

カテゴリー一覧を表示する場合

<!-- 1. onChangeでvalue属性に指定したURLに遷移する -->
<select name="select" onChange="location.href=value;">
	<option value="<?php echo home_url(); ?>/blog/">すべて</option>
	<?php
	$categories = get_categories();
	// 2. foreach文でカテゴリーをすべて表示する
	foreach($categories as $category) {
		$categories = get_the_category($post->ID);
		$slug = $categories[0]->term_id;
		// 3. if文でカテゴリーページの場合 & 現在表示されているページと同じカテゴリーの場合「selected」属性を付与する
		if(is_category() && $slug == $category->term_id){
			echo '<option value="'.get_category_link($category->term_id).'" selected>'.$category->name.'</option>';
		}else{
			echo '<option value="'.get_category_link($category->term_id).'">'.$category->name.'</option>';
		}
	}
	?>
</select>

プルダウンメニューを設置するテーマファイルに、上記のコードを記述することで実装することができます。
以下にコードの解説をします。

1. onChangeでvalue属性に指定したURLに遷移する
selectタグに記述しているonChangeイベントで、optionタグのvalue属性に指定したURLに遷移します。

2. foreach文でカテゴリーをすべて表示する
登録されているカテゴリーをすべて表示するには、foreach文を用いることで取得することができます。

3. if文でカテゴリーページの場合 & 現在表示されているページと同じカテゴリーの場合「selected」属性を付与する
ページ遷移後に、現在表示されているカテゴリーをセレクトボックスに表示したいので、if文を用いて「selected」属性を付与する条件分岐を記述しています。

カテゴリーでの一覧表示は以上となります。

タクソノミー一覧を表示する場合

<!-- 1. onChangeでvalue属性に指定したURLに遷移する -->
<select name="select" onChange="location.href=value;">
	<option value="<?php echo home_url(); ?>/blog/">すべて</option>
	<?php
	$terms = get_terms('タクソノミースラッグ');
	// 2. foreach文でタクソノミーのタームをすべて表示する
	foreach($terms as $term) {
		$terms = get_the_terms($post->ID,'タクソノミースラッグ');
		$slug = $terms[0]->slug;
		// 3. if文でタクソノミーページの場合 & 現在表示されているページと同じカテゴリーの場合「selected」属性を付与する
		if(is_tax() && $slug == $term->slug){
			echo '<option value="'.get_term_link($term->slug,'タクソノミースラッグ').'" selected>'.$term->name.'</option>';
		}else{
			echo '<option value="'.get_term_link($term->slug,'タクソノミースラッグ').'">'.$term->name.'</option>';
		}
	}
	?>
</select>

タクソノミーの場合も、カテゴリーを表示するときとほぼ同じです。
「タクソノミースラッグ」と書いてあるところは、任意のタクソノミースラッグに書き換えてください。

以上がセレクトボックスにカテゴリーやタクソノミーの項目を一覧表示する方法になります。
コピペで実装できますので、よかったら使ってみてください。