Divi でディレクトリウェブサイトを構築する

Arkadiusz Sałek

3 years ago

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

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

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

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

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

Elegant Themesが作成したランキングで、GeoDirectoryプラグインが第1位を獲得しました。

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プラグインを使ったディレクトリサイトの作成方法：ステップバイステップガイド
テーマとプラグインのインストール。
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 キーを生成します。

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

キーを有効にします。
プロジェクトを新規作成するか、既存のプロジェクトを選択します。
キーを取得します。
請求アカウントを有効化します。
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個のリンクを追加しました：

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

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

コンテンツ

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

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

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

あらかじめ用意されたレイアウトパックを使って、Diviのビジネスディレクトリを作成する

ホームページにアクセスし、「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 ディレクトリウェブサイトにプレミアム機能を追加する

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

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

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

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

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

可能性は無限大です。