LoginSignup
2
4

More than 3 years have passed since last update.

jQueryとphpを使い、WordPressの絞り込み検索結果をページ遷移なしで表示する

Last updated at Posted at 2020-01-27

忘れないように自分用メモを残します。

おそらくWordPressに限定せずとも
phpで同じようにdataを返してやればいろいろな結果を返せると思われます。
※絞り込み検索については既に実装している前提です。

function getData(){
  //フォームの値を.serialize()で変数に格納
  var params = $('form').serialize();
  $.post(
    //絞り込み検索を定義してあるPHPファイルにフォームの値を渡す
    "<?php echo site_url( '/' ); ?>search.php?" + params, 

    //search.phpからの値を取得し、指定要素に出力
    function( data ) {
      //.view内にsearch.phpの結果が出力される
      jQuery('.view').html(data);
    }
  );

}

getData()はonclickなどのイベントハンドラで適当なボタンに実行させるだけです。
onchangeを使うとフォームに何かしらの変更があった瞬間に毎回実行されます。
検索結果の件数だけを瞬時にかえすので賃貸物件検索サイトのような役割の検索フォームにはいいかもしれません。

<?php echo site_url( '/' ); ?>を使って、ルートディレクトリ直下のsearch.phpをリクエストしています。
この場合wp-load.phpをincludeさせておかないと動きません。

最初は<?php print get_template_directory_uri(); ?>を使って、テンプレートディレクトリ内にファイルを置いてリクエストすればいけるかと思っていたんですがなぜか表示されず、エラーメッセージも出ないのでとりあえずこうしてます・・理由がわかる方いらっしゃいましたら教えてください・・
WordPressに固定ページテンプレートとしてファイルを認識させればいけるのかもしれませんが検証していません。

セキュリティもなにか心配なので改善を考える必要があります・・

2
4
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
4