WordPressとブラウザとの間でAjax通信するために、ブラウザ側の処理とサーバー側の処理を、WordPressのソースコードに追記します。

このサンプルコードでは、WordPressのサイトにアクセスした時に、Ajax通信でサーバーから受け取った「answer」という文字列を、コンソールログに表示するようにしています。

ブラウザ側の処理

WordPressにAjax通信のリクエストを投げるために、たとえば、index.phpなどに以下のコードを記述します。

<script> var wp_url_admin_ajax = '<?php echo admin_url('admin-ajax.php'); ?>'; </script>
<script>
  jQuery(function ($) {
    $.ajax({
      type: 'POST',
      url: wp_url_admin_ajax,
      data: {
        'action': 'tell_me'
      },
      success: function (response) {
        json = eval("(" + response + ")");
        if (json.err) {
          result = "error:404";
        } else {
          console.log(json);
        }
      }
    });
  });
</script>

サーバー側の処理

ブラウザからのAjax通信に応答するために、function.phpに以下のコードを記述します。

add_action('wp_ajax_tell_me', 'tell_me');  // ログイン状態のユーザーからのアクセスで動作する
add_action('wp_ajax_nopriv_tell_me', 'tell_me'); // 非ログインのユーザーからのアクセスで動作する
function tell_me() {
  $res = "answer";

  echo json_encode($res, JSON_UNESCAPED_UNICODE);

  die();
}