【WordPressテーマの作り方 第16回】UIと連動して投稿一覧を絞り込み・並び替えする方法

📊 データの流れ

[フォームUI]
   ↓ (GET)
[URLに条件が付加される]
   ↓
[PHPでGET値を取得]
   ↓
[WP_Queryの$argsに渡す]
   ↓
[クエリ実行 → 結果を出力]

<form method="get" class="p-sortForm">
  <!-- 並び順のセレクトボックスフォーム。GETメソッドで送信し、URLにパラメータを付加する形式 -->
  <label>
    並び順：
    <select name="sort" onchange="this.form.submit()">
      <!-- 初期状態の選択肢 -->
      <option value="">選択してください</option>

      <!-- 価格が安い順を選んだとき。$_GET['sort'] が 'asc' の場合に selected 属性を付与 -->
      <option value="asc" <?php selected($_GET['sort'] ?? '', 'asc'); ?>>価格が安い順</option>

      <!-- 価格が高い順を選んだとき。$_GET['sort'] が 'desc' の場合に selected 属性を付与 -->
      <option value="desc" <?php selected($_GET['sort'] ?? '', 'desc'); ?>>価格が高い順</option>
    </select>
  </label>
</form>

// 並び順の取得（URLのGETパラメータから取得。未指定時は「asc（価格が安い順）」を初期値に）
$sort_order = $_GET['sort'] ?? 'asc';

// WP_Query 用の引数を設定
$args = [
  'post_type'      => 'product',           // 投稿タイプを「product」に限定（カスタム投稿タイプ）
  'posts_per_page' => 6,                   // 1ページあたり6件表示
  'meta_key'       => 'price',             // 並び替え対象のカスタムフィールド（ACFで定義された価格）
  'orderby'        => 'meta_value_num',    // 数値として並び替え（文字列ではなく数値ソート）
  'order'          => ($sort_order === 'desc') ? 'DESC' : 'ASC', // GETパラメータが desc なら降順、それ以外は昇順
];

// クエリを実行（$query に投稿一覧を格納）
$query = new WP_Query($args);

<?php if ($query->have_posts()) : ?>
  <!-- 投稿が存在する場合はリスト表示 -->
  <ul class="p-productList">
    <?php while ($query->have_posts()) : $query->the_post(); ?>
      <li>
        <a href="<?php the_permalink(); ?>">
          <!-- 投稿タイトルを表示 -->
          <h4><?php the_title(); ?></h4>

          <!-- ACFのカスタムフィールド「price」の値を表示 -->
          <p>価格：<?php the_field('price'); ?>円</p>
        </a>
      </li>
    <?php endwhile; ?>
  </ul>

  <!-- クエリで書き換えた投稿データをリセット（次のループやテンプレートに影響しないように） -->
  <?php wp_reset_postdata(); ?>
<?php else : ?>
  <!-- 該当投稿がなかった場合のメッセージ -->
  <p>該当する商品は見つかりませんでした。</p>
<?php endif; ?>

<!-- 絞り込みフォーム（GETメソッドで送信） -->
<form method="get" class="p-filterForm">

  <!-- カテゴリー選択フォーム -->
  <label>カテゴリー：
    <?php
    wp_dropdown_categories([
      'show_option_all' => 'すべて',                // 「すべて」の選択肢を表示（＝制限なし）
      'name'            => 'cat',                  // name属性 → GETパラメータ「cat」として送信される
      'selected'        => $_GET['cat'] ?? '',     // 送信された値を保持（再表示時に選択状態を維持）
      'taxonomy'        => 'product_category',     // 使用するタクソノミー（ここでは product_category）
    ]);
    ?>
  </label>

  <!-- 価格帯選択フォーム -->
  <label>価格帯：
    <select name="price_range">
      <option value="">選択してください</option>
      <option value="under1000" <?php selected($_GET['price_range'] ?? '', 'under1000'); ?>>
        〜1,000円
      </option>
      <option value="1000to3000" <?php selected($_GET['price_range'] ?? '', '1000to3000'); ?>>
        1,000〜3,000円
      </option>
      <option value="over3000" <?php selected($_GET['price_range'] ?? '', 'over3000'); ?>>
        3,000円〜
      </option>
    </select>
  </label>

  <!-- フォーム送信ボタン -->
  <button type="submit">絞り込む</button>
</form>

// -----------------------------
// カスタムフィールド（価格）による絞り込み条件を格納
// -----------------------------
$meta_query = [];

// 「価格帯」が選択されている場合は、該当する条件を $meta_query に追加
if (!empty($_GET['price_range'])) {
  switch ($_GET['price_range']) {
    case 'under1000':
      // 1,000円以下の投稿
      $meta_query[] = [
        'key'     => 'price',     // ACFのフィールド名
        'value'   => 1000,        // 上限値
        'compare' => '<=',        // 以下
        'type'    => 'NUMERIC',   // 数値として比較
      ];
      break;

    case '1000to3000':
      // 1,000〜3,000円の範囲
      $meta_query[] = [
        'key'     => 'price',
        'value'   => [1000, 3000], // 範囲指定
        'compare' => 'BETWEEN',    // 範囲内
        'type'    => 'NUMERIC',
      ];
      break;

    case 'over3000':
      // 3,000円以上の投稿
      $meta_query[] = [
        'key'     => 'price',
        'value'   => 3000,
        'compare' => '>=',        // 以上
        'type'    => 'NUMERIC',
      ];
      break;
  }
}

// -----------------------------
// カテゴリー（タクソノミー）による絞り込み条件を格納
// -----------------------------
$tax_query = [];

// 「カテゴリー」が選択されている場合は、$tax_query に条件を追加
if (!empty($_GET['cat'])) {
  $tax_query[] = [
    'taxonomy' => 'product_category', // カスタムタクソノミー名
    'field'    => 'term_id',          // GETで送られてくる値は term_id
    'terms'    => intval($_GET['cat']) // 数値に変換して指定
  ];
}

// -----------------------------
// WP_Query の引数を組み立てる
// -----------------------------
$args = [
  'post_type'      => 'product',      // 投稿タイプ（商品）
  'posts_per_page' => 6,              // 表示件数
  'meta_query'     => $meta_query,    // 価格帯の絞り込み条件
  'tax_query'      => $tax_query,     // カテゴリーの絞り込み条件
];

// -----------------------------
// 現在のページ番号を取得（ページネーション対応）
// -----------------------------
// get_query_var('paged') は現在のページ番号を取得する関数（1ページ目は0や空になることがある）
// 「 ?: 」は null 合体演算子。値が空なら 1 を代入する（つまり 1ページ目として扱う）
$paged = get_query_var('paged') ?: 1;

// 取得したページ番号を WP_Query の引数に追加
$args['paged'] = $paged;