アーカイブページで絞り込みフォームを作る

WordPress でカスタム投稿タイプ「work」のアーカイブページにカテゴリー（タクソノミー「genre」）をクエリパラメータとして渡して絞り込みを行う。

カスタム投稿タイプ：施工事例（work）
カスタムタクソノミー：ジャンル（genre）

クエリパラメータとは

URLの末尾に付加される文字列で、サーバーに情報を伝えるために使用される。

• ?：パラメータの開始を示す記号
• キー：情報を表す名前。検索キーワードを表す場合は「keyword」など
• =：キーと値を区切る記号
• 値：実際の情報の内容。検索キーワードの値は「クエリパラメータ」
• &：複数のパラメータを区切る記号

カスタム投稿タイプ「work」のアーカイブページへのリンクを取得し、フォームの送信先に設定

<form method="get" action="<?php echo get_post_type_archive_link('work'); ?>">

タクソノミー「genre」の全タームを取得し、セレクトボックスに出力

<select name="genre">
  <option value="">ジャンルを選択</option>
  <?php
    $terms = get_terms('genre');
    foreach ($terms as $term) {
      echo '<option value="' . $term->slug . '">' . $term->name . '</option>';
    }
  ?>
</select>

フォーム送信ボタン

<input type="submit" value="絞り込み">

実用例

<form method="get" action="<?php echo esc_url(get_post_type_archive_link('work')); ?>">
  <select name="genre">
    <option value="">ジャンルを選択</option>
    <?php
      $terms = get_terms([
        'taxonomy' => 'genre',
        'hide_empty' => false,
      ]);
      $selected_genre = isset($_GET['genre']) ? $_GET['genre'] : '';
      foreach ($terms as $term) {
        $selected = ($selected_genre === $term->slug) ? 'selected' : '';
        echo '<option value="' . esc_attr($term->slug) . '" ' . $selected . '>' . esc_html($term->name) . '</option>';
      }
    ?>
  </select>
  <input type="submit" value="絞り込み">
</form>

pre_get_posts フィルターを使って、「今表示しようとしている投稿一覧に対して、ジャンルでの絞り込みを追加してね」と WordPress に伝える。

functions.php

function filter_work_by_genre($query) {
  // 管理画面ではなく、メインクエリ、かつ work アーカイブのときだけ処理
  if (!is_admin() && $query->is_main_query() && is_post_type_archive('work')) {

    // genre パラメータがあれば絞り込む
    if (!empty($_GET['genre'])) {
      $query->set('tax_query', [
        [
          'taxonomy' => 'genre',
          'field' => 'slug',
          'terms' => sanitize_text_field($_GET['genre']),
        ],
      ]);
    }
  }
}
add_action('pre_get_posts', 'filter_work_by_genre');

絞り込みに対応した page-work.php の例

アーカイブページとは別に、絞り込み付きのカスタム投稿一覧を作りたいときなどに使う例

カスタム投稿タイプ：施工事例（work）
カスタムタクソノミー：ジャンル（genre）

<?php
$tax_query = array();

if (!empty($genre_slug)) {
  $tax_query[] = array(
    'taxonomy' => 'genre',
    'field'    => 'slug',
    'terms'    => $genre_slug
  );
}

$args = array(
  'post_type' => 'work',
  'posts_per_page' => 10,
  'tax_query' => $tax_query
);

$query = new WP_Query($args);
?>

<?php if ($query->have_posts()) : ?>
  <ul>
    <?php while ($query->have_posts()) : $query->the_post(); ?>
      <li>
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
      </li>
    <?php endwhile; ?>
  </ul>
<?php else : ?>
  <p>該当する事例はありません。</p>
<?php endif; ?>

<?php wp_reset_postdata(); ?>

複数条件の絞り込み検索機能

カスタム投稿タイプ：施工事例（work）
カスタムタクソノミー：ジャンル（genre）で絞り込み
ACFフィールド：公開年（release_year）で絞り込み

archive-work.php

<form method="get" action="<?php echo get_post_type_archive_link('work'); ?>">

  <!-- ジャンル選択 -->
  <select name="genre">
    <option value="">ジャンルを選択</option>
    <?php
    $terms = get_terms('genre');
    foreach ($terms as $term) {
      $selected = (isset($_GET['genre']) && $_GET['genre'] == $term->slug) ? 'selected' : '';
      echo '<option value="' . $term->slug . '" ' . $selected . '>' . $term->name . '</option>';
    }
    ?>
  </select>

  <!-- 公開年選択 -->
  <select name="year">
    <option value="">公開年を選択</option>
    <?php
    // 過去10年分を表示（例）
    $current_year = date('Y');
    for ($y = $current_year; $y >= $current_year - 10; $y--) {
      $selected = (isset($_GET['year']) && $_GET['year'] == $y) ? 'selected' : '';
      echo "<option value=\"$y\" $selected>{$y}年</option>";
    }
    ?>
  </select>

  <input type="submit" value="絞り込み">
</form>

検索処理（WP_Query）

<?php
$tax_query = array(); //カスタム分類で絞り込み
$meta_query = array(); //ACF の値を絞るときに必須

// ジャンルの絞り込み
if (!empty($_GET['genre'])) {
  $tax_query[] = array(
    'taxonomy' => 'genre',
    'field'    => 'slug',
    'terms'    => $_GET['genre'],
  );
}

// 公開年の絞り込み（ACFフィールド）
if (!empty($_GET['year'])) {
  $meta_query[] = array(
    'key'     => 'release_year',
    'value'   => $_GET['year'],
    'compare' => '='
  );
}

$args = array(
  'post_type'      => 'work',
  'posts_per_page' => 10,
  'tax_query'      => $tax_query,
  'meta_query'     => $meta_query, 
);

$query = new WP_Query($args);
?>

<!-- 結果表示 -->
<?php if ($query->have_posts()) : ?>
  <ul>
    <?php while ($query->have_posts()) : $query->the_post(); ?>
      <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    <?php endwhile; ?>
  </ul>
<?php else : ?>
  <p>該当する事例がありません。</p>
<?php endif; ?>

<?php wp_reset_postdata(); ?>

カスタム分類での絞り込み：tax_query で taxonomy + slug を条件指定
ACFフィールドの絞り込み：meta_query で key + value を条件指定
フォーム：<form> + select に GET パラメータを送信