WordPressとブラウザとの間でAjax通信する方法について

こんばんは、本日はWordPressとブラウザとの間でAjax通信する方法について勉強したので紹介したいと思います。

今回参考にしたサイトは次のサイトです。

WordPressとブラウザとの間でAjax通信する

Ajex通信をする方法について

調べたところ、Ajex通信とはネット上でデータのやり取りを行う通信規格のようなものらしいです。

今回はWordPressを使って、ウェブとサーバ間での試験的な通信を行います。　

具体的な操作方法に関しては以下の通りです。

1. 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>

２. 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();
}

動作について

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