バックエンド側PHP
バックエンド側では、JSからAJAX通信データが要求されたときに実行する関数をWPに登録する必要があります。
WPでAJAX通信をする場合は、決められた手続きに従って行う必要があります。
実際には、AJAX専用のフックをap_ajax_｛アクション名｝およびap_ajax_noprov_｛アクション名｝という命名方法で生成して、対象のアクション名に対応するコールバック関数を登録します。
add_action('wp_ajax_{アクション名}',{API関数名});
add_action('wp_ajax_nopriv_{アクション名}',{API関数名});
登録するコールバック関数はこちらです。
コールバック関数では、まずセキュリティのためnonceチェックを行います。
nonceチェックがOKなら、次にフロントエンド側で設定したパラメータを取得して、投稿データをフロントエンド側に返します。
function my_ajax_event() {
// wp_create_nonce の引数に渡したものと同じ アクション名
$action = 'my-ajax-action';
// nonceのチェック
// https://chaika.hatenablog.com/entry/2017/09/08/090000
if( check_ajax_referer($action, 'nonce', false) ) {
// Ajax(post)のdataから渡される値を使用する場合は $_POST から取得する (適時エスケープ)
$id = intval( $_GET['id'] );
//$name = esc_html( $_POST['name'] );
// 投稿IDが10の投稿情報を取得
$post_data = get_post($id);
// 投稿IDが10の投稿タイトルを取得
$title = $post_data->post_title;
$content = $post_data->post_content;
// 配列をjson形式にエンコード
//$data = "<p>post_id=$id title=$title price=".print_r($price,true)."</p>";//</p>json_encode($data);
$data = array(
'id' => $id,
'title' => $title,
'content' => $content,
);
} else {
// Ajaxに返す
//status_header( '403' );
header( 'Content-Type: application/json; charset=UTF-8' );
echo json_encode(array('data'=> '', 'status' => 'NG', 'message' => "nonceチェックエラー", 'result' => ""));
die();
}
// Ajaxに返す
header( 'Content-Type: application/json; charset=UTF-8' );
echo json_encode(array('data'=> $data, 'status' => 'OK', 'message' => "受信完了", 'result' => ""));
die();
}
