Astraテーマと SpectraプラグインでディレクトリWebサイトを作成する
Astraテーマを使ってディレクトリウェブサイトを構築する最善の方法は？
Astraテーマを使ったディレクトリウェブサイトの作成には、GeoDirectoryプラグインとSpectra Blocksプラグインを利用するのが最善です。強力でカスタマイズ性の高いオンラインディレクトリを構築するための優れた方法です。
以下は、Astraテーマと Spectra Website Builder Plugin
- Astraテーマをインストールする
- Spectra Blocksをインストールする
- GeoDirectoryをインストールしてセットアップする
- AstraテーマとSpectra Blockを使ってディレクトリウェブサイトをデザインする
GeoDirectoryとAstraテーマを使ったディレクトリウェブサイトの構築方法を詳しく見ていきましょう。
このチュートリアルでは、以下を行います：
テーマとプラグインのインストール。
1. Astraテーマをインストールする
まず、テーマをインストールする必要があります。このチュートリアルでは、Astra テーマをインストールします。
に移動します Appearance >> テーマ
「新規追加」を選択し、 「インストール」、 と 「有効化」 Astra テーマ。
2. Spectra Blocks プラグインをインストールする
次に、Spectra Blocks プラグインをインストールする必要があります。このプラグインは、Gutenberg ブロックを使用してページをデザインするためのオプションを追加提供します。
に移動します プラグイン >> 新規追加。
Spectra Blocks を検索し、インストールして有効化してください。
セットアップウィザードのすべてのステップをスキップできます。
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 ダッシュボードから直接インストールしたい場合に必要です。
ダミーデータを追加する
インストールウィザードの最後のステップは、ダミーのリスティングを追加することです。これにより、後で必要に応じて編集できるリスティングカテゴリも追加されます。
サイドバーウィジェットとメニュー項目は今すぐ追加しません。後ほど行います。
AstraディレクトリウェブサイトをデザインするDesign the Astra Directory Website
テーマとプラグインのインストール、および GeoDirectory の初期設定が完了したので、Astra を使ってディレクトリウェブサイトのデザインを始めましょう。
1. Astra ディレクトリウェブサイトのホームページデザイン
新しいページを作成するか、WordPress がデフォルトで作成するサンプルページなどを利用できます。
「ページ」に移動し、サンプルページを編集して「Home」に名前を変更するか、この目的のために新しいページを作成してください。
次に、 Appearance > カスタマイズ > ホームページの設定 に移動して、ホームページを選択してください。
ロゴ
まず最初に、ウェブサイト用のロゴが必要です。
ロゴの初版を作成するためにデザイナーに投資する必要はありません。
新しいウェブディレクトリビジネスを始める際に犯しがちな最大の失敗の一つは、製品市場適合性を検証する前に、多くの時間とお金をつぎ込んでしまうことです。
Canva のようなアプリを使えば、わずか5分でロゴをデザインできます。驚くほど手頃な価格で、しかも効果的です。
MVP（実用最小限の製品）であれば、Canva でデザインしたロゴで十分すぎるほどです。
選べるロゴテンプレートは多数あり、最初のロゴが理想どおりの完成度やオリジナリティでなくても問題ありません。
プロジェクトが軌道に乗れば、後からいつでもブラッシュアップしたり、大幅な変更を加えたりできます。
平凡なロゴが、プロジェクト失敗の主な原因になることはありません。
ロゴをデザインしたら、 Appearance > カスタマイズ > サイト基本情報、「ロゴを選択」をクリックし、PNG ファイルをアップロードしてください。トリミングはスキップして（または必要に応じて画像をトリミングして）、「公開」をクリックします。
ナビゲーションメニュー
ロゴを作成して追加したら、 Appearance > Menus に移動し、メニューを作成します。
必要なリンクを追加し（左列から右列へ）、保存します。 Menu Settings > の「表示場所」セクションで、「ヘッダー」オプションにチェックを入れることができます。
必要に応じて、同じメニューをフッターに表示させたり、フッター用に別のメニューを作成したりすることができます。
この例では、ヘッダーナビゲーションメニューのみを使用します。
7つのリンクを追加しました：
- ホーム
- 会社概要
- ブログ
- スポット
- プロフィール
- ログイン
- ログアウト
ログインリンク（UsersWP エンドポイントより）はログアウト中のユーザーにのみ表示され、ログアウトおよびプロフィールのリンクはログイン中のユーザーにのみ表示されます。
タイポグラフィ
次に、ウェブサイトのテキストフォントとサイズのタイポグラフィを設定しましょう。すべてのサイトテキストに適用される、フォントファミリー、フォントウェイト、フォントサイズをグローバルに設定します。
コンテンツ
Spectra ブロックプラグインには、あらかじめ用意されたページテンプレートが多数あります。編集ページ画面上部の「テンプレートキット」ボタンをクリックするとアクセスできます。
これらのページテンプレートや特定のパターンを使って、サイトのページを構築することができます。
Spactra Blocks プラグインを使って、このページをゼロから構築していきます。
ホームページにヒーローヘッダーが必要なので、Spectra Blocks プラグインが提供するコンテナブロックを追加しましょう。
追加したセクションをクリックし、以下のスクリーンショットに示すように、「コンテンツ幅」オプションで「フル幅」を選択します。
次に、上部のタブから「スタイル」をクリックします。背景タイプとして「タイプ：画像」を選択します。
ヒーローセクションには画像が必要です。以下から無料でダウンロードします Pexels.com (Thanks, @Kelly).
画像をアップロードして選択します 繰り返し を 繰り返しなし と サイズ を カバー.
画像にはオーバーレイが必要です。オーバーレイがないと、上に重ねたテキストのコントラストが不十分になり、読みにくくなります。
オーバーレイタイプ：カラー、カラー：#1E293B、不透明度：0.3 を選択します
ヒーロー画像を暗くしたので、テキストを追加できます。
ヒーロー画像の中に見出し要素をドラッグ＆ドロップします。
ホームページのヒーロー画像にタイトルを付けましょう。
「スタイル」タブで、テキストカラーをホワイト（#FFFFFF）に変更して、コントラストと読みやすさを向上させます。
このチュートリアルでは、「Find the Best Restaurant in Philadelphia」のようなシンプルな例を使用します。お好きなスローガンを自由に追加してください。テキストを中央揃えにする際は、配置オプションを使用することを忘れずに。
ホームページのヘッダーに GD 検索を追加するには、 GD > Search ブロックを ヒーローコンテナの中にドラッグします。
次に、このヒーローコンテナに最小の高さを追加します。 私は設定します 高さと幅を800pxに設定し、コンテナの幅を 全幅 に、そして コンテンツ幅を ボックス型.
これで、ホームページのヘッダーにページタイトルと余白が表示されるようになりました。
次に、ヘッダーセクションのページタイトルと余白を削除しましょう。
ページタイトルをクリックすると目のアイコンが表示されるので、それをクリックしてページタイトルを非表示にし、余白を削除します。
ホームページにさらにいくつかの必要なセクションを追加しましょう。次にカテゴリセクションを追加します。
ヒーローセクションの下に、 プラスアイコンをクリックして別の コンテナを追加し、 次に 以下を追加します GD > Categories ブロックをそこに追加してください。
次に、このGD > カテゴリブロックで必要な設定を行います。デザインタイプを「画像背景」に設定し、行アイテム数を4にして、 カテゴリ画像を使用する 設定を有効にします。
wp-admin -> places -> Place Categories からカテゴリを編集することで、カテゴリに画像を設定できます。
各カテゴリーにはデフォルト画像を設定するオプションがあります
次に、この新しいコンテナにパディングを追加します。外側のコンテナをクリックして、「スタイル」セクションから必要なパディングを設定してください。ここでは 70px の上下パディングを設定します。
続いて、いくつかのコンテナをすばやく追加していきます。カテゴリセクションの下に最新のリスティングを追加するために、 GD > Listings ウィジェットを使用します。
変更する設定は以下のとおりです：
フィルター > 表示する投稿数 = 4
並び替え > 並び順 = 最新順
デザイン > レイアウト = グリッド表示（4列）
ラッパースタイル > 上マージン = 5
ユーザーがさまざまなフィルターでリスティングを絞り込んでマップで確認できるよう、マップを追加しましょう。
以下の設定で GD > Map を使用しましょう：
マップの種類： Directory Map
マップオプション： すべて有効にする
スタイルタブをクリックして幅を設定し、スタイルを整えましょう。 100% と 高さを 600px 正しく表示されているか 確認するために。
また、マップコンテナを全幅にして、より広く見栄えよく表示されるようにします。
マップの外側のコンテナをクリックし、一般設定でコンテナの幅を「全幅」、コンテンツの幅を「全幅」に設定してください。
次に、最近の投稿を表示するためのコンテナをもう一つ追加しましょう。 Post Grid Spectra Blocksプラグインが提供するブロックコンテナを使用できます。
おめでとうございます！ホームページが完成しました。
必要に応じて、他のコンテナやCTAを複数追加することもできます。
2. Astra ディレクトリウェブサイトのリスティングと検索ページのデザイン
次に、あらゆるディレクトリに欠かせない2つのページをデザインする必要があります。
リスティングページ（一般アーカイブ、カテゴリー、タグ）と検索結果ページ。
GeoDirectoryはデフォルトで一般的なレイアウトでこれらを作成します。このチュートリアルでは、これらのページのデザインを少しカスタマイズします。
リスティングページと検索ページはほぼ同じ構成なので、一度作成してレイアウトをもう一方のページにコピーします。
リストページのレイアウトは、左側にリスト一覧、右側にリストの正確な位置を示すスティッキーマップを配置することに決めました。
これはとても簡単です。
リストページ
GeoDirectory > 設定 > 一般 > ページ に移動し、GD アーカイブページテンプレートの編集をクリックします
このページからすべてのコンテンツを削除します GD Archive ページテンプレート。
次に、2カラムのコンテナを追加します。
次に、左側のコンテナに、GD > ループアクション、GD > ループ、GD > ループページネーション、GD > 検索などのGDアーカイブページ関連ウィジェットをドラッグし、ユーザーがアーカイブページから検索できるように上部に配置します。
右のカラムには、 GD > Map ブロックをドラッグします。
GD > マップの設定はすべてデフォルトのままにします。高さを指定しましょう。私は 100vh.
次に、画像に示された手順に従って、メインコンテナを全幅に設定してください。
これで、リスティングアーカイブページの準備が整いました。
Astraの無料バージョンは設定が限られているため、左側のコンテナのコンテンツサイズを右側のマップコンテナと同じにするために、以下のCSSスニペットが必要になる場合があります。wp-admin > 外観 > カスタマイズ からテーマカスタマイザーに貼り付けることができます。
.geodir-archive .wp-block-geodirectory-geodir-widget-loop .geodir-loop-container .geodir-listing-posts{ overflow-y: scroll; max-height: 100vh; }
さらに簡単な方法があります。ページをフル幅に設定すれば、チュートリアルで説明しているように GD > シンプルアーカイブブロックを追加できます Elementor でディレクトリウェブサイトを構築する方法.
検索ページについても、同じ手順を繰り返します。
検索ページ
Geodirectory > 設定 > 一般 > ページ > GD 検索ページテンプレートの編集をクリックします。
このページからすべてのコンテンツを削除します GD Search ページテンプレート。
GD アーカイブページのコンテンツをすべてコピーし、GD Search ページに貼り付けます。
これで GD Search とアーカイブページの準備が整いました。
3. Astra ディレクトリウェブサイトの単一リスティングページデザイン
GD 詳細ページを編集・カスタマイズするには、次へ移動します GeoDirectory > 設定 > 一般 > ページ > GD Detail ページテンプレートの編集をクリックします。
このテンプレートには、GeoDirectory によって生成されたデフォルトのコンテンツがすでに含まれています。
このデフォルトコンテンツをすべて削除し、次の設定でコンテナを追加します コンテナ幅： フル幅、および コンテンツ幅: フル幅。
次に、リスティング詳細ページの上部に画像スライダーを追加しましょう。 We will drag the GD > Post Image ブロックをこのコンテナにドラッグします。
画像の上限を 10、表示上限を 1 に設定することで、各スライドに 1 枚の画像だけが表示されます。
次に、この下に別のコンテナを追加し、そこに Geodirectory 詳細ページ.
では、必要な GD 詳細ページのショートコードをここに一つずつ追加していきましょう。含まれるものは GD > Single Taxonomies, GD > Single Tabs
次はサイドバーウィジェットを追加する番です。wp-admin > 外観 > ウィジェット に移動します。
プライマリサイドバーに GD > 著者アクション ウィジェットを追加します。このウィジェットは、リスティング著者に編集および 削除 リスティングのオプションを提供します。
もう1つウィジェットを追加し、 GD > Output 場所。このウィジェットは、詳細ページに表示するよう設定されたすべての主要なリスティング情報を表示します。
これを行った後、私たちの リスティング詳細ページ が完了しました。
Astra ディレクトリウェブサイトにプレミアム機能を追加する
ご希望であれば、次のようなプレミアム機能をディレクトリに追加することができます：
- 有料リスティング：GeoDirectory Listing Price Manager アドオンを使用すると、リスティング申請に価格を設定できます。各価格ティアごとに、次のような機能を有効/無効にできます：無料リスティングの画像枚数を制限しながら有料リスティングではより多くの画像を許可する、タグやカテゴリの数を増減させる、特定のカスタムフィールドを有効または無効にする。説明文の長さを長くしたり短くしたりすること。
- Claim Listings：これはディレクトリの基本的な機能で、管理者がデータベースを作成し、ビジネスオーナーを招待して無料リスティングを管理させることができます。リスティングの申請プロセスでは、リスティングのオーナーシップを取得するために有料リスティングへのアップグレードを必須とする場合があります。
- Advertising: 広告の販売 は オンラインディレクトリを収益化する。トラフィックが多い場合は、広告ネットワークを利用できます。そうでない場合は、広告を直接販売し、ウェブサイトの特定エリアにバナーを追加したり、オーガニック検索結果の上部などにリスティングを広告として表示させたりすることができます。
これらはほんの三つの例に過ぎません。しかし、 ディレクトリウェブサイトはオンラインで収益を得る多くの方法を提供しています.
手作りアイテムのグローバルマーケットプレイスを作成したり、イベントチケットや割引クーポンを販売したりすることができます。
この充実したリソースで、理想のディレクトリサイトを構築しましょう： ディレクトリウェブサイトの構築：総合ガイド.
可能性は無限大です。
ニュースレター - 最新情報をお届け！
最新ニュース、ヒント、限定コンテンツを直接メールボックスにお届けします。
