概要
今回は、Ajaxという手法を用います。
Ajaxはざっくり言うと、ブラウザ画面とサーバで非同期通信を行う仕組みです。
非同期通信(サーバが裏で処理を行う)で、処理中も画面操作が継続できるメリットがあります。
処理の流れはざっくり以下のイメージです。
次は、これをどう実現するかです。
ポイントは３つです。
①サーバ側で実行したい処理をWordPressのアクションに登録する
②①のアクションを実行するリクエストをAjaxで送信する
③②を起動するためのUI(ボタン等)と、②の結果を表示(更新)するためのUIを用意する
①はサーバ側の処理なのでfunctions.php等に記述します。
②・③はクライアント側の処理なので各HTML等に記述します。
以下、サーバ側とクライアント側のサンプルコードになります。
細かいことはコード内のコメントで書いているのでそっち見てください。
サーバ側のコード
※大事なのは最後の2行。関数の中身は正味なんでもいいです。
クライアント側のコード(HTML)
※WordPressはデフォルトでjQueryに対応しているのでAjaxはjQueryを用いて記載しています。テーマによっては動作しない可能性があるので、その時はおまじないを追加しておいてください。
このように画面を一部更新する処理は簡単に実現できます。
サーバ側のコードを変更すれば色んな処理に応用できますね！！
あ、最後に実際に動くサンプルを置いておきます。
↓Ajaxを使用したサンプルボタン
参考
Wp Ajax – WordPress Hook to Handle Ajax Request
WordPressでAjaxを使う方法の解説
https://resowork.com/wp-php-session-save-variables
https://www.php.net/manual/ja/session.examples.basic.php
コメント
こんにちは
当該のページを拝見いたしました。
その通りに私のローカル環境に実装したところ、ajaxで400 bad requestとなりました。
そのままソースをコピーしたので実装は問題ないと思いますが、
これまで当該の事象になったことはありますでしょうか？
よろしければご返信のほどよろしくお願いいたします。
※メールアドレスが含まれていたため元コメは非表示にして再投稿させてもらっています。(mathkuro)
コメントありがとうございます。
私の場合はフックの部分で400エラーが出たことはあります。
ただ、「サーバ側のコード」に書いてある通り、ログインユーザ用／非ログインユーザ用それぞれを用意すれば解消されたので、ソースをコピーされたのであれば別事象でしょうね…
環境等の詳細が分からないので、ここからは100%想像になるのですが、原因としてあり得そうなのは以下です。
・jQueryが動作しないテーマを使用している(おまじないを書けば動くはず)
・同名のアクションが存在している
・admin-ajax.phpをフルパスで指定しないと正しく動作しない環境
web系は本職じゃないのであまりお役に立てず申し訳ないです…