实现无限滚动的问题

Question

我遇到了实现无限滚动的问题。我见过一些类似于我的问题，但没有找到解决方案。 我还试图在这个问题中实现解决方案：How to implement pagination on a custom WP_Query Ajax

Mainpage.php：

<div class="large-12 columns ">
    <ul class="products">
    <?php
        $postsPerPage = 4;
        // args
        $args = array(
            'post_type' => 'product',
            'posts_per_page' => $postsPerPage,
            'product_cat' => 'seating',
        );
        // get results
        $the_query = new WP_Query( $args );
        // The Loop
    ?>
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
    <?php wc_get_template_part( 'content', 'product' ); ?>
    <?php
        endwhile; 
        echo '<a id="more_posts" href="#">Load More</a>';
    ?>
    <?php wp_reset_query();  // Restore global post data stomped by the_post(). ?>
    </ul><!--/.products-->
</div>

在同一页的末尾：

<script type="text/javascript">

var ajaxUrl = "<?php echo admin_url('admin-ajax.php')?>";
var page = 1; // What page we are on.
var ppp = 4; // Post per page

$("#more_posts").on("click",function(){ // When btn is pressed.
    $("#more_posts").attr("disabled",true); // Disable the button, temp.
    $.post(ajaxUrl, {
        action:"more_post_ajax",
        offset: (page * ppp) + 1,
        ppp: ppp
    }).success(function(posts){
        page++;
        $(".name_of_posts_class").append(posts); // CHANGE THIS!
        $("#more_posts").attr("disabled",false);
    });

});
</script>