ブラウザとwordpressとのAjax通信の方法

通常だとクロスドメインは安全上の問題でブロックされるため、function.phpの中に以下のコードを入れる必要がある。

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

実際に入れるとすると、

add_action('wp_ajax_detail', 'detail');  // ログイン状態のユーザーからのアクセスで動作する
add_action('wp_ajax_nopriv_detail', 'detail'); // 非ログインのユーザーからのアクセスで動作する
function detail()
{
    $id = $_POST['id'];
    $detail[0] = get_the_title($id);
    $detail[1] = get_post_meta($id,'name',true);
    header("Content-Type: application/json; charset=utf-8");
    header("Access-Control-Allow-Origin: *");
    echo json_encode($detail, JSON_UNESCAPED_UNICODE);

    die();
};

そして、index.htmlに、

 <script src="./js/jquery.xdomainajax.js"> </script>
    <script> var wp_url_admin_ajax = 'http://192.168.33.10/wp-admin/admin-ajax.php'; </script>
    <script>
           jQuery(function ($) {
                      $.ajax({
                          type: 'POST',
                          dataType: 'json',
                          crossDomain: true,
                          url: wp_url_admin_ajax,
                          data: {
                             'action': 'detail','id':marker_options['id']

                },
                success: function (response) {
　　　　　　　　　　　                  var infowindow=new google.maps.InfoWindow({
                        /* 情報ウィンドウのオプション設定 */
                        content: '<div class="infowindow">' 
　　　　　　                        　+'<h4>'+response[0] +'</h4>' + '<br />' +'<p>住所：'+ response[1]+'</p>'+
                                 '</div>'
                         });
                      infowindow.open(map_canvas,marker);
                   }
              });
        });
    </script>

以上のコード(関数の中の数値は各自で調整の必要がある）を入れるとアプリ上に地図とマーカーを反映させることができる。