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

私たちは最近Blockstrapを開発しました。これはプラグイン（ページ構築ブロックを提供）とブロックテーマ（FSE – フルサイト編集）の両方を兼ね備え、WordPressの新しいサイトエディターとBootstrap 5のパワーを組み合わせたものです。

Blockstrapは私たちの新世代のDirectoryテーマのフレームワークとして開発されました。近日中には、ジェネリックビジネスディレクトリ＆イベントテーマ、不動産テーマ、求人ボードテーマ、クラシファイドテーマ、そしてさらに多くのWordPress向けDirectoryテンプレートが含まれる予定です。

これらのテーマはすべて、GeoDirectoryを使用してピクセルパーフェクトなディレクトリサイトを構築するために特別に設計されています。

このチュートリアルでは、BlockstrapテーマとDirectoryチャイルドテーマ、そしてGeoDirectoryプラグインを使ってディレクトリウェブサイトを構築するためのステップバイステップガイドを紹介します：

1. Blockstrap / DirectoryテーマをインストールするZZ
2. GeoDirectoryをインストールして設定する
3. ブロックテーマビルダーを使ってディレクトリウェブサイトをデザインする

このガイドでは、DirectoryテーマとGeoDirectoryプラグインを使って、魅力的なオンラインディレクトリを作成する方法をご紹介します。

このセットアップを使えば、位置情報に基づいた機能を簡単に追加し、サイトを魅力的に見せ、動的に変化するさまざまな種類のコンテンツを追加できます。

でも今は、シンプルでわかりやすい内容にとどめておきましょう。

このチュートリアルでは、以下の内容を取り上げます：

• テーマとプラグインをインストール・設定する
  1. Blockstrap / DirectoryテーマをインストールするZZ
  2. GeoDirectory のインストール
  3. GeoDirectory インストールウィザード
     • マップシステムの選択
     • デフォルトの都市を設定する
     • 追加機能を加える
     • ダミーデータを追加する
• Blockstrap/ディレクトリサイトのデザイン
  1. ロゴ
  2. ホームページのデザイン
     • ヘッダー
     • コンテンツ
  3. リスティングと検索ページのデザイン
  4. リスティング個別ページのデザイン

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

1. Blockstrap テーマとその ディレクトリ子テーマ

まずは Directory テーマをインストールしましょう。これは Blockstrap の子テーマなので、メインテーマも自動的にインストールされます。

Blockstrap テーマをインストールすると、Blockstrap プラグインのインストールも促されます。

Blockstrap プラグインはページビルダーであり、Blockstrap ブロックのコレクションを追加してあなたの ディレクトリサイト.

テーマの1つ星レビューが3件あることが気になる方へ：これらのレビューは、他の開発者が制作した非常に古いバージョンのテーマに対するものであり、現在のバージョンとは関係ありません。私たちはそのコンセプトを高く評価し、新製品に活用したいと考えたため、元の「Directory」テーマとそのURL（wordpress.org/themes/directory/）を取得しました。残念ながら、それに伴い過去のネガティブなレビューも引き継ぐことになりました。

WordPress サイトにアクセスし、 

WP-Admin >> Appearance >> テーマ >> Add Newから「Directory」を検索して、最初のテーマオプションをインストールしてください。

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

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

1. 「プラグイン」から「新規追加」へ進みます。
2. GeoDirectory を検索します。
3. インストールして有効化してください。

以上です！プラグインの設定がすべて完了しました。

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

GeoDirectoryでは、セットアップウィザードを完了して、Google Maps APIキーを設定し、いくつかのダミーリスティングをインポートする必要があります。

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

セットアップの最初のステップでは、Google MapsとOpenStreetMapsの2つのマップシステムからいずれかを選択します。このガイドでは、OpenStreetMapsを使用します。

Google Mapsをご希望の場合は、いくつか追加の手順があります：

1. 「Generate Key」ボタンをクリックし、有効なAPIキーを作成するためにこちらに記載された手順に従ってください。
2. 重要な手順は以下のとおりです：
   • キーを有効化します。
   • 新しいプロジェクトを作成するか、既存のプロジェクトを選択します。
   • キーを取得します。
   • 請求アカウントを設定します。
   • APIキーに制限を設ける（自分のウェブサイトのURLからのみ機能するように）。

ステップ4は必須ですが、月額200ドルを超えた場合のみ料金が発生します。ただし、ほとんどのディレクトリのニーズは無料クレジットで十分に賄えます。

では、デフォルトの都市の設定に進みましょう。

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

次に、ディレクトリのメイン都市となるデフォルトの場所を選択します。

ここではPhiladelphiaをデフォルトの都市に設定していますが、お好みの場所を自由に選択していただけます。

複数の都市をカバーするディレクトリを作成する場合は、Location Managerアドオンが必要です。

追加機能を加える

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

UsersWPは、ユーザーがリスティングを管理したり、プロフィールを作成したり、レビューなどの機能にアクセスしたりするために欠かせないプラグインです。

さらに、 Ninja Formsもインストールします。これにより、すべてのリスティングにお問い合わせフォームが追加されます。このフォームからリスティングオーナーに直接メールが送信されます。(注: BlockStrapにはこの用途に使えるシンプルなお問い合わせフォームが用意されており、より高度なフォームが必要な場合はNinja Formsが便利です)

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

