【徹底解説】WordPressで絞り込み検索を作る方法

<!-- 1. 検索条件の取得と変数の設定 -->
<?php
  $args = array(
    'post_type' => 'post',
    'post_status' => 'publish',
    'posts_per_page' => -1,
    'orderby' => 'date',
    'order' => 'DESC'
  );

  if(!empty($_POST['search_category'])) {
    foreach($_POST['search_category'] as $value) {
      $search_category[] = htmlspecialchars($value, ENT_QUOTES);
    }
    $args += array('category__in' => $search_category);
  }

  if(!empty($_POST['search_tag'])) {
    foreach($_POST['search_tag'] as $value) {
      $search_tag[] = htmlspecialchars($value, ENT_QUOTES);
    }
    $args += array('tag__in' => $search_tag);
  }
?>

<!-- 2. 検索フォームの表示 -->
<div class="search">
<form method="post" action="<?php echo esc_url(home_url() . $_SERVER['REQUEST_URI']); ?>">
<div class="checkbox">

<div class="condition-title">エリア</div>
<div class="condition">
  <?php
    $categories = get_categories(Array('hide_empty' => false));
    foreach($categories as $category):
      $checked = "";
      if(in_array($category->term_id, $search_category)) $checked = " checked";
  ?>
  <label>
  <input type="checkbox" name="search_category[]" value="<?php echo esc_attr($category->term_id); ?>"<?php echo $checked; ?>>
  <?php echo esc_html($category->name); ?>
  </label>
  <?php endforeach; ?>
</div>
		
<div class="condition-title">特徴</div>
<div class="condition">
  <?php
    $tags = get_tags(Array('hide_empty' => false));
    foreach($tags as $tag):
      $checked = "";
      if(in_array($tag->term_id, $search_tag)) $checked = " checked";
  ?>
  <label>
  <input type="checkbox" name="search_tag[]" value="<?php echo esc_attr($tag->term_id); ?>"<?php echo $checked; ?>>
  <?php echo esc_html($tag->name); ?>
  </label>
  <?php endforeach; ?>
</div>	
	
</div>

<input type="submit" value="検索" class="submit-button">

</form>
																														 
<!-- 3. 検索結果の取得と表示 -->
<?php
  $the_query = new WP_Query($args);
  if($the_query->have_posts()) :
?>	
<div class="result">
<?php
  while($the_query->have_posts()) :
    $the_query->the_post();
?>			
<div class="article">
  <a href="<?php the_permalink(); ?>">
  <?php the_post_thumbnail('medium'); ?>
  <div><?php the_title(); ?></div>
  </a>
</div>
<?php endwhile; wp_reset_postdata(); ?>
</div>
<?php else : ?>
<p>該当する物件はありませんでした。</p>
<?php endif; ?>

</div>

<?php get_template_part('custom-search'); ?>

// ショートコードで絞り込み検索を設置する関数
function shortcode_search() {
  ob_start();
  get_template_part('custom-search');
  return ob_get_clean();
}
add_shortcode('search', 'shortcode_search');

<!-- 1. 検索条件の取得と変数の設定 -->
if(!empty($_POST['search_price'])) {
  foreach($_POST['search_price'] as $value) {
    $search_price[] = htmlspecialchars($value, ENT_QUOTES);
  }
  $args += array('tax_query' => array(array(
                   'taxonomy' => 'price',
                   'terms' => $search_price,
                   'field' => 'slug',
                   'operator' => 'IN'
                 )));
}

<!-- 2. 検索フォームの表示 -->
<div class="condition-title">価格帯</div>
<div class="condition">
  <?php
    $prices = get_terms('price', Array('hide_empty' => false, 'orderby' => 'slug'));
    foreach($prices as $price):
      $checked = "";
      if(in_array($price->slug, $search_price)) $checked = " checked";
  ?>
  <label>
  <input type="checkbox" name="search_price[]" value="<?php echo esc_attr($price->slug); ?>"<?php echo $checked; ?>>
  <?php echo esc_html($price->name); ?>
  </label>
  <?php endforeach; ?>
