Web Design Leaves

<!--出力される script タグ-->
<script id='my-script-js-before'>
  const my_ajax_params = {
    "ajaxurl":"http:\/\/localhost\/wp\/wp-admin\/admin-ajax.php",
    "my_ajax_nonce":"697985ac05"
  }
</script>
<!--登録したJavaScriptの読み込み-->
<script src='http://localhost/wp/wp-content/themes/my-theme/js/my-script.js?ver=1686966413' id='my-script-js'></script>;

function my_enqueue_ajax_scripts() {

  // フロントページの場合にのみ AJAX の JavaScript を読み込み、script タグを出力
  if(is_front_page()) {

    wp_enqueue_script(
      'my-ajax-script',
      get_theme_file_uri('/js/my-script.js'),
      array('jquery'),
      filemtime(get_theme_file_path('/js/my-script.js')),
      true
    );
    wp_add_inline_script(
      'my-ajax-script',
      'const my_ajax_params = ' . json_encode(array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'my_ajax_nonce' => wp_create_nonce('my-ajax-nonce'),
      )),
      'before'
    );
  }
}
add_action('wp_enqueue_scripts', 'my_enqueue_ajax_scripts');

// AJAX ハンドラの定義
function ajax_function() {
  // nonce の値を検証
  check_ajax_referer('my-ajax-nonce');

  // 必要な処理を記述（echo などで出力することでレスポンスを返すことができます）

  // 処理が完了したら wp_die() で終了
  wp_die();
}

// ログインユーザー用アクションに定義した AJAX ハンドラを登録
add_action('wp_ajax_アクション名', 'AJAX ハンドラ名');

// 非ログインユーザー用アクションに定義した AJAX ハンドラを登録
add_action('wp_ajax_nopriv_アクション名', 'AJAX ハンドラ名');

// wp_ajax_my_action に my_ajax_handler を登録
add_action('wp_ajax_my_action', 'my_ajax_handler');

// wp_ajax_nopriv_my_action に my_ajax_handler を登録
add_action('wp_ajax_nopriv_my_action', 'my_ajax_handler');

// ボタン
const btn = document.getElementById("js-btn");
// 名前入力欄
const nameInput = document.getElementById("name");

// ボタンのイベントリスナ
btn.addEventListener("click", () => {

  // 送信するデータ（オブジェクト形式のパラメータ）
  const data = {
    // キー名に action を指定し、値にアクション名を指定
    action: "my_action",
    // キー名に _ajax_nonce を指定し、値にインライン script に出力された nonce を指定
    _ajax_nonce: my_ajax_params.my_ajax_nonce,
    // 名前入力欄に入力された値
    name: nameInput.value,
  };

  // XMLHttpRequest のインスタンスを生成
  const xhr = new XMLHttpRequest();

  // POST メソッドでインライン script に出力された値（リクエスト先 URL）に送信
  xhr.open("POST", my_ajax_params.ajaxurl);

  xhr.addEventListener('readystatechange', ()=> {
    if(xhr.readyState === 4){
      if(xhr.status >= 200 && xhr.status < 300){
        // 取得操作が完了し、成功したらレスポンスのテキストをコンソールに出力
        console.log(xhr.responseText);
      }else{
        // 失敗時の処理
        console.log(`失敗: ${xhr.status} (${xhr.statusText})`);
      }
    }
  });

  // オブジェクト形式のパラメータを URLSearchParams に変換してリクエストボディに指定
  xhr.send(new URLSearchParams(data));
});

// ボタン
const btn = document.getElementById("js-btn");
// 名前入力欄
const nameInput = document.getElementById("name");

