の画像をもとに加工しています。WordPressの管理画面でAjaxを実装する方法を、サンプルコードを使って説明します。
WordPressの管理画面では、Ajaxを使うことがあらかじめ想定されているので、簡単にAjax通信を行うことができます。
JavaScriptのコーティング
jsファイルのキュー登録
まず、ajaxの処理を記述したjsファイルをキューに登録します。htmlに<script type='text/javascript' src='**.js'></script>で表示されます。
テーマファイルのfunctions.phpファイルに記述します。プラグイン化する場合は、プラグインのfunctions.phpにあたる、プラグインのホームディレクトリと同じ名前の.phpファイルに記述します。
サンプルコードは、独自の管理画面をプラグイン化した場合を想定しています。
function load_tdy_sns_mng_admin_script() {
add_action('admin_enqueue_scripts', function() {
wp_register_script('js_handle_name', plugins_url('**/js/clear-cache.js', __FILE__), array('jquery'), '1.0.0', true);
wp_localize_script('js_handle_name', 'localize', array('ajax_url' => admin_url('admin-ajax.php')));
wp_enqueue_script('js_handle_name');
} );
}大事なところは、wp_localize_script()です。
WordPressの管理画面でAjaxを使うには、必ず//(host)/wp-admin/admin-ajax.phpのurlにリクエストを送信する必要があります。そのためには、後述するjsファイルのajaxのurlにそのパスを指定する必要があります。
wp_localize_spcipt()は、指定したjsファイルにオブジェクト変数（localize）を渡す関数です。ここでは、管理画面のurlをajax_urlという変数に値を入れて、jsファイルに渡しています。
これをすることによって、jsファイルで直接urlパスを記述する必要はありません。
admin_url()は、管理画面のurlを生成してくれる関数です。また、plugins_url('**/js/test.js', __FILE__)は、作成しているプラグインのurlを作成する関数です。第2引数で自身のファイル名を指定します。
- ajaxのリクエストURLは、jsファイルに書かない
- wp_localize_script()を使う
jsファイルのコーディング
今回は、ボタンをクリックしたらキャッシュファイルをクリアする処理を、非同期で行う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);ajaxのurlでは、jsのキュー登録で指定したオブジェクト変数を指定しています。この記述で//(host)/wp-admin/admin-ajax.phpに、Ajaxを使ったリクエストが送信されます。
dataのactionに指定する"clear_cache"には意味があります。この文字列は、リクエストを受け取ったときに処理を行う関数を指定しているので、この点は覚えておきましょう。
outputMsg()は、処理結果のメッセージを、管理画面に作成したメッセージボックスに出力するために作成したオリジナル関数です。ここでは割愛します。
サーバの処理（phpのコーディング）
次の関数がajaxリクエストの受信処理の内容になります。
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');処理の内容はかんたんです。キャッシュファイルが存在したら削除する処理だけで、あとはechoで処理結果を返しています。
ここで不思議に思いませんか？
なぜ、ajaxでリクエストされたものがこの関数で受け取れるのか？と。
その秘密はadd_action()にあります。
ajaxのリクエストでactionというデータを送りました。その値は"clear_cache"でした。実はこの値は、アクションフックのハンドル名の"wp_ajax_****"の"****"の部分です。この文字列を一致させることで、ajaxが送るリクエストを受信しています。
actionの文字列はオリジナルでなければなりません。他のプラグインなどと競合しないような文字列を作成する必要があります。
このようにして、ajaxを使ってリクエストから処理結果を返す一連の処理が行えます。
最後に
本来は、セキュアなajaxの処理を実装するためには、もう一つ工夫が必要なのですが、ここでは実装していません。
jsのキュー登録で使用したwp_localize_script()でwp_create_nonce()を使って実現します。くわしくはWordPressでセキュアなAjax通信を行う方法を参照ください。
