
WordPressの管理画面でAjaxを実装する方法を、サンプルコードを使って説明します。
管理画面は、Ajaxを使うことがあらかじめ想定されているので、かんたんにAjax通信ができます。
WordPressのAjax
WordPressのAjaxの処理の流れです。
JavaScriptでリクエスト送信。
↓
Ajax通信
↓
PHPプログラムが受信。
↓
PHPプログラムで処理実行、レスポンスを返す。
↓
Ajax通信
↓
JavaScriptでレスポンスを受け取る。
さっそく実装しましょう。
JavaScriptのコーティング
AjaxはJavaScriptのリクエスト送信からはじまります。
WordPressでは
jsファイルのキュー登録
JavaScriptのリクエスト送信処理実装
のふたつです。
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');
} );
テーマやプラグインに追加します。
テーマ | functions.phpなど |
プラグイン | プラグインのホームディレクトリと同名の.phpファイルなど |
サンプルコードは、独自の管理画面をプラグイン化したときを想定しています。
ローカライズ
wp_localize_script()
管理画面で使うAjaxのリクエスト送信先URLは、必ず
//(host)/wp-admin/admin-ajax.php
でないといけません。このパスをローカライズのオブジェクト変数にセットします。
array('ajax_url' => admin_url('admin-ajax.php'))
ローカライズは、JavaScriptにPHPの翻訳機能を使うためのものですが、変数を渡すこともできます。
WordPress5からはむしろ『変数渡し』いがいに使い道はありません。
- ajaxのリクエストURLは、jsファイルに書かない
- wp_localize_script()を使う
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);
ポイントはひとつです。
data: {
action: 'clear_cache'
}
ここで指定するactionは、サーバー(PHP)が受信するときにリクエストを判別するのに使います。
PHPプログラムでも使うので覚えておきましょう。
ajaxのurlは渡されたオブジェクト変数を使います。
url: localize.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つです。
アクション名はadd_action()のハンドル名に使う。
JavaScriptに返す値はechoを使う。
処理の最後にdie()を実行。
Ajax通信の振り分け
不思議に思いませんか?なぜ、ajaxリクエストがこの関数で受け取れるのか?と。
その秘密はadd_action()です。
ajaxのリクエストでactionを送りました。
clear_cache
です。この値は、アクションフックのハンドル名
wp_ajax_****
の
****
の部分です。この文字列を一致させて、ajaxが送るリクエストを受信します。
actionの文字列はオリジナルでなければなりません。他のプラグインなどと競合するからです。
actionがちがえば複数のAjax通信もできます。
ajaxリクエストのactionの値を受信処理のアクション・ハンドル名に使う
JavaScriptに結果を返す
WordPressのAjaxの返しはechoで行う
ちなみに、functionのreturnでも返すことができます。ただし、returnを省略すると
return 0;
を返します。
処理の最後のdie()
functionのreturnを省略すると、return 0;が返すので、ajaxの処理結果に0がついてしまいます。
これを避けるためdie()でPHPプログラムを強制終了させます。
echoを使わずにreturnで結果を返すときは不要です。
これで、WordPressのAjax処理が完成しました。
最後に
ほんとうは、セキュアなajaxの処理を実装するには、もうひとつ工夫が必要なのですが、ここでは実装していません。
jsのキュー登録で使用したwp_localize_script()でwp_create_nonce()を使います。