// ボタンのイベントリスナ
btn.addEventListener("click", () => {

  // FormData オブジェクトを生成
  const data = new FormData();
  // FormData オブジェクトの append() メソッドでパラメータ（キー/値のペア）を追加
  data.append("action", "my_action");
  data.append("_ajax_nonce", my_ajax_params.my_ajax_nonce);
  data.append("name", nameInput.value);

  // XMLHttpRequest のインスタンスを生成
  const xhr = new XMLHttpRequest();

  // POST メソッドでインライン script に出力された値（リクエスト先 URL）に送信
  xhr.open("POST", my_ajax_params.ajaxurl);

  xhr.addEventListener('readystatechange', ()=> {
    if(xhr.readyState === 4){
      if(xhr.status >= 200 && xhr.status < 300){
        // 取得操作が完了し、成功したらレスポンスのテキストをコンソールに出力
        console.log(xhr.responseText);
      }else{
        // 失敗時の処理
        console.log(`失敗: ${xhr.status} (${xhr.statusText})`);
      }
    }
  });

  // FormData オブジェクトをリクエストボディに指定
  xhr.send(data);
});

const btn = document.getElementById('js-btn');
const nameInput = document.getElementById("name");

btn.addEventListener('click', ()=> {

  // 送信するデータ（オブジェクト形式のパラメータ）
  const data = {
    // キー名に action を指定し、値にアクション名を指定
    action: "my_action",
    // キー名に _ajax_nonce を指定し、値にインライン script に出力された nonce を指定
    _ajax_nonce: my_ajax_params.my_ajax_nonce,
    // 名前入力欄に入力された値
    name: nameInput.value,
  };

  // 送信先に my_ajax_params.ajaxurl を指定
  fetch(my_ajax_params.ajaxurl, {
    // POST を指定
    method: 'POST',
    // データを URLSearchParams に変換してリクエストボディに指定
    body: new URLSearchParams(data)

  }).then((response) => {
    if(response.ok) {
      return response.text();
    } else {
      throw new Error(`失敗: ${response.status} ${response.statusText}`);
    }
  })
  .then((text) => {
    // レスポンスのテキストを出力（成功時の処理）
    console.log(text);
  })
  .catch((error) => {
    console.warn(error);
  });
});

const btn = document.getElementById("js-btn");
const nameInput = document.getElementById("name");

btn.addEventListener("click", () => {

  // FormData オブジェクトを生成
  const data = new FormData();
  // FormData オブジェクトの append() メソッドでパラメータを追加
  data.append("action", "my_action");
  data.append("_ajax_nonce", my_ajax_params.my_ajax_nonce);
  data.append("name", nameInput.value);

  fetch(my_ajax_params.ajaxurl, {
    method: "POST",
    // FormData オブジェクトをリクエストボディに指定
    body: data,
  })
    .then((response) => {
      if (response.ok) {
        return response.text();
      } else {
        throw new Error(
          `失敗: ${response.status} ${response.statusText}`
        );
      }
    })
    .then((text) => {
      console.log(text);
    })
    .catch((error) => {
      console.warn(error);
    });
});

const btn = document.getElementById('js-btn');
const nameInput = document.getElementById("name");

btn.addEventListener('click', ()=> {

  // データを「キー名=値&キー名=値...」形式で指定
  const data =
    'action=' + encodeURIComponent('my_action') +
    '&_ajax_nonce=' + encodeURIComponent(my_ajax_params.my_ajax_nonce) +
    '&name=' + encodeURIComponent(nameInput.value);

  fetch(my_ajax_params.ajaxurl, {
    method: 'POST',
    // リクエストヘッダーで Content-Type を指定
    headers: {
      "Content-Type": 'application/x-www-form-urlencoded'
    },
    body: data,

  }).then((response) => {
    if(response.ok) {
      return response.text();
    } else {
      throw new Error(`失敗: ${response.status} ${response.statusText}`);
    }
  })
  .then((text) => {
    console.log(text);
  })
  .catch((error) => {
    console.warn(error);
  });
});

const btn = document.getElementById("js-btn");
const nameInput = document.getElementById("name");

btn.addEventListener("click", () => {

  // JSON 形式に変換するデータ
  const input = {
    name: nameInput.value,
  };
  // JSON 形式に変換
  const json_input = JSON.stringify(input);

  // オブジェクト形式のデータ（送信する際に URLSearchParams で変換）
  const data = {
    action: "my_action",
    _ajax_nonce: my_ajax_params.my_ajax_nonce,
    // JSON 形式のデータ（サーバーでは $_POST['input'] で取得）
    input: json_input,
  };

  const xhr = new XMLHttpRequest();
  xhr.open("POST", my_ajax_params.ajaxurl);

  xhr.addEventListener("readystatechange", () => {
    if (xhr.readyState === 4) {
      if (xhr.status >= 200 && xhr.status < 300) {
        console.log(xhr.responseText);
      }
    }
  });

  // データ全体を URLSearchParams としてリクエストボディに指定して送信
  xhr.send(new URLSearchParams(data));
});

