Bricks Builderで優れたディレクトリウェブサイトを作成する方法

Naveen Giri

3 years ago

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

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

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

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

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

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

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

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

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

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

テーマとプラグインをインストール・設定する

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

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

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つと、サブナビゲーションリンクをいくつか追加しました：

ホーム
場所と場所の追加
検索
ブログ
アカウント
登録 & ログインページ

ヘッダー

サイトヘッダーを設定するには、次へ進みます 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 ディレクトリウェブサイト

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

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

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

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

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

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

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

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

可能性は無限大です。