WordPress分类Ajax多选筛选功能异常及需求实现求助

我来帮你排查并解决这个问题~ 你的代码目前有两个核心问题：一是JS每次只传递了单个分类的slug，没有收集所有选中的分类；二是PHP端的参数接收逻辑和JS传递的不匹配，同时初始加载没有触发显示所有文章的逻辑。下面一步步来修正：

1. 修正JavaScript代码（收集所有选中分类，实现初始加载全量文章） #

原来的JS每次仅传递了当前点击的单个分类，我们需要改成收集所有选中的分类ID，同时添加页面初始加载时显示所有文章的逻辑：

if (document.querySelector('.js-filter')) {
    const ajaxUrl = document.querySelector(".js-filter").dataset.ajaxUrl;
    const filterForm = document.getElementById('filter');
    const containerTerm = document.querySelector(".js-container");

    // 加载所有文章的通用函数
    function loadPosts(filterParams) {
        const data = new FormData();
        data.append('action', 'filterpost');
        
        // 传入筛选参数
        if (filterParams.showAll) {
            data.append('show_all', '1');
        } else if (filterParams.selectedIds.length) {
            filterParams.selectedIds.forEach(id => {
                data.append('category_ids[]', id);
            });
        }

        fetch(ajaxUrl, {
            method: "POST",
            body: data
        })
        .then(response => response.text())
        .then(data => {
            if (data) {
                containerTerm.innerHTML = data;
            }
        })
        .catch(error => console.error('加载失败:', error));
    }

    // 页面初始化时自动显示所有文章
    window.addEventListener('DOMContentLoaded', () => {
        loadPosts({ showAll: true });
    });

    // 监听筛选框变化事件
    filterForm.addEventListener('change', function(e) {
        if (e.target.classList.contains('c-filter__check')) {
            // 收集所有选中的分类ID
            const selectedIds = Array.from(document.querySelectorAll('.c-filter__check:checked'))
                .map(checkbox => checkbox.name);
            
            loadPosts({
                showAll: selectedIds.length === 0,
                selectedIds: selectedIds
            });
        }
    });
}

2. 修正PHP AJAX处理函数（匹配参数传递逻辑，修复查询规则） #

原来的PHP接收逻辑和JS传递的参数不匹配，同时tax_query的结构有误，调整如下：

function site_filter_post() {
    $show_all = isset($_POST['show_all']) && $_POST['show_all'] === '1';
    $selected_ids = isset($_POST['category_ids']) && is_array($_POST['category_ids']) ? $_POST['category_ids'] : [];

    // 基础查询参数
    $args = array(
        'post_type'      => 'post',
        'posts_per_page' => -1,
        'post_status'    => 'publish',
        'orderby'        => 'date',
        'order'          => 'DESC' // 明确排序方向，更符合常规需求
    );

    // 非显示全量且有选中分类时，添加分类筛选条件
    if (!$show_all && !empty($selected_ids)) {
        // 将选中的ID转换为分类slug（或直接用ID查询，这里保持和原逻辑一致用slug）
        $selected_slugs = [];
        foreach ($selected_ids as $term_id) {
            $term = get_term((int)$term_id, 'category');
            if ($term && !is_wp_error($term)) {
                $selected_slugs[] = $term->slug;
            }
        }

        if (!empty($selected_slugs)) {
            $args['tax_query'] = array(
                array(
                    'taxonomy' => 'category',
                    'field'    => 'slug',
                    'terms'    => $selected_slugs,
                    'operator' => 'IN' // 多选时用IN，表示文章属于任意选中分类
                )
            );
        }
    }

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        while ($query->have_posts()) : $query->the_post();
            get_template_part('template-parts/content', 'archive');
        endwhile;
    } else {
        echo 'No result.';
    }

    wp_reset_postdata(); // 重置查询，避免影响全局变量
    exit;
}
add_action('wp_ajax_filterpost', 'site_filter_post');
add_action('wp_ajax_nopriv_filterpost', 'site_filter_post');

3. 可选小优化（让表单参数更规范） #

你可以把PHP表单里的input的name属性统一改成category_ids[]，这样收集参数更直观：

<input type="checkbox" class="c-filter__check" id="' . esc_attr($term_id) . '" name="category_ids[]" value="' . esc_attr($term_id) . '" />

对应JS里收集时就可以用checkbox.value替代checkbox.name，逻辑更清晰。

修改完成后测试一下：

• 页面加载后会自动显示所有文章
• 选中单个/多个分类，会只展示对应分类的文章
• 取消所有选中项，会重新显示所有文章

备注：内容来源于stack exchange，提问作者Mathieu Préaud