OceanWP でディレクトリサイトを作成するには？
OceanWP テーマを使ったディレクトリサイト構築のステップバイステップガイドをご紹介します：
- OceanWP テーマをインストールする
- GeoDirectoryをインストールして設定する
- Spectra Gutenberg Blocks プラグインをインストールする
- OceanWP テーマと Gutenberg を使ってディレクトリサイトをデザインする エディター
OceanWP テーマは、GeoDirectory プラグインおよび Gutenberg Blocks プラグインと組み合わせることで、ダイナミックなオンラインディレクトリを構築するための堅牢で柔軟なソリューションを提供します。
この3つの組み合わせにより、ユーザーはロケーションベースの機能をシームレスに統合し、レイアウトデザインをカスタマイズし、インタラクティブなコンテンツブロックを組み込むことができ、直感的で魅力的なユーザーエクスペリエンスを実現します。
この統合的なアプローチにより、ウェブ開発者やデザイナーは、特定のニッチ市場や幅広いコミュニティのニーズに合わせた、プロフェッショナル品質のディレクトリサイトを簡単に実現できます。
それでは、具体的な方法を見ていきましょう。
このチュートリアルでは、以下を行います：
テーマとプラグインのインストール。
1. OceanWPテーマのインストール
テーマをインストールする必要があります。このチュートリアルでは、OceanWPテーマをインストールします。
に移動します Appearance >> テーマ
「新規追加」を選択し、 「インストール」、 と 「有効化」 OceanWPテーマ。
2. Spectra Blocksプラグインのインストール
デフォルトのGutenbergプラグインはテンプレートをスタイリングするには不十分なため、Spectra Blocksプラグインをインストールします。（代わりに Astraテーマとthe Spectra Pluginを使ってディレクトリウェブサイトを作成する方法はこちらのチュートリアルをご覧ください)
このプラグインはカスタマイズされたGutenbergブロックを提供しており、デフォルトのブロックより優れているため、ページテンプレートのデザインに役立ちます。
に移動します プラグイン >> 新規追加。
Spectra Blocksを検索し、インストールして有効化してください。
セットアップウィザードのすべてのステップをスキップできます。
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%のディレクトリにとって十分すぎるほどです。
デフォルトの都市を設定する
その後、デフォルトの場所を設定します。これはディレクトリが作成される都市です。
デフォルトの都市としてニューヨークを設定します。
必要な場所をどこでも使用できます。
複数の都市にリスティングを追加する必要がある場合は、Location Manager アドオンが必要です。
追加機能を加える
このステップでは、UsersWP をインストールします。これは ユーザーログインプラグイン で、ユーザーがウェブサイトに登録してログインできるようにします。
これは、ユーザーがリスティングを追加・編集できるようにするために必要です。また、ユーザーが自分のリスティングやレビューなどを確認できるユーザープロフィールも作成されます。
さらに Ninja Forms もインストールします。これにより、すべてのリスティングにリスティングオーナーへ直接メールを送信するコンタクトフォームが追加されます。
AyeCode Connect はこのチュートリアルでは必須ではありません。主に、GeoDirectory のプレミアムアドオンを追加して WordPress ダッシュボードから直接インストールしたい場合に必要です。
ダミーデータを追加する
インストールウィザードを完了する最後のステップは、ダミーのリスティングを追加することです。これにより、後で必要に応じて編集できるリスティングカテゴリも追加されます。
サイドバーウィジェットとメニュー項目は今すぐ追加しません。後ほど行います。
OceanWPディレクトリウェブサイトのデザイン
テーマとプラグインのインストールが完了し、GeoDirectoryの初期設定も済んだので、OceanWPテーマを使ってディレクトリウェブサイトのデザインを始めましょう。
1. OceanWPディレクトリウェブサイトのホームページデザイン
新しいページを作成するか、WordPress がデフォルトで作成するサンプルページなどを利用できます。
「ページ」に移動し、サンプルページを編集して「ホーム」に名前を変更するか、新しいページを作成してください。
次に、 Appearance > カスタマイズ > ホームページの設定 に移動して、ホームページを選択してください。
ロゴ
まず最初に、ウェブサイト用のロゴが必要です。
ロゴの初版を作成するためにデザイナーに投資する必要はありません。
新しいディレクトリを始める際に犯しがちな最大のミスの一つは、製品市場適合性をテストする前に時間とお金をかけすぎることです。
Canva のようなアプリを使えば、5分でロゴをデザインできます。安価で、驚くほど高品質です。
初期のMVP（実用最小限の製品）としては、Canvaで作成したロゴで十分です。
Canvaには豊富なロゴテンプレートが用意されており、最初のロゴが完璧さや独自性に欠けていても問題ありません。
プロジェクトが進むにつれて、ロゴをブラッシュアップしたり、完全にリニューアルしたりすることはいつでも可能です。
プロジェクトの成功は、ロゴの完成度によって決まるわけではありません。
次に Appearance > カスタマイズ > ヘッダー > ロゴに移動し、「ロゴを選択」をクリックしてPNGファイルをアップロードします。トリミングをスキップ（または必要に応じて画像をトリミング）して「公開」をクリックします。ロゴのサイズが大きい場合は、ロゴの最大高さと幅を設定することもできます。
ナビゲーションメニュー
ロゴを作成して追加したら、 Appearance > Menus に移動し、メニューを作成します。
必要なリンクを追加し（左列から右列へ）、保存します。 Menu Settings > の「表示場所」セクション、「メイン」オプションを確認できます。
必要に応じて、同じメニューをフッターに表示させたり、フッター用に別のメニューを作成したりすることができます。
この例では、ヘッダーナビゲーションメニューのみを使用します。
メインナビゲーションリンクを7つと、サブナビゲーションリンクをいくつか追加しました：
- ホーム
- 会社概要
- ブログ
- 場所と場所の追加
- 検索ページ
- ログイン
- アカウント > プロフィール > パスワードを忘れた場合 > ログアウト
ログインリンク（UsersWP エンドポイントより）はログアウト中のユーザーにのみ表示され、ログアウト・アカウント・プロフィールのリンクはログイン中のユーザーにのみ表示されます。
タイポグラフィ
次に、ウェブサイトのテキストフォントとサイズのタイポグラフィを設定しましょう。すべてのサイトテキストに適用される、フォントファミリー、フォントウェイト、フォントサイズをグローバルに設定します。
外観 > カスタマイザー > タイポグラフィ > 本文 に移動し、 フォントファミリー: Red Hat Text と フォントウェイト: Normal: 400
また、外観 > カスタマイザー > タイポグラフィ > メインメニューの設定で、次のように設定します。 フォントウェイト: Medium 500, フォントサイズ: 13px
次に、外観 > カスタマイザー > 一般オプション > 一般スタイリング に移動します プライマリカラー: #ff914d と ホバー時のプライマリカラー: #ff731c
コンテンツ
Spactra Blocks プラグインを使って、このページをゼロから構築していきます。
ホームページにヒーローヘッダーを追加するために、Spectra Blocksプラグインが提供するコンテナブロックを追加しましょう。
次に、上部のタブから「スタイル」をクリックします。背景タイプとして「タイプ：画像」を選択します。
ヒーローセクション用の画像が必要なので、以下から無料画像をダウンロードします Pexels.com (Thanks, @Kelly).
追加したセクションをクリックし、下のスクリーンショットに示すように、コンテンツ幅オプションで「フル幅」を選択します。
コンテナブロック設定のスタイルタブから選択してください 繰り返し を 繰り返しなし と サイズ を カバー.
ヒーロー画像の中に見出し要素をドラッグ＆ドロップします。
ホームページのヒーロー画像にタイトルを付けましょう。
「スタイル」タブで、テキストカラーをホワイト（#FFFFFF）に変更して、コントラストと読みやすさを向上させます。
このチュートリアルでは、「ニューヨークで最高の レストラン を見つける」のようなシンプルなものを使用します。ここにはお好きなスローガンを追加できます。
配置オプションを使用してテキストを中央揃えにすることを忘れないでください。
ホームページのヘッダーに GD 検索を追加するには、 GD > Search ブロックをヒーローコンテナ内にドラッグします。
次に、このヒーローコンテナに最小の高さを設定します。 幅と高さを650 x 600 pxに設定し、コンテナの幅も 幅と高さを設定し、コンテナの幅も ボックス型 コンテンツ幅： ボックス型.
ページタイトルとヘッダーセクションの余分なスペースを削除する時間です。
ページ右上のOアイコンをクリックします。クリックすると、その中の「一般」セクションで設定を確認し、 パディング： 無効にし、タイトルの選択の中で タイトル： 無効
次は、ホームページにいくつかの必要なセクションを追加します。まず、最新リスティングのセクションを追加しましょう。
ヒーローセクションの下に、もう1つ コンテナ をプラスアイコンをクリックして追加し、 GD > Listings ブロックをそこに追加してください。
次に、この GD > Listings ブロックで必要な設定を行います。並び替えを「最新」に設定します
次に、ビジネスオーナーが自分のビジネスを登録するよう促すCTAを追加します。空のコンテナを追加し、スタイル設定を行います。
背景を設定しましょう。
次に、コンテナのスタイルを追加しましょう：
オーバーレイタイプ： カラー
画像オーバーレイカラー： #FF6900
オーバーレイの不透明度： 0.3
コンテナの幅： 全幅
コンテンツ幅: ボックス型
次に、 Call To Action ブロックをこのコンテナ内にSpectraから追加します。
CTAセクションのタイポグラフィ。
色: #fffff
フォントサイズ: 32px
ボタンにスタイルを追加しましょう。
テキストカラー： #000000
背景色: #FFFFFF
角丸： 全辺 30px
パディング: 10px, 30px, 10px, 30px
ボタンのテキストを リスティングを追加 に変更し、リンクをリスティング追加ページのリンクに設定しましょう。
これでCTAセクションが完成しました。その下にもう1つセクション、 GD > Categories セクションを追加します。
設定は以下のとおりです
デザインタイプ: 画像背景
行アイテム: 3
カテゴリー画像の使用を有効にする
wp-admin -> places -> Place Categories からカテゴリを編集することで、カテゴリに画像を設定できます。
各カテゴリーにはデフォルト画像を設定するオプションがあります
できました！次にソーシャルメディアリンクを表示する最後のセクションを追加しましょう。名前は STAY IN TOUCH.
背景付きの新しい空のコンテナを追加する #000000.
次に、このコンテナに見出しを追加します。設定は 配置: 中央揃え、 見出し： H3
テキストとして 「Stay in Touch」
色: #ffffff
フォントサイズ: 24px
次に、その下に段落を追加してテキストを入れましょう。
スタイルを追加する
テキストカラー： #ffffff
サイズ: 小
次に、その下にソーシャルアイコンブロックを追加します。
このソーシャルアイコンブロックに以下のスタイルを追加します
サイズ: 15px
背景サイズ: 10px
ボーダー半径: 100
色: #ffffff
おめでとうございます！ホームページが完成しました。
2. OceanWP ディレクトリサイトのリスティングページと検索ページのデザイン
次に、あらゆるディレクトリに欠かせない2つのページをデザインする必要があります。
リスティングページ（一般アーカイブ、カテゴリー、タグ）と検索結果ページです。
GeoDirectory はデフォルトで一般的なレイアウトのページを作成します。このチュートリアルでは、これらのページのレイアウトを少しカスタマイズしていきます。
リストページと検索ページはほぼ同じ構成なので、一度作成してからもう一方のページにレイアウトをコピーするだけです。
リストページのレイアウトは、左側にリスト一覧、右側にリストの正確な位置を示すスティッキーマップを配置することに決めました。
これはとても簡単です。
リストページ
GeoDirectory > 設定 > 一般 > ページ に移動し、GD アーカイブページテンプレートの編集をクリックします
このページからすべてのコンテンツを削除します GD Archive ページテンプレート。
次に、2カラムのコンテナを追加します。
左側のコンテナには、GD > Loop Action、GD > Loop、GD > Loop Pagination、GD > Search などの GD アーカイブページ関連ウィジェットをドラッグして上部に配置し、ユーザーがアーカイブページから検索できるようにします。
右のカラムには、 GD > Map ブロックをドラッグします。
の設定はすべてデフォルトのままにします GD > Map。高さを設定しましょう。ここでは 100vh.
次に、以下の画像に示す手順に従って、メインコンテナをフル幅に設定します。
次に、アーカイブページのテンプレートをフル幅に設定します
テーマカスタマイザー ＞ 一般オプション ＞ 一般設定 から、すべてのページのヘッダースタイルセクションも調整します。
スタイルを適用
見出しスタイル: 中央揃え
パディング: 20px
背景色: #1e73be
テキストカラー： #ffffff
これで、リストアーカイブページの準備が整いました。
もう一つの方法として、このチュートリアルで説明されている GD > シンプルアーカイブ ブロックを使用する方法があります。 Elementor でディレクトリウェブサイトを構築する.
検索ページについても、同じ手順を繰り返します。
検索ページ
GeoDirectory > 設定 > 一般 > ページ > GD Search ページテンプレートの編集をクリック
このページからすべてのコンテンツを削除します GD Search ページテンプレート。
GD アーカイブページのコンテンツをすべてコピーし、GD Search ページに貼り付けます。
これで GD Search とアーカイブページの準備が整いました。
3. OceanWP ディレクトリウェブサイトの単一リスティングページデザイン
GD Detail ページを編集・カスタマイズするには、 GeoDirectory > 設定 > 一般 > ページ > GD Detail ページテンプレートの編集をクリックします。
このテンプレートには、GeoDirectory によって生成されたデフォルトのコンテンツがすでに含まれています。
これらのデフォルトコンテンツをすべて削除し、新しいコンテナを追加します。
まず、リスティング詳細ページの上部に画像スライダーを追加しましょう。 GD > Post Image このコンテナ内のブロック。
この GD > 画像ブロックで以下の設定を調整してください。
画像の上限: 50
表示制限: 2
次に、このコンテナの下にもう1つコンテナを追加しましょう。そこに、必要な他のブロックを追加します。 Geodirectory 詳細ページ.
次に、GD 詳細ページに必要なショートコードをここに1つずつ追加しましょう。含まれるものは以下のとおりです。 GD > Single Taxonomies, GD > Single Tabs, GD > Single Next Prev.
次はサイドバーウィジェットを追加します。wp-admin > 外観 > ウィジェット に移動してください。
メインサイドバーに GD > 著者アクション ウィジェットを追加します。このウィジェットは 編集, 削除 リスティングのオプションを提供します。
ウィジェットをもう1つ追加する GD > Output 場所。このウィジェットは、詳細ページに表示するよう設定されたすべての主要なリスティング情報を表示します。
これを行った後、 リスティング詳細ページ が完了しました。
OceanWPディレクトリウェブサイトにプレミアム機能を追加する
ご希望であれば、次のようなプレミアム機能をディレクトリに追加することができます：
- 有料リスティング：GeoDirectory の Listing Price Manager アドオンを使用すると、リスティング掲載の料金を設定できます。各料金プランごとに、次のような機能を有効・無効にすることができます：無料リスティングの写真枚数を制限しながら、有料リスティングではより多くの写真を許可する。タグやカテゴリーの数を増減する。特定のカスタムフィールドを有効または無効にする。説明文の長さを長くしたり短くしたりする。
- Claim Listings：これはディレクトリの基本的な機能で、管理者がデータベースを作成し、ビジネスオーナーを招待して無料リスティングを管理させることができます。リスティングの申請プロセスでは、リスティングのオーナーシップを取得するために有料リスティングへのアップグレードを必須とする場合があります。
- Advertising: 広告の販売 は オンラインディレクトリを収益化するもう一つの方法です。トラフィックが多い場合は広告ネットワークを利用できます。そうでない場合は、ビジネスがウェブサイトの特定エリアにバナーを掲載したり、たとえばオーガニック検索結果の上部に広告としてリスティングを表示したりできるよう、広告を直接販売することもできます。
これらはほんの三つの例に過ぎません。しかし、 ディレクトリウェブサイトはオンラインで収益を得る多くの方法を提供しています.
手作りアイテムのグローバルマーケットプレイスを作成したり、イベントチケットや割引クーポンを販売したりすることができます。
このガイドに従って、ディレクトリウェブサイトを際立たせましょう： プロフェッショナルなディレクトリウェブサイトを作成する.
可能性は無限大です。