WordPress AJAX加载更多：按钮文本与状态无法自动切换问题

安全阿岳

2026-7-22

WordPress加载更多按钮：加载完最后一页后自动切换状态并禁用

我需要实现一个按钮功能：当WordPress查询无更多结果时，修改按钮文本并禁用该按钮。目前WordPress查询运行正常，$query->max_num_pages可返回总页数，加载更多功能也能正常工作，但按钮的文本切换逻辑始终失效，始终显示仍有更多页面可加载。

现有Ajax代码

var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
var page = 2;
jQuery(function($){
    // init isotope
    var $grid = $('.team-content');
    $grid.isotope({
      // options
      itemSelector: '.grid-item',
      layoutMode: 'fitRows',
      percentPosition: true,
      transitionDuration: '0s', 
      hiddenStyle: {
        opacity: 0
      },
      visibleStyle: {
        opacity: 1
      }
    });

    $('body').on('click', '.loadmore-team', function(e){

      var data = {
        'action': 'load_posts_by_ajax',
        'page': page,
        'security': "<?php echo wp_create_nonce('load_more_team'); ?>"
      };

      $.post(ajaxurl, data, function(response){
        if (response != '') {
          var $answer = $(response);

          //append items to grid
          $grid.append($answer)
          .isotope('appended', $answer);

          // layaout on imagesLoaded
          $grid.imagesLoaded(function(){
            $grid.isotope('layout');
          });
          page++;
        } else {
            alert(response)
          $('.loadmore-team').text("No more Post!");
          $('.loadmore-team').attr("disabled", true);
          $('.loadmore-team').css("borderColor", "gray");
          $('.loadmore-team').css("color", "gray");
        }
      });
      e.preventDefault();
    });
});

Functions.php中的加载更多逻辑

// load more function by ajax
add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_team');
add_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_team');

function load_posts_by_ajax_team(){
  check_ajax_referer('load_more_team', 'security');
  $paged= $_POST['page'];

  $args = array(

    'post_type' => 'team',
    'post_status' => 'publish',
    'posts_per_page' => 4,
    'paged' => $paged,
  );

  $my_posts = new WP_Query($args);

  if ($my_posts-> have_posts()) { ?>

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

        $termsArray = get_the_terms( $post->ID, "team-location" );
        $termsSlug = ""; //initialize the variable that will contain the terms
        foreach ( $termsArray as $term ) { // for each term
        $termsSlug .= $term->slug.' '; //create a string that has all the slugs
        }

         ?>
              <?php   get_template_part( 'template-parts/team', 'listing' ); ?>
    <?php  }
    ?>
<?php  }

wp_die();
}

页面初始查询代码

<?php
    $args = array(
        'post_type' => 'team',
        'posts_per_page' => 4,
        'paged' => get_query_var('paged', 1), //page number 1 on load
        'post_status' => 'publish',
    );

    $query = new WP_Query($args);

        while ($query->have_posts()) {
            $query->the_post();
            
            $termsArray = get_the_terms($post->ID, 'team-location');

            $termsSLug = "";
            foreach ($termsArray as $term) {
                $termsSLug .= $term->slug . ' ';
            }
?>
 <?php get_template_part('template-parts/team', 'listing'); ?>
<?php   }
    wp_reset_postdata();
?>  

</div>
 <?php if ($query->max_num_pages > 1) { ?>
              <div class="button_load_more ">
                        <a  class="btn btn-default button loadmore-team" href="#"><?php printf( __( 'Load more', 'bizniz-tools' )); ?></a>

              </div>
 <?php } ?>

编辑记录

首次点击按钮时response输出正常内容，第二次点击时无内容，符合仅多一页数据的预期。
修改判断逻辑为if (response.replace(/^\s*$/, "").length > 0)后，功能有所改善，但加载完最后一页后，按钮不会自动切换状态，需再点击一次才生效，希望避免这次额外点击。

解决方案

核心思路是提前判断是否到达最后一页，在加载完最后一批内容后直接修改按钮状态，无需等待空响应。

方案1：前端提前获取总页数

在页面初始查询的按钮输出部分，通过data属性传递总页数：

