ワードプレスでAJAXを使用するひな形のコード

ワードプレスには、AJAX(画面を再読み込みしないで、背後で通信を行う仕組み)が最初から実装されています。このAJAXを利用するひな形のコードをご紹介いたします。

ワードプレスでAJAXを使用するひな形1 呼び出し側のJavaScript

AJAXを実行する側のJAVASCRIPTのコードは下記のようになります。

function doajax(){
   jQuery.ajax({
      type: "POST",
      url: "<?php echo admin_url( 'admin-ajax.php'); ?>",
      data: {
         "action": "ajaxactionname",
         "data": 1234,
     },
     success: function(msg){
        alert(msg);
     }
   });
}

このコードでは、admin_url( ‘admin-ajax.php’);　でワードプレスのAJAXを飛ばすURLを取得し、ajaxactionname　という名称のAJAXアクションにdataというPOSTキーで１２３４というデータを送信し、返ってきた出力をアラートします。

ワードプレスでAJAXを使用するひな形２ AJAXリクエストの受け取り側のPHPコード

このコードはテーマのFunctios.phpや作成中のプラグイン等に追加します。

add_action( 'wp_ajax_nopriv_ajaxactionname', 'ajaxactionname_handler' );
add_action( 'wp_ajax_ajaxactionname', 'ajaxactionname_handler' );
function ajaxactionname_handler() {
    $data = $_POST["data"];
    echo $data * 2;
    die();
}

add_action　が二つあります。ここで手順１のactionを受け取る関数を定義します。

wp_ajax_nopriv_ajaxactionname
wp_ajax_ajaxactionname

太字の部分は手順1のアクション名になっている必要がございます。wp_ajax_nopriv_という接頭のアクションは、サイトのフロントエンドでAJAXを有効にするもので、wp_ajax_は管理画面でAJAXを有効にするものです。

ajaxactionname_handlerはAJAXのデータを受け取った時に実際の処理を行う関数の内容を書きます。

この例ではdataキーで $_POST　により受け取った1234を二倍にして返します。
手順１ではAJAXの結果返ってきた値をアラートしますので、2468がアラートされるかと存じます。

参考になりましたら幸いです。

WordPress ワードプレスドクターワードプレスのテーマやプラグインの作成カスタマイズのご依頼ご相談はWPドクターまでお気軽にお送りください