WordPressの検索結果をAjax通信で取得する

アプリで検索機能を実装する際、WordPressで検索した結果をページに表示してみる。 実際にWordPressで検索してもらえばわかるが、キーワード検索をかけるとURLがwp-admin/edit.php?s=〜 のようになり、「〜」の部分が自分が入れたキーワードとなっている。「?」がここからクエリパラメータであることを示し、「s」という名前のパラメータ（変数）の値に「〜」を指定していることになる。 クエリパラメータとはさまざまな情報をWebサーバーに伝えるためにURLに付け加える情報のことである。

つまり、「?」+「変数名」+「=」+「変数の値」というのが、クエリパラメータの基本構造になっている。 それでは実際のコードを見よう

サーバー側のコード（functions.php)

header("Access-Control-Allow-Origin: *");

add_action('wp_ajax_tell_me', 'tell_me');  // ログイン状態のユーザーからのアクセスで動作する
add_action('wp_ajax_nopriv_tell_me', 'tell_me'); // 非ログインのユーザーからのアクセスで動作する
function tell_me() {
    $param = array(
    'posts_per_page' => '20',
    's' => $_POST['word'] //キーワード検索
    );
    $the_query = new WP_Query( $param );
    $j = 0;
    while ( $the_query->have_posts() ) : $the_query->the_post();
    $id = get_the_ID();
    $res[$j*3] = get_post_meta($id,'name',true);
    $res[$j*3+1] = get_post_meta($id,'lng',true);
    $res[$j*3+2] = get_post_meta($id,'lat',true);
    $j++;
    endwhile;

    echo json_encode($res, JSON_UNESCAPED_UNICODE);

    die();
}

's' => $_POST['word'] //キーワード検索

の部分でキーワードを指定している。$_POST[‘word’]の部分はクライアント側から送られてくるデータに値する。

クライアント側のコード

<form name="myform">
      <input id="search-word" name="mytext" type="text" />
      <button id="search" onclick="searchPlace();">検索</button>
    </form>

function searchPlace(){
          var wp_url_admin_ajax = 'http://takano.local/wp-admin/admin-ajax.php';
          console.log('search');
          $.ajax({
            type: 'POST',
            url: wp_url_admin_ajax,
            crossDomain: true,
            data: {
              'action' : 'tell_me',
              'word': document.getElementById('search-word').value//キーワードの指定
            },
            dataType: 'json',
            success: function (response,text, jqXHR) {
              element = document.getElementById('ion-list');
              while (element.firstChild) {
                element.removeChild(element.firstChild);
              }
              var spot = jqXHR.responseJSON//JSONを配列に変換したデータ
              for (var i = 0; i < spot.length/3; i++) {
                var name = document.createElement('ion-label');
                var place = document.createElement('ion-item');
                name.textContent = spot[i*3];
                place.textContent = ' 緯度:'+spot[i*3+1]+' 経度:'+spot[i*3+2];
                element.appendChild(name);
                element.appendChild(place);
              }
            }
          });
        }

dataTypeをjsonで指定するとjqXHRのresponseJSONプロパティにJSONを配列に変換した値が自動で生成される。これはresponseをJSON.parse(response)としたものと同じものである。 data:{key: value}で指定した値はサーバー側で$_POST[‘key‘]でアクセスできる。