如何实现 AJAX 过滤“全部新闻”功能（含分类与年份双维度筛选）-php教程-PHP中文网

如何实现 AJAX 过滤“全部新闻”功能（含分类与年份双维度筛选）

本文详解如何在 wordpress 中通过 ajax 实现新闻列表的动态过滤，支持按自定义分类法（genres/years）筛选，并正确处理“全部新闻”点击逻辑——即当 data-slug 为空时，绕过 tax_query，返回所有新闻条目。

本文详解如何在 wordpress 中通过 ajax 实现新闻列表的动态过滤，支持按自定义分类法（genres/years）筛选，并正确处理“全部新闻”点击逻辑——即当 data-slug 为空时，绕过 tax_query，返回所有新闻条目。

在 WordPress 前端 AJAX 过滤开发中，“All News”按钮看似简单，实则关键：它需触发一次无分类约束的查询，而非传入空字符串导致 tax_query 错误匹配（如匹配 slug 为空的无效术语）。核心在于——动态构建 WP_Query 参数数组，仅在存在有效分类标识时才注入 tax_query。

以下为完整、健壮的实现方案：

✅ 前端 HTML 结构（关键点）

确保“All News”链接的 data-slug 为空字符串（已满足）：

<a class="filter-list_item active" href="javascript:void(0);" data-slug="">All News</a>

该值将被 jQuery 正确读取为 ""，后端可据此判断是否启用分类过滤。

AJAX技术—无刷新获取数据相关课件

下载

✅ 前端 AJAX 脚本（增强健壮性）

建议添加防重复提交与加载状态提示：

$('.filter-list_item').on('click', function(e) {
  e.preventDefault();

  const $this = $(this);
  const slug = $this.data('slug');

  // 更新 UI 状态
  $('.filter-list_item').removeClass('active');
  $this.addClass('active');

  // 显示加载态（可选）
  $('.news-list').html('<div class="loading">Loading...</div>');

  $.ajax({
    type: 'POST',
    url: '/wp-admin/admin-ajax.php',
    dataType: 'html',
    data: {
      action: 'filter_news',
      category: slug // 空字符串 "" 将被后端识别为“全部”
    },
    success: function(res) {
      $('.news-list').html(res);
    },
    error: function() {
      $('.news-list').html('<p class="error">Failed to load news.</p>');
    }
  });
});

✅ 后端 PHP 处理（function.php 中注册）

使用空合并操作符（?? ''）安全获取参数，并条件式组装查询参数——这是解决本问题的核心逻辑：

// 在 functions.php 中
add_action('wp_ajax_filter_news', 'handle_filter_news');
add_action('wp_ajax_nopriv_filter_news', 'handle_filter_news'); // 允许未登录用户访问

function handle_filter_news() {
  // 安全获取并清理输入
  $taxSlug = sanitize_key($_POST['category'] ?? '');

  // 构建基础查询参数
  $query_args = [
    'post_type'      => 'news',
    'posts_per_page' => -1,
    'post_status'    => 'publish',
    'no_found_rows'  => true // 提升性能：无需分页总数
  ];

  // 仅当有有效分类 slug 时，才添加 tax_query
  if (!empty($taxSlug)) {
    $query_args['tax_query'] = [
      'relation' => 'OR',
      [
        'taxonomy' => 'genres',
        'field'    => 'slug',
        'terms'    => $taxSlug
      ],
      [
        'taxonomy' => 'years',
        'field'    => 'slug',
        'terms'    => $taxSlug
      ]
    ];
  }

  $ajax_query = new WP_Query($query_args);

  if ($ajax_query->have_posts()) {
    while ($ajax_query->have_posts()) {
      $ajax_query->the_post();
      get_template_part('template-parts/content', 'news');
    }
    wp_reset_postdata();
  } else {
    echo '<p class="no-results">No news found.</p>';
  }

  wp_die(); // 必须调用，终止执行并返回正确响应
}