【WordPress】Ajaxでデータを送信する方法

WordPressに対してajaxでデータを送信する方法を、ご紹介したいと思います。
POSTで送信する方法を例に挙げて書いていますが、GETでも同じことが可能です。

環境

WordPress 4.9.18
PHP 7.0.27
jQuery 2.2.4

受け取り側の実装

まず、WordPressがajaxリクエストを受け入れるために任意のaction名を名前の末尾にもつアクションフックに、リクエストを受け取った時に実行されるコールバック関数を登録する必要があります。
アクションフック名の書き方は「wp_ajax_action名」または「wp_ajax_nopriv_action名」となります。
これら二つのアクションフックの違いは、前者がログインユーザー、後者の方は未ログインユーザーからのajaxリクエストを受け入れるものになります。
両ユーザーからのリクエストを受け入れる必要がある時は両方書く必要があります。

コードとしては以下のようになります。

function.php

function ajax_sample () {
    $data = $_POST;
    echo $data['name']PHP_EOL;
    echo $data['age']PHP_EOL;
    wp_die();
}

add_action('wp_ajax_my_ajax', 'ajax_sample');
add_action('wp_ajax_nopriv_my_ajax', 'ajax_sample');

上記の例ではaction名を「my_ajax」としています。

コールバック関数「ajax_sample」の内容としては受け取ったデータを項目ごとに出力する簡単なものです。

次に、WordPressに対してajax通信を行うための送信先(エンドポイント)である「サイトURL/wp-admin/admin-ajax.php」をJavaScriptのパラメータに出力します。
今回URLは共通ヘッダーに出力したいので、function.phpに以下のコードを追記しておきます。(もちろんURLを個々のJavaScriptのコードに直接描いても構いません)

function.php

function generate_js_params() {
?>
    <script>
      let ajaxUrl = '<?php echo esc_html(admin_url( 'admin-ajax.php')); ?>';
    </script>
<?php
}
add_action('wp_head', 'generate_js_params');

送信側の実装

送信側の処理をJavaScript(jQuery)で書いていきます。
この時、PHPのコードでアクションフックを記述した際に使用したaction名を送信するデータのパラメータに付与する必要があります。
もし付与せずに送信してしまうと400 Bad Requestが返されてしまいます。

main.js

$('.button').click(function (e) { 
  e.preventDefault();
  let data = {
    action: 'my_ajax',
    name: "太郎",
    age: 25
  }

  $.ajax({
      type: "post",
      url: ajaxUrl,
      data: data
  }).done(function (data) {
      console.log("ajax成功");
      console.log(data);
  }).fail(function (XMLHttpRequest, status, e) {
      console.log("ajax失敗: " + status + XMLHttpRequest);
      console.log(e);
  });

}

このように送信するオブジェクトの中にactionプロパティを他のパラメータと一緒にセットします。
こうすることでajaxを受け取ったWordPress内部で処理が通り、コールバック関数に記述した内容が実行されます。

その時にconsoleに出力される内容は以下の通りです。

ajax成功
太郎
25

参考文献

https://haniwaman.com/wordpress-ajax/
http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/