如何在WordPress中实现带分类搜索的归档筛选页面？

你需要的右侧筛选、左侧展示结果、分类搜索、多维度分类筛选的需求，有两种成熟的实现路径：

方案一：使用现成插件（无代码基础推荐） #

不需要写任何代码，最快10分钟就能配置完成：

• FacetWP：高度匹配需求的付费筛选插件，后台可视化配置筛选规则，支持分类搜索、多分类联动筛选，筛选模块和结果模块都可以通过短代码独立调用，配合WordPress自带的列区块/页面编辑器的两列布局，直接把筛选短代码放到右侧列、结果短代码放到左侧列即可。
• Filter Everything：免费功能就覆盖基础需求，同样支持短代码拆分调用筛选模块和结果模块，自带分类搜索功能，后台配置规则后插入对应短代码到对应位置就能使用。

方案二：自定义代码实现（有开发能力推荐） #

完全自主可控，不需要依赖第三方插件，实现逻辑和关联WordPress的方法如下：

基础实现逻辑 #

1. 布局搭建：在需要添加筛选功能的页面用两列布局，右侧放置分类搜索框、各分类筛选选项组，左侧放置筛选结果列表容器。
2. 交互逻辑：前端监听筛选选项变更、搜索框输入事件，通过AJAX把筛选参数传递到WordPress后台，后台根据参数查询对应内容返回给前端渲染到左侧列表区域。

代码关联到WordPress的方法 #

• 单页面生效：直接在当前页面插入「自定义HTML」区块，把HTML结构、CSS样式、JS逻辑都写在区块内即可，不需要修改主题文件。
• 多页面/全局生效：把CSS样式添加到 WordPress后台「外观 - 自定义 - 额外CSS」中，JS代码和后台查询逻辑添加到当前主题的functions.php文件，或者用代码片段插件插入，避免主题更新后代码丢失。

核心代码示例 #

前端交互代码示例：

// 监听筛选变更和搜索事件
const filterItems = document.querySelectorAll('.filter-category input')
const searchInput = document.querySelector('.category-search-input')
const resultContainer = document.querySelector('.filter-result-container')

filterItems.forEach(el => el.addEventListener('change', getFilterResult))
searchInput.addEventListener('input', getFilterResult)

async function getFilterResult() {
  // 收集筛选参数
  const selectedCats = Array.from(filterItems).filter(el => el.checked).map(el => el.value)
  const searchKeyword = searchInput.value.trim()
  
  const formData = new FormData()
  formData.append('action', 'custom_filter_posts')
  formData.append('cats', selectedCats.join(','))
  formData.append('keyword', searchKeyword)

  // 发起AJAX请求
  const res = await fetch('/wp-admin/admin-ajax.php', {
    method: 'POST',
    body: formData
  })
  const html = await res.text()
  resultContainer.innerHTML = html
}

后台查询逻辑（添加到主题functions.php）：

// 注册AJAX处理接口
add_action('wp_ajax_custom_filter_posts', 'custom_filter_posts_handler');
add_action('wp_ajax_nopriv_custom_filter_posts', 'custom_filter_posts_handler');

function custom_filter_posts_handler() {
  $args = [
    'post_type' => 'post',
    'posts_per_page' => 12,
    'post_status' => 'publish'
  ];

  // 处理分类筛选参数
  if (!empty($_POST['cats'])) {
    $cat_ids = array_map('intval', explode(',', $_POST['cats']));
    $args['tax_query'][] = [
      'taxonomy' => 'category',
      'field' => 'term_id',
      'terms' => $cat_ids
    ];
  }

  // 处理分类搜索参数
  if (!empty($_POST['keyword'])) {
    $args['tax_query'][] = [
      'taxonomy' => 'category',
      'field' => 'name',
      'terms' => sanitize_text_field($_POST['keyword']),
      'operator' => 'LIKE'
    ];
  }

  // 输出查询结果
  $query = new WP_Query($args);
  if ($query->have_posts()) {
    while ($query->have_posts()) {
      $query->the_post();
      // 替换为你自己的文章卡片HTML结构
      echo '<div class="post-card"><h3>'.get_the_title().'</h3><p>'.get_the_excerpt().'</p></div>';
    }
  } else {
    echo '<p class="no-result">暂无匹配的内容</p>';
  }
  wp_reset_postdata();
  wp_die();
}

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