【WordPress】Ajaxを使ってカスタムフィールドを更新する

Ajaxを使用してカスタムフィールドを更新(操作)するスニペットのメモです。

PHPだけではログインをしなければデータの操作ができませんが、Ajaxを使うことでログイン無しでも操作が可能です。

Ajaxを使ってカスタムフィールドを更新

用意するコードは以下になります。

  1. Ajax用URLをJavaScript変数として出力(PHP)
  2. カスタムフィールドを保存する処理(PHP)
  3. AjaxでPHP側にデータ送信、PHP関数実行(JavaScript、PHP)

1と2はfunctions.phpへ、3はテンプレートファイルへ記述することを前提としいます。

Ajax用URLをJavaScript変数として出力

7行目でWordPressのAjax用URLを変数に代入しています。マルチサイトでも問題ないURLとなります。

カスタムフィールドを保存する処理

アクションフック名が肝となります。以下2つのアクションフックにカスタムフィールドの保存関数を登録しています。

  1. wp_ajax_アクション名
  2. wp_ajax_nopriv_アクション名

1はログインしているユーザーのみ有効となるフックで、2はログインしていないユーザーのみ有効となるフックになります。「ログインしている」「ログインしていない」どちらにも対応するには両方のアクションフックに関数を登録しましょう。

指定するアクション名は任意で、今回は「update_custom_field」と指定しています。このアクション名はJavaScriptでのAjaxでも使用します。

AjaxでPHP側にデータ送信、PHP関数実行

カスタムフィールドを更新するだけであればこのクラスとメソッド内容で問題ありませんが、各々変更する必要があるのは25行目です。
「action」というキーがあるので、こちらにアクションフックで指定したアクション名を記述します。先程の通りであれば「update_custom_field」ですね。

これでカスタムフィールドをAjaxで保存する機構が用意できました。
最後にJavaScriptでカスタムフィールドをAjax処理で保存するプログラムを作成します。例としてIPアドレスを取得して保存しています。(投稿IDを取得する必要があるのでテンプレートに記述する前提のコードです)

以上がAjaxでカスタムフィールドを更新する方法で、参考サイトのプログラムを踏襲しています。

JavaScriptを外部ファイル化した手法

これらJavaScriptプログラムを外部ファイルにし、PHPからJavaScriptへ値渡しする形が良い手法かと思います。JavaScriptを外部ファイル化した場合の参考コードを記載します。

JavaScriptを外部ファイル化し、wp_localize_script()で値を渡す

JavaScriptファイルを「update-custom-field-by-ajax.js」という名前(任意)で「theme-name/js」ディレクトリに配置し、以下をfunctions.phpに記載して読み込みます。

wp_localize_script()でPHPの値を渡しているので、一番最初に行った「Ajax用URLを変数に設定して出力」するPHPコードは不要となります。

これによって、JavaScriptの実行処理は以下のようになります。

「wpData」というオブジェクト名でPHPの値を渡しているので、以下のようにアクセスできます。

  • IPアドレス:wpData.ipAddress(6行目)
  • 投稿ID:wpData.postId(10行目)
  • Ajax用URL:wpData.ajaxUrl( 13行目)

残りのカスタムフィールドを保存するPHP関数やAjax用クラス、メソッドはそのままで使用します。

参考:
WordPress AjaxでAdvanced Custom Fields(カスタムフィールド)を更新するAPIを公開(REST) | | Java from Japan
Plugin API/Action Reference/wp ajax (action) « WordPress Codex
Plugin API/Action Reference/wp ajax nopriv (action) « WordPress Codex

最終更新日:2018年9月23日

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

トラックバック

トラックバックは現在ありません。

Trackback: https://increment-log.com/wordpress-update-custom-field-by-ajax/trackback/