世界最高峰の高機能・スケーラブルなWordPressディレクトリプラグイン

Breakdance Website Builderプラグインを使ってディレクトリウェブサイトを作成する方法をわかりやすく解説します：

1. Breakdanceプラグインをインストールする
2. GeoDirectoryをインストールして設定する
3. Design the Directory Website using the Breakdance プラグインを使ってディレクトリウェブサイトをデザインする

The Breakdance プラグインは、GeoDirectoryプラグインと組み合わせることで、柔軟なオンラインディレクトリを構築する優れた手段となります。この組み合わせにより、位置情報ベースの機能を簡単に追加し、レイアウトをカスタマイズし、ユーザーフレンドリーな体験のための動的なコンテンツを組み込むことができます。

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

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

• プラグインのインストールと設定
  1. をインストールする Breakdance プラグイン
  2. GeoDirectory のインストール
  3. GeoDirectory インストールウィザード
     • デフォルトの都市を設定する
     • 追加機能を加える
     • ダミーデータを追加する
• をデザインする Breakdance ディレクトリウェブサイト
  1. ウェブサイトのロゴをデザインする
  2. ホームページのデザイン
     • ナビゲーションメニュー
     • タイポグラフィ
     • コンテンツ
  3. リスティングと検索ページのデザイン
  4. リスティング個別ページのデザイン

プラグインのインストールと設定。

1. をインストールする Breakdance プラグイン

Breakdanceプラグインは breakdance.comからご購入いただけます。プラグインのzipファイルが取得できます。インストールするには  プラグイン >> 新規追加 >> 「プラグインをアップロード」をクリック

インストール後、 Breakdance >> 設定 >> テーマ >> テーマを無効化

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

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

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

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

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

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

ウィザードの最初のステップで、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 ダッシュボードから直接インストールしたい場合に必要です。

ダミーデータを追加する

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

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

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

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

1. ウェブサイトのロゴをデザインする

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

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

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

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

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

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

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

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

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

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

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

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

ナビゲーションメニュー

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

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

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

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

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

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

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

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

タイポグラフィ

それでは、 Breakdance >> 設定 >> グローバルスタイル >> Breakdance を起動

以下はタイポグラフィの設定です
見出しフォント： Poppins
本文フォント： Poppins
基本サイズ： 16px
比率： 1.2

ヘッダーの設定

サイトのヘッダーを設定しましょう。そのためにまず Breakdance >> Header をクリックして Add header.

ここでヘッダーにタイトルを付け、次を選択します
Location: Everywhere
Priority: 1

次に Add New ボタンを左上隅でクリックします。利用可能なブロック要素を使ってヘッダーを作成するか、 Library をクリックして、既製のヘッダーテンプレートを使用することもできます。

既存のヘッダーテンプレートの一つを ライブラリから使用し、 ロゴ をアップロードして menu を選択しました。

ヘッダーの準備ができたので、次はホームページのコンテンツに取り掛かります。

コンテンツ

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

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

まず、ホームページを編集しましょう。 Breakdance をクリックして で編集 Breakdance ボタン。

左上の 追加 ボタンをクリックして、空のセクションをドラッグします。

セクションのスタイルタブから以下を設定します
整列: 中央
背景タイプ: 画像
画像サイズ: フル
サイズ: カバー
繰り返し: no-repeat
位置: 中央
添付: スクロール
画像の設定を解除する場所: デスクトップ
高さ: カスタム
カスタム高さ: 400px

次に、以下の設定で見出し要素をドラッグしましょう。

テキスト: フィラデルフィアで最高のレストランを見つける
色: #FFFFFFFF
フォントサイズ: 48
フォントウェイト: 600

ショートコードブロックを追加し、 [gd_search] のショートコードをその下に配置します。

次に、カテゴリーの一覧を表示するために、以下のショートコードを使った空のコンテナをもう1つ下に追加しましょう。

[gd_categories post_type="0" max_level="1" max_count="all" max_count_child="all" sort_by="az" design_type="image" row_items="4" card_shadow="small" use_image="1" image_size="large" cat_text_color_custom="#000000" cat_font_size="0" badge_text_color_custom="#000000" badge_color="light" badge_font_size="0" title_tag="h4" mb="3" rounded="rounded"]

上下に50pxのパディングを設定します。

次に、最新リスティングのセクションが必要です。以下のショートコードを使ったショートコード要素を追加します。

[gd_listings post_type="gd_place" post_limit="6" add_location_filter="1" sort_by="latest" title_tag="h3" layout="3" view_all_link="1" bottom_pagination="1" slide_interval="5" mb="3" rounded="rounded"]

次に、リスティングマップを表示するショートコードをもう1つ追加しましょう。

[gd_map map_type="auto" post_settings="1" 
width="100%" height="425px" 
maptype="ROADMAP" zoom="0"]

最後に、 CTA そのために、既存のCTAテンプレートを使用しています。

フッターの設定

最後に、サイトのフッターを設定しましょう。次の場所へ移動してください。 Breakdance >> Footer をクリックして 追加 Footer.

フッターをゼロから作成することも、既存のものを使用することもできます。ここでは既存のFooterテンプレートを使用します。これらのフッターメニューは、必要に応じて簡単にカスタマイズできます。
今はそのままにしておきます。

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

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

リストページ

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

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

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

次の場所へ移動してください。 Breakdance >> テンプレート >> テンプレートを追加

次のオプションで、以下の設定を選択し、 テンプレートを追加 ボタン。
Location: アーカイブ／投稿タイプアーカイブ
条件： Post Type = Places

テンプレート内に空のセクションを追加し、そのセクションブロックに以下の設定を適用します。
レイアウト
配置：中央
縦方向の配置：中央
背景：
カラー：F5F8FFFF
タイプ：グラデーション

次に、その中にアーカイブタイトルブロックを追加しましょう。

ここでは2つの方法をご紹介します。

2″ height="100vh" maptype="ROADMAP" marker_cluster="1"] を利用することです。

2) デザインを完全にコントロールしたい場合は、代わりに2カラムレイアウトのカラムブロックを追加する必要があります。

設定では以下を使用します 幅： フル

次に、ショートコードコンテナをドラッグし、その中に必要なショートコードを使用します。

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

[gd_search mb="3"]
[gd_loop_actions]
[gd_loop layout='2']
[gd_loop_paging]

右側のカラムには、 GD > Map ブロックを使用し、すべての設定はデフォルトのままにします。ただし、 GD > Map ブロックの高さを 100vh に設定します.

[gd_map map_type="auto" post_settings="1" scrollwheel="1"  width="100%" height="100vh" maptype="ROADMAP" zoom="0"]

次に、以下の gd-archive-left-container クラスを左のセクションに追加します。

左カラムに以下のクラスを追加します gd-archive-left-column.

最後の仕上げとして、以下のCSSをテーマカスタマイザーの Appearance => カスタマイズ => CSS を追加

.geodir-archive .gd-archive-left-container{
    overflow-Y: scroll;
    max-height: 100%;
    height:100vh;
    padding-right:15px;
}

.gd-archive-left-column{
	overflow:hidden;
}

これで、リスト一覧ページの準備が整いました。

検索ページ

次に、GeoDirectory 検索ページ用のテンプレートを作成します。 Breakdance >> テンプレート >> テンプレートを追加 >> 検索結果

次に、 GD Archive テンプレートのすべてのコンテンツを GD Search テンプレートにコピーします。

これで、GD 検索ページとアーカイブページのテンプレートが完成しました。

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

次の場所へ移動してください。 Breakdance >> テンプレート >> テンプレートを追加

次のオプションで、以下の設定を選択し、 テンプレートを追加 ボタン。
Location: Single/Places
条件： Post Type = Places

すべての辺のパディングを 0 にした空のセクションを追加します。

以下のショートコードを追加して、画像スライダーを表示します。

[gd_post_images ajax_load="1" limit="10" limit_show="3" type="slider" slideshow="1" controlnav="1" animation="slide"]

次に、もう 1 つセクションを追加し、その中に 2 カラムレイアウトを追加しましょう。

次に、必要なすべての GD Detail ページのショートコードを左カラムに 1 つずつ追加しましょう。

含まれる内容は次のとおりです GD > Post Title, GD > Single Taxonomies、および GD > Single タブ.

[gd_single_taxonomies taxonomy=''  prefix=''  link_style=''  link_color=''  link_color_custom=''  link_icon='false'  mt=''  mr=''  mb='2'  ml=''  pt=''  pr=''  pb=''  pl='' ]
[gd_single_tabs heading_font_size="0" heading_text_color="primary" heading_text_color_custom="#000000" mt_lg="3" border_type="border"]
[gd_single_next_prev bg=''  mt='4'  mr=''  mb='3'  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]

右側のカラムには、次を追加します GD > Author Action と GD > Output Location ブロックをドラッグします。

