【WordPress】カテゴリーやタグのセレクトボックスを使って記事を絞り込む方法｜tag_idで正しく動作させる

【WordPress】カテゴリーやタグのセレクトボックスを使って記事を絞り込む方法 WordPress
2024.08.16

WordPressのサイトにおいて、ユーザーが特定のカテゴリーやタグに属する記事を簡単に絞り込めるようにすることは、ユーザーエクスペリエンスを向上させる重要な機能です。この記事では、カテゴリーやタグを選択するセレクトボックスを実装し、記事を自動的に絞り込む方法を解説します。

この記事でわかること

  • wp_dropdown_categories()でセレクトボックスを表示する方法
  • 選択時に自動でフォームを送信するJavaScript
  • タグの絞り込みでtagを使ってはいけない理由と正しい実装
スポンサーリンク

カテゴリーのセレクトボックスを表示する

wp_dropdown_categories() 関数を使ってカテゴリーの一覧をセレクトボックス形式で表示します。

カテゴリーのセレクトボックス
<form action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get" id="category-select">
    <?php
    $args = array(
        'show_option_all' => '全てのカテゴリー',
        'orderby'         => 'name',
        'order'           => 'ASC',
        'show_count'      => 1,
        'hide_empty'      => 0,
        'name'            => 'cat', // catクエリ変数はIDを受け付ける
        'id'              => 'cat',
        'class'           => 'postform',
        'taxonomy'        => 'category',
        'value_field'     => 'term_id',
    );

    wp_dropdown_categories( $args );
    ?>
</form>

このコードをテーマの適切な場所に挿入すると、カテゴリーのセレクトボックスが表示されます。catクエリ変数はカテゴリーIDをそのまま受け付けるため、value_field => 'term_id'のままで正しく動作します。

自動送信を可能にするJavaScriptの追加

ユーザーがカテゴリーを選択すると自動的にフォームが送信されるように、JavaScriptを追加します。

セレクトボックス変更時に自動送信
document.getElementById( 'cat' ).addEventListener( 'change', function () {
    document.getElementById( 'category-select' ).submit();
} );

タグのセレクトボックスを使った絞り込み

同様に、タグを使用して記事を絞り込むセレクトボックスも作成できます。taxonomyパラメーターをpost_tagに変更するとタグの一覧を表示できます。

タグの絞り込みには「tag」ではなく「tag_id」を使う
カテゴリーのcatクエリ変数は数値IDを受け付けますが、タグのtagクエリ変数はスラッグ（文字列）としてしか解釈されません（本番WPコアで確認: sanitize_term_field('slug', ...)で処理されtag_slug__inに格納されます）。そのため、フォームのnameをtagのままにしてvalue_field => 'term_id'（数値ID）を送信すると、スラッグが「5」のようなタグを探すことになり該当するタグが見つからず絞り込みが機能しません。数値IDをそのまま使いたい場合は、フォームのnameをtag_idにしてください。tag_idクエリ変数は数値IDを直接受け付けます。
タグのセレクトボックス（tag_idで正しく動作）
<form action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get" id="tag-select">
    <?php
    $args = array(
        'show_option_all' => '全てのタグ',
        'orderby'         => 'name',
        'order'           => 'ASC',
        'show_count'      => 1,
        'hide_empty'      => 0,
        'name'            => 'tag_id', // tagではなくtag_idを使う（数値IDに対応）
        'id'              => 'tag_id',
        'class'           => 'postform',
        'taxonomy'        => 'post_tag',
        'value_field'     => 'term_id',
    );

    wp_dropdown_categories( $args );
    ?>
</form>
タグ用セレクトボックス変更時に自動送信
document.getElementById( 'tag_id' ).addEventListener( 'change', function () {
    document.getElementById( 'tag-select' ).submit();
} );

関連する絞り込み検索の実装

キーワード検索やチェックボックスによる複数条件の絞り込みまで含めた総合的な実装は絞り込み検索機能を実装する方法（セレクトボックス・チェックボックス・pre_get_posts）で解説しています。

よくある質問（FAQ）

Qカテゴリーのセレクトボックスを表示するwp_dropdown_categories()の使い方は？
Awp_dropdown_categories(array(‘show_option_all’ => ‘全カテゴリー’, ‘name’ => ‘cat’))でセレクトボックスを生成します。catクエリ変数はカテゴリーIDをそのまま受け付けます。
Qタグの絞り込みでスラッグを使う方法もありますか？
Avalue_field => ‘slug’に変更し、フォームのnameを’tag’のままにする方法もあります。その場合、送信されるのはタグのスラッグになり、tagクエリ変数の仕様と一致します。IDで統一したい場合はtag_idを使う方がシンプルです。
Qカテゴリーとタグの両方でAND検索できるフォームを作るには？
A複数のセレクトボックスの値をGETパラメーターとして送り、WP_Queryのcatとtax_queryでAND絞り込みを実装します。pre_get_postsで検索結果をフックする方法もあります。

まとめ

  • カテゴリー：catクエリ変数（数値ID対応）
  • タグ：tagはスラッグ専用。数値IDを使うならtag_idを使う
  • 共通：onchangeで自動送信すると操作性が向上する

カテゴリーとタグでクエリ変数の仕様が異なる点に注意して実装してください。