JetSmartFiltersとJetEngineで物件検索を作る具体例

物件一覧ページをElementorだけで作ると、最初はきれいに見えます。けれども物件が20件、50件と増えてくると、読者は「自分に合うもの」を探せなくなります。家賃、エリア、間取り、駅徒歩のような条件があるのに、カードを上から順に眺めるだけではかなり不親切です。

今回作るのは、JetEngineで物件データを持たせ、JetSmartFiltersで価格・エリア・条件を絞り込める物件一覧です。完成形は、不動産サイトそのものというより、小規模な賃貸紹介ページや店舗物件一覧を想定します。Elementorで作った見た目はそのまま使いながら、WordPress側のデータを検索できる形に整理します。

大事なのは、絞り込み検索（JetSmartFilters）だけを先に触らないことです。検索できる一覧を作るには、先にJetEngine側で「検索に使えるデータ」を分けておく必要があります。

JetSmartFilters公式ページを見てみる

この記事で作るもの

• 物件データの箱（CPT）をJetEngineで作る考え方
• 価格、エリア、間取り、駅徒歩を入力項目として分ける設計
• Elementor上で物件カードと一覧表示を作る流れ
• JetSmartFiltersで価格帯・エリア・条件を絞り込む設定例
• 運用すると何が楽になるか、逆にどこから重くなるか

まず何を作るのか

例として、地域密着の不動産会社が「募集中の賃貸物件」を掲載するページを作ります。1件ずつElementorでカードを作るのではなく、WordPress管理画面で物件情報を登録し、その情報を一覧カードとして出します。

ページに置く絞り込み条件は、最初は次の4つで十分です。

ここで考えるべきなのは、検索UIの見た目より先に、絞り込みに使う項目を文章ではなく入力項目として持たせることです。「渋谷区、駅徒歩8分、10.2万円」と本文に書くだけでは、価格順に並べたり、条件で絞ったりしにくくなります。

JetEngineでどのデータを持たせるのか

JetEngineでは、物件を入れるデータの箱（CPT）を作ります。名前は分かりやすく property にします。管理画面上の表示名は「物件」で構いません。ここに、検索と表示に使う入力項目を分けて持たせます。

家賃を「8.5万円」と文字で入れたくなりますが、検索に使うなら数字の 85000 で持たせる方が扱いやすいです。表示するときだけ「85,000円」のように整えます。ここは少し地味ですが、後から効いてきます。

Elementor側ではどう表示するのか

Elementor側では、1件の物件を表示する一覧テンプレート（Listing Item）を作り、それを一覧表示（Listing Grid）に並べます。1件のカードには、画像、物件名、家賃、エリア、間取り、駅徒歩、詳細ページへのリンクを置きます。

カードの構成例は次の通りです。

• 上部: メイン画像（Dynamic Image）
• タイトル: 物件名
• 本文: 家賃、エリア、間取り、駅徒歩をDynamic Fieldで表示
• 状態: availability が「募集中」のときだけ表示するラベル
• リンク: 詳細ページへ進むボタン

静的なElementorカードと違うのは、カードの見た目を1回作れば、物件データが増えても同じ形で並ぶことです。家賃の修正も、カードを直接触るのではなく、物件データの家賃欄を直します。

絞り込み検索の置き方

物件カードの一覧ができたら、JetSmartFiltersで絞り込み検索を置きます。公式ページでも、JetSmartFiltersはWordPressやWooCommerceのコンテンツをフィルターできるプラグインとして案内されており、JetEngineの一覧と組み合わせて使う流れが現実的です。

今回のページでは、左側にフィルター、右側に物件一覧を置く2カラム構成にします。スマホではフィルターを上、一覧を下に積みます。

Providerは、フィルターがどの一覧を動かすかをつなぐ設定です。ここがずれると、フィルターを触っても物件カードが変わりません。複数の一覧が同じページにある場合は、どの一覧を対象にするかを特に確認してください。

Query Builderとの分担

JetSmartFiltersで読者が条件を選ぶ前に、そもそも一覧へ出すべき物件を絞っておくことがあります。たとえば、成約済み物件を基本的に出さない、公開日が古すぎる物件を出さない、特定エリアだけのページを作る、といった条件です。

この場合は、読者が触る条件をJetSmartFilters、サイト側で固定する条件をQuery Builderまたは一覧側のQuery設定で考えます。たとえば次のように分けます。

検索UIに全部を背負わせないのがポイントです。読者が選ぶ必要のない条件までチェックボックスにすると、画面が重くなり、何を選べばいいか分かりにくくなります。

運用すると何が楽になるのか

