ajaxの使い方

Tag:

wordpressでajaxを使ったソース例を紹介します。

WordPressのプラグインディレクトリ配下に次のファイルを作成します。

wordpress_ajax

class-dnweb-ajaxtest.php内の記述は次のようにしています。

/*
  Plugin Name: DNWEB Ajax TEST
  Plugin URI:http://www.dn-web64.com/
  Description: ajaxのテスト。
  Author: DN-Web64
  Version: 1.0
  Author URI: http://www.dn-web64.com/
 */

class DNWEB_Ajax_TEST {
    private $ajax_actions;

    public function __construct() {
        $this->configure_actions();
        add_action('admin_menu', array($this, 'ajaxtest_admin_menu'));
    }

    // 管理画面の設定メニューにajaxtestメニューを追加
    function ajaxtest_admin_menu() {
        add_options_page(
                'ajaxtest', 
                'ajaxtest',
                'read',
                'ajaxtest', 
                array($this, 'ajaxtest')); 
    }

    // ajaxtestメニューの表示内容
    function ajaxtest() {
        wp_enqueue_script('jquery');
        $nonce = wp_create_nonce("unique_key");
        $action = $this->ajax_actions['dnweb_key']['action'];
        ?>
        <form id="ajaxtest-form" method="post" action="<?php echo admin_url('admin-ajax.php'); ?>">
            <input type="hidden" name="action" value=<?php echo $action; ?> />
            <input type="hidden" name="nonce" value="<?php echo $nonce; ?>" />
            <p><input type="text" name="value1" value=""></p>
            <p><input type="text" name="value2" value=""></p>
            <p><input type="submit" value="送信" /></p>
        </form>
        <div id ="result"></div>

        <script type="text/javascript">
            $jq = jQuery.noConflict();
            $jq(document).ready(function () {
                $jq("#ajaxtest-form").submit(function (event) {
                    event.preventDefault();
                    $jq.ajax({
                        url: $jq(this).attr("action"),
                        type: $jq(this).attr("method"),
                        data: $jq(this).serialize()
                    }).done(function (data) {
                        $jq("#result").append(data["value1"] + " " + data["value2"]);
                    });
                });
            });
        </script>
        <?php
    }

    // ajaxリクエストとdnweb_ajax_function関数をマッチングさせる。
    public function configure_actions() {
        $this->ajax_actions = array(
            "dnweb_key" => array("action" => "dnweb_action", "function" => "dnweb_ajax_function")
        );

        foreach ($this->ajax_actions as $custom_key => $custom_action) {
            add_action("wp_ajax_nopriv_" . $custom_action['action'], array($this, $custom_action["function"]));
            add_action("wp_ajax_" . $custom_action['action'], array($this, $custom_action["function"]));
        }
    }

    // ajaxリクエスト時の処理
    function dnweb_ajax_function() {
        $nonce = $_POST['nonce'];

        if (!wp_verify_nonce($nonce, 'unique_key'))
            die('Unauthorized request!');

        header("Content-Type: application/json; charset=utf-8");
        echo json_encode($_POST);
        exit;
    }

}

$ajaxtest = new DNWEB_Ajax_TEST();

上記ソースの概要について説明します。まず、管理画面の設定メニューにajaxtestメニューを作成しています。
wordpress_ajax4
ajaxtestメニューでは、入力フォームを設置しています。次のように入力して送信ボタンをクリックするとajaxでデータの送受信が行われ、画面に入力した値が表示されます。
wordpress_ajax1
↓ 送信をクリック
wordpress_ajax2

34行目、49行目でajaxの宛先URLとして「admin-ajax.php」を指定しています。wordpressでajaxの処理をする場合、「admin-ajax.php」を利用することが推奨されています。

今回、POST メソッドで渡すデータは、action、nonce、value1、value2の4つです(35行目~38行目、51行目参照)。「admin-ajax.php」では、actionに入力されたデータから「wp_ajax_{action_name}」「wp_ajax_nopriv_{action_name} 」という2つのアクションフックを作成しています。「wp_ajax_{action_name}」 は、ログインしているユーザのみが利用できるアクションフックです。wp_ajax_nopriv_{action_name} では、ログインしていないユーザのみが利用できるアクションフックです。

これらのアクションフックに対して、サーバーサイドで実行する任意の関数を設定します。今回の場合、68行目と69行目で、actionに入力されたデータがdnweb_actionだったとき、dnweb_ajax_function関数が実行されるように設定しています。

スポンサーリンク