【WordPress】非同期通信（Ajax）を使う方法[基本]

2020/07/282021/09/03

当サイトのリンクには広告が含まれています。

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

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

【７行目】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' );

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

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

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