【WordPress】Ajaxを使ってデータの送受信をしてみる(フロント編)

wordpress-logo

ここではフロント側でAjaxを使用方法を紹介したいと思います。

管理画面側とほぼ同じ手順ですが、フロント側のほうが少し手間がかかります。

スポンサーリンク

手順

呼ばれる側(PHP側)

管理画面と異なる部分を赤くしています。

  1. 名前を決める
  2. 「wp_ajax_[1.で決めた名前]」を「add_action」でフックする
  3. 「wp_ajax_nopriv_[1.で決めた名前]」を「add_action」でフックする
  4. 2.、3.の中身を実装する
    • $_GET、$_POSTなどで値を取得して使用
    • 「wp_send_json」で値を返す
  5. ajaxurlを使用できるようにする

「wp_ajax_」はログインしている場合、「wp_ajax_nopriv_」はログインしていない場合に動作します。

下の例では同じ関数を指定していますが、それぞれ別の関数を指定することも可能です。

呼ぶ側(JavaScript側)

こちらは管理画面側と同じです。

  1. 呼ぶタイミングを決める(例:画面の読み込みが終わったら、ボタンを押したら、一定時間立ったらなど)
  2. 1.を満たすイベントをバインド等する(例:$(document).ready、$(“.button”).click、setintervalなど)
  3. 2.でバインドなどした関数内で上記で作ったものを呼び出す
    • urlにajaxurlを指定
    • dataのactionに呼ばれる側で決めた名前を指定

より安全に使う

CSRF攻撃への対策もほぼ管理画面側と同様です。

JavaScriptの埋め込みに使用するフックが「admin_print_footer_scripts」ではなく「wp_print_footer_scripts」になります。

まず呼び出す側でnonceを発行し、dataに加えます。

発行自体はPHP側で行い、必要であればJavaScriptの変数として代入しておきます。

次に呼び出し側でチェックを行います。