ダミーデータを追加する

インストールウィザードで最後に行うのは、サンプルリスティングの追加です。これによりリスティングのカテゴリも作成されますが、後からいつでも変更できます。

をデザインする Blockstrap/Directory テーマ ディレクトリウェブサイト

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

私たちの Blockstrapの チャイルドテーマである Directory テーマには、GeoDirectoryページ用のブロックテンプレートがあらかじめ用意されています。

この記事では、これらのプリビルドテンプレートを直接カスタマイズしていきます。

1. Blockstrap/Directory ホームページのデザイン

ホームページのデザインをカスタマイズするには。
に移動します Appearance >> エディター >> 「テンプレート」をクリック

次にフロントページテンプレートを選択し、編集アイコンをクリックします。

ホームページテンプレートを編集する前に、まずウェブサイトのロゴを作成しましょう。

1. ロゴ

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

ロゴの最初のバージョンを作成するためにデザイナーを雇う必要はありません。

新しいディレクトリを始める際に犯しがちな最大のミスの一つは、自分が作ろうとしているものを人々が必要としているかどうかをテストする前に、時間とお金をかけすぎてしまうことです。

Canvaのようなアプリを使えば、わずか5分でロゴを作ることができます。Canvaは素晴らしいツールで無料で使えます（プレミアムプランを選択した場合でも、その機能に対して非常にリーズナブルです）。

プロダクトの基本バージョン（MVP、つまり実用最小限のプロダクトと呼ばれます）には、Canvaで作ったロゴで十分です。

選べるロゴテンプレートがたくさんあるので、最初のロゴが完璧でなかったり、際立ってユニークでなくても問題ありません。

プロジェクトが順調に進み始めたら、後からロゴを改善したり、完全に変更したりすることもいつでもできます。

普通のロゴが原因でプロジェクトが失敗することは、まずありません。

このロゴは、ウェブサイトのヘッダーを作成する際に使用します。

ヘッダー

では、以下のスクリーンショットに示されているように、左側から適切なブロックを選択してこのロゴ画像を追加しましょう。

次に、いくつかの必要なメニュー項目を追加しましょう。例えば ホーム, スポット、および ブログ、お問い合わせ、会社概要 を今回のケースでは追加します。

新しいメニュー項目を追加するには BS > Nav item ブロックを使用できます。

プロのヒント：ホームページに透過ヘッダーを使用する場合は、通常のヘッダーと透過ヘッダーの両方にロゴを追加する必要があります。

コンテンツ

これは、デフォルトのホームページが Blockstrap's Directory Child Theme.

でどのように表示されるかです。すでに完成されているように見えますが、いくつかの細かな変更を加えていきます。

The gd_location ショートコードは Geodirectory Location Manager アドオンに属しています。現時点ではこのアドオンを使用していないため、以下のスクリーンショットに表示されているショートコードを削除します。

現在のホームページはこのようになっています。

新しいセクションを追加したり、ページのコンテンツを変更したりしたい場合は、 Blockstrap theme に組み込まれているブロックをご利用ください。ブロック名は BS >

2. Blockstrap/Directory ウェブサイトのリストと検索ページのデザイン

前述のとおり、Blockstrap および Directory テーマには、GD ページ用のあらかじめ作成されたテンプレートが用意されています。

これらのテンプレートはすべて単独で完結しているため、変更を加える必要はありません。

内部ページにはヒーローヘッダーが使用されているため、アーカイブページのヘッダーセクションをカスタマイズし、新しいロゴとメニュー項目に更新する必要があります。

次へ進む： Appearance >> エディター >> 「テンプレート」をクリック >> 選択 GD Archive （アーカイブページのレイアウト用）。

ホームページと同様に、GD アーカイブページのヘッダーに新しいロゴとメニュー項目をアップロードします。

これがデフォルトデザインでの GD アーカイブページの表示です。

同様に、 GD Search ページでは GD Search Archive テンプレートを開き、必要な変更を加えてください。

この記事ではレイアウトをデフォルトのままにしています。

3. Blockstrap/Directory ウェブサイトの個別リスティングページのデザイン

カスタマイズするには GD Detail ページでは GD Single ページテンプレートを開き、必要な変更を加えてください。

これがGD詳細ページのデフォルトテンプレートの外観です。完成度が高く、必要な要素がすべて含まれているため、編集は行いません。

プラグインにプレミアム機能を追加する Blockstrap/Directory ウェブサイト

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

1. 有料リスティング：GeoDirectory の Listing Price Manager アドオンを使用すると、リスティングの追加にかかる費用を自由に設定できます。オプションごとに異なる料金を設定することも可能です。たとえば、有料リスティングでは画像をより多く掲載できるなど追加機能を提供しつつ、無料リスティングの機能を制限することができます。また、利用可能な特別フィールドや説明文の文字数も自由に決められます。
2. Claim Listings：この機能はディレクトリサイトにとって非常に重要です。仕組みはこうです。まず管理者がデータベースを構築し、次にビジネスオーナーを招待して無料リスティングを管理してもらいます。ビジネスオーナーが完全な管理権限を求める場合は、まず有料リスティングにアップグレードする必要があるかもしれません。
3. Advertising: 広告の販売 は オンラインディレクトリを収益化する。ウェブサイトへの訪問者が多い場合は広告ネットワークを利用できます。訪問者が少ない場合は、広告を直接販売することもできます。つまり、企業はサイトの特定エリアにバナーを表示するために料金を支払ったり、検索結果の上位など目立つ場所にリスティングを広告として表示させることができます。

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

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

