WP_Query在functions.php函数中无法显示分页的问题排查

嘿，我看你这段AJAX加载分类文章的代码功能正常，但分页出问题了——核心原因是AJAX请求里没传递分页参数，而且后端获取页码的方式在AJAX场景下也不对，毕竟AJAX是独立请求，get_query_var('paged')拿不到前端的页码值。下面一步步给你修复：

1. 修复后端AJAX函数的分页逻辑 #

首先把后端的$paged获取改成从POST请求里拿，同时要生成分页的HTML按钮，把分类ID和页码绑定到按钮上：

add_action( 'wp_ajax_nopriv_load-filter', 'prefix_load_cat_posts' );
add_action( 'wp_ajax_load-filter', 'prefix_load_cat_posts' );
function prefix_load_cat_posts () {
    global $post;
    // 安全获取POST参数，避免报错
    $cat_id = isset($_POST['cat']) ? sanitize_text_field($_POST['cat']) : '';
    $paged = isset($_POST['paged']) ? absint($_POST['paged']) : 1;
    
    $args = array(
        'cat' => $cat_id,
        'posts_per_page' => 6,
        'order' => 'DESC',
        'paged' => $paged, // 使用传递过来的页码
        'post_status' => 'publish' // 确保只取已发布的文章
    );
    
    $query = new WP_Query($args);
    
    if ($query->have_posts()) :
        // 输出文章列表
        while ($query->have_posts()) : $query->the_post();
            echo '<div class="post-item">';
            the_title('<h3 class="post-title">', '</h3>');
            the_excerpt();
            echo '</div>';
        endwhile;
        
        // 生成分页按钮（关键：把分类ID和页码存在按钮的data属性里）
        $total_pages = $query->max_num_pages;
        if ($total_pages > 1) {
            echo '<div class="pagination">';
            for ($i=1; $i<=$total_pages; $i++) {
                $active_class = ($i == $paged) ? 'active-page' : '';
                echo '<button class="page-btn ' . $active_class . '" data-cat="' . $cat_id . '" data-page="' . $i . '">' . $i . '</button>';
            }
            echo '</div>';
        }
    else :
        echo '<p class="no-posts">暂无相关文章</p>';
    endif;
    
    wp_reset_postdata();
    die(); // AJAX请求必须用die()结束，避免输出多余内容
}

2. 前端添加分页点击的AJAX交互 #

接下来要在JS里处理分页按钮的点击事件，把分类ID和页码传给后端，更新文章列表：

jQuery(document).ready(function($) {
    // 假设你的文章容器是.posts-container，根据实际情况修改
    const postsContainer = $('.posts-container');
    
    // 封装加载文章的函数
    function loadPosts(pageNum, catId) {
        $.ajax({
            url: ajax_object.ajaxurl, // 这个需要在后端本地化，下面会说
            type: 'POST',
            data: {
                action: 'load-filter', // 和后端的action名称对应
                cat: catId,
                paged: pageNum
            },
            beforeSend: function() {
                // 加载动画，可选
                postsContainer.addClass('loading').html('<div class="loading-spinner">加载中...</div>');
            },
            success: function(response) {
                postsContainer.removeClass('loading').html(response);
            },
            error: function() {
                postsContainer.removeClass('loading').html('<p>加载失败，请稍后重试</p>');
            }
        });
    }
    
    // 分页按钮点击事件（用事件委托，因为按钮是动态生成的）
    $(document).on('click', '.page-btn', function(e) {
        e.preventDefault();
        const targetPage = $(this).data('page');
        const targetCat = $(this).data('cat');
        loadPosts(targetPage, targetCat);
    });
    
    // 如果是通过分类切换触发加载（比如下拉框），也要调用这个函数，比如：
    // $('.category-select').on('change', function() {
    //     const selectedCat = $(this).val();
    //     loadPosts(1, selectedCat); // 切换分类后回到第一页
    // });
});

3. 补充：本地化AJAX地址 #

别忘了在functions.php里注册JS文件并本地化ajaxurl，否则前端拿不到正确的AJAX请求地址：

function enqueue_custom_ajax_scripts() {
    // 注册自定义JS文件，路径根据你的主题结构调整
    wp_enqueue_script('custom-ajax-script', get_template_directory_uri() . '/js/ajax-posts.js', array('jquery'), '1.0', true);
    // 本地化AJAX地址，传给前端
    wp_localize_script('custom-ajax-script', 'ajax_object', array(
        'ajaxurl' => admin_url('admin-ajax.php')
    ));
}
add_action('wp_enqueue_scripts', 'enqueue_custom_ajax_scripts');

这样修改后，分页按钮会根据总页数动态生成，点击不同页码时，AJAX会把对应的页码和分类ID传给后端，加载对应页面的文章，分页就能正常工作啦。

内容的提问来源于stack exchange，提问作者Francis Alvin Tan