如何在所有文章加载完成后隐藏Load More按钮

要解决这个问题，核心是让前后端配合传递分页关键信息（当前页码、总页码），前端通过这些信息判断是否已加载完所有内容，从而隐藏按钮。以下是具体实现步骤：

1. 修改后端PHP代码（传递分页数据） #

原代码直接输出HTML，无法传递分页信息，我们需要改成返回结构化JSON数据，包含文章HTML、当前页码、总页码和是否还有更多内容的标记：

function load_more()
{
    $paged = isset($_POST['paged']) ? intval($_POST['paged']) : 1;
    $posts_per_page = 6;

    $query = new WP_Query([
        'post_type' => 'post',
        'posts_per_page' => $posts_per_page,
        'orderby' => 'date',
        'order' => 'DESC',
        'paged' => $paged,
    ]);

    $html = '';
    if ($query->have_posts()) {
        while ($query->have_posts()) : $query->the_post();
            $img_url = get_the_post_thumbnail_url(get_the_ID());
            $post_title = get_the_title();
            $post_author = get_the_author();
            $post_date = get_the_date('d F Y');
            $post_permalink = get_permalink();

            // 添加安全转义，避免XSS漏洞
            $html .= '<li>
              <a href="' . esc_url($post_permalink) . '">
                <div class="latest-news__image">
                <img src="' . esc_url($img_url) . '" alt="' . esc_attr($post_title) . '">
                </div>
                <h4>' . esc_html($post_title) . '</h4>
                 <div class="post-credentials">
                 <p class="post-author">By ' . esc_html($post_author) . '</p>
                 <p class="post-date">' . esc_html($post_date) . '</p>
                  </div>
               </a>
            </li> ';
        endwhile;
    }

    // 获取符合条件的总页数
    $total_pages = $query->max_num_pages;

    // 返回结构化JSON数据
    wp_send_json([
        'html' => $html,
        'current_page' => $paged,
        'total_pages' => $total_pages,
        'has_more' => $paged < $total_pages
    ]);
    exit;
}

add_action('wp_ajax_load_more', 'load_more');
add_action('wp_ajax_nopriv_load_more', 'load_more');

2. 修改前端JS代码（根据分页信息隐藏按钮） #

前端需要先获取总页数（从PHP模板传递），然后在AJAX回调中判断是否已加载完所有内容：

let currentPage = 1;
// 从页面模板传递总页数（需要在模板中添加对应代码，见步骤3）
const totalPages = <?php echo $total_pages; ?>;

jQuery(document).ready(function($) {
  const $loadMoreBtn = $('#load-more');
  
  // 初始化时判断：如果第一页就是最后一页，直接隐藏按钮
  if (currentPage >= totalPages) {
    $loadMoreBtn.hide();
  }

  $loadMoreBtn.on('click', function(e) {
    e.preventDefault();
    currentPage++;
    
    $.ajax({
      type: 'POST',
      url: '/wp-admin/admin-ajax.php',
      dataType: 'json',
      data: {
        action: 'load_more',
        paged: currentPage,
      },
      success: function(res) {
        // 追加加载的文章HTML
        if (res.html) {
          $('.news-dist').append(res.html);
        }
        
        // 判断是否还有更多内容，没有则隐藏按钮
        if (!res.has_more) {
          $loadMoreBtn.hide();
        }
      }
    });
  });
});

3. 在页面模板中传递总页数 #

在渲染第一页文章的模板文件（比如archive.php或home.php）中，添加代码计算总页数并传递给JS：

<?php
// 第一页的查询逻辑，和后端保持一致
$posts_per_page = 6;
$initial_query = new WP_Query([
    'post_type' => 'post',
    'posts_per_page' => $posts_per_page,
    'orderby' => 'date',
    'order' => 'DESC',
    'paged' => 1,
]);
// 获取总页数
$total_pages = $initial_query->max_num_pages;
?>

<!-- 把总页数传递给JS -->
<script>
const totalPages = <?php echo $total_pages; ?>;
</script>

关键说明 #

• 原代码中dataType: 'json'但后端返回HTML，会导致JSON解析错误，修改后端返回JSON后才能正常工作
• 添加esc_url、esc_html等安全函数，避免XSS漏洞
• 初始化时判断按钮状态，避免第一页就是最后一页时按钮还显示的情况

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