始めることに興味があれば、こちらのリソースをご覧ください： ディレクトリウェブサイトをゼロから作る方法.

このチュートリアルは汎用性が高く、あらゆるテーマやページビルダーに合わせて応用できます。

ウェブサイトでできることの可能性は無限大です。

まとめ

私たちは、代表的なテーマやページビルダーを使ったディレクトリの構築に関するチュートリアルを多数公開しています。

それらをお読みいただければ、Blockstrapフレームワークとそのディレクトリ子テーマを使った構築がいかに簡単かがおわかりいただけるでしょう。

仕上がりも格段に美しくなります。

そして最後に、Blockstrapのディレクトリウェブサイトをテストしてみると、これまでチュートリアルを公開してきた他のどのサイトよりも大幅に高速であることにもお気づきいただけるでしょう。

最大の魅力は、BlockstrapテーマとプラグインおよびディレクトリChild Themeがすべて100%無料であることです！

さあ、何を待っているのですか？今すぐBlockstrapとGeoDirectoryプラグインでディレクトリウェブサイトを始めて、オンラインで収益を上げましょう！

Bricks Builder でディレクトリウェブサイトを構築する方法は？

🚨 新しい Bricks テンプレートが登場！ 🚨
GeoDirectory を活用したディレクトリサイトの構築を100倍簡単・高速にする、素晴らしい Bricks Builder テンプレートをリリースしました！
🎯 ライブデモ： こちらで確認
📥 ダウンロード＆チュートリアル： Bricks ディレクトリテンプレート
💬 会話に参加しよう: コミュニティフォーラムで話し合う
ぜひ試して、ご意見をお聞かせください！

代わりに独自のテンプレートをデザインしたい場合は、Bricks ビルダーと GeoDirectory プラグインを使ってディレクトリウェブサイトを構築するための入門ガイドをご覧ください:

1. Bricks テーマをインストールする
2. GeoDirectoryをインストールして設定する
3. Bricks ビルダーを使ってディレクトリウェブサイトをデザインする

Bricks ビルダーと GeoDirectory プラグインを組み合わせることで、非常に洗練されたオンラインディレクトリを作成できます。

この組み合わせにより、位置情報ベースの機能のシームレスな統合、見た目のカスタマイズ、ダイナミックなコンテンツブロックの追加が可能になり、ユーザーフレンドリーで魅力的なウェブサイト体験を実現します。

ただし、このチュートリアルではシンプルさと使いやすさに焦点を当てます。

主に GeoDirectory ショートコードとともに Bricks ビルダーを使用します。

今後数週間のうちに、Bricks エレメントとクエリループ（ダイナミックデータ）を主に使って各 GD テンプレートをデザインする方法について、詳細なチュートリアルを掘り下げて公開する予定です。

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

• テーマとプラグインをインストール・設定する
  1. Bricks テーマをインストールする
  2. GeoDirectory のインストール
  3. GeoDirectory インストールウィザード
     • マップシステムの選択
     • デフォルトの都市を設定する
     • 追加機能を加える
     • ダミーデータを追加する

• Bricks ディレクトリウェブサイトをデザインする
  1. ロゴ
  2. ホームページのデザイン
     • ナビゲーションメニュー
     • ヘッダー
     • コンテンツ
     • フッター
  3. リスティングと検索ページのデザイン
  4. リスティング個別ページのデザイン

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

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

まず、テーマと子テーマを Bricks ウェブサイトからダウンロードしてください。

WordPress ウェブサイトにテーマをインストールします。 WP-Admin >> Appearance >> テーマ

テーマライセンスを有効化してください。

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

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

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

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

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

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

ウィザードの最初のステップでは、Google Maps と OpenStreetMaps の2つのマッピングシステムからいずれかを選択します。

このガイドでは、OpenStreetMapsを選択します。

代わりにGoogle Mapsを使用する場合は、いくつかの追加手順が必要です：

• 「Generate Key」ボタンをクリックし、このガイドの手順に従って有効なAPIキーを作成してください。
• 重要な手順は以下のとおりです：
  1. Keysを有効にします。
  2. 新しいプロジェクトを作成するか、既存のプロジェクトを選択します。
  3. キーを取得します。
  4. 請求アカウントを設定します。
  5. APIキーを制限します（自分のウェブサイトのURLからのみ機能するように）。

4番目の手順は必須ですが、月に$200を超えた場合のみ料金が発生します。

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

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

次に、デフォルトの場所を選択します。これはディレクトリの対象となる都市です。

ここではPhiladelphiaをデフォルトの都市として設定しますが、任意の場所を選ぶことができます。

複数の都市向けにディレクトリを作成する場合は、Location Managerアドオンが必要です。

追加機能を加える

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

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

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

