[워드프레스] 플러그인 없이 Infinite Scroll 사용하기

<?php get_header(); ?>
 
<main id="main" class="postList<?php echo postListStyle() ?>">
    <div class="gutter-sizer"></div>
    <?php if ( have_posts() ) : 
    
    while ( have_posts() ) : the_post(); ?>
 
    <a class="link_post<?php echo checkNew(); ?>" href="<?php the_permalink() ?>">
        <div class="thumbnail_wrapepr">
            <img class="index_thumbnail" src="<?php
                if (has_post_thumbnail()) {
                    the_post_thumbnail_url('medium');
                }
                else {
                    echo get_template_directory_uri() . "/assets/images/noimg.png";
                } ?>" alt="<?php the_title(); ?>">
        </div>
        <div class="index_information">
            <div class="tit_post"><?php the_title(); ?></div>
            <time class="date"><?php echo timeFormat(); ?></time>
        </div>
    </a>
    
    <?php endwhile; 
    
    else: ?>
    <p class="center">죄송합니다. 아직 보여드릴 것이 없네요.</p>
    
    
    <?php endif; ?>
 
    <div id="loading"></div>
</main>
 
<div id="paging">
    <?php
      echo '<div class="paginate-links">';
        echo paginate_links( array(
        'prev_text' => __(''),
        'next_text' => __('')
        ) );
      echo '</div>';
    ?>
</div>
 
<?php get_footer(); ?>

#loading {
    display: none;
    position: absolute;
    bottom: 75px;
    left: 50%;
    width: 100px;
    height: 100px;
    background: url(assets/images/twice-loader-z.svg) center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: translateX(-50%);
    z-index: 300
}
 
#loading.reveal {
    display: block
}

const loading = document.getElementById("loading");
let isld, ispld;
 
function nextPage() {
  const next = document.querySelector(".next");
  if (null === next || isld === true || next.classList.contains("done")) return !1; // 로딩 하지 않아야 할 상황에 로딩하는 것 방지용
  const a = next.href,
      b = new XMLHttpRequest;
  let c;
  isld = true,
  loading.classList.add(reveal),
  b.open("GET", a),
  b.send(null),
  b.onreadystatechange = function () {
      4 === b.readyState && (
          c = new DOMParser().parseFromString(b.responseText, "text/html"),
          history.pushState(null, null, a),
          null === c.querySelector(".next") // 마지막 페이지인지 확인하기
          ? (
            next.classList.add("done"),
            next.removeAttribute("href")
          )
          : (
            next.href = c.querySelector(".next").href
          ),
          b.onload = function () {
              Array.from(c.querySelectorAll(".link_post")).forEach(a => {
                  a.classList.add("reveal"), main.append(a)
              }),
              loading.classList.remove(reveal), isld = false
          }
      )
  }
}
 
function prevPage() {
  const prev = document.querySelector(".prev");
  if (null === prev || ispld === true || prev.classList.contains("done")) return !1; // 로딩 하지 않아야 할 상황에 로딩하는 것 방지용
  const a = prev.href,
      b = new XMLHttpRequest;
  let c;
  ispld = true,
  loading.classList.add(reveal),
  b.open("GET", a),
  b.send(null),
  b.onreadystatechange = function () {
      4 === b.readyState && (
          c = new DOMParser().parseFromString(b.responseText, "text/html"),
          null === c.querySelector(".prev") // 첫 페이지인지 확인하기
          ? (
            prev.classList.add("done"),
            prev.removeAttribute("href")
          )
          : (
            prev.href = c.querySelector(".prev").href
          ),
          b.onload = function () {
              Array.from(c.querySelectorAll(".link_post")).reverse().forEach(a => { // 이전 페이지 글이니 Array 역순으로 정렬합니다
                  main.prepend(a)
              }),
              loading.classList.remove(reveal), ispld = false, prevPage() // 첫 페이지까지 로딩을 계속하는 재귀함수입니다
          }
      )
  }
}
 
function loadNext() {
  const b = document.querySelector(".next");
  null !== b && window.scrollY >= b.offsetTop - window.innerHeight && nextPage()
}
 
function loadPrev() {
  -1 !== location.href.indexOf("/page/") && prevPage()
}
 
loadPrev(),
window.addEventListener("scroll", loadNext)