<?php if ($query->max_num_pages > 1) { ?>
<div class="button_load_more ">
    <a class="btn btn-default button loadmore-team" href="#" data-total-pages="<?php echo $query->max_num_pages; ?>">
        <?php printf( __( 'Load more', 'bizniz-tools' )); ?>
    </a>
</div>
<?php } ?>

修改Ajax代码，每次加载后判断当前页是否等于总页数：

var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
var page = 2;
// 获取总页数
var totalPages = parseInt($('.loadmore-team').data('total-pages'));

jQuery(function($){
    // init isotope 代码保留不变

    $('body').on('click', '.loadmore-team', function(e){
        var $btn = $(this); // 缓存按钮元素

        var data = {
            'action': 'load_posts_by_ajax',
            'page': page,
            'security': "<?php echo wp_create_nonce('load_more_team'); ?>"
        };

        $.post(ajaxurl, data, function(response){
            if (response.replace(/^\s*$/, "").length > 0) {
                var $answer = $(response);

                $grid.append($answer).isotope('appended', $answer);

                $grid.imagesLoaded(function(){
                    $grid.isotope('layout');
                });

                // 判断是否到达最后一页
                if (page === totalPages) {
                    $btn.text("No more Post!");
                    $btn.attr("disabled", true);
                    $btn.css({"borderColor": "gray", "color": "gray"});
                }
                page++;
            } else {
                // 兜底处理
                $btn.text("No more Post!");
                $btn.attr("disabled", true);
                $btn.css({"borderColor": "gray", "color": "gray"});
            }
        });
        e.preventDefault();
    });
});

方案2：后端返回分页状态（更安全）

如果有动态筛选场景或担心前端数据被篡改，可让后端返回包含内容和分页状态的JSON：

修改Functions.php中的函数：

function load_posts_by_ajax_team(){
    check_ajax_referer('load_more_team', 'security');
    $paged = $_POST['page'];

    $args = array(
        'post_type' => 'team',
        'post_status' => 'publish',
        'posts_per_page' => 4,
        'paged' => $paged,
    );

    $my_posts = new WP_Query($args);
    ob_start(); // 开启输出缓冲

    if ($my_posts->have_posts()) {
        while($my_posts->have_posts()){
            $my_posts->the_post();

            $termsArray = get_the_terms( $post->ID, "team-location" );
            $termsSlug = "";
            foreach ( $termsArray as $term ) {
                $termsSlug .= $term->slug.' ';
            }

            get_template_part( 'template-parts/team', 'listing' );
        }
    }

    $content = ob_get_clean(); // 获取缓冲内容
    // 返回JSON数据，包含内容和是否还有更多
    wp_send_json(array(
        'content' => $content,
        'has_more' => $paged < $my_posts->max_num_pages
    ));
}

修改Ajax代码处理JSON响应：

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

jQuery(function($){
    // init isotope 代码保留不变

    $('body').on('click', '.loadmore-team', function(e){
        var $btn = $(this);

        var data = {
            'action': 'load_posts_by_ajax',
            'page': page,
            'security': "<?php echo wp_create_nonce('load_more_team'); ?>"
        };

        $.post(ajaxurl, data, function(response){
            // 解析JSON
            var res = typeof response === 'object' ? response : JSON.parse(response);
            if (res.content.replace(/^\s*$/, "").length > 0) {
                var $answer = $(res.content);

                $grid.append($answer).isotope('appended', $answer);

                $grid.imagesLoaded(function(){
                    $grid.isotope('layout');
                });

                // 根据后端返回的状态判断
                if (!res.has_more) {
                    $btn.text("No more Post!");
                    $btn.attr("disabled", true);
                    $btn.css({"borderColor": "gray", "color": "gray"});
                }
                page++;
            } else {
                $btn.text("No more Post!");
                $btn.attr("disabled", true);
                $btn.css({"borderColor": "gray", "color": "gray"});
            }
        });
        e.preventDefault();
    });
});

内容的提问来源于stack exchange，提问作者Corre

WordPress AJAX加载更多：按钮文本与状态无法自动切换问题

现有Ajax代码 #

Functions.php中的加载更多逻辑 #

页面初始查询代码 #

编辑记录 #

解决方案 #

方案1：前端提前获取总页数 #

方案2：后端返回分页状态（更安全） #