このチュートリアルではAyeCode Connectを使用する必要はありません。プレミアムのGeoDirectoryアドオンを追加してWordPress Dashboardから直接インストールしたい場合にのみ必要です。

ダミーデータを追加する

インストールウィザードを完了するための最後のステップは、ダミーのリスティングを追加することです。これによりリスティングのカテゴリも設定されますが、後から自由に変更できます。

現時点では、サイドバーウィジェットやメニュー項目は追加しません。それらは後で設定します。

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

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

1. ロゴ

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

ロゴの最初のバージョンを作成するためにデザイナーを雇う必要はありません。

新しいディレクトリを始める際によくある大きな失敗のひとつは、人々がそれを求めているかどうかを確認する前に、時間とお金をかけすぎてしまうことです。

Canvaのようなアプリを使えば、わずか5分でロゴを作成できます。低コストで非常に優れたツールです。

プロダクトの基本バージョン（MVP、つまり実用最小限のプロダクトと呼ばれます）には、Canvaで作ったロゴで十分です。

選べるロゴテンプレートがたくさんあるので、最初のロゴが完璧でなかったり、際立ってユニークでなくても問題ありません。

プロジェクトが順調に進み始めたら、後からロゴを改善したり、完全に変更したりすることもいつでもできます。

通常、ロゴがプロジェクト失敗の原因になることはありません。このロゴはウェブサイトのヘッダーを作成する際に使用します。

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

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

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

このページをサイトのホームページとして設定する必要があります。そのためには、 wp-admin >> 設定 >> 表示設定

まず、サイトのナビゲーションメニューを設定しましょう。

ナビゲーションメニュー

に移動します Appearance > Menus に移動し、メニューを作成します。

必要なリンクを追加し（左列から右列へ）、保存します。 Menu Settings > の「表示場所」セクション、「ヘッダーメニュー – ログイン中のユーザー と ヘッダーメニュー – ログアウト中のユーザー」オプション。

必要に応じて、同じメニューをモバイルにも表示させるか、モバイル用に別のメニューを作成することができます。

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

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

1. ホーム
2. 場所と場所の追加
3. 検索
4. ブログ
5. アカウント
6. 登録 & ログインページ

ヘッダー

サイトヘッダーを設定するには、次へ進みます wp-admin >> Bricks >> テンプレート >> Add New

ヘッダー用の Bricks テンプレートを作成します。

ここでは、30::70 の比率で2カラムレイアウトを選択します。

左カラムにロゴブロックをドラッグし、サイトのロゴをアップロードします。

幅を width:200px に設定しましょう

右カラムに Nav menu を右カラムにドラッグします。

以下のような設定で
主軸の整列：中央
交差軸の整列： 右

タイポグラフィ
テキスト変換： Poppins 500

コンテンツ

次にホームページのデザインを行います。Bricks で編集ボタンをクリックして、ホームページを編集します。

以下の設定で空のコンテナを追加します
自己整列: 中央
主軸の整列: 中央
交差軸の整列： 中央

で、選択したブランドの車のモデルを選択します。選択すると スタイル セクションのタブ

パディング: 50px（上）50px（下）
最小の高さ: 500
背景画像をアップロード
背景の位置: 中央・中央
背景の繰り返し: 繰り返し

このコンテナの上に見出しタグを追加しましょう。
テキスト: フィラデルフィアで最高のレストランを見つける

次に、見出しタグのスタイルタブで以下の設定を追加します。
タイポグラフィ:
フォントサイズ: 48px
テキストの整列: 中央
テキストの変換: 先頭を大文字にする
フォント： Poppins

次にその下にショートコードブロックを追加し、 [gd_search mb=”3″] ショートコードをその中に追加します。

次に、もう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"]

カテゴリコンテナのスタイルタブで、レイアウト > マージン に移動します。

パディング上: 50px
パディング下: 50px
パディング左: 50px
パディング右: 50px

次に、最近のビジネスを表示するセクションを追加します。

ヘッダータグを付けたもう1つの空のセクションを追加し、
テキスト: 最近のビジネスリスティング

以下のようなタイポグラフィ設定を行います。
フォントサイズ: 32px

その下に以下のショートコードを追加しましょう。

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

その下に、すべてのビジネスを一覧表示するマップを追加します。
そのために、空のコンテナを追加し、その中に以下のショートコードを使ったショートコードブロックを配置します。
コンテナには以下のスタイルを適用します。
パディング上: 50px
パディング下: 50px

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

次に、CTAを追加するために2カラムレイアウトを使用します。
以下の設定で
方向: 水平（行）
自己整列: 中央
交差軸の整列： 中央
カラム間隔: 20
行間隔: 20

左のカラムには画像をドラッグし、右のカラムにはテキストとリスティングページ追加用のボタンを配置します。

フッター

次に、フッターをデザインして作成するには、 wp-admin >> Bricks >> テンプレート >> Add New
に移動し、 テンプレートタグ をFooterとして選択し、Bricksでテンプレートを編集します。

次に、 背景色： #072027

基本的なテキストブロックにテキストを追加してスタイルを設定します テキスト配置: 中央

これでホームページが完成しました。

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