[gd_author_actions hide_edit='false'  hide_delete='false'  author_page_only='false'  display=''  size=''  alignment=''  color='primary'  text_color='white'  btn_mt='1'  btn_mr=''  btn_mb='1'  btn_ml=''  bg=''  mt=''  mr=''  mb=''  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]
[gd_output_location location="detail" list_style="wrap"]

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

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

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

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

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

この必携ガイドで基本的な要素を学びましょう： ディレクトリウェブサイト作成の基本.

可能性は無限大です。

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 テーマ
  2. GeoDirectory のインストール
  3. GeoDirectory インストールウィザード
     • デフォルトの都市を設定する
     • 追加機能を加える
     • ダミーデータを追加する
• をデザインする Beaver Builder ディレクトリウェブサイト
  1. ウェブサイトのロゴをデザインする
  2. ホームページのデザイン
     • ナビゲーションメニュー
     • タイポグラフィ
     • コンテンツ
  3. リスティングと検索ページのデザイン
  4. リスティング個別ページのデザイン

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

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を検索してインストールしてください。これでプラグインのインストールは完了です。

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

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

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

ウィザードの最初のステップで、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 ダッシュボードから直接インストールしたい場合に必要です。

ダミーデータを追加する

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

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

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

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

1. ウェブサイトのロゴをデザインする

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

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

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

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

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 でホームページを編集しましょう。

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

行スタイルタブから設定します
幅： 全幅
コンテンツ幅: 固定
最小高さ: 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 > Map ブロックをその中に追加し、設定はデフォルトのままにします。

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

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

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

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

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

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

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

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

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

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

これはとても簡単です。

リストページ

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.

以下のスタイルをテーマカスタマイザーから追加します  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: 広告の販売 は オンラインディレクトリを収益化するもう一つの方法です。トラフィックが多い場合は広告ネットワークを利用できます。そうでない場合は、ビジネスがウェブサイトの特定エリアにバナーを掲載したり、たとえばオーガニック検索結果の上部に広告としてリスティングを表示したりできるよう、広告を直接販売することもできます。

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

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

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

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

可能性は無限大です。

Neve テーマと Otter ブロックプラグインを使ってディレクトリウェブサイトを構築するためのステップバイステップガイドです：

1. をインストールする Neve テーマ
2. GeoDirectoryをインストールして設定する
3. Otter プラグインをインストールする
4. Neve テーマと Gutenberg を使ってディレクトリウェブサイトをデザインする エディター

Neve テーマは、GeoDirectory プラグインおよび Otter プラグインと組み合わせることで、洗練されたオンラインディレクトリを開発するための包括的で柔軟なプラットフォームを提供します。

この組み合わせを活用することで、ユーザーはロケーション中心の機能を簡単に組み込み、レイアウト設定を最適化し、動的なコンテンツブロックを追加することができ、使いやすく没入感のあるインターフェースを実現します。

この一体化したシステムにより、ウェブ開発者やデザイナーは特定の業界ニーズや幅広いコミュニティの要件に対応したトップクラスのディレクトリウェブサイトを構築することができます。

具体的にどのように実現できるか、詳しく見ていきましょう。

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

• テーマとプラグインをインストール・設定する
  1. Neve テーマをインストールする
  2. Otter プラグインをインストールする
  3. GeoDirectory のインストール
  4. GeoDirectory インストールウィザード
     • マップシステムの選択
     • デフォルトの都市を設定する
     • 追加機能を加える
     • ダミーデータを追加する
• Neve ディレクトリウェブサイトをデザインする
  1. ホームページのデザイン
     • ロゴ
     • ナビゲーションメニュー
     • タイポグラフィ
     • コンテンツ
  2. リスティングと検索ページのデザイン
  3. リスティング個別ページのデザイン

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

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

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

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

「新規追加」を選択し、 「インストール」、 と 「有効化」 の Neve テーマをインストールします。

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

デフォルトのGutenbergプラグインだけではテンプレートをスタイリングするのに十分ではないため、次のプラグインをインストールします： Otter プラグインを使ってゼロから構築していきます。

このプラグインはデフォルトよりも優れたカスタマイズされたブロックを提供し、ページテンプレートのデザインに役立ちます。

に移動します プラグイン >> 新規追加。

検索してください Otter。インストールして有効化してください。

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

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

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

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

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

GeoDirectoryでは、Google Maps APIキーの設定とダミーリスティングのインポートを行うために、セットアップウィザードを完了する必要があります。

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

ウィザードの最初のステップで、2つのマッピングシステムから選択できます。Google MapsとOpen Street Maps（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 ダッシュボードから直接インストールしたい場合に必要です。

ダミーデータを追加する

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

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

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

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

1. Neve ディレクトリホームページのデザイン

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

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

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

ロゴ

まず最初に、ウェブサイト用のロゴが必要です。

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

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

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

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

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

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

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

ロゴをデザインしたら、 Appearance > カスタマイズ > ヘッダー、 Change logo リンクをクリックし、PNGファイルをアップロードしてください。切り取りはスキップしてください（または必要に応じて画像をトリミングして）、「ロゴレイアウト」でロゴオプションを選択し、公開をクリックします。

ナビゲーションメニュー

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

必要なリンクを追加し（左列から右列へ）、保存します。 Menu Settings > の「表示場所」セクション、「メイン」オプションを確認できます。

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

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

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

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

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

タイポグラフィ

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

外観 > カスタマイザー > タイポグラフィ > 全般 > 本文 に移動します。以下を設定します 
フォントファミリー: Inter 
追加フォント バリアント: Regular 400, Medium 500, Semi-Bold 600, Bold 700, Extra Bold 800, Black 900
変換: なし
ウェイト: 400
フォントサイズ: 16
行の高さ: 1.7
フォントファミリー: Arial, Helvetica, sans-serif

外観 > レイアウト > ページ から以下を設定します ヘッダーレイアウト: カバー

コンテンツ

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

ホームページにヒーローヘッダーを追加するために、 WordPress.

追加します セクションブロック フルサイズのレイアウトで。

垂直方向の配置：中央に揃えます（スクリーンショットを参照）。 セクションブロック 設定で以下を設定します セクション構造 の設定を次のように変更します。
最小高さ: カスタム
カスタム高さ: 600

次に、ブロックの設定を確認し、背景画像を設定してください。

ヒーローセクション用の画像が必要なため、次のサイトから無料画像をダウンロードします Pexels.com （ありがとう、@rachel-claire）。

背景オーバーレイの設定を選択し、以下を設定します
オーバーレイ 不透明度： 50
背景オーバーレイカラー: #000000 (ブラック)

ヒーロー画像のオーバーレイカラー設定

ヒーロー画像を暗くしたので、テキストを追加できます。

画像の中央をクリックします（プラスボタンがうっすら表示されています）。これにより、新しいブロックを選択できます。セクションブロックを追加してください。
画像の中央を再度クリックして「高度な見出し」 ブロックをドラッグします。
テキストブロックに次のようなテキストを追加します：「フィラデルフィアのベストレストランを探す”.

ブロック選択 H1 として HTMLタグ。テキストの配置 中央。（スクリーンショットに示されています。）

で、選択したブランドの車のモデルを選択します。選択すると 高度な見出しブロックのスタイル 設定
フォントサイズ: 48
フォント変換: 先頭文字を大文字にする
テキストカラー： #FFFFFF

この時点で、Neve ディレクトリウェブサイトのヒーローセクションに検索フォームを追加できます。
タイトルセクションの右下にある「+」ボタンをクリックして、新しいセクションを追加します。
ホームページのヘッダーに GD 検索を追加するには、 GD > Search ブロックをヒーローコンテナ内にドラッグします。

次に、親の セクション ブロックをドラッグします。
で、選択したブランドの車のモデルを選択します。選択すると 構造設定 設定
最大コンテンツ幅: 1170
水平配置：中央

次に、ヒーローセクションの下にスペースを追加します。スペーサーブロックを使用して 高さ = 40.

ホームページにさらにいくつかの必須セクションを追加する時が来ました。プラスアイコンをクリックして セクションブロック をフルサイズレイアウトで追加します。

Change the セクションブロック 設定を変更して セクション構造 設定を次のように更新します：
最大コンテンツ幅： 1170、 水平配置： 中央。

次に、ヒーローヘッダーの下に空のセクションを追加して GD > Categories ブロックを追加します。

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

wp-admin -> places -> Place Categories からカテゴリを編集することで、カテゴリに画像を設定できます。

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

では、ウェブサイトに3つ目のセクションを追加しましょう。これを「最近のビジネスリスティング“.
プラスアイコンをクリックして「Advanced Heading」を検索し、追加したらテキスト設定を次のように構成します：HTMLタグを H3 に設定し、配置を 中央.

Add a GD > Listing ブロックをプラスアイコンをクリックして追加し、ブロック設定にアクセスします。必ず 有効にして の 詳細設定を表示 オプションを選択してください。

ブロックの スタイル タブで、 レイアウト： グリッドビュー（4カラム）.

次の数を変更します： 表示する投稿数: 8 を確認し、「ロケーションフィルターを有効にする」オプションにチェックを入れて、 並び替え: 最新版。

