wordpressでAjaxを使う方法
- 2019.12.18
- Wordpress

目次
Ajaxで送信するurlをJavaScriptから取得できるようにする
function my_enqueue() {
// ここで決めたハンドル名(ajax-script)と下のwp_localiza_scriptのハンドル名を同じにする
wp_enqueue_script( 'ajax-script', '/path/ajax.js', ['jquery'], false, false );
// add_urlがグローバル変数になる add_url.ajax_urlで送信先urlを取得できる
wp_localize_script( 'ajax-script', 'add_url',array( 'ajax_url' => admin_url( 'admin-ajax.php') ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );
JavaScriptの作成
$( '#button' ).on( 'click', function(){
$.ajax({
type: 'POST',
url: add_url.ajax_url,
data: {
'action' : 'display_template_directory',
},
success: function( response ){
alert( response );
}
});
return false;
});
呼び出される関数を作成する
function display_template_directory(){
echo get_template_directory_uri();
die();
}
add_action( 'wp_ajax_display_template_directory', 'display_template_directory' );
add_action( 'wp_ajax_nopriv_display_template_directory', 'display_template_directory' );
- die();は書いておかないと処理が続いて、予期していないバグを生むかもしれないから必ず書く。
- wp_ajax_と自分で決めた名前を組み合わせてアクションフックを登録する。
- wp_ajax_xxxとwp_ajax_nopriv_xxxはそれぞれログインユーザーと非ログインユーザー向けのフックの違い。
JSONデータをやり取りする場合
$( '#button' ).on( 'click', function(){
var message_obj = {
name : 'hoge',
text : 'foo',
};
var message = JSON.stringify(message_obj);
$.ajax({
type: 'POST',
url: add_url.ajax_url,
data: {
action : 'get_time_now',
message : message,
},
success: function( response ){
console.log(response.time);
}
});
return false;
});
function get_time_now(){
// JavaScript側でdataに追加したjsonが入っているプロパティ名を指定
$json = $_POST['message'];
// stripslashed()をしないとダブルクォートなどがエスケープされてjson_decodeが失敗するため必須
// JavaScript側の送り方によっては不要だが今回は必要
$obj = json_decode(stripslashes($json));
$obj->time = (string) time();
$send_json = json_encode($obj);
header( 'Content-Type: application/json; charset=utf-8' ); // jsonをphpから送るときは必要
echo $send_json;
die();
}
add_action( 'wp_ajax_get_time_now', 'get_time_now' );
add_action( 'wp_ajax_nopriv_get_time_now', 'get_time_now' );
参考サイト
-
前の記事
WordPressの管理画面の投稿一覧をカスタムフィールドの値でソートする 2019.11.13
-
次の記事
ログインしているユーザーのユーザー名を取得する方法 2020.01.06