ディレクトリには2つの重要なページが必要です。1つはリスティング用（アーカイブ、カテゴリー、タグを含む）、もう1つは検索結果用です。

GeoDirectoryは基本的なデザインでこれらを自動的にセットアップします。このガイドでは、これらのページの見た目を少し調整する方法を説明します。

リスティングページと検索ページは非常によく似ているため、一度デザインして同じレイアウトを両方に使用します。

リスティングページのデザインとして、左側にリスティングを、右側に各リスティングの場所を示す固定マップを配置することにしました。

これはとても簡単です。

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

このページからすべてのコンテンツを削除します GD Archive ページテンプレートを選択し、Bricks Builderで編集します。

次に、空のセクションを追加し、その中に 投稿タイトル ブロックをドラッグします。

セクションのスタイル設定から
背景色： #072027
パディング: 30px 10px 30px 10px

投稿タイトルブロックのタイポグラフィ設定を次のように設定します
フォント： Poppins
色: #fffff

次に、空のセクションと2カラムコンテナ（50::50）を追加しましょう。

次に、左のコンテナには、GD > ループアクション、GD > ループ、GD > ループページネーション、GD > 検索など、GDアーカイブページ関連のショートコードを含むショートコードブロックを追加します。これにより、ユーザーはアーカイブページから検索できるようになります。

[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='' ]

右カラムには、以下の設定でGD > マップショートコードを含むショートコードブロックを追加します。

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

また、クラス scrolling-gd-loop を左カラムにスクロールタッチ用として追加します。以下のスクリーンショットでマークされているオプションを確認してください。

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

.scrolling-gd-loop{
    overflow-y: scroll !important;
    max-height: 1000px;
}

これで、アーカイブページの準備が完了しました。

検索ページのレイアウトを作成するには。

次に、 GD Search ページテンプレートを Bricks >> テンプレート >> Add Newから作成します。必ず テンプレートタイプを選択: GD Search Results

Copy all the content of the GD Archive Bricksテンプレートを選択し、 GD Search ページのBricksテンプレートに貼り付けます。

これを行うには、GDアーカイブページで、Bricks Builderの右カラム（Structure）にあるコピー（すべて）アイコンをクリックします。

検索ページに移動します。検索ページは Geodirectory > Settings > General > Pages.

から見つけることができます。Bricksで編集します。Bricks Builderの右カラムにある削除（すべて）アイコンをクリックします：

最後に、Bricks Builderの右カラムにある貼り付け（すべて）アイコンをクリックします：

これにより、検索ページとアーカイブページが同一のフルワイドレイアウトになり、左カラムに検索結果、右カラムに固定マップが表示されます。

検索ページについては、Bricksに対してこのテンプレートを個別ページに表示するよう指定する必要もあります。

これを行うには、 ギアアイコン > テンプレート設定 > 条件 > 個別 > 検索ページ （検索ページのタイトル）。

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

詳細ページのテンプレートを作成する時が来ました。Bricksで GD Detail ページテンプレートを編集します。

次に移動してください: GeoDirectory > 設定 > 一般 > ページ > GD Detail ページテンプレートの編集をクリックします。

このテンプレートには、GeoDirectory によって生成されたデフォルトのコンテンツがすでに含まれています。
デフォルトのコンテンツをすべて削除し、Bricksを使って編集します。

空のセクションを追加し、その中にショートコードブロックを追加しましょう。

画像スライダーを表示するには、以下のショートコードを使用してください。

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

次に、空のセクション内に2カラムのコンテナを追加しましょう。

左のコンテナには、以下のショートコードを追加します。

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

