【WordPress】非同期通信(Ajax)を使う方法

WordPressでAjaxを使うことがあったので、基本の使い方の備忘録。
jQueryを使用してます。

目次

リクエスト送信先のパス設定

WordPressではadmin-ajax.phpというファイルでAjaxのリクエストを受け付けてくれるので、まずはJavaScriptで使えるようにURLを定義します。

<?php
function add_my_ajaxurl() {
?>
      <script>
          var ajaxurl = '<?php echo admin_url( 'admin-ajax.php'); ?>';
      </script>
<?php
}
add_action( 'wp_head', 'add_my_ajaxurl', 1 );
?>

上記のコードをfunctions.phpに記載するとajaxurlというJavaScriptの変数にadmin-ajax.phpまでのURLが格納されます。
なお、このScriptはhead内に追加されています。

クライアント側の実装(Javascriptの記載)

ボタンを押したらScriptが動くようにします。
PHPには以下のようなボタンを用意。

<button id="js-btn">ボタン</button>

JavaScriptには以下のように記載

jQuery(function($) {
  $( '#js-btn' ).on( 'click', function(){
    $.ajax({
        type: 'POST',
        url: ajaxurl,
        data: {
          'action' : 'sample_function',
        },
        success: function( response ){
        //成功した時の処理
           alert( response );
        },
        error: function () {
       //失敗した時の処理
           alert("通信に失敗しました");
        }
    });
    return false;
 });
}); 

【5行目】url: ajaxurlで先ほど定義した変数を呼び出します。

【7行目】sample_functionというphpの関数を呼び出します。(次の手順で作成する)

サーバー側の実装(PHP関数の作成)

次は呼び出される関数sample_functionを作成します。
今回はシンプルに”Hello!”を返すだけの関数です。

function sample_function(){
  echo "hello!";
  wp_die();
}
//ログインしているユーザー向け関数
add_action( 'wp_ajax_sample_function', 'sample_function' );
//非ログインユーザー用関数
add_action( 'wp_ajax_nopriv_sample_function', 'sample_function' );

【6行目】wp_ajax_sample_functionの”sample_function“部分にははAjaxのactionで呼び出しているsample_functionを入れます。

2つ目の引数、sample_functionは上記で作成したphpの関数の名前です。

【8行目】こちらも同様で、wp_ajax_nopriv_の後にAjaxのactionで呼び出しているsample_functionを入れます。

実行

これで、ボタンを押すとhello!というアラートが画面に表示されます。

実際に使う時は、ボタンを押した時に変数などのデータをサーバーサイドに渡して、WP_Query()で記事を取得して画面に表示させるといった使い方をよくします。

目次
閉じる