【Arkhe】絞り込み検索機能のある不動産サイトを作ってみた

初心者

Arkheで不動産サイトを作りたい
どんなプラグインを使えばいいの？
複数の条件で検索する機能はどうやって作るの？

そんな疑問に答えます。

無料WordPressテーマ「Arkhe」を使って、絞り込み検索機能付きの不動産サイトを作成しました。作成したデモサイトと、利用したプラグイン一覧を紹介します。

この記事を書いた人

• IT業界24年のベテラン エンジニア
• WordPressで企業サイトの構築しています
• 取り扱いWordPressテーマは300個オーバー

SWELLマニアの かんた です

【デモサイト】Arkheで作成した絞り込み検索機能付き不動産サイト

さっそくArkheで作成したデモサイトを紹介します。

賃貸物件を取り扱う不動産サイトをイメージして作成しました。不動産サイト定番の、複数条件で検索できる「絞り込み検索機能」も実装しています。

デモサイトの制作過程ではテーマ内のテンプレートを一切編集していません。

ArkheはWeb制作者向けのテーマ。PHPテンプレートに直接コードを加えることなく、独自カスタマイズができるのが特徴です。

不動産サイト制作に利用したプラグイン一覧

デモサイト制作に利用したプラグインの一覧です。

プラグインの一覧

絞り込み検索部分については、WordPressテーマLightning開発会社が販売しているVK Filter Search Proを利用しました。

コンテンツ部分は「Arkhe パターンライブラリ」を利用

Arkheパターンライブラリは公式運営のパターン配布サイトです。オシャレなパーツが公開されているので、パターンをコピーして自分のサイトに貼り付けるだけでかなりオシャレなデザインに仕上がります。

Arkheパターンライブラリは会員登録などめんどうな手続きが一切なく、基本無料で利用できます。一部パターンに限り、有料のArkhe Pro Pack利用者のみ利用できる仕組みです。

不動産物件の分類

絞り込み検索を使う場合に重要な物件の分類についてです。Custom Post Type UIプラグインを使い、次のカスタムタクソノミーで分類しています。

カスタムタクソノミー

物件の詳細情報はカスタムフィールド

Advanced Custom Fieldsプラグインで物件用に次のカスタムフィールドを作成しました。

カスタムフィールド

カスタムフィールドは投稿リストブロック、カテゴリーや検索結果ページなどアーカイブページに表示させています↓

家賃や築年数などの情報を一覧ページに表示させることで物件詳細ページに移動しなくても物件の概要を伝えることができます。

大手不動産サイトなんかだと定番のレイアウト構成。Arkheのテンプレート操作系のフックでカスタムフィールド以外にも、カスタムタクソノミーのタームなどを表示させることもできます。

カスタムフィールドを使うもう１つの理由は、理由は並び替えボタンによるソート用です。詳細は後ほど説明します。

検索結果ページにサイドバーを表示

Arkheの検索結果ページはデフォルトで1カラムです。サイドバーは表示されません。デモサイトでは全下層ページのサイドバーに絞り込み検索を表示させたかったので、arkhe_is_show_sidebarフックで検索結果ページにもサイドバーを表示しています。

function kanta_search_title() {
　　return '検索結果';
　}
add_filter( 'arkhe_search_title', 'kanta_search_title', );

検索結果ページの文言変更

検索結果のタイトルは標準で「検索したキーワード＋の検索結果」といった表記です。

キーワード検索を想定した作りになっていて、キーワード入力がないと次のように表示されます↓

キーワードが未入力の検索ページでは「の検索結果」と表示されます。ちょっと変ですよね？

デモサイトではキーワード検索を使いませんので、「検索結果」に変更しました。検索結果の文言部分はarkhe_search_titleフックで書き換えることができます。

function kanta_search_title() {
　　return '検索結果';
　　}
add_filter( 'arkhe_search_title', 'kanta_search_title', );

ヘッダーに電話番号