[gd_page_title tag='h1'  no_wrap='false'  title_container='1'  strip_html=']
[gd_single_taxonomies taxonomy=''  prefix=''  link_style=''  link_color=''  link_color_custom=''  link_icon='false']
[gd_single_tabs heading_font_size="0" heading_text_color_custom="#000000" mt_lg="3" border_type="border"]

右のカラムには、 
GD > Author Action、および GD > Output Location ブロックをドラッグします。

[gd_author_actions hide_edit='false'  hide_delete='false'  author_page_only='false']
[gd_output_location location="detail" list_style="wrap"]

これで、リスティング詳細ページが完成しました。

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

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

1. 有料リスティング：GeoDirectory の Listing Price Manager アドオンを追加します。リスティングの掲載費用を自由に設定できます。価格レベルごとに、含める機能と含めない機能を選択できます。たとえば、有料リスティングでは画像をより多く許可し、無料リスティングでは制限するといったことが可能です。特定のカスタムフィールドの利用可否や、説明文の長さの上限も設定できます。

1. Claim Listings：この機能はディレクトリにとって非常に重要です。仕組みはこうです：管理者がデータベースを設定し、ビジネスオーナーを招待して無料リスティングを管理してもらいます。ビジネスオーナーがリスティングを管理しようとする場合、まず有料リスティングにアップグレードする必要がある場合があります。

1. Advertising: 広告の販売 は オンラインディレクトリを収益化する. あなたのウェブサイトへの訪問者が多い場合は、広告ネットワークを利用できます。そうでない場合は、広告を直接販売することもできます。つまり、企業はサイトの特定の場所にバナーを掲載するために料金を支払ったり、検索結果の上位など、リスティングを広告として表示させたりすることができます。

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

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

初めてプロジェクトに取り組む方のために、こちらのガイドをご活用ください： 独自のディレクトリウェブサイトを構築する.

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

可能性は無限大です。

BuddyBossとGeoDirectoryプラグインを使用してディレクトリウェブサイトを作成するには、以下の手順に従ってください：

1. BuddyBossテーマとBuddyBoss Platformをインストールする。
2. GeoDirectoryをセットアップする。
3. Elementorプラグインをインストールする。
4. BuddyBossテーマとElementorを使用してディレクトリウェブサイトをデザインする。

BuddyBossとGeoDirectoryプラグイン、Elementorプラグインを組み合わせることで、洗練されたオンラインディレクトリとソーシャルネットワーク機能を備えた多彩なプラットフォームを構築できます。

この組み合わせを活用し、本記事で紹介する手順に従うことで、ソーシャルネットワーク機能を備えた使いやすいディレクトリサイトを簡単に作成できます。

その方法について、詳しく見ていきましょう。

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

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

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

1. をインストールする BuddyBoss テーマとBuddyBoss Platform

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

に移動します buddyboss.com、BuddyBoss テーマと BuddyBoss プラットフォームを購入してダウンロードしてください。

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

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

に移動します プラグイン >> Add New

「アップロード」を選択し、 「インストール」、 と 「有効化」 の BuddyBoss platform プラグインを使ってゼロから構築していきます。

では、BuddyBoss を設定しましょう。

に移動します BuddyBoss >> コンポーネント

ここではすべてのコンポーネントを有効にしていますが、必要に応じて選択してください。

次に、BuddyBoss に必要なページをいくつか設定しましょう。設定は BuddyBoss >> ページ

すべての設定はデフォルトのままにしますが、必要に応じて確認・変更することができます。
これでサイトにすべてのソーシャルネットワーキング機能と BuddyBoss のルック＆フィールが整いました。

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

テンプレートをスタイリングするために、 Elementor プラグインを使ってゼロから構築していきます。

The Elementor プラグインはデフォルトよりも優れた多くのカスタマイズ機能を提供しており、ページテンプレートのデザインに役立ちます。

Elementor にはプロバージョンもあり、多くの機能を提供していますが、GeoDirectory はどちらとも互換性があります。

この記事では Elementor 無料版を使用します。

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

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

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 ダッシュボードから直接インストールしたい場合に必要です。

ダミーデータを追加する

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

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

5. GeoDirectory BuddyBoss 連携

BuddyBoss と GeoDirectory を連携するには、 GeoDirectory BuddyBoss インテグレーション 両方に対応した BuddyBoss と BuddyPress 連携に必要です。

このアドオンを以下からダウンロードしてください： GeoDirectory ダッシュボードから、このプラグインをアップロードしてインストールします。

から Geodiectory >> 設定 >> BuddyPress タブで、以下のスクリーンショットに記載されているすべての設定を有効にします。

このプラグインを使用すると、ユーザーはBuddyBossのプロフィールページからリスティングを管理できます。

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

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

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

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

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

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

ロゴ

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

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

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

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

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

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

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

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

ロゴをデザインしたら、 BuddyBoss > Theme Options > ロゴ、PNGファイルをアップロードします。

トリミングをスキップするか（または必要に応じて画像をトリミングして）のロゴレイアウトで、変更を保存するをクリックします。

ナビゲーションメニュー

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

必要なリンクを追加し（左列から右列へ）、保存します。 Menu Settings > の「表示場所」セクション、「ヘッダーメニュー – ログイン中のユーザー と ヘッダーメニュー – ログアウト中のユーザー」オプションを確認できます。

必要に応じて、同じメニューをモバイルにも表示させるか、モバイル用に別のメニューを作成することができます。

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

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

1. ホーム
2. 場所と場所の追加
3. メンバー
4. ブログ
5. お問い合わせ

コンテンツ

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

すでに以下の記事があります： Elementorでディレクトリサイトを作成する方法.

この記事では、BuddyBossを組み合わせて活用する方法をご紹介します。

ホームページにヒーローヘッダーが必要です。そのためには、ページ＞ホームに移動し、Elementorで編集をクリックします。

セクションを追加します。（ページビルダーのプラスボタンをクリックして、 ウィジェットをここにドラッグ.)

これで、1列のセクションが1つだけある空白のページが完成しました。

コンテナのスタイルセクションから背景画像をアップロードし、以下のような設定も行いましょう：
位置: 中央・中央
繰り返し: 繰り返しなし
表示サイズ： カバー
背景オーバーレイ： #000000
不透明度： 0.51

コンテナのレイアウトセクションでは、以下の設定を行います
最小高さ：500
方向: 列（縦）
中央揃え（縦）: 中央
アイテムの整列: 中央

次に、その上にヘッダータグを追加しましょう。テキストには「Find The Best Restaurant In Philadelphia」を入力し、以下の設定を行います
HTMLタグ: H1
配置: 中央
テキストカラー： #ffffff
タイポグラフィ サイズ: 48px

次に、 GD > Search ブロックを作成し、デフォルト設定で展開します。詳細タブで以下を設定します 幅: 全幅（100%）