</div>

<!-- 1. 検索条件の取得と変数の設定 -->
<?php
  $args = array(
    'post_type' => 'house',
    'post_status' => 'publish',
    'posts_per_page' => -1,
    'orderby' => 'date',
    'order' => 'DESC'
  );

  if(!empty($_POST['search_area'])) {
    foreach($_POST['search_area'] as $value) {
      $search_area[] = htmlspecialchars($value, ENT_QUOTES);
    }
    $tax_query_args[] = array(
                           'taxonomy' => 'area',
                           'terms' => $search_area,
                           'field' => 'slug',
                           'operator' => 'IN'
                        );
  }

  if(!empty($_POST['search_price'])) {
    foreach($_POST['search_price'] as $value) {
      $search_price[] = htmlspecialchars($value, ENT_QUOTES);
    }

    $tax_query_args[] = array(
                           'taxonomy' => 'price',
                           'terms' => $search_price,
                           'field' => 'slug',
                           'operator' => 'IN'
                        );
  }

  if(!empty($_POST['search_area']) || !empty($_POST['search_price'])) {
    $args += array('tax_query' => array($tax_query_args));
  }
?>

<!-- 2. 検索フォームの表示 -->
<div class="condition-title">エリア</div>
<div class="condition">
  <?php
    $areas = get_terms('area', Array('hide_empty' => false));
    foreach($areas as $area):
      $checked = "";
      if(in_array($area->slug, $search_area)) $checked = " checked";
  ?>
  <label>
  <input type="checkbox" name="search_area[]" value="<?php echo esc_attr($area->slug); ?>"<?php echo $checked; ?>>
  <?php echo esc_html($area->name); ?>
  </label>
  <?php endforeach; ?>
</div>

<div class="condition-title">価格帯</div>
<div class="condition">
  <?php
    $prices = get_terms('price', Array('hide_empty' => false, 'orderby' => 'slug'));
    foreach($prices as $price):
      $checked = "";
      if(in_array($price->slug, $search_price)) $checked = " checked";
  ?>
  <label>
  <input type="checkbox" name="search_price[]" value="<?php echo esc_attr($price->slug); ?>"<?php echo $checked; ?>>
  <?php echo esc_html($price->name); ?>
  </label>
  <?php endforeach; ?>
</div>

<!-- 1. 検索条件の取得と変数の設定 -->
<?php
  // ページ番号を取得
  $paged = get_query_var('paged') ? get_query_var('paged') : 1;
  $args = array(
    'paged' => $paged, // ページ番号を設定
    'post_type' => 'post',
    'post_status' => 'publish',
    'posts_per_page' => 2, // 一つのページに表示する件数を設定
    'orderby' => 'date',
    'order' => 'DESC'
  );

  // POSTをGETに変更
  if(!empty($_GET['search_category'])) {
    foreach($_GET['search_category'] as $value) {
      $search_category[] = htmlspecialchars($value, ENT_QUOTES);
    }
    $args += array('category__in' => $search_category);
  }

  if(!empty($_GET['search_tag'])) {
    foreach($_GET['search_tag'] as $value) {
      $search_tag[] = htmlspecialchars($value, ENT_QUOTES);
    }
    $args += array('tag__in' => $search_tag);
  }
?>

<!-- 2. 検索フォームの表示 -->
<form method="get" action="<?php echo esc_url(get_the_permalink()); ?>">

<!-- 3. 検索結果の取得と表示 -->
<?php endwhile; wp_reset_postdata(); ?>
</div>
<?php
    // ページャーを設置
    echo paginate_links(array(
        'total' => $the_query->max_num_pages,
        'current' => $paged,
        'type' => 'list',
    )); 
?>
<?php else : ?>
<p>該当する物件はありませんでした。</p>
<?php endif; ?>

