この記事は初心者向けにWordPressで標準的なajaxを扱う方法を具体的に紹介しています。
WordPressでajaxを扱うためのステップは、主に以下の通りです。これらのステップを詳細に理解することで、ajaxを効果的に利用することができます。
必要なJavaScriptのエンキュー
まず、ajaxリクエストを行うためのJavaScriptファイルを用意し、WordPressに登録して読み込む必要があります。これはwp_enqueue_script関数を使って行います。また、WordPressのadmin-ajax.phpファイルへのパスをJavaScriptファイルに渡すために、wp_localize_script関数も使います。
function my_enqueue() {
wp_enqueue_script('ajax-script', get_template_directory_uri() . '/js/my-ajax-script.js', array('jquery'));
// ajaxリクエストのURLをJavaScriptファイルに渡す
wp_localize_script('ajax-script', 'my_ajax_object', array('ajax_url' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts', 'my_enqueue');
WordPress では、バックエンド（管理画面）で ajax を使う際には ajaxurl がデフォルトで設定されていますが、フロントエンドではこのような設定がないため、手動で追加する必要があります。
これでフロントエンドにアジャックスのエンドポイントであるURLが設定できた。
ajaxリクエストのハンドリング
サーバー側でのリクエスト処理は、wp_ajax_（ログインユーザー用）やwp_ajax_nopriv_（非ログインユーザー用）フックを使用して行います。これらのフックに関数を結び付け、ajaxリクエストを処理します。
ログインとは、WordPressのダッシュボード（管理画面）にログインしているユーザーのことを指す。
function my_action_function() {
// リクエストされたデータの処理
// $_POSTを通して送られたデータにアクセス可能
$value = $_POST['data'];
// 処理の結果を返す
echo $value;
// 必ずdie()を呼び出して終了させる
wp_die(); // これがないと0が返されてしまう
}
// ログインユーザー用の処理
add_action('wp_ajax_my_action', 'my_action_function');
// 非ログインユーザー用の処理
add_action('wp_ajax_nopriv_my_action', 'my_action_function');JavaScriptでのajaxリクエスト
クライアント側のJavaScriptから、$.ajaxや$.post（jQueryのメソッド）を使用して、ajaxリクエストをadmin-ajax.phpに対して行います。リクエストには、アクションとその他の必要なデータを含めます。
jQuery(document).ready(function($) {
$('#my-button').click(function() {
// 変数を定義
var data = {
'action': 'my_action', // PHP関数に紐付けるアクション名
'data': 'これはテストです' // サーバーに送るデータ
};
// 下記はコールバック関数、まずリクエストを送信して、サーバーからの応答を待つ
$.post(my_ajax_object.ajax_url, data, function(response) {
alert(response);
});
});
});
HTMLにボタンを追加
<button id="my-button">Ajaxリクエストを送信</button>ajaxの簡単な流れ
データの流れと処理手順
- まず一番最初にページが読み込まれると、my_enqueue_scripts()によってwp_localize_script()が実行されてバックエンドからフロントエンドにadmin-ajax.phpのURLが登録される。add_action()によってwp_ajax_my_action という名前のアクションフックと my_ajax_handler という関数を関連付け、フックします。
-
ユーザーがボタンをクリックすると、既に登録されたadmin-ajax.phpにjavascriptがコールバック関数を実行してajaxリクエストを送信。レスポンスがあるまで待機する。
このリクエストには、actionパラメータが含まれている必要があります。このactionパラメータは、WordPressがどの関数を実行するかを判断するために使用されます。 - admin-ajax.phpは、リクエストで送られたactionパラメータの値に基づいて、対応するアクションフックを実行します。今回の例では、action: ‘my_action‘というデータがリクエストと共に送られていますので、wp_ajax_my_actionおよびwp_ajax_nopriv_my_actionアクションフックがトリガーされます。
- 関数の実行: アクションフックwp_ajax_my_actionまたはwp_ajax_nopriv_my_actionによって、my_ajax_handler関数が呼び出されます。この関数内で、$_POST[‘data’]を通じてリクエストから送られたデータにアクセスし、htmlspecialchars関数を使ってエスケープ処理を行った後、結果をエコーしています。そしてwp_die()関数を呼び出すことで、Ajaxリクエストを適切に終了させています。
- フロントエンドのjavascriptのコールバック関数にレスポンスされる。
- 実際にユーザーの画面に反映される
↓
↓
↓
↓
↓
だいたいこんな感じ
セキュリティ対策
セキュリティを確保するために、非セッションベースのリクエストに対しては、ノンス（一度限りの使用が前提の数値）を使用して認証を行うことが推奨されます。ノンスはwp_create_nonce関数で生成し、ajaxリクエストとともに送信します。サーバー側でcheck_ajax_refererまたはwp_verify_nonceを使用して、ノンスを検証します。
function add_my_ajax_nonce() {
wp_localize_script('ajax-script', 'my_ajax_nonce', array(
'nonce' => wp_create_nonce('my_ajax_nonce')
));
}
add_action('wp_enqueue_scripts', 'add_my_ajax_nonce');
function my_action_function() {
// ノンスの検証
check_ajax_referer('my_ajax_nonce', 'security');
// リクエストされたデータの処理
// ここに処理を追加
wp_die(); // ajax処理の終了
}
// フックと関数の紐付けは前述の通り
以上で、WordPressにおけるajaxの基本的な扱い方を紹介しました。これらの手順を踏むことで、WordPressテーマやプラグインでのajax利用がセキュリティを保ちつつ、スムーズに行えるようになります。