次に、コンテンツを持ち、幅を100に設定した空のColumnを追加しましょう。

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

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

2. Neve ディレクトリウェブサイトのリスト一覧ページと検索ページのデザイン

リストページ

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

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

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

リストページと検索ページはほぼ同じ構成なので、一度作成してからもう一方のページにレイアウトをコピーするだけです。

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

これはとても簡単です。

GeoDirectory > 設定 > 一般 > ページ に移動し、GD アーカイブページテンプレートの編集をクリックします

このページからすべてのコンテンツを削除します GD Archive ページテンプレート。

ページ設定を次のように変更します
サイドバーレイアウト: サイドバーなし
フッターウィジェット: デフォルト
コンテンツコンテナ: 全幅

次に、 セクション ブロックを 1:1 レイアウト.

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

右のカラムに、 GD > Map ブロックを使用し、すべての設定はデフォルトのままにします。ただし、 GD > Map ブロックの高さを 100vh に設定します.

最後の仕上げとして、以下のCSSをテーマカスタマイザーの Appearance => カスタマイズ => CSS を追加

.geodir-archive .container.grid-container{
      max-width:100%;
}
.geodir-archive .wp-block-geodirectory-geodir-widget-loop .geodir-loop-container .geodir-listing-posts{
    overflow-y: scroll;
    max-height: 100vh;
}

Neve テーマには GD > アーカイブページのタイトルとの軽微な互換性の問題があるため、このページの上部にタイトルコンテナを作成します。

空のセクションをドラッグし、ブロック設定を次のように指定します
背景： #444444
パディング: 50 px, 20 px, 50 px, 20 px
we will drag the アーカイブタイトル 内のブロック。

これで、リスト一覧ページの準備が整いました。

もう一つの方法として、このチュートリアルで説明されている GD > シンプルアーカイブ ブロックを使用する方法があります。 Elementor でディレクトリウェブサイトを構築する.

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

検索ページ

GeoDirectory > 設定 > 一般 > ページ > GD Search ページテンプレートの編集をクリック

このページからすべてのコンテンツを削除します GD Search ページテンプレート。

GD アーカイブページのコンテンツをすべてコピーし、GD Search ページに貼り付けます。

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

3. Neve ディレクトリウェブサイトの個別リスティングページのデザイン

GD Detail ページを編集・カスタマイズするには、 GeoDirectory > 設定 > 一般 > ページ > GD Detail ページテンプレートの編集をクリックします。

このテンプレートには、GeoDirectory によって生成されたデフォルトのコンテンツがすでに含まれています。
これらのデフォルトコンテンツをすべて削除し、新しいセクションブロックを追加します。

まず、リスティング詳細ページの上部に画像スライダーを追加しましょう。

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

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

次に、もう一つ セクションブロック をその下に、 2:1 レイアウト.

次を変更します セクションブロック 設定を変更して セクション構造 設定を次のように更新します： 最大コンテンツ幅： 1170、 水平配置： 中央

次に、必要なすべての GD Detail ページのショートコードを左カラムに 1 つずつ追加しましょう。

含まれる内容は次のとおりです GD > Post Title, GD > Single Taxonomies、および GD > Single タブ.
右側のカラムには、次を追加します GD > Author Action と GD > Output Location ブロックをドラッグします。

では、クラス（ single-gd-section ）をこの親セクション全体に追加して、最終的な仕上げを行いましょう。

最後に、以下の CSS をテーマカスタマイザーに追加します。 Appearance => カスタマイズ => CSS を追加

.single-gd-section{
	max-width:1170px;
	margin:auto;
}

設定後、 リスティング詳細ページ が完了しました。

NeveディレクトリWebサイトにプレミアム機能を追加する

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

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

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

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

この詳細ガイドを参考に、今日からサイトの構築を始めましょう： ディレクトリWebサイト構築ガイド。これは、あらゆるテーマやページビルダーに応用できる汎用チュートリアルです。

可能性は無限大です。

WordPressのOllieテーマを使ってディレクトリウェブサイトを構築するためのステップバイステップガイドをご紹介します：

1. Ollieテーマをインストールする
2. GeoDirectoryをインストールして設定する
3. OllieWPテーマとGutenbergを使ってディレクトリウェブサイトをデザインする エディター

GeoDirectoryはOllieのようなFSEブロックテーマと完全に互換性があるため、この場合はページビルダーや追加のブロックプラグインは必要ありません。

GeoDirectoryは、あらゆるテーマやページビルダーを使って動的なオンラインディレクトリを構築するための、堅牢かつ柔軟なソリューションを提供します。

このチュートリアルでは、 OllieWP テーマとGeoDirectoryプラグインを組み合わせてディレクトリウェブサイトを構築する方法をご紹介します。

この組み合わせにより、ユーザーは位置情報ベースの機能をシームレスに統合し、レイアウトデザインをカスタマイズし、インタラクティブなコンテンツブロックを組み込むことができ、直感的で魅力的なユーザー体験を実現します。

この統合的なアプローチにより、ウェブ開発者やデザイナーは、特定のニッチ市場や幅広いコミュニティのニーズに合わせた、プロフェッショナル品質のディレクトリサイトを簡単に実現できます。

それでは、具体的な方法を見ていきましょう。

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

• テーマとプラグインをインストール・設定する
  1. OllieWP テーマのインストール
  2. GeoDirectory のインストール
  3. GeoDirectory インストールウィザード
     • デフォルトの都市を設定する
     • 追加機能を加える
     • ダミーデータを追加する
• OllieWP ディレクトリウェブサイトのデザイン
  1. ホームページのデザイン
     • ロゴ
     • ナビゲーションメニュー
     • コンテンツ
  2. リスティングと検索ページのデザイン
  3. リスティング個別ページのデザイン

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

1. OllieWP テーマのインストール

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

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

「新規追加」を選択し、 「インストール」、 と 「有効化」 の OllieWP テーマをインストールします。

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

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

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

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

GeoDirectoryでは、Google Maps APIキーの設定とダミーリスティングのインポートを行うために、セットアップウィザードを完了する必要があります。

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

ウィザードの最初のステップで、2つのマッピングシステムから選択できます。Google MapsとOpen Street Maps（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 ダッシュボードから直接インストールしたい場合に必要です。

ダミーデータを追加する

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

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

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

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

1. OllieWP ディレクトリホームページのデザイン

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

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

次に、 Appearance > エディター > ページ > ホーム をクリックして編集ボタンを押します。

ロゴ

まず最初に、ウェブサイト用のロゴが必要です。

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

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

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

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

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

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

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

ナビゲーションメニュー

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

上部のメニューをクリックして、既存のメニューをすべて削除します。

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

左カラムにサイトロゴブロックを追加します。

メインヘッダーコンテナをクリックし、ブロック設定から以下を設定してください 背景： #FFFFF

右の列にナビゲーションメニューを追加します。

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

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

ログイン/ログアウトブロックは、ユーザーのログイン状態に応じてログインリンクまたはログアウトリンクのみを表示します。

コンテンツ

このページを OllieWP およびGutenbergブロック。

に移動します Appearance > エディター > デザイン > ページ をクリックし、ホームページの編集ボタンをクリックします。

ホームページにはヒーローヘッダーが必要です。そのために、このページのコンテンツをすべて削除して、 カバー ブロックをドラッグします。

次に、ブロック設定を確認し、背景画像のURLを設定します。

ヒーローセクション用の画像が必要なので、以下から無料画像をダウンロードします Pexels.com （ありがとう、@rachel-claire）。

このカバーブロックに以下の設定を追加します

コンテンツ： 1200
幅： 100
不透明度： 50
パディングとマージン: 0
カバーの最小の高さ: 600

それでは、このカバーブロック内にヘッダータグを追加しましょう。
テキスト: フィラデルフィアで最高のレストランを見つける

ヘッダータグに追加のクラス（ heading-text-center ）を付けて、スタイルを適用します。

次に、テーマカスタマイザーに以下のスタイルを追加しましょう。

.heading-text-center{
    text-align:center;
}

次に、 GD > search ブロックをこの見出しの下に追加しましょう。

その下に、高さを指定したスペーサーブロックを使って余白を追加しましょう: 60

次に、空のカラムを追加して、 GD > Categories ブロックをその中に配置しましょう。

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

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

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

ヒーローセクションの下に、もう1つ Column をプラスアイコンをクリックして追加し、 GD > Listings ブロックをそこに追加してください。

次に、この GD > Listings ブロックで必要な設定を行います。並び替えを「最新」に設定します

次に、コンテンツを持ち、幅を100に設定した空のColumnを追加しましょう。

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

フッターをクリックして、 OllieWP はすでにいくつかのプリビルドフッターテンプレートを提供しています。その中から一つを選択します。

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

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

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

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

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

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

リストページと検索ページはほぼ同じ構成なので、一度作成してからもう一方のページにレイアウトをコピーするだけです。

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

これはとても簡単です。

