【WordPress】Ajaxでチェックボックスを使ったリアルタイム絞り込み検索を実装する方法

WordPressのサイトで、チェックボックスを使った絞り込み検索をリアルタイムで反映させる方法を紹介します。Ajaxを利用することで、ページをリロードせずに検索結果を動的に更新できます。

チェックボックスの絞り込み検索とは？

チェックボックスを使った絞り込み検索とは、ユーザーが特定のカテゴリーやタグを選択することで、リアルタイムに検索結果を反映させる仕組みです。Ajaxを活用することで、ページをリロードせずに検索結果を更新し、ユーザー体験を向上させることができます。

フロントエンドの実装（HTML）

まず、検索フィルター用のチェックボックスと、検索結果を表示するエリアを作成します。

<form id="filter-form">
  <div>
    <label><input type="checkbox" class="filter-checkbox" name="category[]" value="1"> カテゴリ1</label>
    <label><input type="checkbox" class="filter-checkbox" name="category[]" value="2"> カテゴリ2</label>
    <label><input type="checkbox" class="filter-checkbox" name="category[]" value="3"> カテゴリ3</label>
  </div>
</form>

<div id="search-results">
  <!-- 検索結果をここに表示 -->
</div>

JavaScript（Ajax処理）

次に、チェックボックスの変更を検知し、選択されたカテゴリーをAjaxで送信するスクリプトを作成します。

jQuery(document).ready(function ($) {
  $('.filter-checkbox').on('change', function () {
    let selectedCategories = [];

    $('.filter-checkbox:checked').each(function () {
      selectedCategories.push($(this).val());
    });

    $.ajax({
      url: ajax_object.ajaxurl,
      type: 'POST',
      data: {
        action: 'filter_posts',
        categories: selectedCategories
      },
      beforeSend: function () {
        $('#search-results').html('<p>検索中...</p>');
      },
      success: function (response) {
        $('#search-results').html(response);
      }
    });
  });
});

PHP（Ajaxリクエストの処理）

WordPress側でAjaxリクエストを処理し、該当する投稿を取得して表示する処理を追加します。

function filter_posts()
{
  $args = array(
    'post_type' => 'post',
    'posts_per_page' => -1
  );

  if (!empty($_POST['categories'])) {
    $args['tax_query'] = array(
      array(
        'taxonomy' => 'category',
        'field'    => 'term_id',
        'terms'    => $_POST['categories'],
        'operator' => 'IN'
      )
    );
  }

  $query = new WP_Query($args);

  if ($query->have_posts()) {
    while ($query->have_posts()) {
      $query->the_post();
      echo '<h2><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2>';
    }
  } else {
    echo '<p>該当する記事がありません。</p>';
  }

  wp_die();
}

add_action('wp_ajax_filter_posts', 'filter_posts');
add_action('wp_ajax_nopriv_filter_posts', 'filter_posts');

wp_localize_script でAjax URLを設定

functions.php に以下のコードを追加し、JavaScriptがajaxurlを認識できるようにします。

function enqueue_ajax_filter_script()
{
  wp_enqueue_script('ajax-filter', get_template_directory_uri() . '/js/ajax-filter.js', array('jquery'), null, true);
  wp_localize_script('ajax-filter', 'ajax_object', array('ajaxurl' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts', 'enqueue_ajax_filter_script');

まとめ

この方法を使用すると、WordPressサイトでリアルタイムのAjax絞り込み検索を実装できます。