WordPressで検索条件を変更した際にAjaxにて検索結果件数を非同期で表示する方法
WordPress
|
2017.01.04
今回はWordPressで検索条件を変更した際にAjaxにて変更後の検索結果件数を表示する処理を作成したのでご紹介したいと思います。
検索条件の入力フォームは絞り込み検索をプラグインを使わずに実装[WordPress]の内容を使わせて頂いております。
その中の「複数の条件を組み合わせる」を実装して下さい。
WordPressでAjaxを使用する時の方法については、以下ページを参考にさせて頂きました。
WordPressでAjaxを使う方法の解説
WordPressでAjaxを使用する場合は、URL先のPHPファイルを/wp-admin/admin-ajax.phpにすることが決まっています。
そのため、/wp-admin/admin-ajax.phpへのURLをfunction.phpで定義してJavaScritp内で使用します。
function.php
|
1 2 3 4 5 6 7 8 9 |
// admin-ajax.phpのURLを取得しグローバル変数に設定する function add_my_ajaxurl() { ?> <script> var ajaxurl = '<?php echo admin_url( 'admin-ajax.php'); ?>'; </script> <?php } add_action( 'wp_footer', 'add_my_ajaxurl', 1 ); |
javaScriptでは検索時に使用するフォームの値をAjaxメソッドの引数として設定します。
チェックボックスの値はAjaxメソッドにそのまま引数として渡せないので、一度配列に設定し直してから引き渡すようにします。
また、テキストボックス、セレクトボックス、チェックボックスの値が変更した時に再度検索するために
セレクトボックス、チェックボックスのchangeイベント、
テキストボックスのkeyupイベントで検索メソッドを呼び出すようにしています。
javaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
$(function (){ 'use strict'; function seachMatchCount(){ //こだわり（タグ）で選択されたチェックボックスの値を配列に保存 var post_tags=[]; $("[name='post_tag[]']:checked").each(function(){ post_tags.push(this.value); }); //こだわり（チェックボックス）で選択されたチェックボックスの値を配列に保存 var kodawaris=[]; $("[name='kodawari[]']:checked").each(function(){ kodawaris.push(this.value); }); //Ajax通信メソッド //type : HTTP通信の種類(POSTとかGETとか) //url : リクエスト送信先のURL //data : サーバに送信する値 $.ajax({ type: 'POST', url: ajaxurl, data: { 'action' : 'view_seach_match_count', 's' : $('#s').val(), 'catnum' : $('#catnum').val(), 'placenum' : $('#placenum').val(), 'type' : $('#type').val(), 'low' : $('#low').val(), 'high' : $('#high').val(), 'post_tags' : post_tags, 'kodawaris' : kodawaris, }, success: function( data ){ //出力する部分 $('#search-result').html(data); } }); return false; }; // セレクトボックス、チェックボックスの条件が変更された時の処理 $("select[name='catnum'] , select[name='placenum'] , select[name='type'] , select[name='low'] , select[name='high'] , input[name='post_tag[]'] , input[name='kodawari[]']").change(function() { seachMatchCount(); }); // テキストボックスの条件が変更された時の処理 $("input[name='s']").keyup(function() { seachMatchCount(); }); }); |
検索の処理はfunction.phpに記載します
JavaScriptで設定した引数を検索条件にしてWP_Queryで該当件数を取得します。
取得した値をHTML形式で戻り値にして、JavaScript側で任意の場所に出力します。
function.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
// 検索して一致した件数を返す function view_seach_match_count(){ // カテゴリ if ($_POST['catnum'] != '') { $taxquerysp[] = array('taxonomy' => 'category', 'terms' => $_POST['catnum'], 'include_children' => false, 'field' => 'term_id', 'operator' => 'AND'); } // こだわり（タグ） if (is_array($_POST['post_tags'])) { $taxquerysp[] = array('taxonomy' => 'post_tag', 'terms' => $_POST['post_tags'], 'include_children' => false, 'field' => 'slug', 'operator' => 'AND'); } // 間取りタイプ if ($_POST['placenum'] != '' ) { $taxquerysp[] = array('taxonomy' => 'place', 'terms' => $_POST['placenum'], 'include_children' => false, 'field' => 'slug', 'operator' => 'AND'); } $taxquerysp['relation'] = 'AND'; // こだわり（カスタムフィールドのチェックボックス） if (is_array($_POST['kodawaris'])) { foreach ($_POST['kodawaris'] as $val) { $metaquerysp[] = array('key' => 'kodawari', 'value' => $val, 'compare' => 'LIKE',); } } // ルームタイプ if ($_POST['type'] != '') { $metaquerysp[] = array('key' => 'type', 'value' => $_POST['type'], 'compare' => '=',); } // 家賃 $metaquerysp[] = array('key' => 'price', 'value' => array($_POST['low'], $_POST['high']), 'compare' => 'BETWEEN', 'type' => 'NUMERIC',); $metaquerysp['relation'] = 'AND'; $the_query = new WP_Query( array('tax_query' => $taxquerysp, 'meta_query' => $metaquerysp, 's' => $_POST['s']) ); $String = "<span>".$the_query->post_count."</span>"; echo $String; die(); } add_action( 'wp_ajax_view_seach_match_count', 'view_seach_match_count' ); add_action( 'wp_ajax_nopriv_view_seach_match_count', 'view_seach_match_count' ); |