リストページ

外観 > エディター > デザイン > テンプレート に移動し、編集をクリックします GD Archive ページテンプレート

このページからすべてのコンテンツを削除します GD Archive ページテンプレート。

次に、空の行を追加しましょう。

この中に2カラムレイアウトを追加します

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

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

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

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

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

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

もう一つの方法として、このチュートリアルで説明されている GD > シンプルアーカイブ ブロックを使用する方法があります。 Elementor でディレクトリウェブサイトを構築する.

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

検索ページ

GeoDirectory > 設定 > 一般 > ページ > GD Search ページテンプレートの編集をクリック

このページからすべてのコンテンツを削除します GD Search ページテンプレート。

GD アーカイブページのコンテンツをすべてコピーし、GD Search ページに貼り付けます。

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

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

GD Detail ページを編集・カスタマイズするには、 外観 > エディター > デザイン > テンプレート をクリックして「編集」を選択します GD Single ページテンプレート。

空のカラムを追加する

まず、リスティング詳細ページの上部に画像スライダーを追加しましょう。 GD > Post Image ブロックをこのコンテナにドラッグし、以下の設定を行います

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

次に、空の行を追加しましょう（
コンテンツ： 1200
幅： 100

その中に2つのカラムを追加します。

それでは、左側のカラムに必要なGD詳細ページのショートコードをひとつずつ追加していきましょう。

GD > シングルタクソノミー、GD > シングルタブ、GD > シングル前後ナビゲーションが含まれます。

右側のカラムには、次を追加します GD > Author Action と GD > Output Location ブロックをドラッグします。

設定が完了すると、 リスティング詳細ページ が完了しました。

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

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

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

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

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

このアドバイスでディレクトリウェブサイトプロジェクトを今すぐスタートさせましょう： 今日からディレクトリウェブサイトを始めよう.

可能性は無限大です。

GeneratePressテーマとGeneratePressブロックプラグインを使ってディレクトリサイトを構築するためのステップバイステップガイドです：

1. GeneratePressテーマをインストールする
2. GeoDirectoryをインストールして設定する
3. をインストールする GenerateBlocks プラグインを使ってディレクトリウェブサイトをデザインする
4. Design the Directory Website using the Generatepress テーマとGutenberg エディター

Generatepress テーマはGeoDirectoryプラグインおよび GenerateBlocks プラグインと組み合わせることで、ダイナミックなオンラインディレクトリを作成するための堅牢で柔軟なソリューションを提供します。

この3つの組み合わせにより、ユーザーはロケーションベースの機能をシームレスに統合し、レイアウトデザインをカスタマイズし、インタラクティブなコンテンツブロックを組み込むことができ、直感的で魅力的なユーザーエクスペリエンスを実現します。

この統合的なアプローチにより、ウェブ開発者やデザイナーは、特定のニッチ市場や幅広いコミュニティのニーズに合わせた、プロフェッショナル品質のディレクトリサイトを簡単に実現できます。

それでは、具体的な方法を見ていきましょう。

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

• テーマとプラグインをインストール・設定する
  1. GeneratePressテーマをインストールする
  2. GenerateBlocksプラグインをインストールする
  3. GeoDirectory のインストール
  4. GeoDirectory インストールウィザード
     • デフォルトの都市を設定する
     • 追加機能を加える
     • ダミーデータを追加する
• GeneratePressディレクトリサイトをデザインする
  1. ホームページのデザイン
     • ロゴ
     • ナビゲーションメニュー
     • タイポグラフィ
     • コンテンツ
  2. リスティングと検索ページのデザイン
  3. リスティング個別ページのデザイン

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

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

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

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

「新規追加」を選択し、 「インストール」、 と 「有効化」 の Generatepress テーマをインストールします。

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

デフォルトのGutenbergプラグインだけではテンプレートをスタイリングするのに十分ではないため、次のプラグインをインストールします： GenerateBlocks プラグインを使ってゼロから構築していきます。

このプラグインはカスタマイズされた GenerateBlocks これらはデフォルトのブロックより優れており、ページテンプレートのデザインに役立ちます。

に移動します プラグイン >> 新規追加。

検索してください GenerateBlocks。インストールして有効化してください。

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

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

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

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

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

GeoDirectoryでは、Google Maps APIキーの設定とダミーリスティングのインポートを行うために、セットアップウィザードを完了する必要があります。

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

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

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

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

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

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

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

第4点について：これは必須要件です。ただし、月200ドルのしきい値を超えた場合にのみ課金されます。

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

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

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

デフォルトの都市としてニューヨークを設定します。

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

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

追加機能を加える

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

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

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

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

ダミーデータを追加する

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

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

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

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

1. Generatepress ディレクトリホームページのデザイン

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

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

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

ロゴ

まず最初に、ウェブサイト用のロゴが必要です。

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

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

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

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

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

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

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

ロゴをデザインしたら、 Appearance > カスタマイズ > ヘッダー、クリックして ロゴ > ロゴを選択、PNG ファイルをアップロードします。トリミングはスキップし（または必要に応じて画像をトリミングして）、「ロゴレイアウト」でロゴオプションを選択し、公開をクリックします。

ナビゲーションメニュー

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

必要なリンクを追加し（左列から右列へ）、保存します。 Menu Settings > の「表示場所」セクション、「メイン」オプションを確認できます。

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

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

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

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

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

タイポグラフィ

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

外観 > カスタマイザー > タイポグラフィ > 本文 に移動し、 フォントファミリー: Poppines カテゴリー: sans-serif および バリアント: 100, 100italic, 200, 200italic, 300, 300italic, regular, italic, 500, 500italic, 600, 600italic, 700, 700italic, 800, 800italic, 900, 900italic

コンテンツ

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

ホームページにヒーローヘッダーが必要なので、 GenerateBlocks プラグインを使ってゼロから構築していきます。

ブロックの配置を ワイド.

グリッドの設定でレイアウト設定を
サイドバーレイアウト: サイドバーなし
フッターウィジェット: デフォルト
コンテンツコンテナ: 全幅
要素を無効にする: コンテンツタイトル
グリッドアイテムの幅: 100

次に、ブロック設定を確認し、背景画像のURLを設定します。

ヒーローセクション用の画像が必要なので、以下から無料画像をダウンロードします Pexels.com （ありがとう、@rachel-claire）。

スペーシング設定のパディング 100px 上下のマージンに適用します。

次に、テキストを追加するためのヘッダータグを追加しましょう。

テキスト:: 最高の レストラン フィラデルフィアで
サイズ: 小
外観: 小・太字
テキストカラー: #FFFFFF

同じグリッド内に、 GD > Search ブロックを上下パディング200pxで追加します。

次に、ヒーローヘッダーの下に空のグリッドを追加し、そのグリッドに GD > Categories ブロックを追加します。

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

wp-admin -> places -> Place Categories からカテゴリを編集することで、カテゴリに画像を設定できます。

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

Generateblocksでグリッドをコンテンツレイアウトにするための有効な設定が見つかりませんでした。そこで、 home-container クラスをカテゴリーの親グリッドに追加します。

ヒーローセクションの下に、もう1つ グリッド をプラスアイコンをクリックして追加し、 GD > Listings ブロックをそこに追加してください。

次に、この GD > Listings ブロックで必要な設定を行います。並び替えを「最新」に設定します

同様に、カテゴリーブロックと同じように、 home-container クラスを最新リスティングの親グリッドに追加します。

次に、空のグリッドを追加し、その中に GD > Map ブロックを追加して、設定はデフォルトのままにします。

同様に、他と同じように、 home-container クラスを GD > Map の親グリッドに追加します。

最後に、以下の CSS をテーマカスタマイザーに追加します。 Appearance => カスタマイズ => CSS を追加

.home-container{
	max-width:1200px;
	margin:auto;
}

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

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

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

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

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

リストページと検索ページはほぼ同じ構成なので、一度作成してからもう一方のページにレイアウトをコピーするだけです。

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

これはとても簡単です。

リストページ

GeoDirectory > 設定 > 一般 > ページ に移動し、GD アーカイブページテンプレートの編集をクリックします

このページからすべてのコンテンツを削除します GD Archive ページテンプレート。

ページ設定を以下のように設定します
サイドバーレイアウト: サイドバーなし
フッターウィジェット: デフォルト
コンテンツコンテナ: 全幅

2カラムの空のグリッドを追加します。

左側のコンテナには、GD > Loop Action、GD > Loop、GD > Loop Pagination、GD > Search などの GD アーカイブページ関連ウィジェットをドラッグして上部に配置し、ユーザーがアーカイブページから検索できるようにします。

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

の設定はすべてデフォルトのままにします GD > Map。高さを設定しましょう。ここでは 150vh.

アーカイブページのレイアウトを全幅にするために、以下の CSS をテーマカスタマイザーに追加します。 Appearance => カスタマイズ => CSS を追加

