WordPressでAjaxを使う(管理画面 編)

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

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

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

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

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()を実行。

Ajax通信の振り分け

不思議に思いませんか?なぜ、ajaxリクエストがこの関数で受け取れるのか?と。

その秘密はadd_action()です。

ajaxのリクエストでactionを送りました。

clear_cache

です。この値は、アクションフックのハンドル名

wp_ajax_****

****

の部分です。この文字列を一致させて、ajaxが送るリクエストを受信します。

actionの文字列はオリジナルでなければなりません。他のプラグインなどと競合するからです。

actionがちがえば複数のAjax通信もできます。

ajaxリクエストのactionの値を受信処理のアクション・ハンドル名に使う

JavaScriptに結果を返す

WordPressのAjaxの返しはechoで行う

ちなみに、functionのreturnでも返すことができます。ただし、returnを省略すると

return 0;

を返します。

処理の最後のdie()

functionのreturnを省略すると、return 0;が返すので、ajaxの処理結果に0がついてしまいます。

これを避けるためdie()でPHPプログラムを強制終了させます。

echoを使わずにreturnで結果を返すときは不要です。

これで、WordPressのAjax処理が完成しました。

最後に

ほんとうは、セキュアなajaxの処理を実装するには、もうひとつ工夫が必要なのですが、ここでは実装していません。

jsのキュー登録で使用したwp_localize_script()でwp_create_nonce()を使います。

-> WordPressのAjaxでセキュアな通信を行う

WordPress: Ajaxの使い方(公開サイト 編)
次のページ
WordPressの本
post-cta-image

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

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

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

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


WordPressの本7選

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

*

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

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