WordPress: Ajaxの使い方(公開サイト 編)

  • -

    シェア
  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
us us
wordpress image

WordPressの公開用サイトでAjaxを実装する方法を、サンプルコードを使って説明します。

WordPressは公開用サイトでAjaxを使うことをあまり想定していません。しかし、実装する方法はあってその方法は簡単です。

WordPressは公開サイトでのAjax実装は想定していない?

WordPressは、Ajax通信で指定するurlが***/admin-ajax.phpと決まっています。しかし、adminとphpファイル名についているように、フロント側(公開サイト)で使うことは想定されていないようです。

WordPressは、WebフレームワークではなくCMSフレームワークなので、プログラミングの知識があまりなくてもWebサイトを構築できることを強みにしています。

Ajaxを実装するほどプログラミングができるなら、ほかのWebフレームワークの方が便利でしょう。このことからフロント側で実装することを想定していなかったのだと思います。

じゃあ、WordPressのフロント側でAjaxを実装することはできないのか?といえばそうではありません。たしかに、admin-ajax.phpとは別のphpファイルを用意しようとするとちょっと面倒な作業になります。

使い方としては強引ですが、WordPressではadmin-ajax.phpを使ってフロント側でAjaxを実装することができます。

管理画面のAjax実装方法とほぼ同じ

フロント側のAjaxの実装方法は、管理画面での実装方法とほぼ同じです。違いはたった1行で、Ajaxリクエストを受信するadd_action()の部分だけです。

まずは、管理画面用のサンプルコードを見てみましょう。サンプルコードは、「WordPressの管理画面(プラグイン)でAjaxを使う」の投稿を元に進めていきます。WordPressのAjax実装方法が分からない方は、一度、参照することをおすすめします。

サーバの処理(phpのコーディング)

function clear_cache() {
    $cache_file = '../cache/11111111111111111.cache';
    $success = __('Complete clear cache');
    $error = __('Clear cache failer');
    $result = '';

    if(file_exists($cache_file)) {
        if(unlink($cache_file)) {
            $result = $success;
        } else {
            $result = $error;
        }
    } else {
        $result = $success;
    }
    echo $result;
    die();
}
add_action('wp_ajax_clear_cache', 'clear_cache');

最後の行のフック名が"wp_ajax_***"となっています。これを"wp_ajax_nopriv_***"にしたadd_actionを追記するだけです。これで、公開用サイトでAjaxを実装できます。

"wp_ajax_nopriv_***"のadd_action()は、管理画面で、登録されているユーザの認証を行わずにAjax通信を行うためのものです。(サイトに登録されているユーザのログインを必要としません。)

あくまで管理画面用を流用して公開用サイトでAjax通信を行なっています。

Ajaxリクエストにadminという文字が含まれるのが気持ち悪い、いやだというのであれば別のphpファイルを用意することになります。
ただしWordPressは、リクエストを受信してからHTMLを作成するまでの一連の処理の流れが基本になっています。

この一連の処理は、すべてadd_actionやadd_filterでフックされた個々の処理の集合で作成されています。

Ajax通信では、一連の流れの処理のHTML作成部分はいらないので、公開サイト用のAjaxリクエストurlを受信したときは、どこかのフックのタイミングでAjax通信の独自処理へ方向転換させ、既存のHTML作成処理を行わないようにする必要があります。

タイミングを間違えると、WordPressで用意されているDBアクセスの関数など、WordPressでよく使う関数が使えなくなるので、気を付けなければなりません。そういう意味で面倒な作業になります。

その場合、まずはWordPressの処理の流れを把握する必要があるでしょう。

  • 公開サイト用のAjax通信は、管理画面用を流用できる
  • カスタムのAjax通信用のURLを作成する場合は、まず、Wordpressの処理の流れの理解が必要

 

最近Webカテゴリでよく読まれている記事です。
post-cta-image
blog image

ドメイン取得の意味が分からない人へ。王道の方法を紹介します。

ドメインの登録業者を選ぶのに悩む必要はないです。サイトを簡単に早く公開するには全くいらないことで、むしろ邪魔です。『お名前.com』というサービスは必ず耳にします。そのお名前.comのメリットとデメリットと一緒に、ドメインの意味が分からない人が一番失敗しないドメインの取得方法を紹介します。

tadtadya.com

_

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この記事を気に入ったらぜひシェアも!!