GeoDirectory

Beaver Builderを使ったディレクトリウェブサイトの作成

Naveen Giri


Beaver BuilderテーマとBeaver Builderプラグインを使ってディレクトリウェブサイトを作成する方法について、わかりやすいガイドをご紹介します：

  1. Beaver Builderテーマをインストールする
  2. GeoDirectoryをインストールして設定する
  3. Beaver Builderプラグインをインストールする & Beaver Themer
  4. Design the Directory Website using the Beaver Builderプラグイン

The Beaver Builder Themeは、GeoDirectoryプラグインおよびBeaver Builderプラグインと組み合わせることで、柔軟なオンラインディレクトリを作成する優れた方法です。この組み合わせにより、位置情報ベースの機能の追加、レイアウトのカスタマイズ、そしてユーザーフレンドリーな体験のためのダイナミックコンテンツの組み込みが簡単に行えます。

このシステムにより、ウェブ開発者やデザイナーは、特定の業種やより広いコミュニティのニーズに応えた高品質なディレクトリウェブサイトを構築できます。
その具体的な手順を見ていきましょう。

このチュートリアルでは、以下を行います：

テーマとプラグインのインストール。

1. Beaver Builderテーマをインストールする

テーマをインストールする必要があります。このチュートリアルでは、 Beaver Builder テーマをインストールします。

https://www.wpbeaverbuilder.com にアクセスして、 Beaver Builder Pro プラグイン（Beaverテーマ＆を含む） Beaver Themer プラグインを使ってゼロから構築していきます。


これらの製品を マイアカウント ページ。

に移動します Appearance >> テーマ。

「新規追加」を選択し、BeaverテーマとChildテーマをインストールして、 Child Beaver テーマをインストールします。

2. インストールする Beaver Builder Pro & Beaver Themer プラグインを使ってディレクトリウェブサイトをデザインする


Beaver Builder ProとBeaver Themerは、ウェブサイトの構築とカスタマイズ体験を向上させるために設計された、強力なWordPressプラグインです。

に移動します プラグイン >> 新規追加 >> 「プラグインをアップロード」をクリック

プラグインのzipファイルをアップロードし、両方のプラグインを一つずつ有効化してください。

セットアップウィザードのすべてのステップをスキップできます。

3. GeoDirectoryをインストールする

からWordPressテーマを無効にします。最後に GeoDirectory.

に移動します プラグイン >> 新規追加でGeoDirectoryを検索してインストールしてください。これでプラグインのインストールは完了です。

GeoDirectoryプラグインをインストールする

4. GeoDirectoryインストールウィザード

GeoDirectoryプラグインについては、セットアップウィザードを完了してGoogle Maps APIキーを設定し、いくつかのダミーリスティングをインポートしてください。

マップシステムの選択（Google Maps または OpenStreetMap）

GeoDirectoryセットアップウィザード

ウィザードの最初のステップで、2つのマッピングシステムから選択できます：Google MapsとOpenStreetMaps（APIキーが不要です）。

このチュートリアルでは、OpenStreetMaps を選択します。

Google Mapsを選択する場合は、以下の追加手順を行ってください。

「キーを生成」ボタンをクリックして、この手順に従ってください ドキュメント の手順に従って有効な API キーを生成します。

主な手順は以下のとおりです：

  1. キーを有効にします。
  2. プロジェクトを新規作成するか、既存のプロジェクトを選択します。
  3. キーを取得します。
  4. 請求アカウントを有効化します。
  5. APIキーを制限します（自分のウェブサイトのURLからのみ使用できるように）

ポイント4について：これは必須項目です。ただし、月額200ドルのしきい値を超えた場合にのみ料金が発生します。

この無料クレジットは、99%のディレクトリにとって十分すぎるほどです。

デフォルトの都市を設定する

ディレクトリのデフォルト都市を設定する

その後、デフォルトの場所を設定します。これはディレクトリが作成される都市です。

デフォルトの都市としてPhiladelphiaを設定します。

必要な場所をどこでも使用できます。

複数の都市にリスティングを追加する必要がある場合は、Location Manager アドオンが必要です。

追加機能を加える

