Web Design Leaves

<div id="content">
  <!-- 投稿を表示するループ処理 -->
  <?php
  $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
  $args = array(
    'post_type' => 'post',
    // 公開されている投稿のみを対象にする（追加）
    'post_status' => 'publish',
    // 表示設定の1ページに表示する最大投稿数を指定（変更）
    'posts_per_page' => get_option('posts_per_page'),
    'paged' => $paged,
  );
  $custom_query = new WP_Query($args);
  if ($custom_query->have_posts()) :
    while ($custom_query->have_posts()) : $custom_query->the_post();
      echo '<div class="post">';
      the_title('<h2><a href="' . esc_url(get_permalink()) . '">', '</a></h2>');
      the_excerpt();
      echo '</div>';
    endwhile;
    wp_reset_postdata();
  else :
    echo '<p>No posts found.</p>';
  endif;
  ?>
</div>

<!-- ページネーション -->
<div id="pagination">
  <?php
  echo paginate_links(array(
    'total' => $custom_query->max_num_pages,
    'current' => $paged,
  ));
  ?>
</div>

jQuery(document).ready(function ($) {
  let page = 1;

  // ページ番号を取得する関数
  function getPageNumberFromPermalink(permalink) {
    let pageNumber = null;
    // パーマリンクに含まれるページ番号を正規表現で抽出
    const regex = /\/page\/(\d+)\/?$|\?paged=(\d+)/;
    const matches = permalink.match(regex);
    if (matches && matches.length >= 2) {
      // 正規表現で抽出した部分を整数に変換
      pageNumber = parseInt(matches[1] || matches[2]);
    }
    return pageNumber;
  }

  // ページネーションのリンクをクリックした時の処理
  $("#pagination").on("click", "a", function (e) {
    e.preventDefault();

    // リンクの href からページ番号を取得
    page = getPageNumberFromPermalink($(this).attr("href"));
    // パーマリンクの設定が「基本」以外であれば以下でも OK
    //page = $(this).attr('href').split('/').filter(Boolean).pop();

    // 2ページ目で「前へ」とクリックした場合の対策
    if( !page || page === 'admin-ajax.php' ) page = 1;

    // Ajaxリクエストを実行
    $.ajax({
      url: customAjax.ajaxurl,
      type: "post",
      data: {
        action: "custom_ajax_handler",
        // AJAX ハンドラーの check_ajax_referer() の第2引数の値をキー名に
        security: customAjax.nonce,
        page: page,
      },
      success: function (response) {
        // レスポンスを JSON 形式からオブジェクトにパース
        const data = JSON.parse(response);
        // コンテンツを更新
        $("#content").html(data.content);
        // ページネーションを更新
        $("#pagination").html(data.pagination);
      },
      error: function () {
        // エラー時の処理
        console.log("Error occurred.");
      },
    });
  });
});

function getPageNumberFromPermalink(url) {
  // 末尾のスラッシュを削除
  url = url.replace(/\/$/, '');

  // URLからページ番号を抽出
  const matches = url.match(/\/(\d+)\/?$/);
  if (matches && matches[1]) {
    return parseInt(matches[1]);
  }

  // クエリパラメータの "paged" からページ番号を抽出
  const searchParams = new URL(url).searchParams;
  const paged = searchParams.get('paged');
  if (paged && !isNaN(paged)) {
    return parseInt(paged);
  }

  // ページ番号が見つからない場合はnullを返す
  return null;
}

page = $(this).attr('href').split('/').filter(Boolean).pop()

const arr = [...] // ここに対象の配列を定義

// Vanilla JavaScriptで.filter(Boolean)を実現する方法:
const filteredArr = arr.filter(item => Boolean(item));

document.addEventListener("DOMContentLoaded", function () {
  let page = 1;

  // ページ番号を取得する関数
  function getPageNumberFromPermalink(permalink) {
    let pageNumber = null;
    // パーマリンクに含まれるページ番号を正規表現で抽出
    const regex = /\/page\/(\d+)\/?$|\?paged=(\d+)/;
    const matches = permalink.match(regex);
    if (matches && matches.length >= 2) {
      // 正規表現で抽出した部分を整数に変換
      pageNumber = parseInt(matches[1] || matches[2]);
    }
    return pageNumber;
  }

  // ページネーションの各リンクの親要素
  const pagination = document.getElementById("pagination");
  // 投稿を表示する要素
  const content = document.getElementById("content");

  if (pagination) {
    // ページネーションのリンクをクリックした時の処理
    pagination.addEventListener("click", function (e) {
      e.preventDefault();

      // リンクの href からページ番号を取得
      const href = e.target.getAttribute("href");
      page = getPageNumberFromPermalink(href);

      // 2ページ目で「前へ」とクリックした場合の対策（page が null の場合）
      if (!page) page = 1;

      // オブジェクト形式のデータ（送信する際に URLSearchParams で変換）
      const data = {
        action: "custom_ajax_handler",
        security: customAjax.nonce,
        page: page,
      };

      // Ajaxリクエストを実行
      const xhr = new XMLHttpRequest();

      // responseType プロパティに 'json' を設定
      xhr.responseType = "json";

      xhr.open("POST", customAjax.ajaxurl);

      xhr.addEventListener("readystatechange", () => {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            // response で JSON オブジェクトを取得
            const data = xhr.response;
            // コンテンツを更新
            content.innerHTML = data.content;
            // ページネーションを更新
            pagination.innerHTML = data.pagination;
          } else {
            // エラー時の処理
            console.log(`失敗: ${xhr.status} (${xhr.statusText})`);
          }
        }
      });
      xhr.send(new URLSearchParams(data));
    });
  }
});

