Breakdance – Website Builder for WordPressでディレクトリウェブサイトを作成する

create directory breakdance

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

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

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

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

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

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

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

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

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

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

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

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

install-geodirectory-720x386-1012537
GeoDirectoryプラグインをインストールする

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

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

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

gd-wizard-map-api-key-720x338-8258688
GeoDirectoryセットアップウィザード

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

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

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

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

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

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

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

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

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

gd-wizard-default-city-720x535-6899549
ディレクトリのデフォルト都市を設定する

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

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

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

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

追加機能を加える

gd-wizard-extra-features-720x583-5463319

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

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

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

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

ダミーデータを追加する

gd-wizard-dummy-data-720x256-9149338
GeoDirectory ダミーリスティング

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

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

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

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

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

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

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

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

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

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

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

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

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

可能性は無限大です。

GeoDirectoryのパワーを解き放とう！

今すぐオンラインビジネスを始めよう

今すぐ参加！

ニュースレター - 最新情報をお届け！

最新ニュース、ヒント、限定コンテンツを直接メールボックスにお届けします。

20%割引オファー
お急ぎください！期限切れ前に20%割引をゲットしよう。 20%割引を受け取る