このステップでは、UsersWP をインストールします。これは ユーザー登録・ログインプラグイン で、ユーザーがウェブサイトに登録してログインできるようにします。

これは、ユーザーがリスティングを追加・編集できるようにするために必要です。また、ユーザーが自分のリスティングやレビューなどを確認できるユーザープロフィールも作成されます。

さらに Ninja Forms もインストールします。これにより、すべてのリスティングにリスティングオーナーへ直接メールを送信するコンタクトフォームが追加されます。

AyeCode Connect はこのチュートリアルでは必須ではありません。主に、GeoDirectory のプレミアムアドオンを追加して WordPress ダッシュボードから直接インストールしたい場合に必要です。

ダミーデータを追加する

GeoDirectory ダミーリスティング

インストールウィザードを完了する最後のステップは、ダミーのリスティングを追加することです。これにより、後で必要に応じて編集できるリスティングカテゴリも追加されます。

サイドバーウィジェットとメニュー項目は今すぐ追加しません。後ほど設定します。

をデザインする Beaver Builder ディレクトリウェブサイト

テーマとプラグインのインストールおよびGeoDirectoryの初期設定が完了したので、 Beaver Builder のツール群を使ってディレクトリウェブサイトのデザインを始めましょう。

まず最初に、ウェブサイト用のロゴを用意する必要があります。

ロゴの初版を作成するためにデザイナーに投資する必要はありません。

新しいディレクトリを始める際に犯しがちな最大のミスの一つは、製品市場適合性をテストする前に時間とお金をかけすぎることです。

Canva のようなアプリを使えば、5分でロゴをデザインできます。安価で、驚くほど高品質です。

Canva.comを使って最初のロゴの下書きを作成しましょう。

MVP（実用最小限の製品）であれば、Canva でデザインしたロゴで十分すぎるほどです。

選べるロゴテンプレートは数多くあり、最初のロゴが理想通りに完璧でオリジナルでなくても問題ありません。

プロジェクトが軌道に乗れば、後から改善したり大幅に変更したりすることはいつでもできます。

平凡なロゴが、プロジェクト失敗の主な原因になることはありません。

2. Beaver Builder ディレクトリホームページのデザイン

新しいページを作成するか、WordPressがデフォルトで作成するサンプルページなどを使用できます。

「ページ」に移動し、サンプルページを編集して「ホーム」に名前を変更するか、新しいページを作成してください。

次に、 Appearance > カスタマイズ > ホームページの設定 に移動して、ホームページを選択してください。

ホームページのセットアップ

次に、外観 >> カスタマイズ >> ヘッダー >> ヘッダーロゴ からロゴを設定します
設定します。 ロゴタイプ： ヘッダーとロゴ画像のアップロード。

ロゴ画像をアップロード

ナビゲーションメニュー

ロゴを作成して追加したら、 Appearance > メニュー に移動し、メニューを作成します。

ディレクトリナビゲーションメニュー

必要なリンクを追加し（左列から右列へ）して保存します。

で、選択したブランドの車のモデルを選択します。選択すると Menu Settings > の「表示場所」セクション、「メイン」オプションを確認できます。

必要に応じて、同じメニューをフッターに表示させたり、フッター用に別のメニューを作成したりすることができます。

この例では、ヘッダーナビゲーションメニューのみを使用します。

メインナビゲーションリンクを7つと、サブナビゲーションリンクをいくつか追加しました：

  1. ホーム
  2. 会社概要
  3. ブログ
  4. 場所と場所の追加
  5. プロフィール
  6. ログイン
  7. ログアウト

ログインリンク（UsersWP エンドポイントより）はログアウト中のユーザーにのみ表示され、ログアウト・アカウント・プロフィールのリンクはログイン中のユーザーにのみ表示されます。

タイポグラフィ

次に、ウェブサイトのテキストフォントとサイズのタイポグラフィを設定しましょう。すべてのサイトテキストに適用される、フォントファミリー、フォントウェイト、フォントサイズをグローバルに設定します。

外観 > カスタマイザー > 一般 > レイアウト に移動し、以下の設定を行います
幅： 全幅
コンテンツ幅: 1200