const btn = document.getElementById("js-btn");
const nameInput = document.getElementById("name");

btn.addEventListener("click", () => {

  // JSON 形式に変換するデータ
  const input = {
    name: nameInput.value,
  };
  // JSON 形式に変換
  const json_input = JSON.stringify(input);

  // FormData オブジェクトを生成
  const data = new FormData();
  // FormData オブジェクトの append() メソッドでパラメータを追加
  data.append("action", "my_action");
  data.append("_ajax_nonce", my_ajax_params.my_ajax_nonce);
  // JSON 形式のデータ
  data.append("input", json_input);

  const xhr = new XMLHttpRequest();
  xhr.open("POST", my_ajax_params.ajaxurl);

  xhr.addEventListener("readystatechange", () => {
    if (xhr.readyState === 4) {
      if (xhr.status >= 200 && xhr.status < 300) {
        console.log(xhr.responseText);
      }
    }
  });

  // FormData オブジェクトをリクエストボディに指定して送信
  xhr.send(data);
});

jQuery(function($){
  $( '#js-btn' ).on( 'click', function(){

    // JSON 形式に変換するデータ
    const input = {
      name: $( '#name' ).val(),
    };
    // JSON 形式に変換
    const json_input = JSON.stringify(input);

    $.ajax({
      type: 'POST',
      //インライン script に出力された値（リクエスト先 URL）に送信
      url: my_ajax_params.ajaxurl,
      data: {
        // キー名に action 、値にアクション名を指定
        action : 'my_action',
        // キー名に _ajax_nonce、値にインライン script に出力された nonce を指定
        _ajax_nonce: my_ajax_params.my_ajax_nonce,
        // JSON 形式のデータ（サーバーでは $_POST['input'] で取得）
        input: json_input,
      }
    })
    .done( function( response ) {
      console.log( response ); //成功した時の処理
    })
    .fail( function( error ) {
      console.warn( `失敗: ${error.status} (${error.statusText})` );
    });
  });
});

function ajax_function() {
  // nonce の値を検証
  check_ajax_referer('my-ajax-nonce');
  // PHP の値に変換
  $json = json_decode( wp_unslash($_POST['input']) );
  // 値をサニタイズ
  $name = esc_html($json->name);
  // テキストをレスポンスとして返す
  echo 'Hello ' . $name . '!';
  //処理を終了させる
  wp_die();
}
add_action('wp_ajax_my_action', 'ajax_function');
add_action('wp_ajax_nopriv_my_action', 'ajax_function');

function ajax_function() {
  check_ajax_referer('my-ajax-nonce');
  // json_decode() の第2引数に true を指定して連想配列形式で取得
  $json = json_decode( wp_unslash($_POST['input']), true );
  // 値は連想配列でアクセス
  $name = esc_html($json['name']);
  echo 'Hello ' . $name . '!';
  wp_die();
}
add_action('wp_ajax_my_action', 'ajax_function');
add_action('wp_ajax_nopriv_my_action', 'ajax_function');

const btn = document.getElementById("js-btn");
const nameInput = document.getElementById("name");

btn.addEventListener("click", () => {

  const data = {
    action: "my_action",
    _ajax_nonce: my_ajax_params.my_ajax_nonce,
    name: nameInput.value,
  };

  // データを JSON に変換
  const json_input = JSON.stringify(data);

  const xhr = new XMLHttpRequest();

  // リクエスト URL に action と nonce のパラメータを追加
  xhr.open("POST", my_ajax_params.ajaxurl + '?action=my_action&_ajax_nonce=' + my_ajax_params.my_ajax_nonce);

  // Content-Type に application/json を指定してリクエストを送信
  xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');

  xhr.addEventListener("readystatechange", () => {
    if (xhr.readyState === 4) {
      if (xhr.status >= 200 && xhr.status < 300) {
        console.log(xhr.responseText);
      }
    }
  });

  // JSON データをリクエストボディに指定
  xhr.send(json_input);
});

