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

クロスドメインは安全性の観点からエラーが生じされてしまうため、以下のいずれかのコードをWordpressのfunction.phpに記述する必要がある。

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

header("Access-Control-Allow-Origin: https://xxxx.net");

実際的には例として以下の記述したりする。

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({
                         });
                      infowindow.open(map_canvas,marker);
                   }
              });
        });
    </script>