Generatepressテーマを使ったディレクトリウェブサイトの作成

Naveen Giri

3 years ago

GeneratePressテーマとGeneratePressブロックプラグインを使ってディレクトリサイトを構築するためのステップバイステップガイドです：

GeneratePressテーマをインストールする
GeoDirectoryをインストールして設定する
をインストールする GenerateBlocks プラグインを使ってディレクトリウェブサイトをデザインする
Design the Directory Website using the Generatepress テーマとGutenberg エディター

Generatepress テーマはGeoDirectoryプラグインおよび GenerateBlocks プラグインと組み合わせることで、ダイナミックなオンラインディレクトリを作成するための堅牢で柔軟なソリューションを提供します。

この3つの組み合わせにより、ユーザーはロケーションベースの機能をシームレスに統合し、レイアウトデザインをカスタマイズし、インタラクティブなコンテンツブロックを組み込むことができ、直感的で魅力的なユーザーエクスペリエンスを実現します。

この統合的なアプローチにより、ウェブ開発者やデザイナーは、特定のニッチ市場や幅広いコミュニティのニーズに合わせた、プロフェッショナル品質のディレクトリサイトを簡単に実現できます。

それでは、具体的な方法を見ていきましょう。

このチュートリアルでは、以下を行います：

テーマとプラグインをインストール・設定する
GeneratePressディレクトリサイトをデザインする

テーマとプラグインのインストール。

1. GeneratePressテーマをインストールする

テーマをインストールする必要があります。このチュートリアルでは、 Generatepress テーマをインストールします。

に移動します Appearance >> テーマ

「新規追加」を選択し、 「インストール」、 と 「有効化」 の Generatepress テーマをインストールします。

2. インストール GenerateBlocks プラグインを使ってディレクトリウェブサイトをデザインする

デフォルトのGutenbergプラグインだけではテンプレートをスタイリングするのに十分ではないため、次のプラグインをインストールします： GenerateBlocks プラグインを使ってゼロから構築していきます。

このプラグインはカスタマイズされた GenerateBlocks これらはデフォルトのブロックより優れており、ページテンプレートのデザインに役立ちます。

に移動します プラグイン >> 新規追加。

検索してください GenerateBlocks。インストールして有効化してください。

セットアップウィザードのすべてのステップをスキップできます。

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 ダッシュボードから直接インストールしたい場合に必要です。

ダミーデータを追加する

インストールウィザードを完了する最後のステップは、ダミーのリスティングを追加することです。これにより、後で必要に応じて編集できるリスティングカテゴリも追加されます。

サイドバーウィジェットとメニュー項目は今すぐ追加しません。後ほど行います。

をデザインする Generatepress ディレクトリウェブサイト

テーマとプラグインをインストールし、GeoDirectory の初期設定が完了したので、 Generatepress のツール群を使ってディレクトリウェブサイトのデザインを始めましょう。

1. Generatepress ディレクトリホームページのデザイン

新しいページを作成するか、WordPress がデフォルトで作成するサンプルページなどを利用できます。

「ページ」に移動し、サンプルページを編集して「ホーム」に名前を変更するか、新しいページを作成してください。

次に、 Appearance > カスタマイズ > ホームページの設定 に移動して、ホームページを選択してください。

ロゴ

まず最初に、ウェブサイト用のロゴが必要です。

ロゴの初版を作成するためにデザイナーに投資する必要はありません。

新しいディレクトリを始める際に犯しがちな最大のミスの一つは、製品市場適合性をテストする前に時間とお金をかけすぎることです。

Canva のようなアプリを使えば、5分でロゴをデザインできます。安価で、驚くほど高品質です。

MVP（実用最小限の製品）であれば、Canva でデザインしたロゴで十分すぎるほどです。

選べるロゴテンプレートは数多くあり、最初のロゴが理想通りに完璧でオリジナルでなくても問題ありません。

プロジェクトが軌道に乗れば、後から改善したり大幅に変更したりすることはいつでもできます。

平凡なロゴが、プロジェクト失敗の主な原因になることはありません。

