BLOG

Ajaxなしで絞り込み検索｜URLパラメータでWP_Queryをカスタマイズ

「カテゴリーごと」「タグごと」に絞り込む一覧ページを作りたい──でも Ajax やプラグインを入れるほどでもない。
そんな時はURL パラメータ → pre_get_posts フックだけでサクッと実装できます。
本記事では 20 行で完成するシンプルフィルターを紹介します。

1. URL 設計

  • カテゴリー: ?cat=web
  • タグ: ?tag=javascript
  • 複合: ?cat=web&tag=javascript

2. functions.php スニペット

/**
 * URL パラメータを WP_Query にマージ
 * 対象: アーカイブ "works" のみ
 */
add_action( 'pre_get_posts', 'yk_param_filter_query' );
function yk_param_filter_query( $query ) {

if ( is_admin() || ! $query->is_main_query() ) return;
if ( ! $query->is_post_type_archive( 'works' ) ) return;

// cat=slug (カスタムタクソ works_cat)
if ( isset( $_GET['cat'] ) && $_GET['cat'] ) {
    $query->set( 'tax_query', [
        [
            'taxonomy' => 'works_cat',
            'field'    => 'slug',
            'terms'    => sanitize_text_field( $_GET['cat'] ),
        ]
    ] );
}

// tag=slug (タグは post_tag)
if ( isset( $_GET['tag'] ) && $_GET['tag'] ) {
    $query->set( 'tag', sanitize_text_field( $_GET['tag'] ) );
}
}

3. フロントHTML例

<form method="get" action="/works/" class="filter-form">
  <select name="cat">
    <option value="">カテゴリー</option>
    <option value="web">Web</option>
    <option value="graphic">Graphic</option>
  </select>
  <select name="tag">
    <option value="">タグ</option>
    <option value="javascript">JavaScript</option>
    <option value="acf">ACF</option>
  </select>
  <button type="submit">絞り込む</button>
</form>

4. よくある疑問

  • SEO は大丈夫？
    canonical をアーカイブトップに設定する / robots=noindex にすると安心。
  • ページネーションも動く？
    <?php echo paginate_links( ['add_args' => false] ); ?> で引き継がれます。
  • 複数タクソミーをAND検索したい
    tax_query に 'relation' => 'AND' を追加。

まとめ

Ajax や REST を使わずとも pre_get_posts だけで柔軟なフィルターは実装可能。
「軽量で早い」「キャッシュが効く」のも URL パラメータ方式の強みです。
コピペでぜひ活用してみてください！

ご相談ください

高度な検索UIやデザイン再現もまとめてお任せ！
▶ お問い合わせフォーム

BACK