WordPress通过Ajax实现agenda自定义文章无刷新分页开发求助

先明确现有代码的核心问题：

• 后端硬编码了offset和posts_per_page参数，没有接收前端传递的分页偏移值，且每页展示数量设置为3和你的需求4篇不符
• 前端未传递偏移量参数给后端，也没有处理偏移量的边界值（不能小于0、不能超过总文章数）
• 后端直接返回完整的WP_Post对象，冗余字段多，前端无法直接使用需要的业务字段（如标题、链接、摘要等）
• 前端成功回调没有遍历返回的文章列表生成DOM结构

1. 修正functions.php中的Ajax接口代码 #

新增接收offset参数，动态设置查询条件，返回预处理后的文章字段，新增总文章数字段方便前端做边界判断

add_action('wp_ajax_ajax_agenda', 'ajax_agenda');
add_action('wp_ajax_nopriv_ajax_agenda', 'ajax_agenda');
function ajax_agenda(){
  $final_array = array();
  // 接收前端传的偏移量，默认0
  $offset = isset($_POST['offset']) ? intval($_POST['offset']) : 0;
  $posts_per_page = 4; // 对应你要的每页4篇

  $args = array(
    'posts_per_page' => $posts_per_page,
    'offset' => $offset,
    'orderby' => 'post_date',
    'order' => 'DESC',
    'post_type' => 'agenda',
    'post_status' => 'publish'
  );
  $query = new WP_Query($args);
  $processed_posts = array();

  if($query->have_posts()){
    while($query->have_posts()) {
      $query->the_post();
      // 预处理前端需要的字段，可根据自己的需求增减
      $processed_posts[] = array(
        'title' => get_the_title(),
        'permalink' => get_permalink(),
        'excerpt' => get_the_excerpt(),
        'thumbnail' => get_the_post_thumbnail_url(get_the_ID(), 'medium'),
        'date' => get_the_date('Y-m-d')
      );
    }
    $final_array["success"] = true;
    $final_array["results"] = $processed_posts;
    $final_array["total"] = $query->found_posts; // 返回总文章数用于前端边界判断
  } else {
    $final_array["success"] = false;
  }
  wp_reset_postdata(); // 重置主循环查询，避免影响其他功能
  echo json_encode($final_array);
  die();
}

2. 修正front-page.php页面代码 #

初始化offset为0，页面加载时默认渲染第一页文章，给按钮加禁用状态标识

<section>
  <button type="button" name="button" id="btn_pre" disabled>-</button>
  <button type="button" name="button" id="btn_next">+</button>
  <div class="" id="result"></div>
  <!-- 初始化偏移量为0 -->
  <div class="" id="offset" style="display:none;">0</div>
</section>

3. 修正ajax.js逻辑代码 #

传递offset参数给后端，成功回调遍历文章列表生成DOM，更新offset值，处理按钮的禁用状态

jQuery(document).ready(function($){
  // 页面加载时先渲染第一页文章
  data_ajax(0);

  $("#btn_next").click(function(){
    var off = parseInt($('#offset').html());
    data_ajax(off + 4);
  })
  $("#btn_pre").click(function(){
    var off = parseInt($('#offset').html());
    data_ajax(off - 4);
  });

  function data_ajax(new_offset){
    $.ajax({
      url: ajaxObject.url,
      dataType: 'json',
      method: 'POST',
      data: {
        action : 'ajax_agenda',
        offset: new_offset // 传递偏移量给后端
      },
      success: function(res){
        if(res.success && res.results.length > 0){
          // 清空原有内容
          let html = '<h3>résultats</h3><ul class="post-list">';
          // 遍历文章生成DOM结构，可根据自己的样式需求调整
          res.results.forEach(post => {
            html += `
              <li class="post-item">
                <a href="${post.permalink}">
                  ${post.thumbnail ? `<img src="${post.thumbnail}" alt="${post.title}">` : ''}
                  <h4>${post.title}</h4>
                  <span class="post-date">${post.date}</span>
                  <p>${post.excerpt}</p>
                </a>
              </li>
            `;
          });
          html += '</ul>';
          $("#result").html(html);
          // 更新偏移量
          $('#offset').html(new_offset);
          // 处理按钮禁用状态
          $('#btn_pre').prop('disabled', new_offset <= 0);
          $('#btn_next').prop('disabled', (new_offset + 4) >= res.total);
        } else {
          $("#result").html('<h3>Pas de résultats</h3>');
        }
      },
      error: function(xhr, error, exception){
        console.log(xhr, error, exception);
        $("#result").html('<h3>Pas de résultats</h3>');
      }
    });
  }
});

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