GeoDirectory と Avada で Airbnb 風の一覧ページを作成する

約6か月前にGeoDirectoryのV2をリリースし、デザインのカスタマイズがずっと簡単になると約束しました。

GeoDirectory V2はほとんどのページビルダーやテーマと互換性があり、すでに素晴らしいテンプレートデザインを実現できましたが、さらに細かく調整を重ねることで、さらに多くの素晴らしいことが可能になります。

まずAvadaとFusion Builderから始めることにしました。

現行バージョンのGeoDirectoryでは、次の操作が必要でした：

• Avadaに新しいウィジェットエリアを追加する
• デザインを完成させるために必要なGDウィジェットを追加する
• 最後に、Fusion Builderを通じてこれらのウィジェットエリアを使用する

CSSを組み合わせることでほぼ何でも実現できましたが、Fusion Builderのデフォルト要素でデザインをカスタマイズするほど直感的でも簡単でもありませんでした。

GeoDirectory Elements は Fusion Builder 内に表示されます

GeoDirectory の次のバージョン（ 2.0.0.68 (GitHub でベータ版を公開中）から、すべての GeoDirectory ウィジェット・ショートコード・ブロックが Fusion Builder のエレメントとしても利用できるようになります。

これによりデザインがずっと簡単になります。さっそく、 Airbnb のリスティング ページや検索結果ページに似たページを作成するチュートリアルに入りましょう。

Avada と GeoDirectory をインストール済みであることを前提に、私が実際に行った手順をご紹介します。

免責事項：GeoDirectory と Fusion Builder だけで Airbnb のようなページをデザインすることはできませんでした。数行の CSS を記述する必要がありました。新しいルールは合計 11 件で、アーカイブページテンプレート（リスティングページ）に 5 件、アーカイブアイテムページテンプレート（リスティングページ内の各リスティング）に 6 件です。

とはいえ、私は Avada の専門家ではありませんし、 オプションが非常に多いため、私がやったことは CSS をほとんど使わずに、あるいはまったく使わずに実現できるかもしれません。

その点は Fusion Builder の達人の方々にお任せします。私のカスタム CSS を回避する方法をご存知でしたら、下のコメントでお知らせください。チュートリアルを更新します。

1 必要なカスタムフィールドを作成する

まず、AirBnB が使用しているカスタムフィールドを Place > Settingsから追加しました。デザインの再現に必要なものだけに絞って時間を節約しましたが、すべてを実装することも可能です。

以下の項目用に 4 つのセレクトが必要でした：

• ゲスト
• ベッドルーム
• ベッド
• バスルーム

アメニティ用のマルチセクトが1つ（例）:

• キッチン
• プール
• エアコン

2 アーカイブページテンプレートの編集

いくつかのダミーリスティングを公開した後、新しいアーカイブページテンプレートが必要になりました。そのページを「Avada Listings 1」と名付け、 GeoDirectory の設定から新しいアーカイブページテンプレートとして割り当てました.

次に、ページを準備してスクリーン全体を使用できるようにする必要がありました。Avada のページをスクリーンの全幅で表示するオプションがあることは知っていましたが、それはサイト全体に影響するため、CSS を使って対応しました。

.geodir-archive #main .fusion-row {max-width:100%}
html:not(.avada-has-site-width-percent) .geodir-archive #main {padding:0} 
.geodir-archive #main  {padding:0}
.geodir-archive .post-content .fusion_builder_column_1_2.fusion-column-first > .fusion-column-wrapper {padding-left: 8% !important;}
.geodir-archive .avada-page-titlebar-wrapper {display:none}

上記の内容はシンプルです。ヘッダー下からフッター上のエリアをスクリーンの全幅で表示し、全体のパディングを削除して、リスティング一覧の左側にのみパディングを追加します。また、同様のページでは不要な Avada のタイトルバーも非表示にします。ページは次のような見た目になります:

これで Fusion Builder を使ってページを編集できます。フロントエンドとバックエンドの両方を使用できますが、フロントエンドのプレビューは100%正確ではないため、バックエンドビルダーを使用しました。

2カラムが必要で、右カラムには GD > Map 要素を追加し、左カラムには以下を追加します:

• GD > Search
• GD > Loop Actions
• GD > Loop
• GD > Loop Paging

調整が必要なオプションはマップのみで、高さを 85vh に設定する必要があります。スクロール時のマップ固定効果を実現するために、以下のプラグインを使用しました: Sticky Menu (or Anything!) on Scroll （作者：Mark Senff）

独自のカスタム JS を書くこともできましたが、このプラグインは軽量で、固定したい要素が1つだけであれば非常にうまく機能します。

正しく設定すると、フッターが表示されたときにマップも押し上げられます。

このプラグインのオプションとして、以下を設定しました：

• Sticky Element = .geodir-archive-map-wrap
• Push-up element = .fusion-footer

Push-up Element オプションは詳細設定から確認できます。

今のところ以上です。

ページはこのように表示されます：

3 アーカイブアイテムページテンプレートの編集

次に各リスティングのデザインをカスタマイズする必要があります。これはアーカイブアイテムページテンプレートを編集することで行えます。

新しいアーカイブアイテムページテンプレートを作成し、GD Archive Item-avada と名付けました。

Fusion Builder のバックエンドエディターで開き、以下の GD エレメントを追加しました：

• GD > archive item section を open left に設定
• GD > post images をスライドショーに設定
• GD > archive item section を close left に設定
• GD > archive item section を open right に設定
• GD > post meta（key="post_category"、show="value"）
• GD > post favorite（show="icon"、alignment="right"）
• GD > post title
• GD > post meta（key="how_many_guests"、show="value"、alignment="left"）
• GD > post meta（key="how_many_rooms"、show="value"、alignment="left"）
• GD > post meta with key=
• GD > post meta with key=
• GD > post meta with key=
• GD > post badge key=
• GD > post rating show=
• GD archive item section set as
  

4 カスタムCSSをさらに追加する

最後に、Airbnbのページのように見栄えよく整理するために、いくつかのCSSが必要でした：

.geodir-post-title, .geodir-post-rating {clear: left;}
.geodir-field-amenities li::after,.geodir-field-how_many_guests::after,.geodir-field-how_many_rooms::after,.geodir-field-how_many_beds::after {content:" - ";}
.geodir-field-amenities ul {margin:0;padding:0}
.geodir-field-amenities li:last-child::after {content:"";}
.geodir-field-amenities li {list-style: none;float: left;}
.gd-badge-meta {display: block;margin-left: 0;clear: both;}

上記のCSSは、まったく同じカスタムフィールドがある場合にのみ機能し、以下を行います：

• タイトルと評価の星の位置を調整する
• カスタムフィールド間に「 – 」区切り文字を追加する
• デフォルトでリストとして表示されるアメニティの複数選択を調整する
• 「NEW」バッジの位置を調整する

以上です。結果はこちらをご覧ください：

Airbnbと100%同じではないことはわかっていますが、2時間しかかかっておらず、Avadaの使い方もほとんど知らない状態でした。

GeoDirectoryとFusion Builderで可能なカスタマイズのレベルをお見せしたかったのです。

私たちにとってはかなり印象的ですが、もしそうでなければ、あなたにとって印象的と感じるものを教えていただけますか？

コメントを残していただければ、フィードバックをぜひ聞かせてください。

きっと誰かが質問するだろうと思うので、ここで直接お答えします。

価格付きのマーカーをどのように作成したか？それは簡単です。次のようなカテゴリを使用しました：

-アパート（親）
–100 – 200（サブ）
–200 – 300（サブ）

各価格帯のマーカーを Photopea.comでデザインし、各サブカテゴリ用のマーカーをアップロードしました。

リスティングを追加する際、価格付きマーカーがすべてのマップで使用されるよう、サブカテゴリをデフォルトカテゴリに設定しました。

このチュートリアルを楽しんでいただけたなら幸いです。

ご不明な点があれば、下のコメント欄でお気軽にお知らせください！