BuddyBossで素晴らしいディレクトリウェブサイトを作る方法
BuddyBossとGeoDirectoryプラグインを使用してディレクトリウェブサイトを作成するには、以下の手順に従ってください：
- BuddyBossテーマとBuddyBoss Platformをインストールする。
- GeoDirectoryをセットアップする。
- Elementorプラグインをインストールする。
- BuddyBossテーマとElementorを使用してディレクトリウェブサイトをデザインする。
BuddyBossとGeoDirectoryプラグイン、Elementorプラグインを組み合わせることで、洗練されたオンラインディレクトリとソーシャルネットワーク機能を備えた多彩なプラットフォームを構築できます。
この組み合わせを活用し、本記事で紹介する手順に従うことで、ソーシャルネットワーク機能を備えた使いやすいディレクトリサイトを簡単に作成できます。
その方法について、詳しく見ていきましょう。
このチュートリアルでは、以下を行います：
テーマとプラグインのインストール。
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 キーを生成します。
主な手順は以下のとおりです：
- キーを有効にします。
- プロジェクトを新規作成するか、既存のプロジェクトを選択します。
- キーを取得します。
- 請求アカウントを有効化します。
- 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つと、サブナビゲーションリンクをいくつか追加しました：
- ホーム
- 場所と場所の追加
- メンバー
- ブログ
- お問い合わせ
コンテンツ
このページを 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 ディレクトリウェブサイト
ご希望であれば、次のようなプレミアム機能をディレクトリに追加することができます：
- 有料リスティング：GeoDirectory の Listing Price Manager アドオンを使用すると、リスティング申請に価格を設定できます。各価格帯ごとに、無料リスティングの画像枚数を制限しながら有料リスティングではより多くの画像を許可する機能や、タグ・カテゴリの数の増減、特定のカスタムフィールドの有効・無効の切り替え、説明文の長短設定といった機能を有効または無効にすることができます。
- Claim Listings：これはディレクトリの基本的な機能で、管理者がデータベースを作成し、ビジネスオーナーを招待して無料リスティングを管理させることができます。リスティングの申請プロセスでは、リスティングのオーナーシップを取得するために有料リスティングへのアップグレードを必須とする場合があります。
- Advertising: 広告の販売 は オンラインディレクトリを収益化するもう一つの方法です。トラフィックが多い場合は広告ネットワークを利用できます。そうでない場合は、ビジネスがウェブサイトの特定エリアにバナーを掲載したり、たとえばオーガニック検索結果の上部に広告としてリスティングを表示したりできるよう、広告を直接販売することもできます。
これらはほんの三つの例に過ぎません。しかし、 ディレクトリウェブサイトはオンラインで収益を得る多くの方法を提供しています.
手作りアイテムのグローバルマーケットプレイスを作成したり、イベントチケットや割引クーポンを販売したりすることができます。
次のオンラインビジネスに必要なステップをこちらでご確認ください： 成功するディレクトリサイトを作るためのステップ.
この汎用チュートリアルは、あらゆるテーマやページビルダーに応用できます。
可能性は無限大です。
ニュースレター - 最新情報をお届け！
最新ニュース、ヒント、限定コンテンツを直接メールボックスにお届けします。