外観 > カスタマイザー > 一般 > テキスト に移動します。

フォントファミリー: Outfit
フォントウェイト: ライト
フォントサイズ: 18
行の高さ: 1.45

コンテンツ

このページを Beaver Builder プラグインを使ってゼロから構築していきます。

そのためにホームページにヒーローヘッダーが必要です。

まず、「Beaver Builderを起動」をクリックして、Beaver Builder でホームページを編集しましょう。

ホームページ用に Beaver Builder を起動する

右上のプラスアイコンをクリックして、行コンテナをドラッグします。

行スタイルタブから設定します
幅： 全幅
コンテンツ幅: 固定
最小高さ: 600px
背景タイプ: 写真
背景写真のソース： メディアライブラリ
位置: 中央
スケール: 塗りつぶし

次に、ヘッダーと GD > Seach ブロックをこの行の上にドラッグしましょう。

次に、空の行コンテナを1つ追加し、 GD > Categories ブロックをその中に追加します。

Set the GD > Categories ブロックの設定を以下のように行います
デザインタイプ: 画像背景
行アイテム: 4
有効 の カテゴリ画像を使用する オプション

カテゴリセクションを追加する

カテゴリーに画像を設定するには、以下からカテゴリーを編集してください wp-admin -> places -> Place Categories.

各カテゴリーにはデフォルト画像を設定するオプションがあります

カテゴリのデフォルト画像

次に、1カラムレイアウトの空の行を追加します。

以下の設定で
色: rgba(234,240,255,0.64)
幅： 全幅
コンテンツ幅: 固定

次に、ヘッダー要素を追加します
テキスト: 最近のビジネスリスティング
サイズ: 42
整列: 中央

次に、この GD > Listings block.

設定を行います： 並び替え: 最新
グリッド: 4

ホームページ GD Listings ブロックの設定

以下の設定で行コンテナを追加します。
幅： 全幅
コンテンツ幅: 全幅

追加する GD > Map ブロックをその中に追加し、設定はデフォルトのままにします。

さて、最後に下部にCTAが必要です。

2カラムレイアウトの空の行を以下の設定で追加します。
幅： 全幅
コンテンツ幅: 固定

左カラムに見出しとコンテンツを追加し、右カラムにはユーザーをリスティング追加ページへ誘導するボタンを追加します。

おめでとうございます！ホームページが完成しました。

3. Beaver Builder ディレクトリウェブサイトのリスティングと検索ページのデザイン

次に、あらゆるディレクトリに欠かせない2つの重要なページをデザインする必要があります。

リスティングページ（一般アーカイブ、カテゴリー、タグ）と検索結果ページ。

GeoDirectoryはデフォルトで一般的なレイアウトでこれらを作成します。このチュートリアルでは、これらのページのデザインを少しカスタマイズします。

リスティングページと検索ページはほぼ同じ構成なので、一度作成してレイアウトをもう一方のページにコピーします。

リスティングページのレイアウトは、左側にリスティング一覧、右側にリスティングの正確な場所を示すスティッキーマップを配置することにしました。

Airbnb の検索ページレイアウトにインスパイアされたリスト・検索ページ

これはとても簡単です。

リストページ

Beaver Builder > Themer Layout > 新規追加 に移動し、選択します
タイトル： GD Archive
タイプ： Themer Layout
レイアウト： アーカイブ
からヘッダーを選択します。 テーマレイアウトを追加 ボタン

次のページで選択します Location: Place Archive。

これらの設定を保存したら、 Launch Beaver Builderをクリックします。1カラムレイアウトの空の行を追加します。
幅： 全幅
背景色： #577196

アーカイブタイトルを追加します。

では、2カラムレイアウトの行を追加しましょう。
幅： 全幅
コンテンツ幅: 全幅

次に、左側のコンテナに、GDアーカイブページ関連のウィジェット（例えば GD > Loop Action, GD > Loop, GD > Loop Pagination、および GD > Search をトップに配置して、ユーザーがアーカイブページから検索できるようにします。

右のカラムには、 GD > Map ブロックをドラッグします。

GD > Map の設定はすべてデフォルトのままにします。高さを指定しましょう。今回は 100vh.

