Ajaxを用いて、WordPressとブラウザ間で通信する

WordPressとブラウザの間でデータをやり取りするためには、Ajax通信を行います。 Ajax通信でデータのやり取りをするためには、ブラウザとWordPressに処理を加える必要があります。

WordPressに処理を加えます。 具体的には、WordPressのfunctions.phpというファイルに以下の処理を加えます。

dd_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); //コンソール上にanserと表示

die(); }

次は、ブラウザ側に処理を加えます。

Ajax通信を行うためのコードを書く際にjQueryを使用するので、まずjQueryを使用出来るようにするためのファイルを読み込んでおく必要があります。

以下のコードでファイルを読み込むことができ、jQueryを用いて記述することができます。

<

script type=”text/javascript” src=”https://code.jquery.com/jquery-3.3.1.min.js”>

以下の処理を加えることで、WordPressのfunctions.phpに記述した関数tell_meを呼び出して、ブラウザとサーバー間で通信出来ているか確認することが出来ます。 通信成功の場合、コンソール上にanserと表示されます。