.geodir-archive .container.grid-container{
      max-width:100%;
}
.geodir-archive .wp-block-geodirectory-geodir-widget-loop .geodir-loop-container .geodir-listing-posts{
    overflow-y: scroll;
    max-height: 100vh;
}

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

もう一つの方法として、このチュートリアルで説明されている GD > シンプルアーカイブ ブロックを使用する方法があります。 Elementor でディレクトリウェブサイトを構築する.

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

検索ページ

GeoDirectory > 設定 > 一般 > ページ > GD Search ページテンプレートの編集をクリック

このページからすべてのコンテンツを削除します GD Search ページテンプレート。

GD アーカイブページのコンテンツをすべてコピーし、GD Search ページに貼り付けます。

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

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

GD Detail ページを編集・カスタマイズするには、 GeoDirectory > 設定 > 一般 > ページ > GD Detail ページテンプレートの編集をクリックします。

このテンプレートには、GeoDirectory によって生成されたデフォルトのコンテンツがすでに含まれています。

これらのデフォルトコンテンツをすべて削除し、新しいグリッドを追加します。

まず、リスティング詳細ページの上部に画像スライダーを追加しましょう。 GD > Post Image ブロックをこのコンテナにドラッグし、以下の設定を行います

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

次に、その下に2カラムレイアウトの空のグリッドブロックをもう1つ追加します。

クラス（single-details-container ) をブロック設定からこのグリッドに追加します。

それでは、左側のカラムに必要なGD詳細ページのショートコードをひとつずつ追加していきましょう。

GD > シングルタクソノミー、GD > シングルタブ、GD > シングル前後ナビゲーションが含まれます。

右側のカラムには、次を追加します GD > Author Action と GD > Output Location ブロックをドラッグします。

最後に、以下の CSS をテーマカスタマイザーに追加します。 Appearance => カスタマイズ => CSS を追加

.single-details-container {
    max-width: 1200px;
    margin: auto !important;
}
.single-gd_place .entry-content{
    margin:0px;
}

設定が完了すると、 リスティング詳細ページ が完了しました。

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

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

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

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

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

これらの重要な戦略でウェブサイトをレベルアップしましょう： ディレクトリウェブサイト作成のための重要な戦略.

可能性は無限大です。

DiviテーマでディレクトリWebサイトを作成するには？

Divi WordPressテーマを使ってディレクトリWebサイトを構築する最も簡単な方法は、以下の3つのステップを実行することです：

1. Diviテーマをインストールする
2. GeoDirectoryをインストールして設定する
3. Diviテーマを使ってディレクトリWebサイトをデザインする

ビジネスディレクトリをステップごとに作成する方法の詳細を説明する前に、Diviテーマの開発者であるElegant Themesの公式ブログに2023年9月11日に公開された投稿を引用したいと思います。

GeoDirectoryはDiviテーマでビジネスディレクトリWebサイトを作成するための最高のWordPressプラグインですか？

Elegant Themesのブログに、「7 Best WordPress Directory Plugins in 2023 (Ranked)」というタイトルの記事が掲載されました。

GeoDirectoryプラグインがランキングのトップに輝きました。記事の中で、著者はその理由を詳しく説明しています GeoDirectoryはディレクトリサイトを作成するための最高のWordPressプラグインです.

ぜひこの記事を読んでみてください。以下は、該当記事のFAQセクションからの引用です。

WordPressに最適なディレクトリプラグインは何ですか？
GeoDirectoryは、最高のWordPressディレクトリプラグインです。カスタマイズ可能なリスティング、高度な検索機能、ユーザーレビュー、Google マップ連携、収益化オプション、そして優れたテーマ／プラグインとの互換性を備えています。GeoDirectoryを使えば、機能豊富なディレクトリサイトを簡単に作成できます。

記事「7 Best WordPress Directory Plugins in 2023 (Ranked)」のFAQセクションからの引用。

2013年に作成した私の最初のWordPressサイトは、専用プラグインを一切使わないビジネスディレクトリでした。

WP GeoDirectoryの開発者であるPaolo TajaniとStiofan O'Connorが、Templaticの「GeoPlaces」テーマをフォークしてすべての問題を修正したときのことを、今でも覚えています。

彼らはパフォーマンスを向上させ、その後10年以上前にGeoThemeをリリースしました。

その後、進化し続けるWordPressエコシステムに適応し、自らの経験を活かしながら、テーマ開発からの転換を図りました。

その土台をもとに、あらゆる種類のディレクトリサイト作成を可能にするGeoDirectoryプラグインを開発しました。

私はWordPressでディレクトリサイトを作成できるプラグインやテーマのほとんどをテストしてきました。

前述のエントリーと私の11年間の経験、両方が、WP GeoDirectoryがこの目的に最適なプラグインであることを証明しています。

DiviテーマとGeoDirectoryプラグインを使ったディレクトリサイトの作成方法：ステップバイステップガイド

GeoDirectoryとDiviテーマを使ってディレクトリサイトを構築する方法を、詳しく見ていきましょう。

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

目次

• DiviテーマでディレクトリWebサイトを作成するには？
  • GeoDirectoryはDiviテーマでビジネスディレクトリWebサイトを作成するための最高のWordPressプラグインですか？
  • DiviテーマとGeoDirectoryプラグインを使ったディレクトリサイトの作成方法：ステップバイステップガイド
• テーマとプラグインのインストール。
  • 1. Diviテーマをインストールする
  • 2. GeoDirectoryをインストールする
  • 3. GeoDirectory インストールウィザード
    • マップシステムの選択（Google Maps または OpenStreetMap）
    • デフォルトの都市を設定する
    • 追加機能を加える
    • ダミーデータを追加する
• Divi ディレクトリウェブサイトをデザインする
  • 1. Divi ディレクトリウェブサイトのホームページデザイン
    • ロゴ
    • ナビゲーションメニュー
    • コンテンツ
    • グローバルフッターを作成する
  • Divi ディレクトリウェブサイトのリスティングと検索ページのデザイン
    • 検索ページ
    • 個別リスティングページ
  • Divi ディレクトリサイトの微調整
  • カラーとタイポグラフィ
• DiviGeo で Divi ディレクトリの可能性を最大限に引き出す
• Divi ディレクトリウェブサイトにプレミアム機能を追加する

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

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

まず、Divi テーマをインストールする必要があります

外観 >> テーマ >> に移動します

「新規追加」「テーマのアップロード」「インストール」を選択し、Divi テーマを有効化します。

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

次に、GeoDirectory プラグインをインストールする必要があります。

に移動します プラグイン >> 新規追加から GeoDirectory を検索し、インストールして有効化してください。

完了です。Divi テーマと GeoDirectory プラグインが有効になったら、次のステップに進みましょう。

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

Divi Builder のシンプルさを気に入っているなら、GeoDirectory プラグインに組み込まれたセットアップウィザードもきっと気に入るでしょう。

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

次に、セットアップウィザードを完了して設定を行う必要があります。ウィザードの最初のステップで、2 つのマッピングシステムから選択できます。Google Maps と OpenStreetMaps（API キー不要）です。

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

OpenStreetMap を選択して「続行」をクリックします。

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

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

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

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

第4点について：これは必須要件です。ただし、月200ドルのしきい値を超えた場合にのみ課金されます。

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

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

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

このチュートリアルで選んだニッチを考慮して、デフォルト都市をクロアチアのスプリトに設定します。

マップのマーカーをドラッグして任意の場所を指定するか、「詳細設定を表示」をクリックして詳細設定を使用できます。

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

追加機能を加える

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

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

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

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

ダミーデータを追加する

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

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

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

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

1. Divi ディレクトリウェブサイトのホームページデザイン

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

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

次に、 設定 > 表示設定 > ホームページの設定 に移動して、ホームページを選択してください。

投稿ページは後で設定します。

ロゴ

最初のロゴにデザイナーへの費用をかけるのは避けましょう。

市場適合性を見極める前に多額の投資をしてしまうのはよくある失敗です。

Canva のようなアプリを使えば、手軽に高品質なデザインが作れます。

MVP の段階では、Canva で作成したロゴで十分です。

最初から完璧である必要はありませんが、プロジェクトが成功したらロゴをブラッシュアップすることもできます。

覚えておいてください。平均的なロゴがプロジェクト失敗の原因になるわけではありません。

ロゴをデザインしたら、 Divi > Theme Optionsに移動し、「アップロード」をクリックしてCanva.comで作成したロゴを選択します。

トリミングをスキップするか（または必要に応じて画像をトリミングして）、画面左上の「変更を保存」をクリックします。

ナビゲーションメニュー

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

必要なリンクを追加し（左列から右列へ）、保存します。 Menu Settings > の「表示場所」セクションで、「プライマリメニュー」オプションにチェックを入れることができます。

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

12個のリンクを追加しました：

1. ホーム
2. 会社概要
3. ブログ
4. アカウント
5. プロフィール（ ログイン中 ユーザーに表示）
6. パスワード変更（ ログイン中 ユーザーに表示）
7. ログアウト（ ログイン中 ユーザーに表示。）
8. 登録（ 未ログイン)
9. ログイン（未ログインユーザーに表示）
10. パスワードをお忘れですか？（ 未ログイン)
11. 検索ページ
12. リスティングを追加