jQuery(function($){
  $( '#js-btn' ).on( 'click', function(){

    const data = {
      action : 'my_action',
      _ajax_nonce: my_ajax_params.my_ajax_nonce,
      name: $( '#name' ).val(),
    };
    const json_data = JSON.stringify(data);

    $.ajax({
      type: 'POST',
      // リクエスト URL に action と nonce のパラメータを追加
      url: my_ajax_params.ajaxurl + '?action=my_action&_ajax_nonce=' + my_ajax_params.my_ajax_nonce,
      // リクエストボディに JSON 形式のデータを指定
      data: json_data,
      // コンテントタイプを application/json に指定
      contentType:'application/json; charset=utf-8',
    })
    .done( function( response ) {
      console.log( response );
    })
    .fail( function( error ) {
      console.warn( `失敗: ${error.status} (${error.statusText})` );
    });
  });
});

function ajax_function() {
  // nonce の値を検証
  check_ajax_referer('my-ajax-nonce');
  // 取得した値をサニタイズ
  $name = esc_html($_POST['name']);
  // 返す値を連想配列で作成
  $return = array(
    'name' => 'My name is ' . $name . '!'
  );
  // JSON レスポンスを出力（JSON に変換して出力）
  wp_send_json($return);
}
add_action('wp_ajax_my_action', 'ajax_function');
add_action('wp_ajax_nopriv_my_action', 'ajax_function');

function ajax_function() {
  // nonce の値を検証
  check_ajax_referer('my-ajax-nonce');
  // 値をサニタイズ
  $name = esc_html($_POST['name']);
  // 返す値を連想配列で設定
  $return = array(
    'name' => 'My name is ' . $name . '!'
  );
  // header() 関数でコンテントタイプに application/json を指定
  header("Content-type: application/json; charset=UTF-8");
  // JSON 形式に変換して出力
  echo json_encode($return);
  // 終了する
  wp_die();
}
add_action('wp_ajax_my_action', 'ajax_function');
add_action('wp_ajax_nopriv_my_action', 'ajax_function');

<?php
get_header();
?>

<?php
// 取得する投稿の条件を指定（必要に応じて変更）
$args = array(
  'post_type' => 'post',
  'post_status' => 'publish',
  'posts_per_page' => 3, //「表示設定」の値は get_option('posts_per_page')で取得可能
  'paged' => 1,
);
// WP_Query オブジェクトの生成
$my_posts = new WP_Query($args);
// 合計のページ数を取得
$max_num_pages = $my_posts->max_num_pages;
?>

<main>
  <!-- data-max-num-pages 属性を設定して合計のページ数を指定 -->
  <div class="entry-content" data-max-num-pages="<?php echo esc_attr($max_num_pages); ?>">
    <!-- サブループ -->
    <?php if ($my_posts->have_posts()) : ?>
      <div class="my-posts">
        <?php while ($my_posts->have_posts()) : $my_posts->the_post(); ?>
          <?php the_title('<h2><a href="'.esc_url( get_permalink() ).'">', '</a></h2>'); ?>
          <?php the_excerpt(); ?>
        <?php endwhile; ?>
        <?php wp_reset_postdata(); ?>
      </div>
      <!-- 合計のページ数が2以上の場合にボタンを表示 -->
      <?php if ($max_num_pages > 1) : ?>
        <button class="loadmore" type="button">Load More...</button>
      <?php endif; ?>
    <?php endif; ?>
  </div><!-- .entry-content -->
</main><!-- #main -->

<?php
get_sidebar();
get_footer();

