ワードプレスでページ表示の背後で非同期通信ーAJAX

ワードプレスには非同期でデータを処理するAJAXという仕組みが組み込まれています。この仕組みで、ページを再読み込みすることなしにプログラムの裏側で様々なデータ処理をすることができます。

ワードプレスのAJAX通信の基本

AJAX通信には、ワードプレスのページの裏側で通信を開始するためのJAVASCRIPTコードとそのデータを処理するワードプレス側のPHPコードの2種類がひつようになります。

JAVASCRIPTコード側

jQuery(".mybutton").click( function(e) {
  e.preventDefault(); //ボタンクリック処理を無視しその下のコードを実行させます
  jQuery.ajax({
     type : "post",
     dataType : "json",
     url : '',//ワードプレスのAJAX通信送信先URLを出力します
     data : {action: "my_ajax_test", mydata:'データも送信できます'},//mydataにPOST値を１つテスト用に追加しました
     success: function(response) {
        if(response.type == "success") {
           alert(response);
        }
        else {
           alert("通信が失敗しました");
        }
     }
  });
});

このコードはmybuttonというクラスのボタンがクリックされたときに、ワードプレス側のmy_ajax_testというPHP関数を実行して返答をアラート表示します。

PHPコード側

function my_ajax_test(){
    $mydata=$_POST['mydata'];
    echo 'AJAX通信が成功しました';
    die();
}
add_action( 'wp_ajax_my_ajax_test', 'my_ajax_test' );
add_action( 'wp_ajax_nopriv_my_ajax_test', 'my_ajax_test' );

wp_ajax_とwp_ajax_nopriv_　の後にJAVASCRIPTで定義したmy_ajax_testを記載するとワードプレスが、AJAX通信を受け付けるようになります。
function my_ajax_testの部分がデータを受け取った際の処理する内容です。
ajaxで送ったデータは$_POSTで受け取ることもできます。

この関数では単純に文字列を出力し、この文字列をJAVASCRIPT側のアラート表示をしています。

※wp_ajax_とwp_ajax_nopriv_と２つアクションを作るのはログインユーザーと非ログインユーザーどちらでもこのAJAXが動作するためとなります。

\ 　他社の制作したワードプレスサイトもOK ! 　/
ワードプレスの制作・復旧・修正・カスタマイズのご相談・ご依頼はこちらから