GD > マップブロックのスタイル

以下のスタイルをテーマカスタマイザーから追加します  Appearance => カスタマイズ => CSSを追加します。

.geodir-archive .geodir-listings .geodir_location_listing{
    overflow-y: scroll;
    max-height: 100vh;
    padding-right: 15px;
}

これで、リスティングアーカイブページの準備が整いました。

もう1つの方法として、GD > Simple Archive ブロックを使う方法があります。これについては、 Elementor を使ったディレクトリウェブサイト.

検索ページについても、同じ手順を繰り返します。

検索ページ

に移動します Beaver Builder > Themer Layout > 新規追加 を選択し、
タイトル： GD Search
タイプ： Themer Layout
「追加」をクリックします テーマレイアウト ボタン

Copy all the content of the GD Archive Themer Layout テンプレートの内容をすべてコピーして、 GD Search Themer Layout テンプレートに貼り付けます。

次に、 Geodirectory > Settings > General > Pages の中の Search Page Themer Layout で GD Search を選択します

これで、GD Search とアーカイブページの準備が整いました。

4. Beaver Builder ディレクトリウェブサイトの単一リストページのデザイン

Beaver Builder > Themer Layout > 新規追加 に移動し、選択します
タイトル： GD Details
タイプ： Themer Layout
レイアウト： 単数形
からヘッダーを選択します。 Themerレイアウトを追加 ボタン。

次のページで選択します Location: すべての場所

これらの設定を保存したら、 Launch Beaver Builderをクリックします。1カラムレイアウトの空の行を追加します。
幅： 全幅
コンテンツ幅: 全幅
パディング: 0

まず、リスト詳細ページの上部に画像スライダーを追加します。

We will drag the GD > Post Image ブロックをこのコンテナにドラッグし、以下の設定を行います

画像の上限: 10
表示上限: 3
出力タイプ: スライダー
自動開始: 有効

次に、2カラムレイアウトの行を追加しましょう。

それでは、左カラムにGD詳細ページの必要なショートコードをすべて個別に追加しましょう。

含まれる内容は次のとおりです GD > 投稿タイトル, GD > Single Taxonomies, GD > Single Tabs、および GD > Single Next Prev.

追加します GD > Author Action と GD > Output Location ブロックを追加します。

これで、リスト詳細ページが完成しました。

プラグインにプレミアム機能を追加する Beaver Builder ディレクトリウェブサイト

ご希望であれば、次のようなプレミアム機能をディレクトリに追加することができます：

  1. 有料リスティング：GeoDirectory の Listing Price Manager アドオンを使用すると、リスティング申請に価格を設定できます。各価格帯ごとに、無料リスティングの画像枚数を制限しながら有料リスティングではより多くの画像を許可する機能や、タグ・カテゴリの数の増減、特定のカスタムフィールドの有効・無効の切り替え、説明文の長短設定といった機能を有効または無効にすることができます。
  2. Claim Listings：これはディレクトリの基本的な機能で、管理者がデータベースを作成し、ビジネスオーナーを招待して無料リスティングを管理させることができます。リスティングの申請プロセスでは、リスティングのオーナーシップを取得するために有料リスティングへのアップグレードを必須とする場合があります。
  3. Advertising: 広告の販売 は オンラインディレクトリを収益化するもう一つの方法です。トラフィックが多い場合は広告ネットワークを利用できます。そうでない場合は、ビジネスがウェブサイトの特定エリアにバナーを掲載したり、たとえばオーガニック検索結果の上部に広告としてリスティングを表示したりできるよう、広告を直接販売することもできます。

これらはほんの三つの例に過ぎません。しかし、 ディレクトリウェブサイトはオンラインで収益を得る多くの方法を提供しています.

手作りアイテムのグローバルマーケットプレイスを作成したり、イベントチケットや割引クーポンを販売したりすることができます。

ステップバイステップの手順については、こちらのチュートリアルをご覧ください： チュートリアル：ディレクトリウェブサイトの作成方法.

この汎用チュートリアルは、あらゆるテーマやページビルダーに応用できます。

可能性は無限大です。