function my_enqueue_load_more_ajax_scripts() {

  if(is_page('ajax')) {
    // AJAX を記述する JavaScript ファイルの登録
    wp_enqueue_script(
      'my-load-more-custom', // ハンドル名
      get_theme_file_uri('/js/load-more-custom.js'),
      array('jquery'), // jQuery を使わない場合は空の配列 array() を指定
      filemtime(get_theme_file_path('/js/load-more-custom.js')),
      true
    );

    // JavaScript に渡すデータ（リクエスト URL と nonce）を script タグに出力
    wp_add_inline_script(
      // データを渡す対象の JavaScript のハンドル名（上記で登録したハンドル名を指定）
      'my-load-more-custom',
      // 出力する値（変数 load_more_custom に格納）
      'const load_more_custom = ' . json_encode(array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'ajax_nonce' => wp_create_nonce('load-more-custom'),
      )),
      // script タグを対象のスクリプトの前に出力するための指定
      'before'
    );
  }
}
// wp_enqueue_scripts アクションに上記関数をフックして AJAX ファイルを登録及び変数を出力
add_action('wp_enqueue_scripts', 'my_enqueue_load_more_ajax_scripts');

// ページ番号の初期値
let paged = 2;

jQuery(function ($) {
  // カスタムデータ属性 data-max-num-pages が設定されている要素
  const entry_content = $('.entry-content');
  // data-max-num-pages の値（合計のページ数）を取得
  const max_num_pages = parseInt(entry_content.data('maxNumPages'));

  $('.loadmore').on('click', function () {
    const button = $(this);

    const data = {
      // アクション名
      action: 'load_more_custom',
      // nonce（キー名はデフォルト以外なので check_ajax_referer の第2引数に指定して検証）
      security_nonce: load_more_custom.ajax_nonce,
      // ページ番号
      paged: paged,
    };

    $.ajax({
      // リクエスト先
      url: load_more_custom.ajaxurl,
      data,
      type: 'POST',
      beforeSend: function () {
        // 読み込みが完了するまでボタンのテキストを変更
        button.text('Loading...');
      },
    })
    .done(function (response) {
      if (response) {
        // ボタンのテキストを戻す
        button.text('Load More...');
        // レスポンスを HTML に追加
        $('.my-posts').append(response);
        // ページ番号がページ数と同じ場合はボタンを削除
        if (paged === max_num_pages) {
          button.remove();
        }
        paged++;
      } else {
        // データがなければボタンを削除
        button.remove();
      }
    })
    .fail(function (error) {
      console.warn(`失敗: ${error.status} (${error.statusText})`);
    });
  });
});

let paged = 2;
const button = document.querySelector('.loadmore');
const my_posts = document.querySelector('.my-posts');
// data-max-num-pages の値（合計のページ数）を取得
const max_num_pages = parseInt(
  document.querySelector('.entry-content').dataset.maxNumPages
);

// リクエストを送信する前に実行する処理（jQuery の beforeSend に相当）
const beforeSend = () =>{
  button.textContent = 'Loading...';
}

button.addEventListener('click', ()=> {

  // 送信するデータ
  const data = {
    // アクション名
    action: 'load_more_custom',
    // nonce（キー名はデフォルト以外の値を指定）
    security_nonce: load_more_custom.ajax_nonce,
    // ページ番号
    paged: paged,
  };

  // ボタンのテキストを変更
  beforeSend();

  // 送信先に load_more_custom.ajaxurl を指定
  fetch(load_more_custom.ajaxurl, {
    // POST を指定
    method: 'POST',
    // データを URLSearchParams に変換してリクエストボディに指定
    body: new URLSearchParams(data)

  }).then((response) => {
    if(response.ok) {
      return response.text();
    } else {
      throw new Error(`失敗: ${response.status} ${response.statusText}`);
    }
  })
  .then((response) => {
    if (response) {
      // ボタンのテキストを戻す
      button.textContent = 'Load More...';
      // レスポンスを HTML に追加
      my_posts.insertAdjacentHTML('beforeend', response);
      // ページ番号がページ数と同じ場合はボタンを削除
      if (paged === max_num_pages) {
        button.remove();
      }
      paged++;
    } else {
      // データがなければボタンを削除
      button.remove();
    }
  })
  .catch((error) => {
    console.warn(error);
  });
});