UsersWP エンドポイントのリンクは動的です。上記のカッコ内をご参照ください。

コンテンツ

Divi テーマには、330種類以上の既製レイアウトパックが用意されています。

このチュートリアルでは、Divi モジュールのスタイリングという面倒な作業なしに、魅力的なビジネスディレクトリを作成できる既製レイアウトを選択します。

このチュートリアルでは、あらかじめ用意されたCharter Divi Layout Packを使用します。

ホームページにアクセスし、「Enable Visual Builder」をクリックして、「Browse Layouts」をクリックします。

あらかじめ用意されたレイアウトライブラリで「Charter Boat Landing Page」を選択し、「Use This Layout」をクリックします。

2つ目のテキストモジュールの後にコードモジュールを追加し、「Add Shortcode」をクリックします。

DiviではGutenbergブロックの使用はできませんが、GeoDirectoryプラグインの開発者がショートコードジェネレーターを実装しています。

これにより、Diviのコードモジュールを使って動的なウィジェットを簡単に追加できます。

つまり、Diviでディレクトリサイトを作成する際には、ショートコードジェネレーター機能が強力な味方になります。

ドロップダウンリストから「gd_search」（GD > Search）を選択し、「Copy shortcode」をクリックします。

コピーされたショートコードはクリップボードに保存されています。コピーしたコードをコードモジュールに貼り付け、チェックマークアイコンをクリックします。

最初のテキストモジュールのコンテンツを「Search for」に変更します。

「Content」タブのヘッダーコンテンツをYacht Deliveryに変更します。「Design」タブでh1ヘッダーのフォントサイズを70pxに変更し、チェックマークをクリックします。

「Book a Trip」ボタンモジュールを削除します。

これでヒーローセクションが完成しました。

次のセクションでは、定義済みのDiviランディングページテンプレートをもとに、H2ヘッダーのコンテンツを「Listings Categories」に変更します。

見出しの下にあるテキストモジュール（金色のフォント）を削除するか、内容を独自のものに変更してください。私はウェブサイトのデザインをより魅力的にするためにLorem Ipsumのテキストをそのまま残します。

写真とテキストが入った2カラムの行を削除し、コードモジュールを含む新しい行を追加します。追加する際は、検索フォームと同じ手順で「Add Shortcode」をクリックしてください。

ドロップダウンリストから「gd_categories」（GD > Categories）を選択します。

以下に示すカテゴリカラムの外観を実現するためにショートコードジェネレーターで変更したオプション：

フィルタータブ：
CPTごとに表示する最大カテゴリ数： 3
マーク： 空を非表示
カードデザインタブ：
デザインタイプ： 画像背景
行の配置： 中央
カードの影： 大
アイコン／画像タブ：
マーク：カテゴリ画像を使用
画像サイズ： 大

下のショートコードをコピーして、コードモジュールに貼り付けることもできます。

生成されたショートコード：

[gd_categories post_type="0" hide_empty="1" max_level="1" max_count="3" max_count_child="all" sort_by="count" design_type="image" row_positioning="center" card_shadow="large" use_image="1" image_size="large" cat_text_color_custom="#000000" cat_font_size="0" badge_text_color_custom="#000000" badge_color="light" badge_font_size="0" title_tag="h4" mb="3"]

wp-admin -> places -> Place Categories からカテゴリを編集することで、カテゴリに画像を設定できます。

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

このチュートリアルで選んだニッチに合わせて、カテゴリ名も変更しました。

次のセクションでは、最新のエントリーを表示するために使用します。

「Our boats」の見出しを「Latest Yacht providers」に変更してください。見出しの後の行を削除し、Divi コードモジュールを使って新しいセクションを追加します。

検索フォームやカテゴリと同様に、最新のリスティングを表示するショートコードを生成する必要があります。

ドロップダウンリストから「gd_listings (GD > Listings)」を選択します。

以下に示す外観を実現するために、ショートコードジェネレーターで変更したオプションは次のとおりです：

フィルタータブ：
表示する投稿数： 3
デザインタブ：
レイアウト： グリッドビュー（3カラム）

下のショートコードをコピーして、コードモジュールに貼り付けることもできます。

生成されたショートコード：[gd_listings post_type="gd_place" post_limit="3" add_location_filter="1" sort_by="az" title_tag="h3" layout="3" view_all_link="1" bottom_pagination="1" slide_interval="5" mb="3"]

このセクションは不要なので、削除してください。

次のセクションはCTAセクションとして使用します。テキストを「Do you provide Yacht Delivery services?」に変更してください。テキストモジュールのデザインタブで、h2ヘッダーのサイズを60pxに変更します。

ボタンモジュールのテキストをリスティング追加用に編集し、リンクを「/add-listing/places/」に設定します。

次の「FAQ」セクションは削除してもかまいませんが、プロジェクトをより面白く見せるために、私はそのままにしておきます。

ビジネスディレクトリを作成するニッチに関連したコンテンツをFAQセクションに追加することをお勧めします。

テーマに沿ったコンテンツが多ければ多いほど、検索エンジンでのウェブサイト最適化に有利です。

同様に、次のセクションについても、このガイドでは削除しますが、検索エンジン向けにウェブサイトを最適化するために活用できます。

ホームページのデザインをより良くするため、レビューセクションは削除しません。お好みに応じて判断してください。

グローバルフッターを作成する

Divi Directoryウェブサイトのホームページが完成しました。次に、サイト全体のグローバルフッターを作成しましょう。

「セクションをライブラリに保存」アイコンをクリックし、セクション名フィールドに「global-footer」と入力して「ライブラリに保存」をクリックします。最後に、画面右下の「保存」ボタンでホームページのレイアウトを保存してください。

Diviライブラリに保存したセクションを削除し、プロジェクトを再度保存します。

WordPressのダッシュボードに移動し、Divi > テーマビルダーをクリックして、「グローバルフッターを追加」をクリックし、「グローバルフッターを構築」を選択します。

新しいセクションを挿入し、「ライブラリから追加」をクリックして、先ほど作成したセクションを選択し、「このセクションを使用」をクリックします。

グローバルフッターセクションは、写真、4つのテキストモジュール、およびソーシャルアイコンモジュールで構成されています。

テキストモジュールのコンテンツとリンクを変更します。テキストモジュールを使って、ウェブサイト上のビジネスディレクトリのカテゴリを再表示し、ナビゲーションをより簡単にします。

ソーシャルメディアフォローモジュールに適切なリンクを入力します。

空のセクションを削除してグローバルフッターを保存し、画面右上の「閉じる」をクリックします。 

非常に重要：Diviテーマビルダーに戻ったら、「変更を保存」ボタンをクリックしてください。

ディレクトリウェブサイトのホームページとグローバルフッターが完成しました。

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

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

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

GeoDirectoryはデフォルトでページを作成しますが、このチュートリアルではデフォルトページに少し変更を加えます。

マップと、動的タイトルを持つテキストモジュールを追加する必要があります。

WordPressダッシュボードの「すべてのページ」タブに移動し、「GD Archive」ページを見つけて「Edit With Divi」をクリックし、既存のコンテンツを編集します。

テキストモジュールを削除し、2つのコードモジュールを追加します。

次に、カテゴリや最新リスティング用のショートコードを生成したときと同じ方法で、ショートコードジェネレーターを使用します。

ドロップダウンリストから以下のショートコードを順番に選択し、コピー＆ペーストしてください：

GD > Map

GD > Notifications

GD > Search

GD > Loop Action

GD > Loop

GD > Loop paging

以下のショートコードをコードモジュールに貼り付けることもできます。

最初のコードモジュールには、マップを担当するショートコードを追加する必要があります：

[gd_map map_type="auto" post_settings="1" width="100%" height="425px" maptype="ROADMAP" zoom="0"]

2つ目のコードモジュール：

[gd_map map_type="auto" post_settings="1" width="100%" height="425px" maptype="ROADMAP" zoom="0"] <br>

[gd_notifications]

[gd_search bg=” mt=” mr=” mb=’3′ ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=”]

[gd_loop_actions bg=” mt=” mr=” mb=’3′ ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=”]

[gd_loop layout=’2′ row_gap=” column_gap=” card_border=” card_shadow=” bg=” mt=” mr=” mb=” ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=”]

[gd_loop_paging show_advanced=” bg=” mt=” mr=” mb=’3′ ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=”]

次に、Diviコードモジュールセクションの上に、Divi Heading Moduleを含む新しいセクションを追加する必要があります。

アーカイブページのタイトルを表示するために、Diviの組み込みオプションを使用して動的コンテンツを表示します。

コンテンツタブで、見出しフィールドにカーソルを合わせ、右側の「ダイナミックコンテンツを使用」をクリックします。ドロップダウンリストから「ページ/アーカイブタイトル」を選択してください。

