WordPress分类页添加cat参数后AJAX加载更多代码返回空白如何修复

问题核心原因 #

1. 你用的是自定义分类法product-cat，get_query_var('cat')是WordPress默认文章分类的查询参数，拿不到自定义分类的ID，且自定义分类筛选不能用'cat' => $id的写法，必须用tax_query参数。
2. AJAX是独立的HTTP请求，不会自动继承当前分类页的查询参数，你只改了模板初始查询，AJAX回调里的查询没有加分类筛选，要么返回全量文章要么查不到内容返回空白。

修复步骤 #

1. 修改taxonomy-product-cat.php代码

正确获取当前自定义分类信息，同时把分类参数存入按钮属性供JS读取：

<div class="entry-content">
    <?php
    // 获取当前自定义分类页的分类信息
    $current_term = get_queried_object();
    $term_id = $current_term->term_id;
    $taxonomy = $current_term->taxonomy;

    $args = array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'posts_per_page' => '2',
        'paged' => 1,
        // 自定义分类筛选用tax_query
        'tax_query' => array(
            array(
                'taxonomy' => $taxonomy,
                'field' => 'term_id',
                'terms' => $term_id,
            )
        )
    );
    $blog_posts = new WP_Query( $args );
    ?>
 
    <?php if ( $blog_posts->have_posts() ) : ?>
        <div class="blog-posts">
            <?php while ( $blog_posts->have_posts() ) : $blog_posts->the_post(); ?>
                <h2><?php the_title(); ?></h2>
                <?php the_excerpt(); ?>
            <?php endwhile; ?>
        </div>
        <!-- 把分类参数存在按钮的data属性里 -->
        <div class="loadmore" data-term-id="<?php echo $term_id; ?>" data-taxonomy="<?php echo $taxonomy; ?>">Load More...</div>
    <?php endif; ?>
</div>

2. 修改AJAX JS代码

新增分类参数传递逻辑：

var page = 2;
jQuery(function($) {
    $('body').on('click', '.loadmore', function() {
        // 从按钮属性读取分类参数
        let term_id = $(this).data('term-id');
        let taxonomy = $(this).data('taxonomy');
        var data = {
            'action': 'load_posts_by_ajax',
            'page': page,
            'security': blog.security,
            'term_id': term_id,
            'taxonomy': taxonomy
        };
 
        $.post(blog.ajaxurl, data, function(response) {
            if($.trim(response) != '') {
                $('.blog-posts').append(response);
                page++;
            } else {
                $('.loadmore').hide();
            }
        });
    });
});

3. 修改AJAX回调函数

接收分类参数加入查询条件：

function load_posts_by_ajax_callback() {
    check_ajax_referer('load_more_posts', 'security');
    $paged = $_POST['page'];
    $term_id = isset($_POST['term_id']) ? intval($_POST['term_id']) : '';
    $taxonomy = isset($_POST['taxonomy']) ? sanitize_text_field($_POST['taxonomy']) : '';

    $args = array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'posts_per_page' => '2',
        'paged' => $paged,
    );

    // 存在分类参数时加入筛选
    if($term_id && $taxonomy) {
        $args['tax_query'] = array(
            array(
                'taxonomy' => $taxonomy,
                'field' => 'term_id',
                'terms' => $term_id,
            )
        );
    }

    $blog_posts = new WP_Query( $args );
    ?>
 
    <?php if ( $blog_posts->have_posts() ) : ?>
        <?php while ( $blog_posts->have_posts() ) : $blog_posts->the_post(); ?>
            <h2><?php the_title(); ?></h2>
            <?php the_excerpt(); ?>
        <?php endwhile; ?>
        <?php
    endif;
 
    wp_die();
}

修改后默认的archive分类页、自定义分类页都可以正常使用AJAX加载更多功能。

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