function load_more_custom_callback() {
  // nonce の値を検証
  check_ajax_referer('load-more-custom', 'security_nonce');

  // 取得する投稿の条件を指定（テンプレートの条件と同じ）
  $args = array(
    'post_type' => 'post',
    'post_status' => 'publish', //公開状態の投稿のみを表示
    'posts_per_page' => 3, //または get_option('posts_per_page') テンプレートに合わせる
    'paged' => filter_input( INPUT_POST, 'paged', FILTER_VALIDATE_INT ),
  );

  // クエリオブジェクトを生成してループ
  $my_posts = new WP_Query( $args );
  ?>
  <?php if ( $my_posts->have_posts() ) : ?>
    <?php while ( $my_posts->have_posts() ) : $my_posts->the_post(); ?>
    <?php the_title('<h2><a href="'.esc_url(get_permalink()).'">','</a></h2>');?>
      <?php the_excerpt(); ?>
    <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>
  <?php endif; ?>
  <?php
  wp_die();
}
// AJAX アクションに登録
add_action('wp_ajax_load_more_custom', 'load_more_custom_callback');
add_action('wp_ajax_nopriv_load_more_custom', 'load_more_custom_callback');

function load_more_custom_callback() {

  check_ajax_referer('load-more-custom', 'security_nonce');

  $args = array(
    'post_type' => 'post',
    'post_status' => 'publish',
    'posts_per_page' => 3, // get_option('posts_per_page')
    'paged' => filter_input( INPUT_POST, 'paged', FILTER_VALIDATE_INT ),
  );

  $my_posts = new WP_Query( $args );

  if ( $my_posts->have_posts() ) {
    while ( $my_posts->have_posts() ) {
      $my_posts->the_post();
      the_title('<h2><a href="'.esc_url(get_permalink()).'">','</a></h2>');
      the_excerpt();
    }
    wp_reset_postdata();
    wp_die();
  }
}
add_action('wp_ajax_load_more_custom', 'load_more_custom_callback');
add_action('wp_ajax_nopriv_load_more_custom', 'load_more_custom_callback');

function load_more_custom_callback() {

  check_ajax_referer('load-more-custom', 'security_nonce');

  $args = array(
    'post_type' => 'post',
    'post_status' => 'publish',
    'posts_per_page' => 3, // get_option('posts_per_page')
    'paged' => filter_input( INPUT_POST, 'paged', FILTER_VALIDATE_INT ),
  );

  $my_posts = new WP_Query( $args );

  if ( $my_posts->have_posts() ) {
    // バッファリング開始（出力をせずバッファに保存）
    ob_start();
    while ( $my_posts->have_posts() ) {
      $my_posts->the_post();
      the_title('<h2><a href="'.esc_url(get_permalink()).'">','</a></h2>');
      the_excerpt();
    }
    wp_reset_postdata();
    // バッファの内容を変数に代入
    $output = ob_get_contents();
    // バッファの内容をクリアしてバッファリングを終了
    ob_end_clean();
    // 変数に代入したバッファの内容を出力（レスポンスを返す）
    echo $output;
    wp_die();
  }
}
add_action('wp_ajax_load_more_custom', 'load_more_custom_callback');
add_action('wp_ajax_nopriv_load_more_custom', 'load_more_custom_callback');

<ul>
  <?php
  for ($i = 1; $i <= $wp_query->max_num_pages; $i++) {
    echo '<li><a href="#" class="pagination" data-page="' . $i . '">'
      . $i . '</a></li>';
  }
  ?>
</ul>

<?php
  $args = array(
    'post_type' => 'post',
    'paged' => 1
  );
  $query = new WP_Query($args);
  // ページ総数を取得
  $max_pages = $query->max_num_pages;
  ?>
  <div class="post-container">
    <?php
    if ($query->have_posts()) :
      while ($query->have_posts()) : $query->the_post();
        the_title('<h2><a href="' . esc_url(get_permalink()) . '">', '</a></h2>');
        the_excerpt();
      endwhile;
    endif;
    wp_reset_postdata();
    ?>
  </div>
  <!-- ページ数が１より大きければページネーションを表示 -->
  <?php if ($max_pages > 1) : ?>
    <ul>
      <?php
      for ($i = 1; $i <= $max_pages; $i++) {
        echo '<li ><a href="#" class="pagination" data-page="' . $i . '">'
          . $i . '</a></li>';
      }
      ?>
    </ul>
  <?php endif; ?>
  