<!-- （追記1）Ajaxの結果を表示する領域を設定 -->
<div id="search-result">
<div class="search">
<form method="post" action="<?php echo esc_url(home_url() . $_SERVER['REQUEST_URI']); ?>">
<div class="checkbox">

<div class="condition-title">エリア</div>
<div class="condition">
  <?php
    $categories = get_categories(Array('hide_empty' => false));
    foreach($categories as $category):
      $checked = "";
      if(in_array($category->term_id, $search_category)) $checked = " checked";
  ?>
  <label>
  <input type="checkbox" name="search_category[]" value="<?php echo esc_attr($category->term_id); ?>"<?php echo $checked; ?>>
  <?php echo esc_html($category->name); ?>
  </label>
  <?php endforeach; ?>
</div>
		
<div class="condition-title">特徴</div>
<div class="condition">
  <?php
    $tags = get_tags(Array('hide_empty' => false));
    foreach($tags as $tag):
      $checked = "";
      if(in_array($tag->term_id, $search_tag)) $checked = " checked";
  ?>
  <label>
  <input type="checkbox" name="search_tag[]" value="<?php echo esc_attr($tag->term_id); ?>"<?php echo $checked; ?>>
  <?php echo esc_html($tag->name); ?>
  </label>
  <?php endforeach; ?>
</div>
	
</div>

<input type="submit" value="検索" class="submit-button">

<!-- （追記2）nonceのhiddenタグを生成 -->
<?php wp_nonce_field('my-ajax-nonce', 'nonce'); ?>
</form>

<?php
  $the_query = new WP_Query($args);
  if($the_query->have_posts()) :
?>	
<div class="result">
<?php
  while($the_query->have_posts()) :
    $the_query->the_post();
?>			
<div class="article">
  <a href="<?php the_permalink(); ?>">
  <?php the_post_thumbnail('medium'); ?>
  <div><?php the_title(); ?></div>
  </a>
</div>
<?php endwhile; wp_reset_postdata(); ?>
</div>
<?php else : ?>
<p>該当する物件はありませんでした。</p>
<?php endif; ?>

</div>

<!-- （追記3）Ajaxで使う変数の設定とスクリプトを読み込み -->
<script>
    var ajaxurl = '<?php echo esc_url(admin_url('admin-ajax.php')); ?>';
</script>
<script src="<?php echo esc_url(get_stylesheet_directory_uri() . '/js/main.js'); ?>"></script>

</div>

<div id="search-result">
<!-- 「1. 検索条件の取得と変数の設定」の手順を除いた部分 -->
</div>

<input type="hidden" id="nonce" name="nonce" value="XXXXXXXXX(nonceの値)">

jQuery(function($){
    function customSearch(){
        // 1. フォームのデータを生成
        var form = $('#search-result form').get()[0];
        var formData = new FormData(form);
        formData.append('action', 'custom_search');

        // 2. Ajaxを行う
        $.ajax({
          type: 'POST',
          url: ajaxurl,
          data: formData,
          processData: false,
          contentType: false,
          success: function(data){
            $('#search-result').prop('outerHTML', data);
            $('.submit-button').attr('type', 'button');
          }
        });
        return false;
    };

    // 3. クリックイベントの設定
    $('.submit-button').attr('type', 'button');
    $(document).on('click', '.submit-button', function(){
        customSearch();
    });
});

// Ajaxで検索結果を表示する関数
function custom_search() {
    $nonce = $_REQUEST['nonce'];
    if(wp_verify_nonce($nonce, 'my-ajax-nonce')) {
        get_template_part('custom-search');
    }
    die();
}
add_action('wp_ajax_custom_search', 'custom_search');
add_action('wp_ajax_nopriv_custom_search', 'custom_search');

$(document).on('click', 'input[name="search_category[]"], input[name="search_tag[]"]', function(){
    customSearch();
});