【WordPress】画面の一部を更新する(Ajax)

2020.12.102021.04.18

概要

今回は、Ajaxという手法を用います。

Ajaxはざっくり言うと、ブラウザ画面とサーバで非同期通信を行う仕組みです。

非同期通信(サーバが裏で処理を行う)で、処理中も画面操作が継続できるメリットがあります。

処理の流れはざっくり以下のイメージです。

次は、これをどう実現するかです。

ポイントは３つです。
①サーバ側で実行したい処理をWordPressのアクションに登録する
②①のアクションを実行するリクエストをAjaxで送信する
③②を起動するためのUI(ボタン等)と、②の結果を表示(更新)するためのUIを用意する

①はサーバ側の処理なのでfunctions.php等に記述します。

②・③はクライアント側の処理なので各HTML等に記述します。

以下、サーバ側とクライアント側のサンプルコードになります。
細かいことはコード内のコメントで書いているのでそっち見てください。

※大事なのは最後の2行。関数の中身は正味なんでもいいです。

※WordPressはデフォルトでjQueryに対応しているのでAjaxはjQueryを用いて記載しています。テーマによっては動作しない可能性があるので、その時はおまじないを追加しておいてください。

このように画面を一部更新する処理は簡単に実現できます。

サーバ側のコードを変更すれば色んな処理に応用できますね！！

あ、最後に実際に動くサンプルを置いておきます。

↓Ajaxを使用したサンプルボタン