// AJAX ハンドラ
function load_paged_posts() {
  // nonce の値を検証を追加
  check_ajax_referer('my-ajax-nonce');
  // ページ番号を取得
  $paged = filter_input(INPUT_POST, 'page', FILTER_VALIDATE_INT);
  // 取得する投稿の条件（必要に応じて変更）
  $args = array(
    'post_type' => 'post',
    'post_status' => 'publish',
    'paged' => $paged
  );

  $query = new WP_Query($args);

  // 出力する HTML 文字列（レスポンス）の初期化
  $posts_html = '';

  // 出力をバッファ
  ob_start();

  if ($query->have_posts()) {
    while ($query->have_posts()) {
      $query->the_post();
      the_title('<h2><a href="' . esc_url(get_permalink()) . '">', '</a></h2>');
      the_excerpt();
    }
  }
  wp_reset_postdata();
  // 上記ループの出力を変数に代入
  $posts_html .= ob_get_clean();

  // レスポンスのデータ（ページ総数と出力の HTML）
  $return = array(
    'content' => $posts_html,
    'page' => $paged,
  );

  // レスポンスのデータを JSON に変換して出力
  wp_send_json($return);
}
add_action('wp_ajax_load_paged_posts', 'load_paged_posts');
add_action('wp_ajax_nopriv_load_paged_posts', 'load_paged_posts');

// AJAX の JavaScript ファイルを登録
function load_paged_scripts() {
  wp_enqueue_script(
    'ajax-pagination',
    get_template_directory_uri() . '/js/ajax-pagination.js',
    array(),
    filemtime(get_theme_file_path('/js/ajax-pagination.js')),
    true
  );
  wp_add_inline_script(
    'ajax-pagination',
    'const ajaxPagination = ' . json_encode(array(
      'ajaxurl' => admin_url('admin-ajax.php'),
      'ajax_nonce' => wp_create_nonce('my-ajax-nonce'),
    )),
    'before'
  );
}
add_action('wp_enqueue_scripts', 'load_paged_scripts');
  

(function () {
  // ページ番号の初期値
  let page = 1;
  // ロード中かどうか
  let loading = false;
  // 投稿一覧のコンテナ要素
  const postContainer = document.querySelector('.post-container');
  // ページネーションの全てのリンク
  const paginations = document.querySelectorAll('.pagination');

  // ボタンとコンテナがあれば
  if (postContainer && paginations.length > 0) {

    // リンクがクリックされるとそのページ番号の投稿を取得する関数
    function loadPagedPosts() {
      if (loading) {
        return;
      }
      // ロード中
      loading = true;
      // ロード中（loading...）と表示
      postContainer.insertAdjacentHTML('beforeend', 'loading...');

      // データを定義
      const data = {
        // アクション名
        action: 'load_paged_posts',
        // nonce（出力された値を参照）
        _ajax_nonce: ajaxPagination.ajax_nonce,
        // ページ番号
        page: page,
      };

      const xhr = new XMLHttpRequest();
      // responseType プロパティに 'json' を設定
      xhr.responseType = 'json';
      xhr.open('POST', ajaxPagination.ajaxurl, true);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          if (xhr.response) {
            // JSON として解析された受信データ（JSON オブジェクト）
            const data = xhr.response;
            // 投稿の一覧を取得したデータで置き換え
            postContainer.innerHTML = data.content;
            // ロード完了
            loading = false;
          } else {
            postContainer.textContent = 'Error !';
          }
        }
      };
      // データを URLSearchParams に変換してリクエストボディに指定
      xhr.send(new URLSearchParams(data));
    }

    // ページネーションのリンクの click イベント
    paginations.forEach((elem) => {
      elem.addEventListener('click', (e) => {
        // デフォルトの動作をキャンセル（リンク先に移動しない）
        e.preventDefault();
        // active クラスが指定されていれば何もしない
        if(elem.classList.contains('active')) {
          return;
        }
        paginations.forEach((el) => {
          // 一度全ての active クラスを削除
          el.classList.remove('active');
        });
        // 要素の data-page 属性からページ番号を取得して変数 page を更新
        page = parseInt(elem.dataset.page);
        // クリックされた要素に active クラスを追加
        elem.classList.add('active');
        // 投稿を取得
        loadPagedPosts();
      });
    });
  }
})();

