Neve テーマと Otter ブロックプラグインを使ってディレクトリウェブサイトを構築するためのステップバイステップガイドです：
- をインストールする Neve テーマ
- GeoDirectoryをインストールして設定する
- Otter プラグインをインストールする
- Neve テーマと Gutenberg を使ってディレクトリウェブサイトをデザインする エディター
Neve テーマは、GeoDirectory プラグインおよび Otter プラグインと組み合わせることで、洗練されたオンラインディレクトリを開発するための包括的で柔軟なプラットフォームを提供します。
この組み合わせを活用することで、ユーザーはロケーション中心の機能を簡単に組み込み、レイアウト設定を最適化し、動的なコンテンツブロックを追加することができ、使いやすく没入感のあるインターフェースを実現します。
この一体化したシステムにより、ウェブ開発者やデザイナーは特定の業界ニーズや幅広いコミュニティの要件に対応したトップクラスのディレクトリウェブサイトを構築することができます。
具体的にどのように実現できるか、詳しく見ていきましょう。
このチュートリアルでは、以下を行います：
テーマとプラグインのインストール。
1. をインストールする Neve テーマ
テーマをインストールする必要があります。このチュートリアルでは、 Neve テーマをインストールします。
に移動します Appearance >> テーマ
「新規追加」を選択し、 「インストール」、 と 「有効化」 の Neve テーマをインストールします。
2. インストールする Otter プラグインを使ってディレクトリウェブサイトをデザインする
デフォルトのGutenbergプラグインだけではテンプレートをスタイリングするのに十分ではないため、次のプラグインをインストールします： Otter プラグインを使ってゼロから構築していきます。
このプラグインはデフォルトよりも優れたカスタマイズされたブロックを提供し、ページテンプレートのデザインに役立ちます。
に移動します プラグイン >> 新規追加。
検索してください Otter。インストールして有効化してください。
セットアップウィザードのすべてのステップをスキップできます。
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 ダッシュボードから直接インストールしたい場合に必要です。
ダミーデータを追加する
インストールウィザードを完了する最後のステップは、ダミーのリスティングを追加することです。これにより、後で必要に応じて編集できるリスティングカテゴリも追加されます。
サイドバーウィジェットとメニュー項目は今すぐ追加しません。後ほど行います。
をデザインする Neve ディレクトリウェブサイト
テーマとプラグインをインストールし、GeoDirectory の初期設定が完了したので、 Neve のツール群を使ってディレクトリウェブサイトのデザインを始めましょう。
1. Neve ディレクトリホームページのデザイン
新しいページを作成するか、WordPress がデフォルトで作成するサンプルページなどを利用できます。
「ページ」に移動し、サンプルページを編集して「ホーム」に名前を変更するか、新しいページを作成してください。
次に、 Appearance > カスタマイズ > ホームページの設定 に移動して、ホームページを選択してください。
ロゴ
まず最初に、ウェブサイト用のロゴが必要です。
ロゴの初版を作成するためにデザイナーに投資する必要はありません。
新しいディレクトリを始める際に犯しがちな最大のミスの一つは、製品市場適合性をテストする前に時間とお金をかけすぎることです。
Canva のようなアプリを使えば、5分でロゴをデザインできます。安価で、驚くほど高品質です。
MVP（実用最小限の製品）であれば、Canva でデザインしたロゴで十分すぎるほどです。
選べるロゴテンプレートは数多くあり、最初のロゴが理想通りに完璧でオリジナルでなくても問題ありません。
プロジェクトが軌道に乗れば、後から改善したり大幅に変更したりすることはいつでもできます。
平凡なロゴが、プロジェクト失敗の主な原因になることはありません。
ロゴをデザインしたら、 Appearance > カスタマイズ > ヘッダー、 Change logo リンクをクリックし、PNGファイルをアップロードしてください。切り取りはスキップしてください（または必要に応じて画像をトリミングして）、「ロゴレイアウト」でロゴオプションを選択し、公開をクリックします。
ナビゲーションメニュー
ロゴを作成して追加したら、 Appearance > Menus に移動し、メニューを作成します。
必要なリンクを追加し（左列から右列へ）、保存します。 Menu Settings > の「表示場所」セクション、「メイン」オプションを確認できます。
必要に応じて、同じメニューをフッターに表示させたり、フッター用に別のメニューを作成したりすることができます。
この例では、ヘッダーナビゲーションメニューのみを使用します。
メインナビゲーションリンクを7つと、サブナビゲーションリンクをいくつか追加しました：
- ホーム
- 会社概要
- ブログ
- 場所と場所の追加
- プロフィール
- ログイン
- ログアウト
ログインリンク（UsersWP エンドポイントより）はログアウト中のユーザーにのみ表示され、ログアウト・アカウント・プロフィールのリンクはログイン中のユーザーにのみ表示されます。
タイポグラフィ
次に、ウェブサイトのテキストフォントとサイズのタイポグラフィを設定しましょう。すべてのサイトテキストに適用される、フォントファミリー、フォントウェイト、フォントサイズをグローバルに設定します。
外観 > カスタマイザー > タイポグラフィ > 全般 > 本文 に移動します。以下を設定します
フォントファミリー: Inter
追加フォント バリアント: Regular 400, Medium 500, Semi-Bold 600, Bold 700, Extra Bold 800, Black 900
変換: なし
ウェイト: 400
フォントサイズ: 16
行の高さ: 1.7
フォントファミリー: Arial, Helvetica, sans-serif
外観 > レイアウト > ページ から以下を設定します ヘッダーレイアウト: カバー
コンテンツ
このページを Otter プラグインを使ってゼロから構築していきます。
ホームページにヒーローヘッダーを追加するために、 WordPress.
追加します セクションブロック フルサイズのレイアウトで。
垂直方向の配置：中央に揃えます（スクリーンショットを参照）。 セクションブロック 設定で以下を設定します セクション構造 の設定を次のように変更します。
最小高さ: カスタム
カスタム高さ: 600
次に、ブロックの設定を確認し、背景画像を設定してください。
ヒーローセクション用の画像が必要なため、次のサイトから無料画像をダウンロードします Pexels.com （ありがとう、@rachel-claire）。
背景オーバーレイの設定を選択し、以下を設定します
オーバーレイ 不透明度： 50
背景オーバーレイカラー: #000000 (ブラック)
ヒーロー画像のオーバーレイカラー設定
ヒーロー画像を暗くしたので、テキストを追加できます。
画像の中央をクリックします（プラスボタンがうっすら表示されています）。これにより、新しいブロックを選択できます。セクションブロックを追加してください。
画像の中央を再度クリックして「高度な見出し」 ブロックをドラッグします。
テキストブロックに次のようなテキストを追加します：「フィラデルフィアのベストレストランを探す”.
ブロック選択 H1 として HTMLタグ。テキストの配置 中央。（スクリーンショットに示されています。）
で、選択したブランドの車のモデルを選択します。選択すると 高度な見出しブロックのスタイル 設定
フォントサイズ: 48
フォント変換: 先頭文字を大文字にする
テキストカラー： #FFFFFF
この時点で、Neve ディレクトリウェブサイトのヒーローセクションに検索フォームを追加できます。
タイトルセクションの右下にある「+」ボタンをクリックして、新しいセクションを追加します。
ホームページのヘッダーに GD 検索を追加するには、 GD > Search ブロックをヒーローコンテナ内にドラッグします。
次に、親の セクション ブロックをドラッグします。
で、選択したブランドの車のモデルを選択します。選択すると 構造設定 設定
最大コンテンツ幅: 1170
水平配置：中央
次に、ヒーローセクションの下にスペースを追加します。スペーサーブロックを使用して 高さ = 40.
ホームページにさらにいくつかの必須セクションを追加する時が来ました。プラスアイコンをクリックして セクションブロック をフルサイズレイアウトで追加します。
Change the セクションブロック 設定を変更して セクション構造 設定を次のように更新します：
最大コンテンツ幅： 1170、 水平配置： 中央。
次に、ヒーローヘッダーの下に空のセクションを追加して GD > Categories ブロックを追加します。
ブロックオプションを以下のように設定します
デザインタイプ: 画像背景
行アイテム: 4
カテゴリー画像の使用を有効にする
wp-admin -> places -> Place Categories からカテゴリを編集することで、カテゴリに画像を設定できます。
各カテゴリーにはデフォルト画像を設定するオプションがあります
では、ウェブサイトに3つ目のセクションを追加しましょう。これを「最近のビジネスリスティング“.
プラスアイコンをクリックして「Advanced Heading」を検索し、追加したらテキスト設定を次のように構成します：HTMLタグを H3 に設定し、配置を 中央.
Add a GD > Listing ブロックをプラスアイコンをクリックして追加し、ブロック設定にアクセスします。必ず 有効にして の 詳細設定を表示 オプションを選択してください。
ブロックの スタイル タブで、 レイアウト： グリッドビュー（4カラム）.
次の数を変更します： 表示する投稿数: 8 を確認し、「ロケーションフィルターを有効にする」オプションにチェックを入れて、 並び替え: 最新版。
次に、コンテンツを持ち、幅を100に設定した空のColumnを追加しましょう。
追加する GD > Map ブロックに設定し、その他の設定はデフォルトのままにします。
おめでとうございます！ホームページが完成しました。
2. Neve ディレクトリウェブサイトのリスト一覧ページと検索ページのデザイン
リストページ
次に、あらゆるディレクトリに欠かせない2つのページをデザインする必要があります。
リスティングページ（一般アーカイブ、カテゴリー、タグ）と検索結果ページです。
GeoDirectory はデフォルトで一般的なレイアウトのページを作成します。このチュートリアルでは、これらのページのレイアウトを少しカスタマイズしていきます。
リストページと検索ページはほぼ同じ構成なので、一度作成してからもう一方のページにレイアウトをコピーするだけです。
リストページのレイアウトは、左側にリスト一覧、右側にリストの正確な位置を示すスティッキーマップを配置することに決めました。
これはとても簡単です。
GeoDirectory > 設定 > 一般 > ページ に移動し、GD アーカイブページテンプレートの編集をクリックします
このページからすべてのコンテンツを削除します GD Archive ページテンプレート。
ページ設定を次のように変更します
サイドバーレイアウト: サイドバーなし
フッターウィジェット: デフォルト
コンテンツコンテナ: 全幅
次に、 セクション ブロックを 1:1 レイアウト.
左側のコンテナには、GDアーカイブページ関連のウィジェットをドラッグします。例えば GD > Loop Action, GD > Loop, GD > Loop Pagination、および GD > Search をトップに配置して、ユーザーがアーカイブページから検索できるようにします。
右のカラムに、 GD > Map ブロックを使用し、すべての設定はデフォルトのままにします。ただし、 GD > Map ブロックの高さを 100vh に設定します.
最後の仕上げとして、以下のCSSをテーマカスタマイザーの Appearance => カスタマイズ => CSS を追加
.geodir-archive .container.grid-container{ max-width:100%; } .geodir-archive .wp-block-geodirectory-geodir-widget-loop .geodir-loop-container .geodir-listing-posts{ overflow-y: scroll; max-height: 100vh; }
Neve テーマには GD > アーカイブページのタイトルとの軽微な互換性の問題があるため、このページの上部にタイトルコンテナを作成します。
空のセクションをドラッグし、ブロック設定を次のように指定します
背景： #444444
パディング: 50 px, 20 px, 50 px, 20 px
we will drag the アーカイブタイトル 内のブロック。
これで、リスト一覧ページの準備が整いました。
もう一つの方法として、このチュートリアルで説明されている GD > シンプルアーカイブ ブロックを使用する方法があります。 Elementor でディレクトリウェブサイトを構築する.
検索ページについても、同じ手順を繰り返します。
検索ページ
GeoDirectory > 設定 > 一般 > ページ > GD Search ページテンプレートの編集をクリック
このページからすべてのコンテンツを削除します GD Search ページテンプレート。
GD アーカイブページのコンテンツをすべてコピーし、GD Search ページに貼り付けます。
これで GD Search とアーカイブページの準備が整いました。
3. Neve ディレクトリウェブサイトの個別リスティングページのデザイン
GD Detail ページを編集・カスタマイズするには、 GeoDirectory > 設定 > 一般 > ページ > GD Detail ページテンプレートの編集をクリックします。
このテンプレートには、GeoDirectory によって生成されたデフォルトのコンテンツがすでに含まれています。
これらのデフォルトコンテンツをすべて削除し、新しいセクションブロックを追加します。
まず、リスティング詳細ページの上部に画像スライダーを追加しましょう。
we will drag the GD > Post Image ブロックをこのコンテナにドラッグし、以下の設定を行います
画像の上限: 10
表示上限: 3
出力タイプ: スライダー
自動開始: 有効
次に、もう一つ セクションブロック をその下に、 2:1 レイアウト.
次を変更します セクションブロック 設定を変更して セクション構造 設定を次のように更新します： 最大コンテンツ幅： 1170、 水平配置： 中央
次に、必要なすべての GD Detail ページのショートコードを左カラムに 1 つずつ追加しましょう。
含まれる内容は次のとおりです GD > Post Title, GD > Single Taxonomies、および GD > Single タブ.
右側のカラムには、次を追加します GD > Author Action と GD > Output Location ブロックをドラッグします。
では、クラス（ single-gd-section ）をこの親セクション全体に追加して、最終的な仕上げを行いましょう。
最後に、以下の CSS をテーマカスタマイザーに追加します。 Appearance => カスタマイズ => CSS を追加
.single-gd-section{ max-width:1170px; margin:auto; }
設定後、 リスティング詳細ページ が完了しました。
NeveディレクトリWebサイトにプレミアム機能を追加する
ご希望であれば、次のようなプレミアム機能をディレクトリに追加することができます：
- 有料リスティング：GeoDirectory の Listing Price Manager アドオンを使用すると、リスティング掲載の料金を設定できます。各料金プランごとに、次のような機能を有効・無効にすることができます：無料リスティングの写真枚数を制限しながら、有料リスティングではより多くの写真を許可する。タグやカテゴリーの数を増減する。特定のカスタムフィールドを有効または無効にする。説明文の長さを長くしたり短くしたりする。
- Claim Listings：これはディレクトリの基本的な機能で、管理者がデータベースを作成し、ビジネスオーナーを招待して無料リスティングを管理させることができます。リスティングの申請プロセスでは、リスティングのオーナーシップを取得するために有料リスティングへのアップグレードを必須とする場合があります。
- Advertising: 広告の販売 は オンラインディレクトリを収益化するもう一つの方法です。トラフィックが多い場合は広告ネットワークを利用できます。そうでない場合は、ビジネスがウェブサイトの特定エリアにバナーを掲載したり、たとえばオーガニック検索結果の上部に広告としてリスティングを表示したりできるよう、広告を直接販売することもできます。
これらはほんの三つの例に過ぎません。しかし、 ディレクトリウェブサイトはオンラインで収益を得る多くの方法を提供しています.
手作りアイテムのグローバルマーケットプレイスを作成したり、イベントチケットや割引クーポンを販売したりすることができます。
この詳細ガイドを参考に、今日からサイトの構築を始めましょう： ディレクトリWebサイト構築ガイド。これは、あらゆるテーマやページビルダーに応用できる汎用チュートリアルです。
可能性は無限大です。