ロゴをデザインしたら、 Appearance > カスタマイズ > ヘッダー、クリックしてロゴ > ロゴを選択、PNG ファイルをアップロードします。トリミングはスキップし（または必要に応じて画像をトリミングして）、「ロゴレイアウト」でロゴオプションを選択し、公開をクリックします。

ロゴを作成して追加したら、 Appearance > Menus に移動し、メニューを作成します。

必要なリンクを追加し（左列から右列へ）、保存します。 Menu Settings > の「表示場所」セクション、「メイン」オプションを確認できます。

必要に応じて、同じメニューをフッターに表示させたり、フッター用に別のメニューを作成したりすることができます。

この例では、ヘッダーナビゲーションメニューのみを使用します。

メインナビゲーションリンクを7つと、サブナビゲーションリンクをいくつか追加しました：

ホーム
会社概要
ブログ
場所と場所の追加
プロフィール
ログイン
ログアウト

ログインリンク（UsersWP エンドポイントより）はログアウト中のユーザーにのみ表示され、ログアウト・アカウント・プロフィールのリンクはログイン中のユーザーにのみ表示されます。

タイポグラフィ

次に、ウェブサイトのテキストフォントとサイズのタイポグラフィを設定しましょう。すべてのサイトテキストに適用される、フォントファミリー、フォントウェイト、フォントサイズをグローバルに設定します。

外観 > カスタマイザー > タイポグラフィ > 本文に移動し、 フォントファミリー: Poppines カテゴリー: sans-serif および バリアント: 100, 100italic, 200, 200italic, 300, 300italic, regular, italic, 500, 500italic, 600, 600italic, 700, 700italic, 800, 800italic, 900, 900italic

コンテンツ

このページを GenerateBlocks プラグインを使ってゼロから構築していきます。

ホームページにヒーローヘッダーが必要なので、 GenerateBlocks プラグインを使ってゼロから構築していきます。

ブロックの配置を ワイド.

グリッドの設定でレイアウト設定を
サイドバーレイアウト: サイドバーなし
フッターウィジェット: デフォルト
コンテンツコンテナ: 全幅
要素を無効にする: コンテンツタイトル
グリッドアイテムの幅: 100

次に、ブロック設定を確認し、背景画像のURLを設定します。

ヒーローセクション用の画像が必要なので、以下から無料画像をダウンロードします Pexels.com （ありがとう、@rachel-claire）。

スペーシング設定のパディング 100px 上下のマージンに適用します。

次に、テキストを追加するためのヘッダータグを追加しましょう。

テキスト:: 最高のレストランフィラデルフィアで
サイズ: 小
外観: 小・太字
テキストカラー: #FFFFFF

同じグリッド内に、 GD > Search ブロックを上下パディング200pxで追加します。

次に、ヒーローヘッダーの下に空のグリッドを追加し、そのグリッドに GD > Categories ブロックを追加します。

ブロックオプションを以下のように設定します
デザインタイプ: 画像背景
行アイテム: 3
カテゴリー画像の使用を有効にする

wp-admin -> places -> Place Categories からカテゴリを編集することで、カテゴリに画像を設定できます。

各カテゴリーにはデフォルト画像を設定するオプションがあります

Generateblocksでグリッドをコンテンツレイアウトにするための有効な設定が見つかりませんでした。そこで、 home-container クラスをカテゴリーの親グリッドに追加します。

ヒーローセクションの下に、もう1つ グリッド をプラスアイコンをクリックして追加し、 GD > Listings ブロックをそこに追加してください。

次に、この GD > Listings ブロックで必要な設定を行います。並び替えを「最新」に設定します

同様に、カテゴリーブロックと同じように、 home-container クラスを最新リスティングの親グリッドに追加します。

次に、空のグリッドを追加し、その中に GD > Map ブロックを追加して、設定はデフォルトのままにします。

同様に、他と同じように、 home-container クラスを GD > Map の親グリッドに追加します。

最後に、以下の CSS をテーマカスタマイザーに追加します。 Appearance => カスタマイズ => CSS を追加

.home-container{
	max-width:1200px;
	margin:auto;
}

おめでとうございます！ホームページが完成しました。