<div class="post-container">
  <?php
  // メインループ
  if (have_posts()) :
    while (have_posts()) : the_post();
      the_title('<h2><a href="' . esc_url(get_permalink()) . '">', '</a></h2>');
      the_excerpt();
    endwhile;
  endif;
  wp_reset_postdata();
  ?>
</div>
<?php
  global $wp_query;
  if ($wp_query->max_num_pages > 1) :
?>
  <ul>
    <?php
    // $wp_query からページ総数を取得
    for ($i = 1; $i <= $wp_query->max_num_pages; $i++) {
      echo '<li><a href="#" class="pagination" data-page="' . $i . '">'
        . $i . '</a></li>';
    }
    ?>
  </ul>
<?php endif; ?>

function load_paged_posts() {
  check_ajax_referer('my-ajax-nonce');
  // 受信した$_POST['query']から不要なスラッシュを取り除きPHPの配列に変換
  $args = json_decode( wp_unslash( $_POST['query'] ), true );
  $paged = filter_input(INPUT_POST, 'page', FILTER_VALIDATE_INT);
  // ページ番号（paged）は上記で取得した値を指定
  $args['paged'] = $paged;
  // 投稿の状態（post_status）は公開されているもの（publish）を指定
  $args['post_status'] = 'publish';

  $query = new WP_Query($args);
  $posts_html = '';
  ob_start();
  if ($query->have_posts()) {
    while ($query->have_posts()) {
      $query->the_post();
      the_title('<h2><a href="' . esc_url(get_permalink()) . '">', '</a></h2>');
      the_excerpt();
    }
  }
  wp_reset_postdata();
  $posts_html .= ob_get_clean();
  $return = array(
    'content' => $posts_html,
    'page' => $paged,
  );
  wp_send_json($return);
}
add_action('wp_ajax_load_paged_posts', 'load_paged_posts');
add_action('wp_ajax_nopriv_load_paged_posts', 'load_paged_posts');

function load_paged_scripts() {
  // グローバル変数 $wp_query を使用するための宣言
  global $wp_query;

  wp_enqueue_script(
    'ajax-pagination',
    get_template_directory_uri() . '/js/ajax-pagination.js',
    array(),
    filemtime(get_theme_file_path('/js/ajax-pagination.js')),
    true
  );

  wp_add_inline_script(
    'ajax-pagination',
    'const ajaxPagination = ' . json_encode(array(
      'ajaxurl' => admin_url('admin-ajax.php'),
      'ajax_nonce' => wp_create_nonce('my-ajax-nonce'),
      // ページ（クエリ）の情報
      'query' => json_encode( $wp_query->query_vars ),
    )),
    'before'
  );
}
add_action('wp_enqueue_scripts', 'load_paged_scripts');

(function () {
  let page = 1;
  let loading = false;
  const postContainer = document.querySelector('.post-container');
  const paginations = document.querySelectorAll('.pagination');

  if (postContainer && paginations.length > 0) {

    function loadPagedPosts() {
      if (loading) {
        return;
      }
      loading = true;
      postContainer.insertAdjacentHTML('beforeend', 'loading...');

      const data = {
        action: 'load_paged_posts',
        _ajax_nonce: ajaxPagination.ajax_nonce,
        page: page,
        // クエリの情報
        query: ajaxPagination.posts,
      };

      const xhr = new XMLHttpRequest();
      xhr.responseType = 'json';
      xhr.open('POST', ajaxPagination.ajaxurl, true);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          if (xhr.response) {
            const data = xhr.response;
            postContainer.innerHTML = data.content;
            loading = false;

          } else {
            postContainer.textContent = 'Error !';
          }
        }
      };

      xhr.send(new URLSearchParams(data));
    }

    paginations.forEach((elem) => {
      elem.addEventListener('click', (e) => {
        e.preventDefault();
        if(elem.classList.contains('active')) {
          return;
        }
        paginations.forEach((el) => {
          el.classList.remove('active');
        });
        page = parseInt(elem.dataset.page);
        elem.classList.add('active');
        loadPagedPosts();
      });
    });
  }
})();