その下にもう一つ空のコンテナを追加し、 GD > Categories ブロックをドラッグしてカテゴリの一覧を表示します。
GD > カテゴリブロックの設定を以下のように行います
デザインタイプ: 画像背景
行アイテム数: 4
有効化する カテゴリ画像を使用する オプション

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

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

次に、見出しタグと
テキスト: Recent Business Listing​
配置: 中央
タイポグラフィ サイズ: 38px

GD > Listings ブロックを以下の設定でその下に追加しましょう
並び替え: 最新
グリッド: 4

空のコンテナ内で以下をドラッグしてください： GD > Map ショートコード。

Elementor コンテナの以下の設定で
コンテンツ 幅: 全幅
ギャップ： 0
マージン： 上下 50px
パディング: 0px

最後に、リスティング追加ページへユーザーをリダイレクトするための CTA を追加します。

2カラムレイアウトの空のコンテナを追加します。

左側のコンテナにイメージボックスを追加します。

右側のコンテナには、見出し・テキスト・ボタンをドラッグして以下のような見た目に仕上げます

これでホームページの完成です。

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

ディレクトリには2つの重要なページが必要です。1つはリスティング用（アーカイブ、カテゴリー、タグを含む）、もう1つは検索結果用です。

GeoDirectoryは基本的なデザインでこれらを自動的にセットアップします。このガイドでは、これらのページの見た目を少し調整する方法を説明します。

リスティングページと検索ページは非常によく似ているため、一度デザインして同じレイアウトを両方に使用します。

リスティングページのデザインとして、左側にリスティングを、右側に各リスティングの場所を示す固定マップを配置することにしました。

これはとても簡単です。

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

このページからすべてのコンテンツを削除します GD Archive ページテンプレートを選択し、Elementor で編集します。

ページ設定からページレイアウトを Elementor フル幅に設定します。

次に、以下の設定で空のコンテナを追加しましょう

方向: 縦カラム
中央揃え（縦）: 中央
アイテムの整列: 中央
背景色： #2143D3

では、 GD > ページ タイトル ブロックをドラッグしてみましょう。

次の設定で2カラムレイアウトを追加しましょう。
コンテンツ 幅: 全幅
ギャップ： 0

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

また、クラス scrolling-gd-loop このカラムにスクロールタッチを設定します。

右のカラムには、 GD > Map 次の設定でブロックを追加します。
カラム設定
パディング: 0px
マージン： 0px

GD > マップのショートコード設定をデフォルトに戻し、
Height: 100%
Width: 100vh

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

.scrolling-gd-loop{
    overflow-y: scroll !important;
    max-height: 1000px;
}

これで、アーカイブページの準備が完了しました。

検索ページのレイアウトを作成するには。

Copy all the content of the GD Archive Elementor テンプレートをコピーして、 GD Search ページの Elementor テンプレートに貼り付けます。

検索ページは次の場所から確認できます。 Geodirectory > Settings > General > Pages.

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

詳細ページのテンプレートを作成する時が来ました。Bricksで GD Detail Elementor のページテンプレート。

次に移動してください: GeoDirectory > 設定 > 一般 > ページ > GD Detail ページテンプレートの編集をクリックします。

このテンプレートには、GeoDirectory によって生成されたデフォルトのコンテンツがすでに含まれています。
これらのデフォルトコンテンツをすべて削除し、Elementor を使って編集します。

空のコンテナを追加しましょう
コンテンツ幅: 全幅
ギャップ： 0
マージン： 上下 50px
パディング: 0px
方向: カラムの垂直方向
中央揃え（縦）: 中央
アイテムの整列: 中央

次に、 Gd > Post Images ショートコードを以下の設定で挿入します。
画像の上限: 10
表示上限: 3
出力タイプ: スライダー
自動開始: 有効

コンテナが 幅: 全幅（100%）

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

左カラムに順番に追加します。

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

これで、リスティング詳細ページが完成しました。

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

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

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

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

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

次のオンラインビジネスに必要なステップをこちらでご確認ください： 成功するディレクトリサイトを作るためのステップ.

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

可能性は無限大です。

以下のツールを使ってディレクトリウェブサイトを構築するためのステップバイステップガイドをご紹介します： Blocksy テーマとStackable – Page Builder Gutenbergブロックプラグイン：

1. Blocksyテーマをインストールする
2. Stackable – Page Builder Gutenbergブロックプラグインをインストールする
3. GeoDirectoryをインストールして設定する
4. Design the Directory Website using the Blocksy テーマと Stackable – Page Builder Gutenberg Blocks plugin

BlocksyテーマはGeoDirectoryプラグインおよびStackable – Page Builder Gutenbergブロックプラグインと組み合わさることで、洗練されたオンラインディレクトリを構築するための汎用性が高く高度なプラットフォームを実現します。

この統合により、ユーザーは位置情報ベースの機能をシームレスに組み込み、レイアウトオプションをカスタマイズし、ダイナミックなコンテンツブロックを追加することができ、使いやすく魅力的なインターフェースを実現します。

この統合システムにより、ウェブ開発者やデザイナーは特定の業界ニーズや幅広いコミュニティの要件に合わせた一流のディレクトリウェブサイトを作成できます。

