【WordPress】Ajaxを使ってデータの送受信をしてみる(管理画面編)

wordpress-logo

Ajaxを使用方法を簡単に紹介したいと思います。

今回のものは管理画面側でしか有効ではありません。

フロント側でAjaxを使用する方法は別途紹介します。

スポンサーリンク

手順

呼ばれる側(PHP側)

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

呼ぶ側(JavaScript側)

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

より安全に使う

CSRFという攻撃に対して脆弱なため、WordPrerssが用意しているnonce機能を使用して対策を行います。

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

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

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

まとめ

やることは多いですが、使えるようになるとプラグイン開発の幅が広がると思います。

フロント編も書きました。

【WordPress】Ajaxを使ってデータの送受信をしてみる(フロント編)
ここではフロント側でAjaxを使用方法を紹介したいと思います。 管理画面側とほぼ同じ手順ですが、フロント側のほうが少し手間がかかります。 手順 呼ばれる側(PHP側) 管理画面と異なる...

実際にAjaxを使用してプラグインの作成をしました。

よければ覗いてみてください。

【WordPress】プラグイン開発の基本 - 校正支援プラグインを作る2
前回の続きから APIを作成する 投稿画面から呼び出すAPIを作成します。 仕様はおおよそ以下になります。 校正支援を行う文章を受け付ける Yahoo! の校正支援A...