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


目次


概要

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

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

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

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

WordPressでAjaxを使用した場合のイメージ図



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

ポイントは3つです。
①サーバ側で実行したい処理を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

Leave a Reply

Your email address will not be published. Required fields are marked *