AJAXを使用すると、ページ遷移を行わずにデータを取得したり、送信したりする事ができます。
WordPressサイトでAJAXを使う方法をまとめました。
WordPressでAJAXを使う流れ
WordPressでAJAXを使うための要点は、こんな感じになります。
- まず、AJAXのアクション名
xxxxを適当に決める - レスポンスのためのアクションフック
wp_ajax_xxxxとwp_ajax_nopriv_xxxxを登録する - JSONレスポンスには
wp_send_json関数を使う - エンドポイントのURLは
admin_url('admin-ajax.php')で取得 - エンドポイントをスクリプト内で取得するために
wp_localize_script関数を使う - リクエストデータには
action=xxxxを含める - データの書き換えを伴う処理にはwp_nonceを使用する
要点が随分多くなってしまいましたが、順を追って説明して行きます。
AJAXのアクション名
まずは、AJAXのアクション名を決めます。
AJAXのエンドポイントのURLは(サイトURL)/wp-admin/admin-ajax.phpで統一されるので、処理内容はアクション名によって分岐させます。
ここでは説明のために、
としてしまいます。
レスポンスを生成する
続いて、レスポンスを生成します。
functions.phpに、以下のようなアクションフックを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 |
add_action('wp_ajax_xxxx', 'my_ajax'); add_action('wp_ajax_nopriv_xxxx', 'my_ajax'); function my_ajax() { $return = array( 'message' => 'success', 'ID' => 1 ); wp_send_json($return); } |
JSONレスポンス
|
1 |
{"message":"success","ID":1} |
functions.phpでは、wp_ajax_xxxxとwp_ajax_nopriv_xxxxの2つのアクションフックを登録します。
wp_ajax_xxxxはWordPressにログイン済みユーザ向け、wp_ajax_nopriv_xxxxはログインしていないユーザ向けのアクションフックです。
もし、AJAXを管理画面でのみ使用する場合には、wp_ajax_xxxxのアクションフックだけを登録します。
フックした関数my_ajaxでは、レスポンスを出力するコードを記述します。
例では簡単なレスポンス値を作成し、wp_send_json関数を使用してJSONレスポンスを出力しています。
実際には、$_POSTから値を取得してデータベースに追加したり、データベースから取得した値を返したりなど、色々な処理に使用できます。
wp_send_json関数の仲間で、JSONレスポンスに"success"=>trueを追加するwp_send_json_success関数と、"success"=>falseを追加するwp_send_json_error関数があり、これらを使って出力する事もできます。
|
1 2 3 4 5 6 7 8 |
function my_ajax() { $return = array( 'message' => 'success', 'ID' => 1 ); wp_send_json_success($return); } |
JSONレスポンス
|
1 |
{"success":true,"data":{"message":"success","ID":1}} |
これらの関数では、successキー以外のデータ値は、dataキー内に格納されます。
wp_send_json,wp_send_json_success,wp_send_json_error関数は、バージョン3.5以上のWordPressでしか使用できません。
古いバージョンのWordPressでは、以下のようにして出力します。
|
1 2 3 4 5 6 7 8 9 |
function my_ajax() { $return = array( 'message' => 'success', 'ID' => 1 ); header('Content-Type: application/json; charset=' . get_option('blog_charset'), true); echo json_encode($return); } |
エンドポイントのURL
エンドポイントのURLは、admin_url('admin-ajax.php')で取得できます。
このURLをJavascript内で使用するために、wp_localize_script関数を使用します。
※この方法については、記事: Javascriptでサイトのデータを扱う方法を参照してください
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<head> ... <?php wp_enqueue_script('site', get_template_directory_uri(). '/js/site.js', array('jquery'), '1.0'); wp_localize_script('site', 'MySite', array( 'url' => admin_url('admin-ajax.php') )); ?> <?php wp_head(); ?> </head> <body> ... |
JavascriptでAJAXリクエストを行う
リクエストデータには、action=xxxxを追加します。
また、エンドポイントのURLは、wp_localize_script関数で設定した値をMySite.urlで呼び出します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
jQuery.ajax({ type: "POST", dataType: "json", data: { id: 1, action: "xxxx" }, url: MySite.url, success: function(json){ alert(json.id); } }); |
以上が、WordPressでAJAXを使う場合の流れです。
セキュリティ対策としてwp_nonceを使用
WordPressでは、フォームやAJAXのリクエストが、意図したページから行われているかを確認するため、wp_nonceというトークンを使用する事ができます。
今回の説明ではwp_nonceの使用を省略していますが、使用したほうがセキュリティ的に確実です。
特に、AJAXがデータベースの書き換え（追加・削除）を伴う処理を行う場合には、絶対にwp_nonceを使用しましょう。
wp_nonceについては、別の記事としてまとめる予定です。