// スクリプトの登録・読み込み
function custom_enqueue_scripts() {
  wp_enqueue_script(
    'custom-ajax',
    get_template_directory_uri() . '/js/custom-ajax.js',
    array() ,  // 空の配列 array() を指定
    filemtime(get_theme_file_path('/js/custom-ajax.js')),
    true
  );

  wp_add_inline_script(
    'custom-ajax',
    'const customAjax = ' . json_encode(array(
      'ajaxurl' => admin_url('admin-ajax.php'),
      'nonce' => wp_create_nonce('custom-nonce'),
    )),
    'before'
  );
}
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');

document.addEventListener("DOMContentLoaded", function () {
  let page = 1;

  // ページ番号を取得する関数
  function getPageNumberFromPermalink(permalink) {
    let pageNumber = null;
    // パーマリンクに含まれるページ番号を正規表現で抽出
    const regex = /\/page\/(\d+)\/?$|\?paged=(\d+)/;
    const matches = permalink.match(regex);
    if (matches && matches.length >= 2) {
      // 正規表現で抽出した部分を整数に変換
      pageNumber = parseInt(matches[1] || matches[2]);
    }
    return pageNumber;
  }

  /* アニメーション */
  //アニメーション（スムーススクロール）の持続時間
  const duration = 300;
  //開始時刻を代入する変数（最初は未定義）
  let start;
  //スクロール先の Y 座標（ウィンドウの左上からの座標）
  let targetY;
  //現在の垂直（Y）方向のスクロール量（位置）
  let currentY;
  //イージング関数の定義
  const easeInQuad = (x) => {
    return x * x;
  };
  //スクロール先を調整する値（上部の固定メニューの高さなど必要に応じて）
  let offset = 80;
  //requestAnimationFrame() のコールバック関数
  const smoothScroll = (timestamp) => {
    if (start === undefined) {
      start = timestamp;
    }
    //経過時間
    const elapsed = start ? timestamp - start : 0;
    //進捗度を算出してイージングを適用
    const relativeProgress = easeInQuad(Math.min(1, elapsed / duration));
    //移動する量（targetY）に進捗度を適用して scrollTo のY座標へ指定する値を算出
    const scrollY = currentY + targetY * relativeProgress;
    //上記で算出した位置へスクロール（上部の固定メニューの高さ分を offset で調整）
    window.scrollTo(0, scrollY - offset);
    //進捗度が1未満の場合は自身を繰り返す
    if (relativeProgress < 1) {
      requestAnimationFrame(smoothScroll);
    }
  };

  // ページネーションの各リンクの親要素
  const pagination = document.getElementById("pagination");
  // 投稿を表示する要素
  const content = document.getElementById("content");

  if (pagination) {
    // ページネーションのリンクをクリックした時の処理
    pagination.addEventListener("click", function (e) {
      e.preventDefault();

      // リンクの href からページ番号を取得
      const href = e.target.getAttribute("href");
      page = getPageNumberFromPermalink(href);

      // 2ページ目で「前へ」とクリックした場合の対策（page が null の場合）
      if (!page) page = 1;

      // オブジェクト形式のデータ（送信する際に URLSearchParams で変換）
      const data = {
        action: "custom_ajax_handler",
        security: customAjax.nonce,
        page: page,
      };

      // Ajaxリクエストを実行
      const xhr = new XMLHttpRequest();

      // responseType プロパティに 'json' を設定
      xhr.responseType = "json";

      xhr.open("POST", customAjax.ajaxurl);

      xhr.addEventListener("readystatechange", () => {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            // response で JSON オブジェクトを取得
            const data = xhr.response;
            // コンテンツを更新
            content.innerHTML = data.content;
            // ページネーションを更新
            pagination.innerHTML = data.pagination;

            /* アニメーション */
            //開始時刻を初期化
            start = undefined;
            //対象（スクロール先）の要素の Y 座標（ウィンドウ座標）
            targetY = content.getBoundingClientRect().y;
            //現在の垂直方向にスクロールされている量
            currentY = window.scrollY;
            //関数を実行
            smoothScroll();
          } else {
            // エラー時の処理
            console.log(`失敗: ${xhr.status} (${xhr.statusText})`);
          }
        }
      });
      xhr.send(new URLSearchParams(data));
    });
  }
});