Ajax（非同期通信）の具体的な手順

この記事は初心者向けに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の簡単な流れ

データの流れと処理手順

1. ページ読み込み時:
  - ページが読み込まれると、wp_enqueue_scriptsアクションフックがトリガーされます。
  - wp_enqueue_scriptsフックにフックされたmy_enqueue関数が実行されます。
  - my_enqueue関数内で、wp_enqueue_scriptを使用してJavaScriptファイル（my-ajax-script.js）が読み込まれ、wp_localize_scriptを使用してadmin-ajax.phpのURLがJavaScriptオブジェクト（my_ajax_object）としてフロントエンドに渡されます。
2. ユーザーがボタンをクリック:
  - ユーザーがボタン（#my-button）をクリックすると、jQueryの$.postメソッドが実行されます。
  - このメソッドは、事前に登録されたadmin-ajax.phpに対して、actionパラメータとその他のデータを含むAjaxリクエストを送信します。
3. admin-ajax.phpによるリクエスト処理:
  - admin-ajax.phpは、リクエストで送信されたactionパラメータの値に基づいて、対応するアクションフックを実行します。
  - この例では、action: 'my_action'が送信されているため、wp_ajax_my_actionおよびwp_ajax_nopriv_my_actionアクションフックがトリガーされます。
4. サーバー側の関数の実行:
  - アクションフックwp_ajax_my_actionまたはwp_ajax_nopriv_my_actionにより、my_action_functionが呼び出されます。
  - この関数内で、$_POST['data']を通じてリクエストから送られたデータにアクセスし、必要な処理を行います。
  - 処理結果をechoで返し、必ずwp_die()を呼び出してスクリプトを終了させます。これがないと、余分な「0」が返されることがあります。
5. クライアント側のレスポンス処理:
  - フロントエンドのJavaScriptのコールバック関数がサーバーからのレスポンスを受け取ります。
  - 受け取ったレスポンスは、例えばalertメソッドを使ってユーザーに表示されます。

だいたいこんな感じ

セキュリティ対策

セキュリティを確保するために、非セッションベースのリクエストに対しては、ノンス（一度限りの使用が前提の数値）を使用して認証を行うことが推奨されます。ノンスは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利用がセキュリティを保ちつつ、スムーズに行えるようになります。