【wordpress】wordpressのAjaxを使う方法

wordpressの関数をAjaxで読み込みたかった時に、wordpressのAjaxを使えばできそうだったのでやってみた時の備忘録

wordpressのAjaxを使う方法

やることとしては、カスタムデータ属性で投稿IDの入ったボタンをクリックしたらそのIDに紐づいた投稿記事の本文を取得して表示
別のボタンを押すと別の投稿記事の本文を取得

functions.php

<?php
// headタグ内にadmin-ajax.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 );

// ajaxで渡ってくるID情報を取得して投稿の本文を取得
function originalAction(){
  echo get_post( $_POST['id'] )->post_content;
  die();
}
add_action( 'wp_ajax_originalAction', 'originalAction' );
add_action( 'wp_ajax_nopriv_originalAction', 'originalAction' );
?>

表示用ソースコード（HTML・JQuery）

<!-- ↓ 投稿ID入りボタン -->
<button data-id="3912" class="ajax-btn">リンク</button>
<button data-id="3894" class="ajax-btn">リンク</button>
<button data-id="3840" class="ajax-btn">リンク</button>

<!-- ↓ 投稿記事本文出力エリア -->
<div class="ajax-display-area"></div>

<script>
jQuery(function($){
    $(document).on("click", ".ajax-btn", function (event) {
        event.preventDefault();
        let id = $(this).data("id");// カスタムデータ属性取得
        $.ajax({
            type: 'POST',
            url: ajaxurl,
            data: {
                'action' : 'originalAction',// functions.phpに書いた関数
                'id': id // 受け渡す情報
            },
            }).done(function (data) { //Ajax通信に成功したときの処理
                // alert('success');
                $(".ajax-display-area").html(data);// 出力エリアに投稿記事本文出力
            }).fail(function (data) { //Ajax通信に失敗したときの処理
                // alert('error');
            }).always(function (data) { //処理が完了した場合の処理
                // alert('always');
        });
    });
});
</script>