WordPressの記事アーカイブページなどに、セレクトボックスでカテゴリーやタクソノミーのターム一覧を表示し、選んだタームで記事を絞り込みたい——そんな場面はよくあります。

結論から言うと、セレクトボックスの各optionに、タームのアーカイブページのURLを持たせ、onChangeでそのURLに遷移させることで、検索機能を使わずに絞り込みを実現できます。この記事では、カテゴリー・タクソノミーそれぞれの実装と、遷移後に選択を保持する方法を解説します。

以前、下の記事で<form>タグとWordPressの検索機能を使う方法を紹介しました。

GETフォームのセレクトボックスで選択値を保持したまま検索結果を表示する方法

今回は検索機能を使わず、選んだタームのアーカイブページに直接リンクさせる方法です。1つのカテゴリー（またはタクソノミー）だけで絞り込む場合は、こちらのほうがシンプルに実装できます。実績（works）やニュースのアーカイブなど、1つの分類軸で記事を切り替えたいページと特に相性がよく、プルダウンを選ぶだけで移動できるため、スマホでもタップ数が少なく済みます。

カテゴリーの場合

<!-- onChangeでvalue属性に指定したURLに遷移 -->
<select name="news_select" onChange="location.href=value;">
    <option value="<?php echo home_url(); ?>/news/">すべて</option>
    <?php
    $categories = get_categories();
    foreach ($categories as $category) {
        $categories = get_the_category($post->ID);
        $slug = $categories[0]->term_id;
        // カテゴリーページ かつ 現在表示されているページと同じカテゴリーの場合「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>

get_categories()でカテゴリー一覧を取得し、各optionのvalueにget_category_link()でアーカイブページのURLを入れています。onChange="location.href=value;"で、選んだ瞬間にそのURLへ遷移します。

タクソノミーの場合

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

タクソノミーの場合は、get_terms()とget_term_link()を使います。コード中の「works_category」の部分がタクソノミーのスラッグなので、実際のスラッグに合わせて書き換えてください。

遷移先で選択した項目を保持する

どちらのコードも、「現在表示されているページと同じカテゴリー（ターム）かどうか」を判定し、一致する場合はoptionにselectedを付与しています。これにより、遷移してページが変わったあとも、セレクトボックスに選んだ項目が表示されたまま残ります。

is_category()やis_tax()で「今アーカイブページを見ているか」を確認しているため、絞り込み後の状態がユーザーにも分かりやすくなります。なお、selectedの判定は現在のアーカイブページの情報をもとにしているため、カテゴリー／タクソノミーのアーカイブページで正しく機能します。

まとめ

WordPressの検索機能を使うと、search.phpやsearchform.phpなどファイルが増えていきます。複合的な絞り込みではなく、今回のように1つのカテゴリーやタクソノミーだけで絞り込む場合は、タームのアーカイブページへ直接リンクさせるこの方法のほうが、シンプルで扱いやすいです。用途に合わせて、検索機能と使い分けるとよいでしょう。