WordPressでAjaxを使う(公開サイト 編)

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
wordpress image
イラストACの画像をもとに加工しています。

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

WordPressは、Ajaxを公開用サイトで使うのをあまり想定していません。でも方法はあって、とてもかんたんです。

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

WordPressは、Ajaxで通信するurlが

***/admin-ajax.php

に決まっています。しかし、adminとファイル名ついているように、公開サイトで使うのを想定していません。

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

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

じゃあ、WordPressの公開サイトでAjaxは使えないのか?といえばそうではありません。

admin-ajax.phpとは別のphpファイルを使うとちょっとめんどうなので、ここは強引に、admin-ajax.phpを使って公開サイトでAjaxを実装します。

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

公開サイトのAjaxは、管理画面の実装方法とほぼ同じです。

WordPressの管理画面のAjaxは

スクリプトのキュー登録(PHP)。

JavaScriptでリクエスト送信処理。

PHPでリクエスト受信処理。

の3つです。

このなかで、公開サイトのAjaxとのちがいはたった1行で、PHPのリクエスト受信処理のadd_action()のところだけです。

今回のサンプルコードは『WordPressでAjaxを使う(管理画面 編)』を使います。

スクリプトのキュー登録と、JavaScriptはまったく同じコードです。

キュー登録
add_action('admin_enqueue_scripts', function() {
    wp_register_script('js_handle_name', plugins_url('my-plugins/js/clear-cache.js', __FILE__), array('jquery'), '1.0.0', true);
    wp_localize_script('js_handle_name', 'localize', ['ajax_url' => admin_url('admin-ajax.php')]);
    wp_enqueue_script('js_handle_name');
} );
Ajaxのリクエスト送信
(function($) {
    function clearCacheSnsCount() {
        $.ajax({
            type: "POST",
            url: localize.ajax_url,
            dataType: 'text',
            data: {
                action: 'clear_cache'
            }
        }).done(function(data, textStatus, jqXHR) {
            outputMsg(data);
        }).fail(function() {
            outputMsg('cache clear error!!');
        });
    }
})(jQuery);

つぎは、ちがう部分のコードをみてみましょう。

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

まず、管理画面のAjaxリクエスト受信処理です。

Ajaxのリクエスト受信
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');

いちばん後ろに1行追加します。

add_action('wp_ajax_nopriv_clear_cache', 'clear_cache');

最後の行のフック名が"wp_ajax_***"のものを"wp_ajax_nopriv_***"に変えてadd_actionを追記するだけです。これだけです。

"wp_ajax_nopriv_***"は、サイトで管理するユーザーのログインを必要としない閲覧者にもAjaxを許可するものです。

ユーザーの認証が不要なAjaxで、公開サイト用とは言えませんが代用できます。

オリジナルのAjaxリクエストURLを作るには

リクエストURLにadminが入るのが気持ち悪い、イヤなら別のphpファイルを作ります。

ただしWordPressは、リクエストを受信してからHTMLを作るまでが、処理の流れの基本です。

この処理の流れは、add_actionやadd_filterでフックされた個々の処理の集合でできています。

Ajax通信はHTML作成部分は不要です。

公開サイト用のAjaxリクエストURLを受信したとき、どこかのフックのタイミングでAjax通信の独自処理へ方向転換させます。

タイミングをまちがえると、WordPressでよく使うDBアクセスの関数などが使えなくなるので、注意が必要です。

WordPressの処理の流れの理解するのが、めんどくさいです。

また、xmlやjson、text形式のレスポンスを返すこともあるので、それを実装するのもめんどうです。

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

オリジナルURLのサンプルコードを作成中です。完成次第、追記します。

前のページ
WordPress: Ajaxの使い方(管理画面 編)
WordPress: Ajaxでセキュアな通信を行う
次のページ
WordPressの本
post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

  • WordPressの基本
  • Webサイト作成から運用まで全体的に学ぶ
  • ブログサイトの運営からサイトの収益化を学ぶ
  • サイト作成・運営 + 集客の方法を学ぶ
  • WordPressからPHPプログラミングを学ぶ
  • 最新のWordPress(バージョン5)に対応した本

の7冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。


WordPressの本7選

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

*

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

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