WordPressでAjaxを使う（管理画面編）

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

WordPressの管理画面でAjaxを実装する方法を、サンプルコードを使って説明します。

管理画面は、Ajaxを使うことがあらかじめ想定されているので、かんたんにAjax通信ができます。

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ

WordPressのAjax
JavaScriptのコーディング
jsファイルのキュー登録
jsファイルのコーティング
サーバの処理（phpのコーディング）
最後に

WordPressのAjax

WordPressのAjaxの処理の流れです。

JavaScriptでリクエスト送信。

↓

Ajax通信

↓

PHPプログラムが受信。

↓

PHPプログラムで処理実行、レスポンスを返す。

↓

Ajax通信

↓

JavaScriptでレスポンスを受け取る。

さっそく実装しましょう。

JavaScriptのコーティング

AjaxはJavaScriptのリクエスト送信からはじまります。

WordPressでは

jsファイルのキュー登録

JavaScriptのリクエスト送信処理実装

のふたつです。

jsファイルのキュー登録

WordPressではおなじみのjsファイルのキュー登録です。htmlに

<script type='text/javascript' src='**.js'></script>

を出力します。

これに、ajaxの処理を書くjsファイルを登録します。

キュー登録

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');
} );

テーマやプラグインに追加します。

テーマ	functions.phpなど
プラグイン	プラグインのホームディレクトリと同名の.phpファイルなど

サンプルコードは、独自の管理画面をプラグイン化したときを想定しています。

ローカライズ

wp_localize_script()

管理画面で使うAjaxのリクエスト送信先URLは、必ず

//(host)/wp-admin/admin-ajax.php

でないといけません。このパスをローカライズのオブジェクト変数にセットします。

array('ajax_url' => admin_url('admin-ajax.php'))

ローカライズは、JavaScriptにPHPの翻訳機能を使うためのものですが、変数を渡すこともできます。

WordPress5からはむしろ『変数渡し』いがいに使い道はありません。

WordPressでPHPの変数をJavaScriptで使う

ajaxのリクエストURLは、jsファイルに書かない
wp_localize_script()を使う

jsファイルのコーディング

今回は、キャッシュファイルをクリアする非同期リクエストをJavaScriptからAjaxで送信します。

jsファイルの内容です。

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);

ポイントはひとつです。

data: {
action: 'clear_cache'
}

ここで指定するactionは、サーバー（PHP）が受信するときにリクエストを判別するのに使います。

PHPプログラムでも使うので覚えておきましょう。

ajaxのurlは渡されたオブジェクト変数を使います。

url: localize.ajax_url,

outputMsg()は、処理結果のメッセージをHTMLに出力するオリジナル関数です。ここでは省略します。

Ajaxのリクエスト処理はこれでおわりです。

サーバの処理（phpのコーディング）

今度は、Ajaxのリクエストの受信処理です。キャッシュファイルを削除して結果を返します。ここはPHPプログラムです。

サンプルコードです。

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');

ポイントは3つです。

アクション名はadd_action()のハンドル名に使う。

JavaScriptに返す値はechoを使う。

処理の最後にdie()を実行。