セレクトボックスにカテゴリーやタクソノミーのターム一覧を表示させて記事を絞り込む

はじめに

WordPressの記事アーカイブページなどで、セレクトボックスを置いて、そこにカテゴリーやタクソノミーのターム一覧を入れて選択したタームによって記事を絞り込みたい時の話です。

以前に紹介した下の記事。

これは<form>タグを使ってWordPressの検索機能を使いましたが、今回は検索機能を使わずに、該当のタームページにリンクさせる方法です。

カテゴリーの場合

<!-- 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>

タクソノミーの場合

<!-- 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>

上記の場合、「works_category」の部分がタクソノミーのスラッグになりますので、適宜書き換えてください。

遷移先のページでセレクトボックスに選択した項目を保持

どちらも「現在表示されているページと同じカテゴリー（ターム）の場合」を判定して、遷移先にページが変わった後にもセレクトボックスに選択した項目が保持されて表示されたままになるように設定しています。

まとめ

検索機能を使うと search.php や searchform.php など、ファイルが増えてしまいますので、複合的な絞り込み検索ではなく、今回のように1つのカテゴリーやタクソノミーだけで絞り込む場合にはこちらの方が簡潔で便利ですね。

IPPEI FUKUTA

名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 120 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。Web制作に関わる情報やワーケーション日記などを執筆しています。