ブログのサイドバーなどにカテゴリーやタクソノミーの一覧を表示することがありますが、通常は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>
タクソノミーの場合も、カテゴリーを表示するときとほぼ同じです。
「タクソノミースラッグ」と書いてあるところは、任意のタクソノミースラッグに書き換えてください。
以上がセレクトボックスにカテゴリーやタクソノミーの項目を一覧表示する方法になります。
コピペで実装できますので、よかったら使ってみてください。