【WordPressテーマの作り方 第17回】Ajaxで投稿一覧を非同期に切り替える方法

graph TD
  A[フォームUI] --> B[JSがsubmitを検知]
  B --> C[AjaxでGETリクエスト送信]
  C --> D[functions.phpで処理]
  D --> E[WP_Queryで投稿取得]
  E --> F[部分テンプレートでHTML生成]
  F --> G[JSが受信 → DOM差し替え]

<form id="filterForm" class="p-filterForm">
  <label>
    カテゴリー：
    <?php
    wp_dropdown_categories([
      'show_option_all' => 'すべて',
      'name' => 'cat',
      'taxonomy' => 'product_category',
    ]);
    ?>
  </label>

  <label>
    並び順：
    <select name="sort">
      <option value="">選択してください</option>
      <option value="asc">価格が安い順</option>
      <option value="desc">価格が高い順</option>
    </select>
  </label>

  <button type="submit">絞り込む</button>
</form>

<div id="ajaxResult"></div>

document.getElementById('filterForm').addEventListener('submit', function (e) {
  e.preventDefault();
  const formData = new FormData(this);
  const params = new URLSearchParams(formData).toString();

  fetch(`/wp-admin/admin-ajax.php?action=filter_products&${params}`, {
    method: 'GET',
  })
    .then(res => res.text())
    .then(html => {
      document.getElementById('ajaxResult').innerHTML = html;
    });
});

add_action('wp_ajax_filter_products', 'ajax_filter_products');
add_action('wp_ajax_nopriv_filter_products', 'ajax_filter_products');

function ajax_filter_products() {
  $args = [
    'post_type'      => 'product',
    'posts_per_page' => -1,
  ];

  // 並び順
  if (!empty($_GET['sort'])) {
    $args['meta_key'] = 'price';
    $args['orderby'] = 'meta_value_num';
    $args['order'] = ($_GET['sort'] === 'desc') ? 'DESC' : 'ASC';
  }

  // カテゴリ
  if (!empty($_GET['cat'])) {
    $args['tax_query'][] = [
      'taxonomy' => 'product_category',
      'field'    => 'term_id',
      'terms'    => intval($_GET['cat']),
    ];
  }

  $query = new WP_Query($args);

  if ($query->have_posts()) :
    echo '<ul class="p-productList">';
    while ($query->have_posts()) : $query->the_post();
      echo '<li><a href="' . get_permalink() . '">';
      echo '<h4>' . get_the_title() . '</h4>';
      echo '<p>価格：' . get_field('price') . '円</p>';
      echo '</a></li>';
    endwhile;
    echo '</ul>';
  else :
    echo '<p>該当する商品は見つかりませんでした。</p>';
  endif;

  wp_die(); // 終了
}