WordPressでAjaxを使う（管理画面 編）

イラストACの画像をもとに加工しています。

WordPressの管理画面でAjaxを実装する方法を、サンプルコードを使って説明します。

管理画面は、Ajaxを使うことがあらかじめ想定されているので、かんたんにAjax通信ができます。

WordPressのAjax

WordPressのAjaxの処理の流れです。

さっそく実装しましょう。

JavaScriptのコーティング

AjaxはJavaScriptのリクエスト送信からはじまります。

WordPressでは

のふたつです。

jsファイルのキュー登録

WordPressではおなじみのjsファイルのキュー登録です。htmlに

<script type='text/javascript' src='**.js'></script>

を出力します。

これに、ajaxの処理を書くjsファイルを登録します。

add_action('admin_enqueue_scripts', function() {
    wp_register_script('js_handle_name', plugins_url('my-plugins/js/clear-cache.js', __FILE__), array('jquery'), '1.0.0', true);
    wp_localize_script('js_handle_name', 'localize', ['ajax_url' => admin_url('admin-ajax.php')]);
    wp_enqueue_script('js_handle_name');
} );

テーマやプラグインに追加します。

サンプルコードは、独自の管理画面をプラグイン化したときを想定しています。

ローカライズ

管理画面で使うAjaxのリクエスト送信先URLは、必ず

でないといけません。このパスをローカライズのオブジェクト変数にセットします。

ローカライズは、JavaScriptにPHPの翻訳機能を使うためのものですが、変数を渡すこともできます。

WordPress5からはむしろ『変数渡し』いがいに使い道はありません。

-> WordPressでPHPの変数をJavaScriptで使う

jsファイルのコーディング

今回は、キャッシュファイルをクリアする非同期リクエストをJavaScriptからAjaxで送信します。

jsファイルの内容です。

(function($) {
    function clearCacheSnsCount() {
        $.ajax({
            type: "POST",
            url: localize.ajax_url,
            dataType: 'text',
            data: {
                action: 'clear_cache'
            }
        }).done(function(data, textStatus, jqXHR) {
            outputMsg(data);
        }).fail(function() {
            outputMsg('cache clear error!!');
        });
    }
})(jQuery);

ポイントはひとつです。

ここで指定するactionは、サーバー（PHP）が受信するときにリクエストを判別するのに使います。

PHPプログラムでも使うので覚えておきましょう。

ajaxのurlは渡されたオブジェクト変数を使います。

outputMsg()は、処理結果のメッセージをHTMLに出力するオリジナル関数です。ここでは省略します。

Ajaxのリクエスト処理はこれでおわりです。

サーバの処理（phpのコーディング）

今度は、Ajaxのリクエストの受信処理です。キャッシュファイルを削除して結果を返します。ここはPHPプログラムです。

サンプルコードです。

function clear_cache() {
    $cache_file = '../cache/11111111111111111.cache';
    $success = __('Complete clear cache');
    $error = __('Clear cache failer');
    $result = '';

    if(file_exists($cache_file)) {
        if(unlink($cache_file)) {
            $result = $success;
        } else {
            $result = $error;
        }
    } else {
        $result = $success;
    }
    echo $result;
    die();
}
add_action('wp_ajax_clear_cache', 'clear_cache');

ポイントは3つです。

Ajax通信の振り分け

不思議に思いませんか？なぜ、ajaxリクエストがこの関数で受け取れるのか？と。

その秘密はadd_action()です。

ajaxのリクエストでactionを送りました。

です。この値は、アクションフックのハンドル名

の

の部分です。この文字列を一致させて、ajaxが送るリクエストを受信します。

actionの文字列はオリジナルでなければなりません。他のプラグインなどと競合するからです。

actionがちがえば複数のAjax通信もできます。

JavaScriptに結果を返す

ちなみに、functionのreturnでも返すことができます。ただし、returnを省略すると

を返します。

処理の最後のdie()

functionのreturnを省略すると、return 0;が返すので、ajaxの処理結果に0がついてしまいます。

これを避けるためdie()でPHPプログラムを強制終了させます。

これで、WordPressのAjax処理が完成しました。

最後に

ほんとうは、セキュアなajaxの処理を実装するには、もうひとつ工夫が必要なのですが、ここでは実装していません。

jsのキュー登録で使用したwp_localize_script()でwp_create_nonce()を使います。

-> WordPressのAjaxでセキュアな通信を行う