その具体的な方法を詳しく見ていきましょう。

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

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

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

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

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

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

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

2. インストールする Stackable – Page Builder Gutenberg Blocks プラグインを使ってディレクトリウェブサイトをデザインする

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

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

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

検索してください Stackable – Page Builder Gutenberg 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%のディレクトリにとって十分すぎるほどです。

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

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

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

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

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

追加機能を加える

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

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

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

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

ダミーデータを追加する

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

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

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

プラグインをインストールし、GeoDirectoryの初期設定が完了したので、 Blocksy テーマとStackable – Page Builder Gutenberg Blocksプラグイン。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ナビゲーションメニュー

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

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

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

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

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

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

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

メニューの設定を次のように設定してください フォント： Default Font / 14px / Bold 700

コンテンツ

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

ホームページにヒーローヘッダーが必要なため、 Stackable – Page Builder Gutenberg Blocks プラグインを使ってゼロから構築していきます。

カラムレイアウト設定で
ブロック幅： Align Full
コンテンツ幅: Align Full
コンテンツの最大幅： 1200px

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

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

次に、画像の上に見出しブロックを追加しましょう。使用するのは
コンテンツ： フィラデルフィアで最高のレストランを見つける
タイトルHTMLタグ： H1
サイズ: 48
テキストカラー： #000000

次に、 GD > Search ブロックをその下に追加します。

次に、上下のパディングを50pxにした空のカラムをもう1つ追加しましょう。

we will drag the GD > Categories ブロックをその中にドラッグして、カテゴリーの一覧を表示します。

次に、以下の設定で空のコンテナをもう1つ追加しましょう。

ブロック幅： Align Full
コンテンツ幅: Align Full
コンテンツの最大幅： 1200px
色: #00000

では、ウェブサイトに3つ目のセクションを追加しましょう。これを「最近のビジネスリスティング“.

Add a GD > Listing ブロックをプラスアイコンをクリックして追加し、ブロック設定にアクセスします。必ず 有効にして の 詳細設定を表示 オプションを選択してください。
ブロックの スタイル タブで、 レイアウト： グリッドビュー（4カラム）.

次の数を変更します： 表示する投稿数: 8 に設定し、 ロケーションフィルターを有効にする オプションを確認して、 並び替え：最新順。

次に、以下の設定で空のコンテナをもう1つ追加しましょう。

ブロック幅： Align Full
コンテンツ幅: Align Full

追加する GD > Map ブロックを追加し、設定を
幅： 100%
高さ: 450px

最後に CTA を追加します。あらかじめ用意されたテンプレートのひとつを使用します

以下の設定を使用してください

ブロック幅： Align Full
コンテンツ幅: Align Full

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

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

リストページ

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

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

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

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

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

これはとても簡単です。

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

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

以下の設定で空のカラムを追加しましょう
ブロック幅： Align Full
コンテンツ幅: Align Full
コンテンツの最大幅： 1200px
色: #00000
パディング: 30px

次に GD > post title ショートコードを追加します。

次に、 Column ブロックを 50:50 レイアウト.

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

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

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

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

.breakdance .bde-column-111-108.bde-column{
	overflow:hidden;
}

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

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

検索ページ

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

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

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

最後に、検索ページを全幅表示にするには、以下の CSS が必要です。

.geodir-page-search #main article {
max-width: 100%;
}

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

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

まず、外観 > カスタマイズ > 場所 > 個別の場所 からデフォルトのタイトルを無効にし、以下の手順に従ってタイトルを非表示にします。

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

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

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

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

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

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

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

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

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

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

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

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

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

オンラインビジネスの開始を検討しているなら、ディレクトリウェブサイトの作成が最も手軽な方法かもしれません。

このガイドで、オンラインディレクトリの秘訣を解き明かしましょう： ディレクトリウェブサイト作成ガイド.

Avada テーマと Avada Builder プラグインを使ってディレクトリウェブサイトを開発する、わかりやすいガイドです：

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

Avada テーマは、GeoDirectory プラグインおよび Avada Builder プラグインと組み合わせることで、柔軟なオンラインディレクトリを作成するのに最適な方法です。

この組み合わせにより、位置情報ベースの機能の簡単な追加、レイアウトのカスタマイズ、そしてユーザーフレンドリーな体験のための動的コンテンツの組み込みが可能になります。

ウェブ開発者やデザイナーが、特定の業界やより広いコミュニティのニーズに合わせた高品質なディレクトリウェブサイトを構築できます。

これを実現する方法の詳細を見ていきましょう。

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

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

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

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 キーを生成します。

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

1. キーを有効にします。
2. プロジェクトを新規作成するか、既存のプロジェクトを選択します。
3. キーを取得します。
4. 請求アカウントを有効化します。
5. 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つと、サブナビゲーションリンクをいくつか追加しました：

1. ホーム
2. 会社概要
3. ブログ
4. 場所と場所の追加
5. プロフィール
6. ログイン
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 ディレクトリウェブサイト

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

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

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

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

初めての方は、こちらから始めましょう： ディレクトリウェブサイトの立ち上げ：初心者向けガイド.

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

可能性は無限大です。