Avada テーマと Avada Builder プラグインを使ってディレクトリウェブサイトを開発する、わかりやすいガイドです：
- Avada テーマをインストールする
- GeoDirectoryをインストールして設定する
- Avada Builder を使ってディレクトリウェブサイトをデザインする
Avada テーマは、GeoDirectory プラグインおよび Avada Builder プラグインと組み合わせることで、柔軟なオンラインディレクトリを作成するのに最適な方法です。
この組み合わせにより、位置情報ベースの機能の簡単な追加、レイアウトのカスタマイズ、そしてユーザーフレンドリーな体験のための動的コンテンツの組み込みが可能になります。
ウェブ開発者やデザイナーが、特定の業界やより広いコミュニティのニーズに合わせた高品質なディレクトリウェブサイトを構築できます。
これを実現する方法の詳細を見ていきましょう。
このチュートリアルでは、以下を行います：
テーマとプラグインのインストール。
1. Avadaテーマをインストールする
Avadaは、柔軟性と強力な機能で知られる、汎用性が高く人気のWordPressテーマです。
これは多目的テーマであり、使いやすいドラッグ＆ドロップビルダーを使ってコーディング不要でさまざまなウェブサイトをデザイン・カスタマイズできます。
Avadaテーマを購入してその豊富な機能を確認するには、公式ThemeForestマーケットプレイスをご覧ください： Avadaテーマ購入リンク.
こちらの動画でAvadaテーマの設定方法をご確認いただけます。
2. GeoDirectoryをインストールする
からWordPressテーマを無効にします。最後に GeoDirectory.
に移動します プラグイン >> 新規追加でGeoDirectoryを検索してインストールしてください。これでプラグインのインストールは完了です。
3. GeoDirectory インストールウィザード
GeoDirectoryプラグインについては、セットアップウィザードを完了してGoogle Maps APIキーを設定し、いくつかのダミーリスティングをインポートしてください。
マップシステムの選択（Google Maps または OpenStreetMap）
ウィザードの最初のステップで、2つのマッピングシステムから選択できます：Google MapsとOpenStreetMaps（APIキーが不要です）。
このチュートリアルでは、OpenStreetMaps を選択します。
Google Mapsを選択する場合は、以下の追加手順を行ってください。
「キーを生成」ボタンをクリックして、この手順に従ってください ドキュメント の手順に従って有効な API キーを生成します。
主な手順は以下のとおりです：
- キーを有効にします。
- プロジェクトを新規作成するか、既存のプロジェクトを選択します。
- キーを取得します。
- 請求アカウントを有効化します。
- APIキーを制限します（自分のウェブサイトのURLからのみ使用できるように）
ポイント4について：これは必須項目です。ただし、月額200ドルのしきい値を超えた場合にのみ料金が発生します。
この無料クレジットは、99%のディレクトリにとって十分すぎるほどです。
デフォルトの都市を設定する
その後、デフォルトの場所を設定します。これはディレクトリが作成される都市です。
デフォルトの都市としてPhiladelphiaを設定します。
必要な場所をどこでも使用できます。
複数の都市にリスティングを追加する必要がある場合は、Location Manager アドオンが必要です。
追加機能を加える
このステップでは、UsersWP をインストールします。これは ユーザー登録・ログインプラグイン で、ユーザーがウェブサイトに登録してログインできるようにします。
これは、ユーザーがリスティングを追加・編集できるようにするために必要です。また、ユーザーが自分のリスティングやレビューなどを確認できるユーザープロフィールも作成されます。
さらに Ninja Forms もインストールします。これにより、すべてのリスティングにリスティングオーナーへ直接メールを送信するコンタクトフォームが追加されます。
AyeCode Connect はこのチュートリアルでは必須ではありません。主に、GeoDirectory のプレミアムアドオンを追加して WordPress ダッシュボードから直接インストールしたい場合に必要です。
ダミーデータを追加する
インストールウィザードを完了する最後のステップは、ダミーのリスティングを追加することです。これにより、後で必要に応じて編集できるリスティングカテゴリも追加されます。
サイドバーウィジェットとメニュー項目は今すぐ追加しません。後ほど設定します。
をデザインする Avada ディレクトリウェブサイト
テーマとプラグインのインストールおよびGeoDirectoryの初期設定が完了したので、 Avada のツール群を使ってディレクトリウェブサイトのデザインを始めましょう。
1. ウェブサイトのロゴをデザインする
まず最初に、ウェブサイト用のロゴを用意する必要があります。
ロゴの初版を作成するためにデザイナーに投資する必要はありません。
新しいディレクトリを始める際に犯しがちな最大のミスの一つは、製品市場適合性をテストする前に時間とお金をかけすぎることです。
Canva のようなアプリを使えば、5分でロゴをデザインできます。安価で、驚くほど高品質です。
MVP（実用最小限の製品）であれば、Canva でデザインしたロゴで十分すぎるほどです。
選べるロゴテンプレートは数多くあり、最初のロゴが理想通りに完璧でオリジナルでなくても問題ありません。
プロジェクトが軌道に乗れば、後から改善したり大幅に変更したりすることはいつでもできます。
平凡なロゴが、プロジェクト失敗の主な原因になることはありません。
2. Avada ディレクトリホームページのデザイン
新しいページを作成するか、WordPressがデフォルトで作成するサンプルページなどを使用できます。
「ページ」に移動し、サンプルページを編集して「ホーム」に名前を変更するか、新しいページを作成してください。
次に、 Appearance > カスタマイズ > ホームページの設定 に移動して、ホームページを選択してください。
ナビゲーションメニュー
ロゴを作成して追加したら、 Appearance > メニュー に移動し、メニューを作成します。
必要なリンクを追加し（左列から右列へ）して保存します。
で、選択したブランドの車のモデルを選択します。選択すると Menu Settings > 表示する場所 セクションで、「メイン ナビゲーション」オプションを確認できます。
必要に応じて、同じメニューをフッターに表示させたり、フッター用に別のメニューを作成したりすることができます。
この例では、ヘッダーナビゲーションメニューのみを使用します。
メインナビゲーションリンクを7つと、サブナビゲーションリンクをいくつか追加しました：
- ホーム
- 会社概要
- ブログ
- 場所と場所の追加
- プロフィール
- ログイン
- ログアウト
ログインリンク（UsersWP エンドポイントより）はログアウト中のユーザーにのみ表示され、ログアウト・アカウント・プロフィールのリンクはログイン中のユーザーにのみ表示されます。
ヘッダーレイアウトを作成する
では、Avada ビルダーを使ってサイトのヘッダーレイアウトを作成しましょう。
次に Avada > レイアウト に移動し、 グローバルレイアウト.
からヘッダーを選択します。 新しいレイアウトを作成 ボタン。
をクリックしてください。次に「ライブビルダー」ボタンをクリックしましょう。
すると Avada Builder ライブラリ が表示されます。
さまざまなセクション向けにあらかじめ用意されたテンプレートが多数表示されます。
この例では、 スタジオ セクションから、あらかじめ用意されたヘッダーレイアウトを選択します。
次に、あらかじめ用意されたヘッダーのロゴセクションをクリックして、ロゴを差し替えます。
We will set the 画像の最大幅 を 150px ロゴ設定から。
ヘッダーメニューから、サイトヘッダーに表示したいメニューを選択または変更します。
以下のスクリーンショットに示すように、スタイルと配置をいくつか変更します。
サイトヘッダーの準備が整いました。次はホームページのコンテンツに集中しましょう。
コンテンツ
次のページを編集します： ホーム ページをLive Builderで編集します。
以下の設定で空のコンテナを追加しましょう
内部コンテンツ幅: 100%
高さ: 最小高さ
最小高さ: 500
行の配置: ストレッチ
列の配置: 中央
列の均等配置: 中央
背景設定から画像を追加します。
背景位置: 中央・中央
背景の繰り返し: 繰り返しなし
背景サイズ: 中央
パターン: ドット
パターンカラー: rgba(0,0,0,0.41)
次に、画像の上に
テキスト: フィラデルフィアで最高のレストランを見つける
タイポグラフィ:
フォントファミリー: Inter
バリアント: Bolt 700
フォントサイズ: 42px
フォントカラー: #ffffff
次に、 GD > Search ブロックを追加し、デフォルト設定のままにします。
次に、 GD > Category ブロックを含む空のコンテナを追加しましょう。
デザインタイプ: アイコン左
行アイテム数: 4
次に、もう一つ GD > Listing ブロックを以下の設定で追加します。
並び替え: 最新
グリッド: 4
表示する投稿数: 8
次に、 以下の設定で空のコンテナを追加します。
内部コンテンツ幅: 幅100%
高さ: 自動
コンテンツの余白: 左右 0px
次に、 GD > Map をその中に追加します。
最後に、CTAセクションを追加します。空のコンテナを追加します。
見出しタグを追加します。
以下の設定で
配置: 左
HTML 見出しタグ: H3
次に、ボタンブロックを追加し、リンク先として リスティングを追加 ページ。
フッターレイアウトを作成する
最後に、ヘッダーセクションと同様の手順でグローバルフッターレイアウトを作成します。
この例では、あらかじめ用意されたフッターレイアウトを使用します。
このフッターレイアウトは自由にカスタマイズできます。ここではデフォルトのままにしておきます。
この最後のステップが完了すると、ホームページが完成します。
3. Avada ディレクトリウェブサイトのリスティングと検索ページのデザイン
次に、あらゆるディレクトリに欠かせない2つの重要なページをデザインする必要があります。
リスティングページ（一般アーカイブ、カテゴリー、タグ）と検索結果ページ。
GeoDirectory はデフォルトで一般的なレイアウトを使用してこれらのページを作成します。このチュートリアルでは、Avada Builder を使ってこれらのページのレイアウトを作成・カスタマイズします。
リストページと検索ページはほぼ同じ構成なので、一度作成してからもう一方のページにレイアウトをコピーするだけです。
リストページのレイアウトは、左側にリスト一覧、右側にリストの正確な位置を示すスティッキーマップを配置することに決めました。
これはとても簡単です。
リストページ
GeoDirectory > 設定 > 一般 > ページ に移動し、GD アーカイブページテンプレートの編集をクリックします
このページからすべてのコンテンツを削除します GD Archive ページテンプレート。
次に、Live Builder を使ってページを編集します。
上部と下部のコンテンツパディングを 0 にした空のコンテナを追加します。
次にカラムを内側に追加し、GD > ページタイトル をその中にドラッグします。
以下を設定しましょう
背景色: #f6f6f9
パディング: 50px 0px 50px 0px
コンテナリンクカラー: #efefef
次に、2カラムのコンテナを追加しましょう。
次に、左側のコンテナにはGDアーカイブページ関連のブロック（ GD > Loop Action, GD > Loop, GD > Loop Pagination、および GD > Search をトップに配置して、ユーザーがアーカイブページから検索できるようにします。
右のカラムには、 GD > Map ブロックをドラッグします。
マップを設定しましょう
高さ: 150vh
パディング: 30px 0px 30px 0px
設定はデフォルトのままにしておきます。
を追加します gd-loop-column クラスを左側のカラムに追加します。
テーマカスタマイザーに以下のCSSスニペットを追加します。
.gd-loop-column .fusion-column-wrapper{ overflow-y: scroll; padding-right: 17px; max-height: 960px; }
アーカイブページの準備が整いました。
検索ページのレイアウトを作成するには。
このレイアウトにグローバルヘッダーとフッターを割り当てます。
に移動します Avada > Layouts
これを追加して、このレイアウトを検索ページに割り当てます。
検索ページで検索コンテンツテンプレートを作成します
そして、すべてのセクションを GD > Archive ページからこの検索ページにコピーします。
これで検索ページテンプレートの準備が整いました。
4. Avada ディレクトリウェブサイトの単一リスティングページデザイン
次は詳細ページテンプレートを作成します。 GD Detail Avada Builder でページテンプレートを編集します。
空のコンテナを追加します。
内部コンテンツ幅: 幅100%
GD > 投稿画像ブロックを以下の設定で追加します。
画像の上限: 10
表示上限: 3
出力タイプ: スライダー
自動開始: 有効
で、選択したブランドの車のモデルを選択します。選択すると GD Details ページで必ず無効にしてください 最初のアイキャッチ画像を表示.
次に、以下のように2カラムレイアウトのコンテナを追加します。
では、左カラムに必要なすべての GD 詳細ページブロックをそれぞれ追加しましょう。
含まれる内容は次のとおりです GD > 投稿タイトル, GD > Single Taxonomies, GD > Single Tabs、および GD > Single Next Prev.
右カラムに GD > Author Action と GD > Output Location ブロックを追加します。
これで、リスティング詳細ページが完成しました。
プラグインにプレミアム機能を追加する Avada ディレクトリウェブサイト
ご希望であれば、次のようなプレミアム機能をディレクトリに追加することができます：
- 有料リスティング：GeoDirectory の Listing Price Manager アドオンを使用すると、リスティング申請に価格を設定できます。各価格帯ごとに、無料リスティングの画像枚数を制限しながら有料リスティングではより多くの画像を許可する機能や、タグ・カテゴリの数の増減、特定のカスタムフィールドの有効・無効の切り替え、説明文の長短設定といった機能を有効または無効にすることができます。
- Claim Listings：これはディレクトリの基本的な機能で、管理者がデータベースを作成し、ビジネスオーナーを招待して無料リスティングを管理させることができます。リスティングの申請プロセスでは、リスティングのオーナーシップを取得するために有料リスティングへのアップグレードを必須とする場合があります。
- Advertising: 広告の販売 は オンラインディレクトリを収益化するもう一つの方法です。トラフィックが多い場合は広告ネットワークを利用できます。そうでない場合は、ビジネスがウェブサイトの特定エリアにバナーを掲載したり、たとえばオーガニック検索結果の上部に広告としてリスティングを表示したりできるよう、広告を直接販売することもできます。
これらはほんの三つの例に過ぎません。しかし、 ディレクトリウェブサイトはオンラインで収益を得る多くの方法を提供しています.
手作りアイテムのグローバルマーケットプレイスを作成したり、イベントチケットや割引クーポンを販売したりすることができます。
初めての方は、こちらから始めましょう： ディレクトリウェブサイトの立ち上げ：初心者向けガイド.
この汎用チュートリアルは、あらゆるテーマやページビルダーに応用できます。
可能性は無限大です。