コーポレート系だと定番のデザインです。ヘッダー右上に、電話番号と問い合わせページへの導線を設置しました。

この部分はarkheの独自アクションフックarkhe_header_right_contentを使っています。その名の通り、ヘッダーの右側に要素を出力するアクションフックです。

ヘッダーにサブリンク

グロナビに入れるほどでもない下層ページへのリンクを、サブリンクとしてヘッダーに設置しました。Arkheの独自アクションフックarkhe_header_bar_contentでHTMLコードを出力しています。

並び替えボタン

不動産物件が一覧表示されるアーカイブページに、表示順をユーザーが変更できる並び替えボタンを設置しました。賃貸物件を取り扱っているサイトだと定番ですね？

デモサイトではカスタムフィールドで設定した「賃貸料」「最寄駅までの距離」「築年数」などで並び順を変更できるようカスタマイズしています。

カテゴリーのアーカイブページはarkhe_before_term_post_listフック、検索結果ページではarkhe_before_search_post_listフックでボタン部分のコードを出力しています。

「関連記事」のテキスト変更

記事テンプレート下部に表示される関連記事エリアのカスタマイズです。標準だと「関連記事」と表示されます。不動産サイトの場合はミスマッチな表現。

このテキスト部分はarkhe_related_area_titleフックで任意のテキストに変更できます。デモサイトでは「類似の物件」に変更しました。

function kanta_single_related_title() {
  return '類似の物件';
 }
add_filter( 'arkhe_related_area_title', 'kanta_single_related_title', );

関連記事にカスタムフィールドを表示

記事ページ下部に表示される関連記事エリアのカスタマイズです。物件にひもづいたカスタムフィールドを表示しています。

投稿リストブロックにカスタムフィールドを表示

トップページには投稿リストブロックで新着物件を表示しています。賃貸料などカスタムフィールドの値を表示しました。

かんた

投稿リストブロックにカスタムフィールドを表示する方法は次の記事で解説しています。

note（ノート）

【Arkhe】投稿リストブロックにACFのカスタムフィールドとタームを表示するカスタマイズ｜かんた🌊SWELLマニ… 無料WordPressテーマ「Arkhe」のカスタマイズメモです。 先日Arkheで賃貸物件を取り扱うデモサイトを制作しました。 【Arkhe】不動産デモサイト →デモサイトを開く トッ…

複数条件での絞り込み検索はプラグインを活用

賃貸料や部屋の広さなど、複数の条件で物件を検索するフォームはプラグインでの実装です。WordPress用の絞り込み検索プラグインをいくつか試したことがあるのですが、一番お気に入りのVK Filter Search Proを使いました。

デモサイトではメインビジュアルとサイドバーに検索フォームを設置しました。

標準のブロックウィジェットがあまり使いやすくないので、サイドバーの検索フォームは再利用パーツとして作成したものをウィジェットから指定しています↓

FAQ

Arkheでのサイト制作に関するFAQです。

まとめ

WordPressテーマ「Arkhe」で作成した不動産サイトを紹介しました。

ArkheはWeb制作者向けのテーマです。テーマはシンプルな構造になっており、コードレベルでのカスタマイズが得意な人にとってはかなり使いやすいと感じます。

WordPressテーマ定番のアクションフック、フィルターフックの他、テンプレートの出力を書き換えるテンプレート系のフックも用意されています。ボクは子テーマすら用意するのが面倒だと感じるタイプなので、テンプレート系フックは本当に嬉しい機能。WordPress全テーマに実装して欲しい。

かんた

ぜひArkheでの不動産サイト制作にチャレンジしてみてください。

プラグイン一覧

あわせて読みたい

【解決済み】VK Filter Search Proの検索結果ページはどんなデザイン？カスタマイズ方法ってあるの？ VK Filter Search Proの検索結果ページって、どんなデザインなの？自由にカスタマイズできるの？検索結果ページのサンプルを見てみたい。 そんな疑問に答えます。 絞り…