[워드프레스] 플러그인 없이 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);