如何编写AJAX请求实现自定义文章类型Speakers的分类筛选

一、调整前端AJAX代码 #

先给每个分类项添加分类法标识（data-taxonomy属性，值为positions或countries），再修改JS代码同时传递分类法类型和术语slug：

// === AJAX
$('.cat-list_item').on('click', function() {
  $('.cat-list_item').removeClass('active');
  $(this).addClass('active');
  $.ajax({
    type: 'POST',
    url: '/wp-admin/admin-ajax.php',
    dataType: 'html',
    data: {
      action: 'filter_speakers',
      taxonomy: $(this).data('taxonomy'), // 传递分类法类型
      term_slug: $(this).data('slug')     // 传递选中的术语slug
    },
    success: function(res) {
      $('.speakers-list').html(res);
    }
  })
});

二、补全后端PHP查询逻辑 #

在functions.php中完善filter_speakers函数，通过WP_Query筛选对应分类的文章并输出卡片HTML：

// AJAX
function filter_speakers() {
    // 验证参数是否存在
    if (!isset($_POST['taxonomy']) || !isset($_POST['term_slug'])) {
        wp_die();
    }

    // 清理参数避免注入
    $taxonomy = sanitize_text_field($_POST['taxonomy']);
    $term_slug = sanitize_text_field($_POST['term_slug']);

    // 构建查询参数
    $args = array(
        'post_type' => 'speakers',
        'posts_per_page' => -1, // 显示所有符合条件的文章
        'tax_query' => array(
            array(
                'taxonomy' => $taxonomy,
                'field'    => 'slug',
                'terms'    => $term_slug,
            ),
        ),
    );

    $speakers_query = new WP_Query($args);

    // 循环输出文章卡片
    if ($speakers_query->have_posts()) {
        while ($speakers_query->have_posts()) {
            $speakers_query->the_post();
            // 替换成你的实际卡片HTML结构，示例如下：
            ?>
            <div class="speaker-card">
                <h3><?php the_title(); ?></h3>
                <?php if (has_post_thumbnail()) : ?>
                    <div class="speaker-thumb"><?php the_post_thumbnail(); ?></div>
                <?php endif; ?>
                <div class="speaker-info">
                    <span><?php echo get_the_term_list(get_the_ID(), 'positions', '', ', ', ''); ?></span>
                    <span><?php echo get_the_term_list(get_the_ID(), 'countries', '', ', ', ''); ?></span>
                </div>
                <div class="speaker-bio"><?php the_excerpt(); ?></div>
            </div>
            <?php
        }
        wp_reset_postdata();
    } else {
        // 无匹配内容时的提示
        echo '<p>暂无符合条件的演讲者</p>';
    }

    wp_die(); // 必须调用，结束AJAX请求
}
add_action('wp_ajax_filter_speakers', 'filter_speakers');
add_action('wp_ajax_nopriv_filter_speakers', 'filter_speakers');

三、分类项HTML示例 #

确保分类项包含data-taxonomy和data-slug属性：

<!-- 职位分类列表 -->
<div class="cat-list">
    <div class="cat-list_item active" data-taxonomy="positions" data-slug="ceo">CEO</div>
    <div class="cat-list_item" data-taxonomy="positions" data-slug="cto">CTO</div>
</div>

<!-- 国家分类列表 -->
<div class="cat-list">
    <div class="cat-list_item" data-taxonomy="countries" data-slug="china">中国</div>
    <div class="cat-list_item" data-taxonomy="countries" data-slug="usa">美国</div>
</div>

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