3个致命错误教你避开WordPress主题增加筛选的坑

网站做好了没人访问，这事儿我见过太多次，90%都是SEO没做对。今天咱们不聊高大上的SEO理论，就来实打实讲讲怎么在WordPress主题里增加筛选功能，不走弯路，不踩坑。

项目背景与需求

去年我接手了一个本地建材公司的官网项目，客户要求网站能支持产品筛选功能。他们原来的网站是用一个基础主题搭建的，虽然看起来还行，但用户搜索产品时只能靠关键词，效率低，转化也不高。

客户的需求很明确：产品页要支持按类型、价格区间、材质等条件筛选，同时不影响SEO。这个功能看起来简单，但真正实现起来，得考虑很多细节，比如代码结构、页面跳转逻辑，还有SEO优化的兼容性。

我一开始也想用现成的插件来解决，结果发现很多插件虽然功能强，但对SEO不友好，要么是URL结构混乱，要么是动态加载内容影响蜘蛛抓取。这时候就得自己动手了。

技术选型：为什么选WordPress + ACF + 自定义模板

WordPress本身是建站的首选平台，它的主题和插件生态非常成熟，开发效率高，而且支持各种自定义功能。但想要实现筛选功能，光靠默认的分类和标签是不够的，需要更灵活的字段支持。

所以我选择了 Advanced Custom Fields (ACF) 插件。这个插件能轻松添加自定义字段，比如价格区间、材质、用途等，非常适合我们的需求。而且ACF和WordPress的兼容性非常好，不会影响SEO。

除了ACF，我们还需要一个自定义模板来展示筛选后的结果。WordPress默认的分类页面模板不适合做这种多条件筛选，所以我新建了一个 archive-product.php 模板，用来展示筛选后的结果。

数据库方面，我们用的是 MySQL 8.0，支持高效的查询，特别是在做多条件筛选时，可以优化索引，提升响应速度。

核心实现：从添加字段到筛选逻辑

第一步：用ACF添加自定义字段

安装好ACF插件后，我们进入“自定义字段”管理界面，创建一个新的字段组，命名为“产品筛选字段”。

在这个字段组里，我们添加几个字段：

产品类型：选择字段，类型为“选择”，选项包括“瓷砖”、“木地板”、“涂料”等。
价格区间：数值字段，设置为“数字”，最小值和最大值分别设置为0和100000。
材质：选择字段，选项包括“大理石”、“木材”、“复合材料”等。
用途：文本字段，用户可以输入用途，比如“厨房地面”、“卧室墙面”等。

这些字段会自动出现在后台的产品编辑页面中，用户在发布产品时就能填写这些信息。

第二步：修改模板文件支持筛选

在主题目录下新建一个模板文件，比如 archive-product.php，然后在模板里添加一个表单，用来接收筛选条件：

<form method="GET" action="<?php echo esc_url(home_url('/products/')); ?>"><label for="product-type">产品类型:</label><select name="product-type" id="product-type"><option value="">全部</option><?php $terms = get_terms(array('taxonomy' => 'product_type','hide_empty' => false,));foreach ($terms as $term) {echo '<option value="' . esc_attr($term->slug) . '" ' . selected($_GET['product-type'], $term->slug, false) . '>' . esc_html($term->name) . '</option>';}?></select><label for="price-min">最低价格:</label><input type="number" name="price-min" id="price-min" value="<?php echo esc_attr($_GET['price-min'] ?? ''); ?>"><label for="price-max">最高价格:</label><input type="number" name="price-max" id="price-max" value="<?php echo esc_attr($_GET['price-max'] ?? ''); ?>"><input type="submit" value="筛选">
</form>

这段代码会生成一个带有产品类型、价格区间等筛选条件的表单，用户提交后会跳转到 /products/ 页面，并将筛选参数附加在URL上，比如：

/products/?product-type=tile&price-min=5000&price-max=10000

第三步：实现筛选逻辑

接下来，我们需要在模板中获取这些参数，并根据它们来筛选产品。

$args = array('post_type' => 'product','posts_per_page' => -1,
);if (!empty($_GET['product-type'])) {$args['tax_query'] = array(array('taxonomy' => 'product_type','field' => 'slug','terms' => sanitize_text_field($_GET['product-type']),),);
}if (!empty($_GET['price-min'])) {$args['meta_query'][] = array('key' => 'price','value' => sanitize_text_field($_GET['price-min']),'type' => 'numeric','compare' => '>=',);
}if (!empty($_GET['price-max'])) {$args['meta_query'][] = array('key' => 'price','value' => sanitize_text_field($_GET['price-max']),'type' => 'numeric','compare' => '<=',);
}$query = new WP_Query($args);

这段代码会根据用户选择的条件，动态构建查询参数，并使用 WP_Query 获取符合条件的产品。

第四步：优化URL结构

为了让SEO更友好，我们还需要优化URL结构。WordPress默认的URL结构是 /products/?product-type=tile&price-min=5000，这样不利于蜘蛛抓取和用户记忆。

所以，我们使用了 Rewrite Rules 插件，或者自定义重写规则，把筛选参数转换成更友好的形式，比如：

/products/tile/5000-10000

在 functions.php 中添加以下代码：

function custom_query_vars($vars) {$vars[] = 'product-type';$vars[] = 'price-min';$vars[] = 'price-max';return $vars;
}
add_filter('query_vars', 'custom_query_vars');function custom_rewrite_rules($rules) {$new_rules = array('products/([^/]+)/([^/]+)/([^/]+)?$' => 'index.php?post_type=product&product-type=$matches[1]&price-min=$matches[2]&price-max=$matches[3]',);return $new_rules + $rules;
}
add_filter('rewrite_rules_array', 'custom_rewrite_rules');

这样，当用户访问 /products/tile/5000-10000 时，会自动解析成对应的筛选参数。