WordPress: Ajaxの使い方(管理画面 編)

  • -

    シェア
  • ---

    LINEで送る
  • -

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

    pocket
  • -

    rss
他言語サイト
us us
wordpress image

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

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

JavaScriptのコーティング

jsファイルのキュー登録

まず、ajaxの処理を記述したjsファイルをキューに登録します。htmlに<script type='text/javascript' src='**.js'></script>で表示されます。

テーマファイルのfunctions.phpファイルに記述します。プラグイン化する場合は、プラグインのfunctions.phpにあたる、プラグインのホームディレクトリと同じ名前の.phpファイルに記述します。

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

function load_tdy_sns_mng_admin_script() {
    add_action('admin_enqueue_scripts', function() {
        wp_register_script('js_handle_name', plugins_url('**/js/clear-cache.js', __FILE__), array('jquery'), '1.0.0', true);
        wp_localize_script('js_handle_name', 'localize', array('ajax_url' => admin_url('admin-ajax.php')));
        wp_enqueue_script('js_handle_name');
    } );
}

大事なところは、wp_localize_script()です。

WordPressの管理画面でAjaxを使うには、必ず//(host)/wp-admin/admin-ajax.phpのurlにリクエストを送信する必要があります。そのためには、後述するjsファイルのajaxのurlにそのパスを指定する必要があります。

wp_localize_spcipt()は、指定したjsファイルにオブジェクト変数(localize)を渡す関数です。ここでは、管理画面のurlをajax_urlという変数に値を入れて、jsファイルに渡しています。
これをすることによって、jsファイルで直接urlパスを記述する必要はありません。

admin_url()は、管理画面のurlを生成してくれる関数です。また、plugins_url('**/js/test.js', __FILE__)は、作成しているプラグインのurlを作成する関数です。第2引数で自身のファイル名を指定します。

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

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

今回は、ボタンをクリックしたらキャッシュファイルをクリアする処理を、非同期で行うAjax処理を作成します。jsファイルの内容は次のようになります。

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

ajaxのurlでは、jsのキュー登録で指定したオブジェクト変数を指定しています。この記述で//(host)/wp-admin/admin-ajax.phpに、Ajaxを使ったリクエストが送信されます。

dataactionに指定する"clear_cache"には意味があります。この文字列は、リクエストを受け取ったときに処理を行う関数を指定しているので、この点は覚えておきましょう。

outputMsg()は、処理結果のメッセージを、管理画面に作成したメッセージボックスに出力するために作成したオリジナル関数です。ここでは割愛します。

サーバの処理(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');

処理の内容はかんたんです。キャッシュファイルが存在したら削除する処理だけで、あとはechoで処理結果を返しています。

処理の最後にdie()があります。これは、returnを省略するとreturn 0;が返されるため、ajaxの処理結果に0が付いてしまいます。これを避けるためdie()でスクリプトを終了させています。

ここで不思議に思いませんか?

なぜ、ajaxでリクエストされたものがこの関数で受け取れるのか?と。

その秘密はadd_action()にあります。

ajaxのリクエストでactionというデータを送りました。その値は"clear_cache"でした。実はこの値は、アクションフックのハンドル名の"wp_ajax_****""****"の部分です。この文字列を一致させることで、ajaxが送るリクエストを受信しています。

actionの文字列はオリジナルでなければなりません。他のプラグインなどと競合しないような文字列を作成する必要があります。

このようにして、ajaxを使ってリクエストから処理結果を返す一連の処理が行えます。

ajaxリクエストのactionの値が受信処理のfunction名になる

最後に

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

jsのキュー登録で使用したwp_localize_script()でwp_create_nonce()を使って実現します。くわしくはWordPressでセキュアなAjax通信を行う方法を参照ください。

 

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

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

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

tadtadya.com

_

SNSでも記事を配信しています。

コメント

  1. ただ屋ぁ より:

    jQueryの$が使用できる方法を追記しました。

コメントを残す

*

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

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