この構成にすると、物件の追加や修正が管理画面の入力作業になります。新しい物件を登録し、家賃やエリアを入力し、募集状態を「募集中」にすれば、一覧に反映されます。Elementorのカードをコピーして手作業で直す必要がありません。

運用面では、次のような違いが出ます。

• 家賃を変更すると、カード表示と検索条件の両方に反映しやすい
• 成約済みになった物件を一覧から外しやすい
• エリアページ、駅近物件ページなど、条件別の一覧を作りやすい
• 問い合わせ導線を物件ごとに統一できる

特に、同じ物件情報を複数ページに出す場合は効果が出やすいです。トップページには新着3件、物件一覧ページには全件、詳細ページには1件の情報という形にしても、元データは同じ物件投稿です。

任意の小さなJavaScript例

標準設定だけで物件検索ページは作れます。ここでは任意の拡張として、読者がフィルターを触ったことを計測用に記録する考え方を紹介します。これは検索結果を動かすための必須コードではありません。どの条件がよく使われるかを後で見たい場合だけ検討してください。

設置場所は、Elementor Custom Code、またはテーマ側で管理している共通JavaScriptです。サイトの計測設計に合わせて調整してください。

document.addEventListener('change', function (event) {
  const filter = event.target.closest('.jet-smart-filters');
  if (!filter || !window.dataLayer) {
    return;
  }

  window.dataLayer.push({
    event: 'property_filter_changed',
    filterName: event.target.name || 'unknown_filter'
  });
});

この例は、フィルターの値が変更されたら dataLayer にイベントを送るだけです。フォーム内容や個人情報は送らないようにしてください。計測用コードを入れる場合も、ステージング環境で動作を確認し、不要になったらすぐ無効化できる場所に置くのが安全です。

どこから複雑になりすぎるのか

物件検索は、条件を増やしたくなりやすい部分です。ペット可、楽器可、築年数、階数、方角、設備、学校区、路線、駅徒歩、初期費用。実際の不動産サイトでは必要になることもありますが、最初から全部入れると管理画面も検索画面も重くなります。

次の状態になったら、一度設計を止めて見直してください。

• 入力項目が多すぎて、管理者が毎回埋められない
• 検索条件が多く、スマホでフィルターが長すぎる
• 価格や駅徒歩を文字で入れてしまい、数値検索が安定しない
• 物件数が多くなり、表示速度や検索速度が気になる
• 会員限定物件や個人情報を、表示条件だけで隠そうとしている

JetEngineとJetSmartFiltersは、動的な一覧と絞り込み検索を作る助けになります。ただし、セキュリティ設計、個人情報管理、大規模検索の性能設計まで自動で代わりにやってくれるものではありません。会員向け物件や非公開情報を扱うなら、権限、公開範囲、キャッシュ、ログの扱いまで別途確認してください。

公開前に確認すること

公開前には、管理画面とフロント側の両方で確認します。管理画面では、家賃が数字で入っているか、エリアの選択肢に表記ゆれがないか、募集状態が空欄の物件がないかを見ます。フロント側では、エリアだけ、価格だけ、エリアと価格の組み合わせ、該当なしの状態を試します。

スマホでは、フィルターが縦に長くなりやすいです。最初は条件を4つ程度に絞り、よく使われる条件から上に置きます。チェック式が多い場合は、リセット導線も見える場所に置くと迷いにくくなります。

また、公式プラグインを使い、ライセンスとアップデートを保つことも大切です。古いプラグインや出所不明のファイルで不動産情報を扱うのは避けてください。

この構成が向いているケース

• 物件数が10件以上あり、条件で探せた方が親切なサイト
• Elementorのカードを手作業で増やす運用に限界があるサイト
• 家賃、エリア、間取りなどの条件が比較的はっきりしているサイト
• まずは小さな物件検索から始めたい制作者

逆に、物件が3件しかなく、内容もほとんど変わらないなら、静的なElementorカードで十分です。検索機能は便利ですが、データ入力とテストの手間も増えます。最初は「一覧を自動化したいほど物件が増えるのか」を確認してから導入する方が無理がありません。

まとめ

JetSmartFiltersとJetEngineを組み合わせると、Elementorで作った物件一覧に、エリア・家賃・間取りなどの絞り込み検索を加えられます。今回の例では、property という物件のデータの箱を作り、rent_price、area、floor_plan、availability を分けて持たせました。

運用面では、物件情報を管理画面で直せば一覧カードと検索条件に反映しやすくなります。一方で、条件を増やしすぎると入力も表示も重くなります。まずは小さな物件検索から作り、読者が実際に使う条件だけを残すのが現実的です。

JetSmartFilters公式ページを見てみる