目次
概要
今回は、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