※このページはプロモーションを含みます
はじめに
WordPressでオリジナルテーマやプラグインでAjax通信を設定する流れの備忘録です。
- wp_localize_script
- wp_ajax_、wp_ajax_nopriv_
- javascript
これらのキーワードをこの順番で覚えておくと良いと思われます。
各処理の詳細は下記になります。
①Ajax通信用のjavascriptで使用できるグローバルな変数を設定する
操作するファイル ⇒ functions.php
▼詳細
関数「wp_localize_script()」を使用して「ajax_url」と「nonce」をajax_paramsというjavascriptのオブジェクトにしてheadタグ内に表示するようにします。
これによりheadタグ以降で読み込まれるjavascript処理では「my_ajax_params.ajax_url」でajaxリクエスト先URLを、「my_ajax_params.nonce」でnonceの値を取得することができます。
※javascriptでのAjaxは同じドメインでしか受けつけないので「nonceやajaxリクエスト先のURLをソースに表示しても大丈夫なの？」という心配は杞憂です。
function add_ajax_parmas() {
wp_localize_script(
'**************', // 何の後に表示するか
'my_ajax_params', // このscriptタグの認識ラベル
array(
'ajax_url' => admin_url( 'admin-ajax.php' ), // ajaxリクエストをなげるURL
'nonce' => wp_create_nonce( 'my_ajax_nonce' ), // 不正防止用のnonce
)
);
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
②Ajax通信の処理内容をPHPで指定する
操作するファイル ⇒ functions.php
▼詳細
関数 add_action()で 「wp_ajax_****」 フックを呼び出し処理内容を指定します。
管理画面にログインしているユーザーだけこの処理ができればよい場合は「wp_ajax_do_something」を、管理画面にログインしていない一般ユーザーもこの処理ができるようにするには「wp_ajax_nopriv_do_something」を追加します。
※「do_something」「do_something_callback」の部分はお好みの名前にしてください。
// アクション名を"do_something"とする
add_action( 'wp_ajax_do_something', 'do_something_callback' ); // ログイン済ユーザーだけが使える処理
add_action( 'wp_ajax_nopriv_do_something', 'do_something_callback' ); // 未ログインユーザーも使用する場合は指定
function do_something_callback() {
// ajaxリクエストの処理内容をここに書く
try {
if ( ! isset( $_POST['my_nonce'] ) || ! wp_verify_nonce( $_POST['my_nonce'], 'do_something' ) ) {
throw new Exception( 'nonce認証に失敗しました' );
}
// ～省略～
wp_send_json_success();
} catch ( Exception $e ) {
wp_send_json_error( $e->getMessage() );
}
wp_die();
} 
③JavascriptにAjaxリクエスト処理を書く
操作するファイル ⇒ script.js ※scriptはお好みの名前にしてください。
▼詳細
javascript側にAjax処理を記入します。
※ここではbuttonをクリックするとAjaxリクエストを送信するようにしています。
<button type="button" id="do-something-trigger">Ajaxリクエスト送信</button>$(function() {
$('#do-something-trigger').on('click', function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: my_ajax_params.ajax_url,
data: {
'action': 'do_something', // wp_ajax_****** の******部分
'my_nonce': my_ajax_params.nonce,
'name': 'hoge' // 送信する値
}
}).done(function(res) {
// リクエスト成功時の処理
// ～省略～
});
});
}); 細かい処理内容は省略していますがこの流れでWordPressでAjax処理を追加することができます。