チェックマークをクリックして、GD Archive Divi レイアウトを保存します。

検索ページ

検索ページについても同様の手順を繰り返しますが、フッターの作成と同様に、Divi Theme Builder を使用します。

WordPress ダッシュボードから、Divi ＞ Theme Builder に移動します。「新しいテンプレートを追加」をクリックし、次に「新しいテンプレートをビルド」をクリックします。

テンプレート設定が表示されます。「使用する場所」タブの「その他」セクションで「GD Search Results Page」を選択し、「テンプレートを作成」をクリックします。

GD 検索ページを担当する新しいテンプレートが表示されます。

「カスタムボディを追加」をクリックし、「既存のページ」タブで「ライブラリから追加」をクリックします。「GD Archive Layout」をクリックし、「このレイアウトを使用」を選択します。

鉛筆アイコンをクリックしてカスタムボディを編集します。特に操作は不要です。レイアウトを保存し、Divi Builder Theme の変更を保存するだけです。

あと一手順で、Divi で構築したディレクトリサイトが完全に機能するようになります。

個別リスティングページ

単一リスティングページは、ディレクトリサイトの個々のエントリを表示する役割を担っています。

GD アーカイブページや GD 検索ページと同様に、このページテンプレートは GD インストールウィザードによって作成されました。

WordPress ダッシュボードのページ一覧に移動し、Divi で GD Details ページを編集します。

コンテンツを削除し、下の画像のように2カラムの行を追加します。

左側のコードモジュールには、投稿コンテンツとギャラリーを担当するショートコードを追加します。

右側のコードモジュールには、電話番号、住所、ソーシャルメディアリンクなど、投稿の詳細情報を表示するショートコードを追加します。

ショートコードジェネレーターの使い方はすでにご存知かと思いますので、以下のショートコードを生成してコピー＆ペーストしてください。すぐにコピーできるショートコードも以下にご用意しています。

左側のコードモジュール

[gd_post_images title='' types='' fallback_types='' ajax_load='true' limit='' limit_show='' css_class='' type='slider' slideshow='true' controlnav='1' animation='slide' show_title='true' show_caption='true' image_size='' aspect='' cover='' link_to='' link_screenshot_to='' bg='' mt='' mr='' mb='' ml='' pt='' pr='' pb='' pl='' border='' rounded='' rounded_size='' shadow='' ]

[gd_single_taxonomies taxonomy=” prefix=” link_style=” link_color=” link_color_custom=” link_icon=’false’ mt=” mr=” mb=’2′ ml=” pt=” pr=” pb=” pl=” ]

[gd_single_tabs show_as_list=’false’ output=” tab_style=” disable_greedy=’false’ ]

[gd_single_next_prev bg=” mt=’4′ mr=” mb=’3′ ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=” ]

右側のコードモジュール

[gd_output_location location="detail" list_style="wrap"]

もうすぐ完成です！

GDアーカイブページテンプレートを作成したときと同様に、動的なリストタイトルの表示を担当するHeadingモジュールを追加する必要があります。

コードモジュールの上の最初のカラムに新しいDivi Headingモジュールを追加し、動的タイトルをPage/Archive Titleに設定します。

チェックマークをクリックしてレイアウトを保存します。個別投稿ページは次のように表示されます。

Divi ディレクトリサイトの微調整

Diviディレクトリウェブサイトはほぼ完成です。次にいくつかのオプションを設定して、ウェブサイトを調整しましょう。

カラーとタイポグラフィ

このウェブサイトに選んだメインカラーはネイビーブルーの色合いです。HEXコード： #1e2d44.

テーマカスタマイザー > 一般設定 > レイアウト設定 に移動し、DiviテーマのアクセントカラーをX #1e2d44.

次に、GeoDirectoryプラグインのプライマリカラーを変更する必要があります。

テーマカスタマイザーでAyeCode UIをクリックし、プライマリカラーを次のように設定します： #1e2d44.

次に、グローバルフォントを設定する必要があります。テーマカスタマイザー > 一般設定 > タイポグラフィ に移動し、ヘッダーフォントをCinzelに変更します。

ご覧のとおり、WpGeodirectoryが生成したヘッダーのフォントはCinzelフォントに変更されていません。

テーマカスタマイザーの「追加CSS」タブに移動し、以下のCSSコードを貼り付けます。

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: 'Cinzel', Georgia, "Times New Roman", serif!important;
}

BootStrapバージョンの変更

WordPressダッシュボードで「設定」→「AyeCode UI」をクリックし、バージョンをBootStrap V5に変更して保存します。

Diviディレクトリウェブサイトが完成しました。

DiviGeo で Divi ディレクトリの可能性を最大限に引き出す

これは GeoDirectory と Divi を使ってディレクトリを構築するシンプルな方法です。

このプロジェクトを一人で進めることに不安を感じる場合や、より高度なものが必要な場合は、遠慮なくご連絡ください。

私のウェブサイトをご覧いただき、あらかじめデザインされた Divi Business GeoDirectory チャイルドテーマ DiviGeoをご購入いただくか、あなたのニーズに合わせたオリジナルウェブサイトの制作をご依頼ください。

Divi ディレクトリウェブサイトにプレミアム機能を追加する

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

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

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

ハンドメイド品のグローバルマーケットプレイスを作ったり、イベントチケットを販売したり、割引クーポンを販売したりすることができます。

以下のヒントで構築プロセスへの理解を深めましょう： ディレクトリウェブサイトの構築：ヒントとコツ.

可能性は無限大です。

OceanWP でディレクトリサイトを作成するには？

OceanWP テーマを使ったディレクトリサイト構築のステップバイステップガイドをご紹介します：

1. OceanWP テーマをインストールする
2. GeoDirectoryをインストールして設定する
3. Spectra Gutenberg Blocks プラグインをインストールする
4. OceanWP テーマと Gutenberg を使ってディレクトリサイトをデザインする エディター

OceanWP テーマは、GeoDirectory プラグインおよび Gutenberg Blocks プラグインと組み合わせることで、ダイナミックなオンラインディレクトリを構築するための堅牢で柔軟なソリューションを提供します。

この3つの組み合わせにより、ユーザーはロケーションベースの機能をシームレスに統合し、レイアウトデザインをカスタマイズし、インタラクティブなコンテンツブロックを組み込むことができ、直感的で魅力的なユーザーエクスペリエンスを実現します。

この統合的なアプローチにより、ウェブ開発者やデザイナーは、特定のニッチ市場や幅広いコミュニティのニーズに合わせた、プロフェッショナル品質のディレクトリサイトを簡単に実現できます。

それでは、具体的な方法を見ていきましょう。

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

• テーマとプラグインをインストール・設定する
  1. OceanWPテーマのインストール
  2. Spectra Blocksをインストールする
  3. GeoDirectory のインストール
  4. GeoDirectory インストールウィザード
     • マップシステムの選択（Google Maps または OpenStreetMap）
     • デフォルトの都市を設定する
     • 追加機能を加える
     • ダミーデータを追加する
• OceanWPディレクトリウェブサイトのデザイン
  1. ホームページのデザイン
     • ロゴ
     • ナビゲーションメニュー
     • タイポグラフィ
     • コンテンツ
  2. リスティングと検索ページのデザイン
  3. リスティング個別ページのデザイン

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

1. OceanWPテーマのインストール

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

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

「新規追加」を選択し、 「インストール」、 と 「有効化」 OceanWPテーマ。

2. Spectra Blocksプラグインのインストール

デフォルトのGutenbergプラグインはテンプレートをスタイリングするには不十分なため、Spectra Blocksプラグインをインストールします。（代わりに Astraテーマとthe Spectra Pluginを使ってディレクトリウェブサイトを作成する方法はこちらのチュートリアルをご覧ください)

このプラグインはカスタマイズされたGutenbergブロックを提供しており、デフォルトのブロックより優れているため、ページテンプレートのデザインに役立ちます。

に移動します プラグイン >> 新規追加。

Spectra Blocksを検索し、インストールして有効化してください。

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

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

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

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

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

GeoDirectoryでは、Google Maps APIキーの設定とダミーリスティングのインポートを行うために、セットアップウィザードを完了する必要があります。

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

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

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

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

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

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

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

第4点について：これは必須要件です。ただし、月200ドルのしきい値を超えた場合にのみ課金されます。

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

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

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

デフォルトの都市としてニューヨークを設定します。

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

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

追加機能を加える

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

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

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

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

ダミーデータを追加する

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

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

OceanWPディレクトリウェブサイトのデザイン

テーマとプラグインのインストールが完了し、GeoDirectoryの初期設定も済んだので、OceanWPテーマを使ってディレクトリウェブサイトのデザインを始めましょう。

1. OceanWPディレクトリウェブサイトのホームページデザイン

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

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

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

ロゴ

まず最初に、ウェブサイト用のロゴが必要です。

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

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

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

初期のMVP（実用最小限の製品）としては、Canvaで作成したロゴで十分です。

