javascript - 如何阻止 Wordpress ajax 加载更多按钮不断重复加载最后两个帖子

Question

我在 Wordpress 中设置了一个 ajax 加载更多按钮。我如何检测到没有更多帖子可以调用并且不重新加载相同的帖子？单击时，它会反复抓取最后两个帖子并加载它们。当帖子 3、4、5 和 6 最初显示在页面上然后单击加载更多按钮时，我遇到了问题，它会调用帖子 3、2 和 1 而不仅仅是帖子 2 和 1。我添加了一个偏移量4。这似乎解决了这个问题，但如果我继续点击加载更多，它仍然会调用最后两个帖子。如果没有检测到更多帖子，还有没有办法隐藏按钮？

  // the pages post query                       
   <?php
    $args = array(
    'post_type' => 'financial-news',
    'post_status' =>  'publish',
    'posts_per_page' =>  '4',
    'orderby'   => 'post_date',
    'order'   =>  'DESC',
    'paged' => 1,
                        );                      
                     ?>

    <?php   $my_posts = new WP_Query( $args ); ?>                   
    <?php if ( $my_posts->have_posts() ) : ?>
    <?php   $wp_query = new WP_Query(); $wp_query->query( $args ); ?>


    <?php while ( $my_posts->have_posts() ) : $my_posts->the_post(); ?>

    <div class="blog-post-wrapper one-column">
    <div class="post-inner">

                                        <div class="article-image"><a href="<?php the_permalink(); ?>"><img src="<?php the_field('thumb_image'); ?>"/></a></div>
                                        <div class="article-copy  match-height">
                                            <span class="date"><?php the_time('F j, Y'); ?></span>
                                            <h1><a href="<?php the_permalink(); ?>"><?php the_title();  ?></a></h1>
                                            <p><?php echo wp_trim_words( get_the_content(), 25, '' ); ?></p>
                                            <p><a class="read_more" href="<?php the_permalink(); ?>">Read More</a></p>
                                        </div><!--article-copy-->   
                                </div>
                            </div><!--blog-post-wrapper-->  

                    <?php endwhile; ?>


                </div><!--blog-content-->   
                  <?php endif; ?>


        <?php  wp_reset_postdata(); // reset the query ?>



    <div class="center-link"><div class="loadmore btn orange-btn-outline">Load More</div></div>





// The jS for the load button

<script type="text/javascript">
var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
var page = 2;

jQuery(function($) {
    $('body').on('click', '.loadmore', function() {
        var post_type = 'financial-news';
         var posts_per_page = 3;
        var data = {
            'action': 'load_posts_by_ajax',
            'page': page,
            'security': '<?php echo wp_create_nonce("load_more_posts");  ?>',
            'type' : 'post',
            'post_type' : post_type,
            'posts_per_page': posts_per_page,

        };

        $.post(ajaxurl, data, function(response) {

         $('.blog-content').append(response);
     page++;
        });

    });
});

// the functions.php code to load the posts

// blog load more button
add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');
add_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');


function load_posts_by_ajax_callback() {    


        check_ajax_referer('load_more_posts', 'security');
        $paged = $_POST['page'];

        $post_type = $_POST['post_type'];
        $posts_per_page = $_POST['posts_per_page'];
        $lay_out = $_POST['lay_out'];

    $args = array(
    'post_type' => $post_type,
    'post_status' => 'publish',
    'orderby'         => 'post_date',
    'order'           => 'DESC',
    'posts_per_page' => $posts_per_page,
     'offset' => 4,
    'paged' => $paged,
);

$my_posts = new WP_Query( $args );
if ( $my_posts->have_posts() ) :
    ?>
    <?php while ( $my_posts->have_posts() ) : $my_posts->the_post(); ?>
            <div class="blog-post-wrapper" >
                <div <?php post_class('post-inner'); ?> id="post-<?php the_ID(); ?>">
                    <div class="article-image"><img src="<?php the_field('thumb_image'); ?>"/></div>
                    <div class="article-copy  match-height">
                            <span class="date"><?php the_time('F j, Y'); ?></span>
                            <h1><a href="<?php the_permalink(); ?>"><?php the_title();  ?></a></h1>
                        <p><?php echo wp_trim_words( get_the_content(), 25, '' ); ?></p>
                        <p><a class="read_more" href="<?php the_permalink(); ?>">Read More</a></p>
                        </div><!--article-copy-->   
                    </div>
        </div><!--blog-post-wrapper-->
    <?php endwhile; ?>
    <?php


endif;

wp_die();

}

标签： javascriptjqueryajaxwordpress