本文约 4,183 字，预计阅读 11 分钟。文中命令与配置均经过实测，可直接参考执行。
引言：客户要”朝阳区两居、8000 以内、近地铁”，你的站只能按发布时间排
房产和租房站的用户行为高度一致：带着明确条件来，上来就要筛。区域、价格区间、户型、面积、朝向、是否近地铁、是否可短租——这些条件往往是组合的。如果你的站点只是一个房源列表按发布时间排序，客户翻两页就走了，去贝壳、链家找更顺手的筛选器。
自建房产站的价值在于特定场景：做海外房产、做某个城市的细分市场（如留学生公寓、长租公寓）、或者做自建房源的展示。这类站点不需要海量房源，但需要筛得准、图看得清、位置能定位。这三件事做好，几百套房源也能有不错的转化。
原理分析：筛选的实现方式与其代价
| 方案 | 实现方式 | 优点 | 代价 |
|---|---|---|---|
| URL 参数 + meta_query | PHP 服务端查询 | 可被搜索引擎收录、可分享链接 | 每筛一次刷新页面 |
| AJAX 筛选（FacetWP 等） | 前端请求接口 | 体验流畅，无刷新 | 部分组合页无 URL |
| 纯前端 JS 过滤 | 一次性加载全部 | 零请求 | 房源多时卡死 |
| 专业房产插件 | HivePress / WP Property | 自带字段、地图、搜索 | 配置成本高 |
推荐组合是：服务端 meta_query 做主筛选（保证 URL 可索引），再用 AJAX 做局部刷新提升体验。纯前端过滤只适合房源少于 50 套的极小站点。需要明确的是，筛选条件的组合页（如 /listing/beijing/2bed/）只要 URL 稳定，本身也是很好的 SEO 落地页。
保姆级实操
步骤 1：用成熟插件还是自建
如果需要地图、收藏、消息、付费发布一整套，用 HivePress（配 Geocoding 扩展）或 Easy Property Listings 更省事；如果只做自有房源展示，用 CPT UI + ACF 自建更可控。不要为了”以后可能要做”上来就选最重的方案。
步骤 2：房源字段设计
必备字段：price（NUMERIC，存纯数字不要带单位）、bedrooms、bathrooms、area（面积）、district（区域，用分类法而非字段，便于生成 URL）、lat / lng、featured（是否置顶）。注意：价格和面积必须存成数值型，存成 “8000元” 这样的字符串，排序和区间筛选全部失效。
步骤 3：写筛选表单
用 GET 方法提交，让筛选结果有独立 URL：
<form class="listing-filter" method="get" action="/listings/">
<select name="district">
<option value="">区域不限</option>
<option value="chaoyang">朝阳区</option>
<option value="haidian">海淀区</option>
</select>
<select name="bedrooms">
<option value="">户型不限</option>
<option value="1">一居</option>
<option value="2">两居</option>
<option value="3">三居及以上</option>
</select>
<input type="number" name="min_price" placeholder="最低价">
<input type="number" name="max_price" placeholder="最高价">
<button type="submit">筛选</button>
</form>
步骤 4：服务端组装 meta_query
在归档模板里读取参数，组装查询。注意对每个参数做类型转换，避免注入：
$meta = array( 'relation' => 'AND' );
if ( ! empty( $_GET['min_price'] ) ) {
$meta[] = array( 'key' => 'price', 'value' => (int) $_GET['min_price'], 'compare' => '>=', 'type' => 'NUMERIC' );
}
if ( ! empty( $_GET['max_price'] ) ) {
$meta[] = array( 'key' => 'price', 'value' => (int) $_GET['max_price'], 'compare' => '<=', 'type' => 'NUMERIC' );
}
if ( ! empty( $_GET['bedrooms'] ) ) {
$bed = (int) $_GET['bedrooms'];
$meta[] = array(
'key' => 'bedrooms',
'value' => $bed,
'compare' => ( $bed >= 3 ) ? '>=' : '=',
'type' => 'NUMERIC',
);
}
$args = array(
'post_type' => 'listing',
'posts_per_page' => 12,
'paged' => get_query_var( 'paged' ) ?: 1,
'meta_query' => $meta,
);
if ( ! empty( $_GET['district'] ) ) {
$args['tax_query'] = array( array(
'taxonomy' => 'district',
'field' => 'slug',
'terms' => sanitize_title( $_GET['district'] ),
) );
}
$q = new WP_Query( $args );
步骤 5：让我筛选条件能被索引
用 add_query_var 注册自定义参数，再配合 add_rewrite_rule 生成 /listings/beijing/2bed/ 这类静态路径。同时给筛选结果页设置规范链接（canonical），避免大量参数组合造成重复内容。
步骤 6：地图展示的两种取舍
方案 A：列表页右侧嵌入地图，房源标记随结果变化。体验最好，但每次筛选都要拉取标记数据，房源超过 200 套时应改为按区域聚合（只显示区域中心点+数量）。方案 B：只在详情页放单套房源地图，列表页不加载地图库，性能最优。中小站点建议先用 B。
步骤 7：房源详情页的信息结构
顺序建议：图集（首图优先加载）→ 价格/户型/面积核心参数 → 房源描述（分点写，不要一大段）→ 周边配套与交通 → 地图 → 经纪人联系方式 → 相似房源。图片统一裁剪成同一比例（4:3），避免列表页高度不一导致的布局跳动（CLS）。
常见踩坑
- 价格存成带单位的字符串：
"8000元/月"无法做数值比较，价格区间筛选直接失效，且排序按字符串比较会得出 “900 < 8000” 的荒谬结果。 - meta_query 不加
type => NUMERIC：默认值按字符比较，10 会排在 9 前面。 relation写错位置：多个条件必须放在同一个meta_query数组里，relation是它的键，写成两个独立的meta_query参数会互相覆盖。- 筛选页没有 canonical：参数组合爆炸会产生大量重复内容，拖累整站收录。
- 地图在列表页全量加载标记：500 个标记会让移动端卡死，必须做聚合或分页。
- 案例：某海外公寓站的”排序错乱”：价格字段存成
VARCHAR，客户按价格从低到高排序，结果 1200 排在 900 前面（字符串比较），客诉不断。改成NUMERIC并在meta_query显式声明type后恢复正常，同期咨询量提升约三成。 - 房源下架直接删除：URL 变成 404，已收录的页面全部失效，应该改成”已租出”状态并保留页面，同时推荐相似房源。
总结
房产站是否好用，用三个问题检验：客户能否用三个条件组合筛出结果、筛选结果页是否有可分享且可索引的 URL、列表页在手机上是否 3 秒内可交互。行动清单：先把价格和面积等数值字段改成 NUMERIC 存储，再用 GET 表单 + meta_query 做服务端筛选，然后给筛选结果配 canonical 和静态路径，最后按房源规模决定地图的接入方式。数据结构对了，筛选和地图都是水到渠成的事。展示类站点的结构化思路同样适用于 WordPress 作品集站搭建，地图与本地信息部分可参考 本地服务类站点搭建。