Canvaには豊富なロゴテンプレートが用意されており、最初のロゴが完璧さや独自性に欠けていても問題ありません。

プロジェクトが進むにつれて、ロゴをブラッシュアップしたり、完全にリニューアルしたりすることはいつでも可能です。

プロジェクトの成功は、ロゴの完成度によって決まるわけではありません。

次に Appearance > カスタマイズ > ヘッダー > ロゴに移動し、「ロゴを選択」をクリックしてPNGファイルをアップロードします。トリミングをスキップ（または必要に応じて画像をトリミング）して「公開」をクリックします。ロゴのサイズが大きい場合は、ロゴの最大高さと幅を設定することもできます。

ナビゲーションメニュー

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

必要なリンクを追加し（左列から右列へ）、保存します。 Menu Settings > の「表示場所」セクション、「メイン」オプションを確認できます。

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

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

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

1. ホーム
2. 会社概要
3. ブログ
4. 場所と場所の追加
5. 検索ページ
6. ログイン
7. アカウント > プロフィール > パスワードを忘れた場合 > ログアウト

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

タイポグラフィ

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

外観 > カスタマイザー > タイポグラフィ > 本文 に移動し、 フォントファミリー: Red Hat Text と フォントウェイト: Normal: 400

また、外観 > カスタマイザー > タイポグラフィ > メインメニューの設定で、次のように設定します。 フォントウェイト: Medium 500, フォントサイズ: 13px

次に、外観 > カスタマイザー > 一般オプション > 一般スタイリング に移動します プライマリカラー: #ff914d と ホバー時のプライマリカラー: #ff731c

コンテンツ

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

ホームページにヒーローヘッダーを追加するために、Spectra Blocksプラグインが提供するコンテナブロックを追加しましょう。

次に、上部のタブから「スタイル」をクリックします。背景タイプとして「タイプ：画像」を選択します。

ヒーローセクション用の画像が必要なので、以下から無料画像をダウンロードします Pexels.com (Thanks, @Kelly).

追加したセクションをクリックし、下のスクリーンショットに示すように、コンテンツ幅オプションで「フル幅」を選択します。

コンテナブロック設定のスタイルタブから選択してください 繰り返し を 繰り返しなし と サイズ を カバー.

ヒーロー画像の中に見出し要素をドラッグ＆ドロップします。

ホームページのヒーロー画像にタイトルを付けましょう。

「スタイル」タブで、テキストカラーをホワイト（#FFFFFF）に変更して、コントラストと読みやすさを向上させます。

このチュートリアルでは、「ニューヨークで最高の レストラン を見つける」のようなシンプルなものを使用します。ここにはお好きなスローガンを追加できます。

配置オプションを使用してテキストを中央揃えにすることを忘れないでください。

ホームページのヘッダーに GD 検索を追加するには、 GD > Search ブロックをヒーローコンテナ内にドラッグします。

次に、このヒーローコンテナに最小の高さを設定します。 幅と高さを650 x 600 pxに設定し、コンテナの幅も 幅と高さを設定し、コンテナの幅も ボックス型 コンテンツ幅： ボックス型.

ページタイトルとヘッダーセクションの余分なスペースを削除する時間です。

ページ右上のOアイコンをクリックします。クリックすると、その中の「一般」セクションで設定を確認し、 パディング： 無効にし、タイトルの選択の中で タイトル： 無効

次は、ホームページにいくつかの必要なセクションを追加します。まず、最新リスティングのセクションを追加しましょう。

ヒーローセクションの下に、もう1つ コンテナ をプラスアイコンをクリックして追加し、 GD > Listings ブロックをそこに追加してください。

次に、この GD > Listings ブロックで必要な設定を行います。並び替えを「最新」に設定します

次に、ビジネスオーナーが自分のビジネスを登録するよう促すCTAを追加します。空のコンテナを追加し、スタイル設定を行います。
背景を設定しましょう。

次に、コンテナのスタイルを追加しましょう：

オーバーレイタイプ： カラー
画像オーバーレイカラー： #FF6900
オーバーレイの不透明度： 0.3
コンテナの幅： 全幅
コンテンツ幅: ボックス型

次に、 Call To Action ブロックをこのコンテナ内にSpectraから追加します。

CTAセクションのタイポグラフィ。
色: #fffff
フォントサイズ: 32px

ボタンにスタイルを追加しましょう。
テキストカラー： #000000
背景色: #FFFFFF
角丸： 全辺 30px
パディング: 10px, 30px, 10px, 30px

ボタンのテキストを リスティングを追加 に変更し、リンクをリスティング追加ページのリンクに設定しましょう。

これでCTAセクションが完成しました。その下にもう1つセクション、 GD > Categories セクションを追加します。

設定は以下のとおりです
デザインタイプ: 画像背景
行アイテム: 3
カテゴリー画像の使用を有効にする

wp-admin -> places -> Place Categories からカテゴリを編集することで、カテゴリに画像を設定できます。

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

できました！次にソーシャルメディアリンクを表示する最後のセクションを追加しましょう。名前は STAY IN TOUCH.

背景付きの新しい空のコンテナを追加する #000000.

次に、このコンテナに見出しを追加します。設定は 配置: 中央揃え、 見出し： H3

テキストとして 「Stay in Touch」
色: #ffffff
フォントサイズ: 24px

次に、その下に段落を追加してテキストを入れましょう。

スタイルを追加する
テキストカラー： #ffffff
サイズ: 小

次に、その下にソーシャルアイコンブロックを追加します。

このソーシャルアイコンブロックに以下のスタイルを追加します
サイズ: 15px
背景サイズ: 10px
ボーダー半径: 100
色: #ffffff

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

2. OceanWP ディレクトリサイトのリスティングページと検索ページのデザイン

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

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

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

リストページと検索ページはほぼ同じ構成なので、一度作成してからもう一方のページにレイアウトをコピーするだけです。

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

これはとても簡単です。

リストページ

GeoDirectory > 設定 > 一般 > ページ に移動し、GD アーカイブページテンプレートの編集をクリックします

このページからすべてのコンテンツを削除します GD Archive ページテンプレート。

次に、2カラムのコンテナを追加します。

左側のコンテナには、GD > Loop Action、GD > Loop、GD > Loop Pagination、GD > Search などの GD アーカイブページ関連ウィジェットをドラッグして上部に配置し、ユーザーがアーカイブページから検索できるようにします。

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

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

次に、以下の画像に示す手順に従って、メインコンテナをフル幅に設定します。

次に、アーカイブページのテンプレートをフル幅に設定します

テーマカスタマイザー ＞ 一般オプション ＞ 一般設定 から、すべてのページのヘッダースタイルセクションも調整します。
スタイルを適用
見出しスタイル: 中央揃え
パディング: 20px
背景色: #1e73be
テキストカラー： #ffffff

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

もう一つの方法として、このチュートリアルで説明されている GD > シンプルアーカイブ ブロックを使用する方法があります。 Elementor でディレクトリウェブサイトを構築する.

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

検索ページ

GeoDirectory > 設定 > 一般 > ページ > GD Search ページテンプレートの編集をクリック

このページからすべてのコンテンツを削除します GD Search ページテンプレート。

GD アーカイブページのコンテンツをすべてコピーし、GD Search ページに貼り付けます。

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

3. OceanWP ディレクトリウェブサイトの単一リスティングページデザイン

GD Detail ページを編集・カスタマイズするには、 GeoDirectory > 設定 > 一般 > ページ > GD Detail ページテンプレートの編集をクリックします。

このテンプレートには、GeoDirectory によって生成されたデフォルトのコンテンツがすでに含まれています。

これらのデフォルトコンテンツをすべて削除し、新しいコンテナを追加します。

まず、リスティング詳細ページの上部に画像スライダーを追加しましょう。 GD > Post Image このコンテナ内のブロック。

この GD > 画像ブロックで以下の設定を調整してください。

画像の上限: 50

表示制限: 2

次に、このコンテナの下にもう1つコンテナを追加しましょう。そこに、必要な他のブロックを追加します。 Geodirectory 詳細ページ.

次に、GD 詳細ページに必要なショートコードをここに1つずつ追加しましょう。含まれるものは以下のとおりです。 GD > Single Taxonomies, GD > Single Tabs, GD > Single Next Prev.

次はサイドバーウィジェットを追加します。wp-admin > 外観 > ウィジェット に移動してください。

メインサイドバーに GD > 著者アクション ウィジェットを追加します。このウィジェットは 編集, 削除 リスティングのオプションを提供します。

ウィジェットをもう1つ追加する GD > Output 場所。このウィジェットは、詳細ページに表示するよう設定されたすべての主要なリスティング情報を表示します。

これを行った後、 リスティング詳細ページ が完了しました。

OceanWPディレクトリウェブサイトにプレミアム機能を追加する

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

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

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

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

このガイドに従って、ディレクトリウェブサイトを際立たせましょう： プロフェッショナルなディレクトリウェブサイトを作成する.

可能性は無限大です。