WordPress Ajax加载文章返回400 Bad Request错误求助

问题现状 #

自定义博客首页初始通过WP_Query加载3篇文章，滚动触发Ajax加载更多时，前端收到0响应，控制台显示XHR状态码400（Bad Request），该脚本在其他站点可正常运行。

核心问题与修复步骤 #

1. 缺少Ajax动作处理函数（最关键原因） #

前端Ajax请求指定了action: 'more_post_ajax'，但后台未注册对应的处理钩子，导致admin-ajax.php无法识别请求，返回默认的0和400错误。

修复方法：在主题的functions.php中添加以下代码

// 处理登录用户的Ajax请求
add_action('wp_ajax_more_post_ajax', 'load_more_posts_callback');
// 处理未登录用户的Ajax请求（必须添加，否则前台游客无法使用）
add_action('wp_ajax_nopriv_more_post_ajax', 'load_more_posts_callback');

function load_more_posts_callback() {
    // 验证请求合法性
    check_ajax_referer('load_more_nonce', 'security');

    $paged = isset($_POST['pageNumber']) ? intval($_POST['pageNumber']) : 1;
    $ppp = isset($_POST['ppp']) ? intval($_POST['ppp']) : 3;

    $args = array(
        'posts_per_page' => $ppp,
        'post_type'      => 'post',
        'orderby'        => 'date',
        'order'          => 'DESC',
        'paged'          => $paged,
        'post_status'    => 'publish'
    );

    $query = new WP_Query($args);

    if ($query->have_posts()) :
        while ($query->have_posts()) : $query->the_post(); ?>
            <li>
                <a class="link" href="<?php echo get_the_permalink(); ?>" rel="noopener noreferrer">
                    <img class="img" src="<?php the_post_thumbnail_url('full'); ?>" alt="" loading="lazy">
                    <div class="text">
                        <span><?php echo get_the_date('F j - Y'); ?></span> <span class="gray-dot__circle"></span> <span><?php echo gp_reading_time($post); ?> read</span>
                        <h3><?php echo get_the_title(); ?></h3>
                    </div>
                </a>
            </li>
        <?php endwhile;
        wp_reset_postdata();
    endif;

    wp_die(); // 必须终止输出，避免额外内容干扰
}

同时，在本地化脚本中添加nonce字段防止CSRF攻击：

if (is_page_template('blog.php')) {
    wp_register_script( 'loadmore-script', get_template_directory_uri() . '/js/loadmore.js', array( 'jquery' ), NULL, true);
    wp_enqueue_script( 'loadmore-script' );
    wp_localize_script('loadmore-script', 'blog_ajax', array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'noposts' => __('No older posts found', 'outstanding'),
        'nonce'   => wp_create_nonce('load_more_nonce') // 添加nonce验证字段
        )
    );
}

前端Ajax请求中携带nonce参数：

str = {
    action: 'more_post_ajax',
    pageNumber: pageNumber,
    ppp: ppp,
    security: blog_ajax.nonce // 新增nonce验证字段
};

2. jQuery选择器不匹配 #

前端代码中使用.banking-fintech__flexbox作为容器选择器，但博客页面中实际的文章列表容器是.flexbox，会导致滚动触发逻辑失效。

修复方法：将前端代码中所有.banking-fintech__flexbox替换为.flexbox

// 原触发条件代码
if ($(window).scrollTop() >= $('.banking-fintech__flexbox').offset().top + $('.banking-fintech__flexbox').outerHeight() - window.innerHeight) {
// 修复后
if ($(window).scrollTop() >= $('.flexbox').offset().top + $('.flexbox').outerHeight() - window.innerHeight) {

// 原追加内容代码
$(".banking-fintech__flexbox").append($data).delay(2000);
// 修复后
$(".flexbox").append($data).delay(2000);

3. max_page赋值位置不规范 #

博客页面中$max_page = $query->max_num_pages;写在while循环内部，会被重复赋值，虽不影响功能但不符合代码规范。

修复方法：将该语句移到循环外部

<?php 
$args2 = array(
    'posts_per_page' => 3,
    'post_type' => 'post',
    'orderby' => 'date',
    'order'   => 'DESC',
    'paged' => 1,
);

$query = new WP_Query($args2);
$max_page = $query->max_num_pages; // 移到循环外部定义
?>
<section class="mainblock">
    <!-- ... 其他代码 ... -->
    <?php if ($query->have_posts()): while($query->have_posts()): $query->the_post(); ?>
        <!-- ... 文章列表项 ... -->
    <?php endwhile;
    echo '<input type="hidden" id="max_page" name="max_page" value="'.$max_page.'" />';
    endif; ?>
</section>

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