2. Generatepress ディレクトリウェブサイトのリスティングと検索ページのデザイン

次に、あらゆるディレクトリに欠かせない2つのページをデザインする必要があります。

リスティングページ（一般アーカイブ、カテゴリー、タグ）と検索結果ページです。

GeoDirectory はデフォルトで一般的なレイアウトのページを作成します。このチュートリアルでは、これらのページのレイアウトを少しカスタマイズしていきます。

リストページと検索ページはほぼ同じ構成なので、一度作成してからもう一方のページにレイアウトをコピーするだけです。

リストページのレイアウトは、左側にリスト一覧、右側にリストの正確な位置を示すスティッキーマップを配置することに決めました。

これはとても簡単です。

リストページ

GeoDirectory > 設定 > 一般 > ページに移動し、GD アーカイブページテンプレートの編集をクリックします

このページからすべてのコンテンツを削除します GD Archive ページテンプレート。

ページ設定を以下のように設定します
サイドバーレイアウト: サイドバーなし
フッターウィジェット: デフォルト
コンテンツコンテナ: 全幅

2カラムの空のグリッドを追加します。

左側のコンテナには、GD > Loop Action、GD > Loop、GD > Loop Pagination、GD > Search などの GD アーカイブページ関連ウィジェットをドラッグして上部に配置し、ユーザーがアーカイブページから検索できるようにします。

右のカラムには、 GD > Map ブロックをドラッグします。

の設定はすべてデフォルトのままにします GD > Map。高さを設定しましょう。ここでは 150vh.

アーカイブページのレイアウトを全幅にするために、以下の 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;
}

これで、リストアーカイブページの準備が整いました。

もう一つの方法として、このチュートリアルで説明されている GD > シンプルアーカイブブロックを使用する方法があります。 Elementor でディレクトリウェブサイトを構築する.

検索ページについても、同じ手順を繰り返します。

検索ページ

GeoDirectory > 設定 > 一般 > ページ > GD Search ページテンプレートの編集をクリック

このページからすべてのコンテンツを削除します GD Search ページテンプレート。

GD アーカイブページのコンテンツをすべてコピーし、GD Search ページに貼り付けます。

これで GD Search とアーカイブページの準備が整いました。

3. Generatepress ディレクトリウェブサイトの単一リストページのデザイン

GD Detail ページを編集・カスタマイズするには、 GeoDirectory > 設定 > 一般 > ページ > GD Detail ページテンプレートの編集をクリックします。

このテンプレートには、GeoDirectory によって生成されたデフォルトのコンテンツがすでに含まれています。

これらのデフォルトコンテンツをすべて削除し、新しいグリッドを追加します。

まず、リスティング詳細ページの上部に画像スライダーを追加しましょう。 GD > Post Image ブロックをこのコンテナにドラッグし、以下の設定を行います

画像の上限: 10
表示上限: 3
出力タイプ: スライダー
自動開始: 有効

次に、その下に2カラムレイアウトの空のグリッドブロックをもう1つ追加します。

クラス（single-details-container ) をブロック設定からこのグリッドに追加します。

それでは、左側のカラムに必要なGD詳細ページのショートコードをひとつずつ追加していきましょう。

GD > シングルタクソノミー、GD > シングルタブ、GD > シングル前後ナビゲーションが含まれます。

右側のカラムには、次を追加します GD > Author Action と GD > Output Location ブロックをドラッグします。

最後に、以下の CSS をテーマカスタマイザーに追加します。 Appearance => カスタマイズ => CSS を追加

.single-details-container {
    max-width: 1200px;
    margin: auto !important;
}
.single-gd_place .entry-content{
    margin:0px;
}

設定が完了すると、 リスティング詳細ページ が完了しました。

プラグインにプレミアム機能を追加する Generatepress ディレクトリウェブサイト

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

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

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

手作りアイテムのグローバルマーケットプレイスを作成したり、イベントチケットや割引クーポンを販売したりすることができます。

これらの重要な戦略でウェブサイトをレベルアップしましょう：ディレクトリウェブサイト作成のための重要な戦略.

可能性は無限大です。