Web Design Leaves

function load_more_posts() {
  $paged = $_POST['page'];
  $args = array(
    'post_type' => 'post',
    'paged' => $paged
  );

  $query = new WP_Query($args);

  if ($query->have_posts()) :
    while ($query->have_posts()) : $query->the_post();
      // ポストの表示コードをここに追加する
    endwhile;
  endif;

  wp_reset_postdata();

  die();
}

add_action('wp_ajax_load_more_posts', 'load_more_posts');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');

jQuery(function($) {
  var page = 2;
  var loading = false;
  var endOfPosts = false;

  function loadPosts() {
    if (loading || endOfPosts) {
      return;
    }

    loading = true;

    $.ajax({
      url: ajaxurl,
      type: 'post',
      data: {
        action: 'load_more_posts',
        page: page
      },
      success: function(response) {
        if (response) {
          // レスポンスを解析し、ポストを追加するコードをここに追加する
          page++;
          loading = false;
        } else {
          endOfPosts = true;
        }
      }
    });
  }

  $(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 200) {
      loadPosts();
    }
  });
});

<div id="posts-container">
  <?php
  $args = array(
    'post_type' => 'post',
    'paged' => 1
  );

  $query = new WP_Query($args);

  if ($query->have_posts()) :
    while ($query->have_posts()) : $query->the_post();
      // ポストの表示コードをここに追加する
    endwhile;
  endif;

  wp_reset_postdata();
  ?>
</div>

<script src="<?php echo get_template_directory_uri(); ?>/js/theme.js"></script>

// AJAXコールバック関数
function load_more_posts() {
  $paged = $_POST['page'];
  $args = array(
    'post_type' => 'post',
    'post_status' => 'publish',
    'paged' => $paged
  );

  $query = new WP_Query($args);

  if ($query->have_posts()) {
    while ($query->have_posts()) {
      $query->the_post();
      // 投稿の表示コードをここに追加
      // 例: the_title(), the_content()など
    }
  }

  wp_reset_postdata();
  die();
}

// AJAXアクションの設定
add_action('wp_ajax_load_more_posts', 'load_more_posts');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');

// スクリプトのエンキュー
function load_custom_scripts() {
  wp_enqueue_script('infinite-scroll', get_template_directory_uri() . '/js/infinite-scroll.js', array('jquery'), '1.0', true);
  wp_localize_script('infinite-scroll', 'infiniteScroll', array(
    'ajaxurl' => admin_url('admin-ajax.php'),
    'noposts' => __('No more posts found', 'textdomain')
  ));
}
add_action('wp_enqueue_scripts', 'load_custom_scripts');

jQuery(function($){
  var page = 2;
  var loading = false;
  var finished = false;

  function loadPosts() {
    if(loading || finished) {
      return;
    }

    loading = true;
    $('.load-more-button').addClass('loading');

    $.ajax({
      url: infiniteScroll.ajaxurl,
      type: 'post',
      data: {
        action: 'load_more_posts',
        page: page
      },
      success: function(response) {
        if (response) {
          $('.post-container').append(response);
          page++;
          loading = false;
          $('.load-more-button').removeClass('loading');
        } else {
          finished = true;
          $('.load-more-button').addClass('hidden');
        }
      }
    });
  }

  $('.load-more-button').on('click', function(e){
    e.preventDefault();
    loadPosts();
  });

  $(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
      loadPosts();
    }
  });
});

// AJAXコールバック関数
function load_more_posts() {
  $paged = $_POST['page'];
  $args = array(
    'post_type' => 'post',
    'post_status' => 'publish',
    'paged' => $paged
  );

  $query = new WP_Query($args);

  if ($query->have_posts()) {
    while ($query->have_posts()) {
      $query->the_post();
      // 投稿の表示コードをここに追加
      // 例: the_title(), the_content()など
    }
  }

  wp_reset_postdata();
  die();
}

// AJAXアクションの設定
add_action('wp_ajax_load_more_posts', 'load_more_posts');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');

