ElementorでディレクトリWebサイトを作成する方法
無料のElementorプラグインでシンプルなディレクトリサイトを構築する方法、またはElementor PROとGeoDirectoryプレミアムアドオンを使って超プロフェッショナルなオンラインディレクトリを作成する方法をご紹介します。
Elementorディレクトリサイトを構築するには？
無料のElementorプラグインを使ってElementorディレクトリサイトを構築する最も簡単な方法は、以下の4つのステップを実行することです：
- Hello Themeをインストールする
- Elementorをインストールする
- GeoDirectoryをインストールしてセットアップする
- Elementorディレクトリサイトをデザインする
詳細な方法を見ていきましょう。ただ、その前に、なぜこのソリューションが最善なのかを確認しておきましょう。
Elementor を使ってディレクトリサイトを構築する最善の方法。
Elementor でディレクトリサイトを構築するには、Elementor.com は Custom Post Type UI、Advanced Custom Fields、および Elementor Custom Skin プラグインの使用を推奨しています。
それが最善の方法なのでしょうか？
場合によってはそうかもしれませんが、以下の機能を必要としないシンプルなディレクトリを構築する予定の場合に限ります：
- 大量のリスティング（wp-posts データベーステーブルはスケーラビリティに難があります）
- 各リスティングの多数のカスタムフィールド（Advanced Custom Fields はスケールしない も同様）
- フロントエンドからユーザーがリスティングを追加・編集できるオプション
- 場所・近接性・GeoLocation・カスタムフィールドによる高度な検索
- 追加機能と表示優先度を備えた有料リスティング
- リスティングオーナーが自分のリスティングをクレームするオプション
- ユーザーレビューと評価によるリスティングの並べ替え
- ビジネスへのルート案内を提供するインタラクティブなマップ
- ビジネスオーナーにメールを送信するためのお問い合わせフォーム
- その他の収益化オプション
- イベントディレクトリ
このチュートリアルに従えば、基本情報を掲載したビジネスカタログを構築できますが、サイト訪問者向けのインタラクティブ機能はほとんどありません。
このアプローチを採用した場合に直面するすべての課題をご紹介します：
Custom Post Types と Advanced Custom Fields を使ったディレクトリサイトの開発
上記のポイントを1つ以上必要とする場合は、多くの追加プラグインが必要になり、場合によってはかなりの量のカスタムコードも必要になります。
もっと良い方法があるはずです！実は、あります！
GeoDirectoryを使いましょう：
最高のElementorディレクトリプラグイン
プレミアムアドオンを使えば、上記のすべてとさらに多くの機能を手に入れることができます。
さらに、このチュートリアルではElementorの無料版で十分なため、Elementor PROの使用を避けることもできます。
Elementor PROが必要なのは、非常に洗練されたパーソナライズされたデザインを求める場合のみです。
それでは早速、GeoDirectory、無料テーマ、Elementorプラグインの基本バージョン、そしてサードパーティの無料アドオンを使って、ディレクトリウェブサイトを構築する方法を見ていきましょう。
無料テーマと無料プラグインだけで作るElementorディレクトリウェブサイト
このチュートリアルでは、まず無料のElementorプラグイン、無料のHello Theme、無料のGeoDirectoryプラグインなど、無料のWordPressリソースを使ってシンプルなディレクトリウェブサイトを構築する方法をご紹介します。
以下の機能を備えています：
- 無制限のカスタムフィールドを持つ無制限のリスティング。
- 近接検索。
- ユーザーレビュー
- リスト追加フォーム。ユーザーがウェブサイトのフロントエンドからリスティングを送信・編集・削除できます。
もちろん、WordPressはそのままの状態でブログや無制限のページを作成するオプションが備わっています。
すでにホスティングプロバイダーとWordPressがインストールされていることを前提としています。
このチュートリアルでは、フィラデルフィア市のビジネスディレクトリを作成します。
このチュートリアルでは、以下を行います：
テーマとプラグインのインストール。
1. Hello Themeをインストールする
まず、テーマをインストールする必要があります。このチュートリアルでは、ElementorのスターターテーマであるHello Themeをインストールします。
に移動します Appearance >> テーマ
「新規追加」を選択し、 「インストール」、 と 「有効化」 Hello テーマを選択します。
2. Elementorをインストールする
次に、ページビルダーをインストールする必要があります。ここでは、Elementorプラグインの無料版をインストールします。
に移動します プラグイン >> 新規追加。
Elementorを検索し、インストールして有効化してください。
セットアップウィザードのすべてのステップをスキップできます。
3. GeoDirectoryをインストールする
最後に、インストールが必要なのは GeoDirectory.
に移動します プラグイン >> 新規追加、GeoDirectoryを検索してください。インストールして有効化すれば、今回のプラグインのインストールは完了です。
4. GeoDirectoryインストールウィザード
GeoDirectoryでは、Google Maps APIキーの設定とダミーリスティングのインポートを行うために、セットアップウィザードを完了する必要があります。
マップシステムの選択（Google Maps または OpenStreetMap）
ウィザードの最初のステップで、2つのマッピングシステムから選択できます。Google MapsとOpen Street Maps（APIキー不要）です。
このチュートリアルでは、Google Mapsを選択します。
「キーを生成」ボタンをクリックし、こちらの ドキュメント の手順に従って有効な API キーを生成します。
主な手順は以下のとおりです：
- プロジェクトを新規作成するか、既存のプロジェクトを選択します。
- キーを有効にします。
- キーを取得します。
- 請求アカウントを有効化します。
- APIキーを制限します（自分のウェブサイトのURLからのみ使用できるように）
第4点について：これは必須要件です。ただし、月200ドルのしきい値を超えた場合にのみ課金されます。
この無料クレジットは、99%のディレクトリにとって十分すぎるほどです。
デフォルトの都市を設定する
次に、デフォルトのロケーションを設定します。これはディレクトリが作成される都市です。ここではデフォルトの都市をそのまま使用します。
GeoDirectoryはデフォルト都市としてPhiladelphiaを使用しています。
必要な場所をどこでも使用できます。
複数の都市にリスティングを追加する必要がある場合は、Location Manager アドオンが必要です。
追加機能を加える
このステップでは、 UsersWP、私たちの ユーザー登録プラグイン ユーザーが サイトへの登録とログインを可能にするプラグイン）をインストールします。
これは、ユーザーがリスティングを追加・編集できるようにするために必要です。また、ユーザーが自分のリスティング、レビュー、その他の関連情報を確認できるユーザープロフィールも作成されます。
さらに Ninja Forms もインストールします。これにより、すべてのリスティングにリスティングオーナーへ直接メールを送信するコンタクトフォームが追加されます。
AyeCode Connect はこのチュートリアルでは必須ではありません。主に、GeoDirectory のプレミアムアドオンを追加して WordPress ダッシュボードから直接インストールしたい場合に必要です。
ダミーデータを追加する
インストールウィザードの最後のステップでは、ダミーのリスティングをいくつか追加します。これにより、後から必要に応じて編集できるリスティングカテゴリも追加されます。
サイドバーウィジェットとメニュー項目は今すぐ追加しません。後ほど行います。
Elementorディレクトリサイトをデザインする
テーマ、プラグインのインストールが完了し、GeoDirectoryの初期設定も終わりましたので、いよいよElementorでディレクトリウェブサイトのデザインを始めましょう。
1. Elementorディレクトリウェブサイトのホームページデザイン
新しいページを作成するか、WordPress がデフォルトで作成するサンプルページなどを利用できます。
「ページ」に移動し、サンプルページを編集して「ホーム」に名前を変更するか、新しいページを作成してください。
次に、 Appearance > カスタマイズ > ホームページの設定 に移動して、ホームページを選択してください。
投稿ページは後で設定します。
ロゴ
まず最初に、ウェブサイト用のロゴが必要です。
ロゴの初版を作成するためにデザイナーに投資する必要はありません。
新しいビジネスを始める際に犯しがちな大きなミスのひとつは、製品市場適合性を検証する前に多くの時間とお金を投資してしまうことです。
Canva のようなアプリを使えば、わずか5分でロゴをデザインできます。驚くほど手頃な価格で、しかも効果的です。
MVP（実用最小限の製品）であれば、Canva でデザインしたロゴで十分すぎるほどです。
選べるロゴテンプレートはたくさんあり、最初のロゴが理想通りに完璧でオリジナルでなくても問題ありません。
プロジェクトが軌道に乗ってきたら、後からいつでも改善したり大きな変更を加えたりすることができます。
平凡なロゴが、プロジェクト失敗の主な原因になることはありません。
ロゴをデザインしたら、 Appearance > カスタマイズ > サイト基本情報、「ロゴを選択」をクリックして、PNGファイルをアップロードしてください。 トリミングをスキップするか（または必要に応じて画像をトリミングして）、「公開」をクリックします。
ナビゲーションメニュー
ロゴを作成して追加したら、 Appearance > Menus に移動し、メニューを作成します。
必要なリンクを追加し（左列から右列へ）、保存します。 Menu Settings > の「表示場所」セクションで、「ヘッダー」オプションにチェックを入れることができます。
必要に応じて、同じメニューをフッターに表示させたり、フッター用に別のメニューを作成したりすることができます。
この例では、ヘッダーナビゲーションメニューのみを使用します。
7つのリンクを追加しました：
- ホーム
- 会社概要
- ブログ
- スポット
- プロフィール
- ログイン
- ログアウト
ログインリンク（UsersWP エンドポイントより) はログアウト中のユーザーにのみ表示され、ログアウトおよびプロフィールのリンクはログイン中のユーザーにのみ表示されます。
コンテンツ
ホームページのデザインを開始できます。まず、 ヒーロー画像 をヘッダーの下に追加する必要があります。
これを行うには、ページ > ホームに移動し、「Elementorで編集」をクリックします。
サンプルページを使用した場合は、テキストを右クリックして「削除」を選択し、テキストエディターを削除してください。新しいページを作成した場合は、セクションを追加します。（ページビルダーのプラスボタンをクリックしてください。そこには ウィジェットをここにドラッグ.)
これで、1列のセクションが1つだけある空白のページが完成しました。
セクション編集アイコン（セクションの中央にある水色のアイコン）をクリックし、「コンテンツ幅」オプションで「全幅」を選択します。
次に、上部タブから「スタイル」をクリックします。背景タイプとして「クラシック」を選択します。
ヒーローセクションには、こちらのPhiladelphiaの無料画像を使用します。画像の提供元： Pexels.com (Thanks, @Kelly).
画像をアップロードし、「位置」オプションを使用して背景の見た目を調整します。この場合、「中央中央」を選択します。
現時点では画像の一部しか表示されていませんが、次のステップで必要な形に表示されるようになります。
画像にはオーバーレイが必要です。オーバーレイがないと、上に重ねたテキストのコントラストが不十分になり、読みにくくなります。
「背景オーバーレイ」をクリックし、背景タイプ：クラシック、カラー：ブラック（#000000）、不透明度：0.5（すでにその設定になっているはずです ）を選択します。
ヒーロー画像を暗くしたので、テキストを追加できます。
画像の中央をクリックします（グレーのプラスボタンがかすかに表示されています）。これにより、左側のElementorパネルにウィジェットが表示されます。
ヒーロー画像の中に見出し要素をドラッグ＆ドロップします。
ホームページのヒーロー画像にタイトルを付けましょう。
このチュートリアルでは、「My Philadelphia Directory」のようなシンプルなものを使用します。ここにお好きなスローガンを追加できます。配置オプションを使ってテキストを中央揃えにするのを忘れずに。
「スタイル」タブで、テキストカラーをホワイト（#FFFFFF）に変更して、コントラストと読みやすさを向上させます。
次に、ヒーロー画像が意図通りに表示されるよう、パディングを追加します。左側のElementorパネルの「詳細」タブを選択し、パディングの値のリンクを解除します（これは値の末尾にあるリンクアイコンをクリックすることで行います).
上の値に250、下の値に50を入力します。左右の値はどちらも0のままにしてください。
タイトルの下にGeoDirectoryの検索ウィジェットを追加して、ホームページのヒーロー画像を完成させることができます。
ただし、まず検索フォームの幅を調整するために、インナーセクションを追加する必要があります。
Elementorの左パネルで、グリッドアイコン（Elementorロゴの右側）をクリックして要素リストに戻ります。
タイトルの下にインナーセクション要素をドラッグ＆ドロップします。
インナーセクションはデフォルトで2列になっています。1列を削除する必要があります。
いずれかの列を右クリックして削除します。次にもう一方の列をクリックし、幅を700に設定します。
これで、インナーセクションにGD > Search要素を追加できます。
Elementorの左パネルで、グリッドアイコン（Elementorロゴの右）を再度クリックして、要素リストに戻ります。
検索 GD > Search インナーセクション内にドラッグ＆ドロップします。
最後に、「詳細」タブをクリックし、パディングの値のリンクを解除して、ボトムパディングに200を追加します。これにより、ヒーロー画像の下部が表示されます。
ヒーロー画像の下にいくつかのリスティングウィジェットや、ブログ記事を紹介するウィジェットを追加することができます。
たとえば4件のリスティングをグリッド表示で追加するには、ヒーロー画像の下に新しいセクションを追加し、コンテンツ幅をボックス型に設定して、幅を1140に指定する必要があります。
このセクション内にまず最新リスティング用の見出しを追加し、テキストを「Recent Listings」（または任意のテキスト）に変更し、テキストを中央揃えにして、色をダークグレー（#333333）に変更し、「詳細」タブからトップマージンに50pxを追加します。
次に、「GD > Listings」ウィジェットを追加します。変更すべき設定は以下のとおりです：
フィルター > 表示する投稿数 = 4
並び替え > 並び順 = 最新順
デザイン > レイアウト = グリッド表示（4列）
ラッパースタイル > 上マージン = 5
次はブログ記事を追加しましょう。
このプラグインを使って ダミー投稿 を画像付きで生成しました。使用したのは の Post Grid Elementor Add-on で、ホームページに表示させました。
リスティングの下に最近の投稿用の見出しを追加し、テキストを「Recent Posts」に変更します（または任意のテキスト）に変更し、テキストを中央揃えにして、色をダークグレー（#333333）に変更し、「詳細」タブからトップマージンに50pxを追加します。
次に、Post Grid（WPC Elementより）を追加し、以下の設定を調整します：
「Style」タブ ＞「Title」＞「Typography」から、フォントサイズを1.25remに変更し、カラーをリスティングタイトルの色に合わせます（#1E73BE).
最後に、「Advanced」タブからトップマージンに50pxを追加します。
これで完成です。ホームページが完成しました。この後は自由に要素を追加できますが、このチュートリアルとしては十分すぎるほどです。
2. Elementor Directory Website リスティング＆検索ページのデザイン
次に、あらゆるディレクトリに欠かせない2つのページをデザインする必要があります。
リスティングページ（一般アーカイブ、カテゴリー、タグ）と検索結果ページです。
GeoDirectory はデフォルトでページを自動作成しますが、このチュートリアルではデフォルトのページを削除して独自のページを作成します。
2つの同じページを作成します。2つの幅広カラムのレイアウトを使用します。
左側にリスティング、右側にリスティングの正確な位置を示すスティッキーマップを配置します。
これはとても簡単です。
リストページ
ページ > 新規追加 > タイトルを追加「Listings」に移動します。新しいページを公開します。
ページを公開したら、「Elementorで編集」ボタンをクリックします。
画面左下の歯車アイコンをクリックし、タイトルを非表示にして、ページレイアウトを「Elementor フル幅」に設定し、「更新」をクリックします。
セクションを追加します（ページビルダーの「ウィジェットをここにドラッグ」と表示されている箇所のプラスボタンをクリックします。)
レイアウト > コンテンツ幅 で「フル幅」を設定します。次に、新しいセクション内のプラスボタンをクリックし、GD > Simple Archive を検索して、新しく作成したセクション内にウィジェットをドラッグ＆ドロップします。
以下の設定を調整します。
メイン出力 > 「検索を表示」にチェックを入れる
マップ > スティッキーマップを有効にする
「更新」をクリックします。リスティングページの設定はこれで完了です。
検索ページについても、同じ手順を繰り返します。
検索ページ
ページ > 新規追加 > タイトルを追加「S」に移動します。新しいページを公開します。
ページを公開したら、「Elementorで編集」ボタンをクリックします。
画面左下の歯車アイコンをクリックし、タイトルを非表示にして、ページレイアウトを「Elementor フル幅」に設定し、「更新」をクリックします。
セクションを追加します（ページビルダーの「ウィジェットをここにドラッグ」と表示されている箇所のプラスボタンをクリックします。)
レイアウト > コンテンツ幅 で「フル幅」を設定します。次に、新しいセクション内のプラスボタンをクリックし、GD > Simple Archive を検索して、新しく作成したセクション内にウィジェットをドラッグ＆ドロップします。
以下の設定を調整してください：
- メイン出力 > 「検索を表示」にチェックを入れる
- マップ > スティッキーマップを有効にする
「更新」をクリックします。検索ページの設定はこれで完了です。
GeoDirectory の設定を変更して、デフォルトのページの代わりにこれら2つのページを使用するようプラグインに指示する必要があります。
WordPress ダッシュボードから、GeoDirectory > 設定 > ページ をクリックします。
「Listings」というタイトルのページをアーカイブページに、「S」というタイトルのページを検索ページに割り当てます。
新しいリスティングページと検索ページの両方が完成し、GeoDirectory はこれらの新しいテンプレートの使用方法を認識しています。
3. Elementor ディレクトリサイトの単一リスティングページのデザイン
ディレクトリを完成させるには、もう1つテンプレート（GD 詳細ページ）をデザインする必要があります。これは個々のリスティングを表示するために使用されるテンプレートです。
GeoDirectory は自動的に生成しますが、新しいページを作成するためにそれを置き換えます。
お好みのタイトルを使用してください。ここでは「mpdetails」と名付けました。下書きとして保存します。
GeoDirectory の設定を変更して、デフォルトの GD 詳細ページの代わりにこのページを使用するようプラグインに指示する必要があります。
WordPress ダッシュボードから、GeoDirectory > 設定 > ページ をクリックします。
「mpdetail」というタイトルのページを詳細ページとして割り当てます。
では、ページに戻り、ページを開いて Elementor で編集ボタンをクリックしましょう。
前のページで行ったように、画面左下のギアアイコンをクリックし、タイトルを非表示にして、ページレイアウトを Elementor フル幅に設定し、更新をクリックします。
セクションを追加します（ページビルダーの「ウィジェットをここにドラッグ」と表示されている箇所のプラスボタンをクリックします。)
レイアウト > コンテンツ幅 で「フル幅」を設定します。次に、新しいセクション内のプラスボタンをクリックし、GD > Post Images を検索して、新しく作成したセクション内にウィジェットをドラッグ＆ドロップします。
以下の設定を調整してください：
- General > Show Limit: 3
- Design > Output Type: Slider
次に、リスティングのタイトルを追加する必要があります。「GD > Post Title」要素を検索し、「Drag Widget Here」エリアにドラッグしてください。
以下の設定を調整してください：
- General > Output Type: H1
- Design > Font Size: H1
次に、リスティングコンテンツを追加する必要があります。新しいセクションを追加してください（ページビルダーの「ウィジェットをここにドラッグ」と表示されている箇所のプラスボタンをクリックします。)
66/33の2カラムレイアウト（左カラムが右カラムの2倍の幅）を選択します
「GD > Single Tabs」要素を左カラムにドラッグします。有効にするオプションは「Content > Show as a list」のみです。
各リスティングの説明、フォトギャラリー、マップ、レビューをリスト形式で出力します。
「Show as List」オプションを有効にしない場合、前述のコンテンツをそれぞれ表示する4つのタブグループが出力されます。
右カラムに「GD > Output location」要素を追加します。
この要素は、タグ、カテゴリー、住所、連絡先情報、営業時間など、リスティングに関するいくつかの情報をまとめて表示します。
これらの詳細は、カスタムデザイン用に個別に使用できる固有の要素としても利用可能です。
たとえば、 GD > Post Address 要素を使用して、ページ上の任意の場所に住所を表示できます。
すべてのコンテンツに対応するのが GD > Post Meta 要素です。KEY値を適切に設定することで、すべてのカスタムフィールドをこの要素を通じて出力できます。
または、次の要素を使用することもできます GD > Badge ボタンとしてほぼあらゆるリスティング情報を表示するために使用します。
シングルディレクトリリスティングページを完成させるために、カスタムCSSを追加してテーマに合わせたデザインに調整し、希望の見た目を実現します。
CSSはひとつの場所にまとめておくのが好みで、Appearance >> Customizer >> Additional CSS にコメントとともに追加するようにしています。
/* Reduce list heading font size */ h2.gd-tab-list-title.h3 { font-size: 1.25rem; } /* Add white space between headings and content */ div#geodir-tab-content-post_content, div#geodir-tab-content-post_images, div#geodir-tab-content-post_map, div#geodir-tab-content-reviews { margin-top: 30px ; }
以上の設定を施した後のシングルリスティングページの外観がこちらです。
これで完成です。Hello テーマと Elementor の無料版、そして GeoDirectory を使って Elementor ディレクトリウェブサイトを構築しました。
Elementor ディレクトリウェブサイトにプレミアム機能を追加する
ご希望であれば、次のようなプレミアム機能をディレクトリに追加することができます：
- 有料リスティング：GeoDirectory の Listing Price Manager アドオンを使用すると、リスティング投稿の料金を設定できます。各料金プランごとに、次のような機能を有効・無効にできます：無料リスティングの写真枚数を制限しながら有料リスティングではより多くの写真を許可する、タグやカテゴリの数を増減する、特定のカスタムフィールドを有効または無効にする、説明文の長さを長くまたは短くする。
- Claim Listings：これはディレクトリの基本的な機能で、管理者がデータベースを作成し、ビジネスオーナーを招待して無料リスティングを管理させることができます。リスティングの申請プロセスでは、リスティングのオーナーシップを取得するために有料リスティングへのアップグレードを必須とする場合があります。
- Advertising: 広告の販売 は オンラインディレクトリを収益化する。トラフィックが多い場合は、広告ネットワークを利用できます。そうでない場合は、広告を直接販売し、ウェブサイトの特定エリアにバナーを追加したり、オーガニック検索結果の上部などにリスティングを広告として表示させたりすることができます。
これらはほんの三つの例に過ぎません。しかし、 ディレクトリウェブサイトはオンラインで収益を得る多くの方法を提供しています.
手作りアイテムのグローバルマーケットプレイスを作成したり、イベントチケットを販売したり、割引クーポンを提供したりすることができます。
私たちのメンバーコミュニティに参加して、あなたのアイデアを実現しましょう： ディレクトリウェブサイトを作成する.
可能性は無限大です。
Elementor PRO でディレクトリウェブサイトを構築する
先述のとおり、Elementor PRO を使用すると、より洗練されたデザインを実現できます。GeoDirectory と Elementor PRO の統合の全貌については、こちらのブログ記事をぜひご確認ください：
Elementor Pro で GeoDirectory テンプレートのデザインをカスタマイズする
Elementor Pro ディレクトリウェブサイトテンプレート
Elementor PRO ユーザー向けに、ダミーデータ入りの完全に機能するディレクトリウェブサイトをワンクリックでインストールできるテンプレートをいくつかご用意しています。
これらのテンプレートは無料で、1分以内にインストールできます。
次に、ダミーコンテンツを実際のコンテンツに編集し、ロゴ・ディレクトリウェブサイトのカラーパレット・タイポグラフィを変更して、テンプレートをあなたのブランドに合わせて調整してください。
以下は、GeoDirectoryとElementor PROで実現できることのいくつかの例です。
ワンクリックでDEMOをインストール（ AyeCode connectプラグイン経由）、 こちらのブログ記事でチュートリアルをご覧ください
Elementorの代わりにGutenbergを使ってディレクトリサイトを構築するチュートリアルに興味がありますか？こちらの記事をご覧ください： Astraテーマでディレクトリサイトを構築する方法.
GeoDirectoryのElementor PRO統合を他のWordPressディレクトリプラグインと比較することは、プラグイン選定において非常に有益な作業のひとつです。ネイティブの動的データ統合に関する問題については、こちらで取り上げました： Directoristの比較記事 と HivePressの比較記事。特にHivePressは、比較記事に記載されているとおり、2022年からElementorサポートが確定済みの機能リクエストとして挙がっています。
ニュースレター - 最新情報をお届け！
最新ニュース、ヒント、限定コンテンツを直接メールボックスにお届けします。
