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

javaScriptでは検索時に使用するフォームの値をAjaxメソッドの引数として設定します。
チェックボックスの値はAjaxメソッドにそのまま引数として渡せないので、一度配列に設定し直してから引き渡すようにします。
また、テキストボックス、セレクトボックス、チェックボックスの値が変更した時に再度検索するために
セレクトボックス、チェックボックスのchangeイベント、
テキストボックスのkeyupイベントで検索メソッドを呼び出すようにしています。

javaScript

検索の処理はfunction.phpに記載します
JavaScriptで設定した引数を検索条件にしてWP_Queryで該当件数を取得します。
取得した値をHTML形式で戻り値にして、JavaScript側で任意の場所に出力します。

function.php