// スクリプトのエンキュー
function load_custom_scripts() {
    wp_enqueue_script('infinite-scroll', get_template_directory_uri() . '/js/infinite-scroll.js', array(), '1.0', true);
    wp_localize_script('infinite-scroll', 'infiniteScroll', array(
      'ajaxurl' => admin_url('admin-ajax.php'),
      'noposts' => __('No more posts found', 'textdomain')
    ));
}
add_action('wp_enqueue_scripts', 'load_custom_scripts');

(function() {
  var page = 2;
  var loading = false;
  var finished = false;
  var loadMoreButton = document.querySelector('.load-more-button');
  var postContainer = document.querySelector('.post-container');

  function loadPosts() {
    if (loading || finished) {
      return;
    }

    loading = true;
    loadMoreButton.classList.add('loading');

    var xhr = new XMLHttpRequest();
    xhr.open('POST', infiniteScroll.ajaxurl, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        if (xhr.responseText) {
          postContainer.insertAdjacentHTML('beforeend', xhr.responseText);
          page++;
          loading = false;
          loadMoreButton.classList.remove('loading');
        } else {
          finished = true;
          loadMoreButton.classList.add('hidden');
        }
      }
    };
    xhr.send('action=load_more_posts&page=' + page);
  }

  loadMoreButton.addEventListener('click', function(e) {
    e.preventDefault();
    loadPosts();
  });

  window.addEventListener('scroll', function() {
    if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight - 100) {
      loadPosts();
    }
  });
})();

// Infinite Scrollのための関数を作成
function wp_infinite_scroll_scripts() {
  // jQueryを登録
  wp_enqueue_script('jquery');

  // スクリプトファイルを登録
  wp_enqueue_script('infinite-scroll', get_template_directory_uri() . '/js/infinite-scroll.js', array('jquery'), '1.0', true);

  // スクリプトに渡すデータを設定
  $infinite_scroll_data = array(
    'ajax_url' => admin_url('admin-ajax.php'),
    'query_vars' => json_encode($GLOBALS['wp_query']->query)
  );
  wp_localize_script('infinite-scroll', 'infinite_scroll_data', $infinite_scroll_data);
  }
add_action('wp_enqueue_scripts', 'wp_infinite_scroll_scripts');

// ページを読み込むたびに呼び出される関数
function wp_infinite_scroll() {
  // クエリパラメータから取得
  $query_vars = json_decode(stripslashes($_POST['query_vars']), true);

  // クエリを作成
  $query = new WP_Query($query_vars);

  // ループ処理
  if ($query->have_posts()) {
      while ($query->have_posts()) {
        $query->the_post();
        // 投稿の表示
        get_template_part('content', get_post_format());
      }
  }

  // ポストデータのリセット
  wp_reset_postdata();

  // 終了処理
  die();
}
add_action('wp_ajax_wp_infinite_scroll', 'wp_infinite_scroll');
add_action('wp_ajax_nopriv_wp_infinite_scroll', 'wp_infinite_scroll');

jQuery(document).ready(function($) {
  var loading = false;
  var finished = false;
  var page = 2; // 最初のページ数

  function load_posts() {
    if (loading || finished) {
      return;
    }

    loading = true;

    $.ajax({
      url: infinite_scroll_data.ajax_url,
      type: 'post',
      data: {
        action: 'wp_infinite_scroll',
        query_vars: infinite_scroll_data.query_vars,
        page: page
      },
      success: function(response) {
        if (response.trim() === '') {
            // レスポンスが空の場合、すべての投稿を読み込んだとみなして終了
            finished = true;
        } else {
            // 投稿を追加
            $('.infinite-scroll-container').append(response);
            page++;
        }
        loading = false;
      },
      error: function() {
        loading = false;
      }
    });
  }

  // スクロール時の処理
  $(window).scroll(function() {
    var position = $(window).scrollTop();
    var bottom = $(document).height() - $(window).height();

    // 画面下部にスクロールした場合、投稿を読み込む
    if (position >= bottom * 0.8) {
      load_posts();
    }
  });

  // 初回読み込み時に投稿を読み込む
  load_posts();
});

<div class="infinite-scroll-container">
  <!-- 投稿が追加される要素 -->
  <?php
  // 投稿のループ処理
  if (have_posts()) {
    while (have_posts()) {
      the_post();
      // 投稿の表示
      get_template_part('content', get_post_format());
    }
  }
  ?>
</div>