AJAX请求分页失效排查：点击页码仅地址变更问题求助

嘿，我看了你的问题和代码片段，目前分页失效的核心原因有两个：一是你的WP_Query没有传入分页参数，导致不管地址栏怎么变，查询始终返回第一页内容；二是如果你想实现AJAX无刷新分页，还没处理链接的默认跳转行为和异步加载逻辑。咱们一步步来搞定：

1. 先让基础分页（非AJAX）正常工作 #

你已经获取了当前页码$ourCurrentPage = get_query_var('paged');，但没把它传给查询，这是最关键的遗漏。修改你的WP_Query代码：

<?php 
// 处理首页paged为0的情况，默认设为1
$ourCurrentPage = get_query_var('paged') ? get_query_var('paged') : 1; 

$aboutPosts = new WP_Query(array(
    'post_type' => 'tour',
    'post_status' => 'publish',
    'posts_per_page' => 3,
    'paged' => $ourCurrentPage, // 必须添加这个参数，让查询知道当前页码
)); 

if ($aboutPosts->have_posts()) :
    // 循环输出文章内容
    while ($aboutPosts->have_posts()) : $aboutPosts->the_post();
        // 这里放你的文章输出代码，比如标题、摘要、缩略图等
        echo '<h2>' . get_the_title() . '</h2>';
        echo '<div class="post-excerpt">' . get_the_excerpt() . '</div>';
    endwhile;

    // 输出分页链接，用WordPress自带的paginate_links函数
    echo paginate_links(array(
        'total'        => $aboutPosts->max_num_pages, // 总页数
        'current'      => $ourCurrentPage, // 当前页码
        'prev_text'    => '← 上一页',
        'next_text'    => '下一页 →',
        'class'        => 'pagination-links', // 给链接加个类，方便后续AJAX处理
    ));

    wp_reset_postdata(); // 必须重置查询，避免影响全局文章数据
endif;
?>

这一步做完后，点击页码应该能正常跳转并显示对应页面的内容了。如果还是不行，先检查var_dump($ourCurrentPage)和var_dump($aboutPosts->max_num_pages)的值是否正确，确认分页逻辑没问题。

2. 升级为AJAX无刷新分页 #

如果你的需求是点击页码不刷新整个页面，只更新文章内容，那还要做以下几步：

步骤1：给文章列表加个容器 #

把文章循环的内容包裹在一个固定类的容器里，方便后续AJAX替换内容：

<div class="tour-posts-container"> <!-- 新增这个容器 -->
    <?php while ($aboutPosts->have_posts()) : $aboutPosts->the_post(); ?>
        <!-- 你的文章内容 -->
        <h2><?php the_title(); ?></h2>
        <div><?php the_excerpt(); ?></div>
    <?php endwhile; ?>
</div>

步骤2：添加AJAX处理的JavaScript #

在主题的functions.php里添加这段代码，或者直接在page.php的底部插入（推荐前者，更规范）：

add_action('wp_footer', 'tour_ajax_pagination');
function tour_ajax_pagination() {
    // 只在目标页面加载这段JS，替换成你的页面slug或ID
    if (is_page('your-page-slug')) {
    ?>
    <script>
        jQuery(document).ready(function($) {
            // 监听分页链接点击的逻辑封装成函数，方便复用
            var handlePaginationClick = function(e) {
                e.preventDefault(); // 阻止默认跳转行为
                var pageUrl = $(this).attr('href');

                // 显示加载状态（可选）
                $('.tour-posts-container').addClass('loading').html('<p>加载中...</p>');

                // 异步请求目标页面
                $.ajax({
                    url: pageUrl,
                    type: 'GET',
                    success: function(response) {
                        // 从返回的HTML中提取文章容器的内容
                        var newPosts = $(response).find('.tour-posts-container').html();
                        // 替换当前容器的内容
                        $('.tour-posts-container').removeClass('loading').html(newPosts);
                        // 更新地址栏URL（保持URL和内容同步）
                        history.pushState(null, null, pageUrl);
                        // 重新绑定新的分页链接事件（因为内容被替换了）
                        $('.pagination-links a').off('click').on('click', handlePaginationClick);
                    },
                    error: function() {
                        $('.tour-posts-container').removeClass('loading').html('<p>加载失败，请重试</p>');
                    }
                });
            };

            // 绑定初始分页链接的点击事件
            $('.pagination-links a').on('click', handlePaginationClick);

            // 处理浏览器前进/后退按钮，保持内容与URL同步
            $(window).on('popstate', function() {
                $.ajax({
                    url: location.href,
                    type: 'GET',
                    success: function(response) {
                        var newPosts = $(response).find('.tour-posts-container').html();
                        $('.tour-posts-container').html(newPosts);
                    }
                });
            });
        });
    </script>
    <?php
    }
}

步骤3：可选的加载样式 #

可以加一点CSS美化加载状态：

.tour-posts-container.loading {
    opacity: 0.7;
    pointer-events: none;
    text-align: center;
}

常见坑点排查 #

• 确认get_query_var('paged')的值：首页的paged是0，所以必须用三元运算符默认设为1，否则查询会出错。
• 检查自定义文章类型tour的注册：确保没有设置'public' => false或者其他导致无法查询的参数。
• 如果分页链接显示不正常，检查$aboutPosts->max_num_pages是否正确：比如总共有7篇文章，每页3篇，这个值应该是3。

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