Kadence テーマでディレクトリウェブサイトを作成する

Naveen Giri

3 years ago

Kadence ディレクトリウェブサイトを構築する最良の方法は何ですか？

Kadence ディレクトリウェブサイトの構築には、Kadence Theme、Kadence Blocks、そして最適な Kadence ディレクトリプラグインを活用します。

Kadence Theme は、ディレクトリウェブサイトの強固な基盤を提供する、多用途で高度にカスタマイズ可能な WordPress テーマです。

Kadence Blocks は一方で、カスタムレイアウトの作成やさまざまな機能の追加を可能にする Gutenberg ブロックライブラリです。

最後に、GeoDirectory プラグインは Kadence テーマに最適なディレクトリプラグインであり、ビジネスリスティング、ユーザーレビュー、高度な検索機能など、ディレクトリ機能をウェブサイトに追加できる強力なツールです。

これらのツールを組み合わせることで、堅牢で機能豊富なディレクトリウェブサイトを構築するための包括的なソリューションが実現します。

無料テーマと無料プラグインだけで作る Kadence ディレクトリウェブサイト

このチュートリアルでは、無料の Kadence Theme、Kadence Blocks プラグイン、無料の GeoDirectory プラグインなど、無料の WordPress リソースを使って本格的なディレクトリウェブサイトを構築する手順をご案内します。

このディレクトリウェブサイトの主な機能：

無制限のカスタムフィールドを持つ無制限のリスティング。
近接検索機能。
ユーザーレビュー。
フロントエンド投稿フォームにより、ユーザーがリスティングの送信・編集・削除を行えます。

すでにホスティングプロバイダーで WordPress をインストール済みであることを前提としています。このチュートリアルでは、フィラデルフィア市のビジネスディレクトリを作成します。

このチュートリアルで扱う内容：

テーマとプラグインのインストールおよび設定
GeoDirectory インストールウィザード
Kadence ディレクトリウェブサイトのデザイン
リスティングと検索ページのデザイン
シングルリスティングページのデザイン
Kadence ディレクトリウェブサイトにプレミアム機能を追加する
Kadence Blocks ディレクトリウェブサイトテンプレート

このチュートリアルを最後まで進めると、すぐに公開できる完全に機能するディレクトリウェブサイトが完成します。さっそく始めましょう！

Kadence テーマとプラグインのインストールと設定

1. Kadence テーマのインストール

まず最初に、テーマをインストールします。このチュートリアルでは、Kadence テーマを使用します。

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

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

2. Kadence Blocks プラグインのインストール

次に、Kadence Block Pluginをインストールする必要があります。

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

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

3. GeoDirectoryをインストールする

最後に、インストールが必要なのは GeoDirectory.

に移動します プラグイン >> 新規追加、GeoDirectoryを検索してください。インストールして有効化すれば、今回のプラグインのインストールは完了です。

プロジェクトを新規作成するか、既存のプロジェクトを選択します。
キーを有効にします。
キーを取得します。
請求アカウントを有効化します。
APIキーを制限します（自分のウェブサイトのURLからのみ使用できるように）

4. GeoDirectoryインストールウィザード

GeoDirectoryでは、Google Maps APIキーの設定とダミーリスティングのインポートを行うために、セットアップウィザードを完了する必要があります。

マップシステムの選択（Google Maps または OpenStreetMap）

ウィザードの最初のステップで、2つのマッピングシステムから選択できます。Google MapsとOpen Street Maps（APIキー不要）です。

このチュートリアルでは、Google Mapsを選択します。

「キーを生成」ボタンをクリックして、この手順に従ってくださいドキュメントの手順に従って有効な API キーを生成します。

主な手順は以下のとおりです：

第4点について：これは必須要件です。ただし、月200ドルのしきい値を超えた場合にのみ課金されます。

この無料クレジットは、99%のディレクトリにとって十分すぎるほどです。

デフォルトの都市を設定する

次に、デフォルトのロケーションを設定します。これはディレクトリが作成される都市です。ここではデフォルトの都市をそのまま使用します。

GeoDirectoryはデフォルト都市としてPhiladelphiaを使用しています。

必要な場所をどこでも使用できます。

複数の都市にリスティングを追加する必要がある場合は、Location Manager アドオンが必要です。

追加機能を加える

このステップでは、UsersWP プラグインをインストールします。これは、ユーザー登録プラグインで、ユーザーがあなたのウェブサイトに登録してサインインできるようになります。

これは、ユーザーがリスティングを追加・編集できるようにするために必要です。また、ユーザーが自分のリスティングやレビューなどを確認できるユーザープロフィールも作成されます。

さらに Ninja Forms もインストールします。これにより、すべてのリスティングにリスティングオーナーへ直接メールを送信するコンタクトフォームが追加されます。

AyeCode Connect はこのチュートリアルでは必須ではありません。主に、GeoDirectory のプレミアムアドオンを追加して WordPress ダッシュボードから直接インストールしたい場合に必要です。

ダミーデータを追加する

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

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

Kadence ディレクトリウェブサイトのデザイン

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

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

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

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

次に、画面右上のページ設定アイコンをクリックしてください。

以下の変更を適用してください：

ページタイトル：無効
ページレイアウト：全幅
コンテンツスタイル：アンボックス

それ以外はそのままにしておきます。次に、 Appearance > カスタマイズ > ホームページの設定 に移動し、ホームページとして上記のページを選択してください。

投稿ページは後で設定します。

ホームページのコンテンツを作成する前に、ヘッダーの設定を行う必要があります。

その後、ホームページのコンテンツのデザインに戻ります。

ロゴ

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

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

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

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

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

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

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

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

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

ナビゲーションメニュー

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

必要なリンクを追加し（左列から右列へ）、保存します。 Menu Settings > の「表示場所」セクション、「プライマリ」オプションにチェックを入れることができます。

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

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

8つのリンクを追加しました：

ホーム
会社概要
ブログ
スポット
スポットを追加
プロフィール
ログイン
ログアウト

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

コンテンツ

ホームページのデザインを開始できます。まず、ヒーロー画像をヘッダーの下に追加する必要があります。

これを行うには、ページ＞ホームに移動して「編集」をクリックします。

サンプルページを使用した場合は、テキストを削除してください。新しいページを作成した場合は、新しい行レイアウトブロックを追加してください。

「ブロックを選択するには / を入力」と表示されている場所に /Row と入力し、Kadence Row Layout ブロックを選択します。次に、単一行（1番目のオプション）を選択します

「コンテンツ最大幅」オプションに 800 と入力します。

次に、ブロック上部のタブから「スタイル」をクリックします。背景画像オプションの「画像を選択」をクリックします

ヒーローセクションには、こちらのPhiladelphiaの無料画像を使用します。画像の提供元： Pexels.com (Thanks, @Kelly).

画像をアップロードし、背景画像のアタッチメントとして「固定」オプションを選択して更新します。

現時点では画像の一部しか表示されていませんが、次のステップで必要に応じた表示になります。

画像にはオーバーレイが必要です。オーバーレイがないと、上に重ねたテキストのコントラストが不十分になり、読みにくくなります。

「背景オーバーレイ設定」を選択し、オーバーレイの不透明度を45、オーバーレイカラーを000000（黒）に設定します。

次に「詳細」タブをクリックして、パディングを追加しましょう。上下に正確に4emのパディングを設定します。「カスタムサイズを設定」アイコンをクリックし、上下の入力フィールドにそれぞれ4を入力して、サイズとしてEMを選択してください。

ヒーロー画像を暗くしたので、テキストを追加できます。

画像の中央をクリックします（プラスボタンがうっすら表示されています）。これにより、新しいブロックを選択できます。セクションブロックを追加してください。

再び画像の中央をクリックし、テキスト（Adv）ブロックを追加します。

テキストブロックに「My Philadelphia Directory」のような内容を入力します。

ブロックの「一般」セクションで、HTMLタグとしてH1を選択し、テキストの配置を中央に設定します。

「スタイル」タブをクリックし、カラーを FFFFFF（白）に設定します。

次に、「フォントサイズ」セクションでカスタムサイズ設定アイコンをクリックし、フォントサイズを 40 に設定します。

最後に、「高度なタイポグラフィ設定」→「フォントウェイト」で「ボールド 700」を選択します。

ここで、Kadence ディレクトリサイトのヒーローセクションに検索フォームを追加できます。

タイトルセクションの右下にある「+」ボタンをクリックして、新しいセクションを追加します。

別のセクションブロックを検索して選択し、新しいセクションの中央にあるプラスボタンをクリックして、GD > 検索ブロックを追加します。

これで、ホームページのヒーローセクションが完成しました。現在の表示はこのようになっています。

次は、ホームページにいくつかの必要なセクションを追加します。まず、最新リスティングのセクションを追加しましょう。

ヒーローセクションの下に、 Row Layout ブロックをプラスアイコンをクリックして追加し、さらに セクション 内のブロック。

次に、見出しブロックを追加し、タイポグラフィを以下のように設定します
サイズ: 大
文字のケース: Ab
テキスト: Recent Business Listings

最新のリスティングを表示するには、 GD > Listings ブロックをその下に追加し、以下の設定を行います。
並び替え： 最新
レイアウト： グリッドビュー（4列）

次に、 Row Layout ブロックをプラスアイコンをクリックして追加し、 セクション 内のブロック。
で、選択したブランドの車のモデルを選択します。選択すると タイポグラフィ 見出しブロックの設定
サイズ: 大
文字のケース: Ab
テキスト: あなたの街で人気のものを探す

次に GD>Category ブロックをその中に追加して、すべてのカテゴリを表示します。
スタイルに以下の設定を追加します
行アイテム: 4
デザインタイプ： 画像背景

次に、もう1つセクションを追加します。対象は How It Works。プラスアイコンをクリックして1つ追加しましょう。 Row Layout プラスアイコンをクリックし、4カラムレイアウトを選択してブロックを追加します。

次に Info box ブロックをすべてのコンテナ内に追加します。

コンテンツの最大幅: テーマから最大幅を継承します。

次に、各コンテナのアイコンを設定します。任意の Info Box をクリックし、ブロック設定の「スタイル」>「メディア設定」で行います。
メディアタイプ: アイコン

次に、アイコンの色を設定しましょう

アイコンの色: #FFFFFF
アイコンの背景: #FF6616
メディアのパディング: 20px
アイコンの角丸半径: 15px

次に、もう1つ空の Row Layout

を追加し、その中にCTAを配置します。
見出しを追加し、 タイポグラフィ 見出しブロックの設定
サイズ: 大
文字のケース: Ab

にシングルボタンブロックを追加して、このブロックのスタイル設定内で次のように設定します
色: #FFFFF
背景色: #FF6A00
ボーダー半径: 10px

次にフッターを設定します。
外観 > カスタマイズ > フッターに移動しましょう

ここにいくつかのフッターメニューウィジェットを追加します。また、Kadence はソーシャルブロックを提供しています。フッターセクションの上部に追加できます。

ソーシャルウィジェットの設定アイコンをクリックすると、ソーシャルオプションを設定できる設定画面が開きます。

おめでとうございます！ホームページの準備が整いました。

Kadence ディレクトリサイトのリスト・検索ページデザイン

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

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

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

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

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

これはとても簡単です。

リストページ

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

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

Row レイアウトを追加します（

下の画像でマークされたドットをドラッグして、60 対 40 の比率に設定します。

次に左のセクションに、 GD Archive ページに必要なすべてのブロックを追加します。例えば GD > Loop Action, GD > Loop, GD > Loop Pagination、および GD > Search

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

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

マップブロックの親 Row コンテナに CSS クラス kt-inside-inner-col

を追加し、テーマカスタマイザーの「外観 > カスタマイズ > 追加 CSS」に以下の CSS を追加します。

body.archive .kt-inside-inner-col {
    position: sticky;
    top: 0;
}

最後に、右上の Kadence アイコンをクリックしてページレイアウトを「Full Width」に設定し、ページ全体を全幅表示にします。

また、メインの Row レイアウトに以下のスタイルも設定します。
最大幅: 100%
カラム間隔: SW
行間隔: なし

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

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

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

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

このテンプレートを簡単に作成するもう一つの方法は、全幅ページテンプレートと GD > Simple Archive ブロックをドラッグします。

Kadence ディレクトリウェブサイトの単一リスティングページデザイン

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

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

これらのデフォルトコンテンツをすべて削除し、新しい Row Layout を追加します： コンテンツ幅: 100%

このRow レイアウトにクラス（single-header-image）を追加します（詳細 > 追加CSSクラス

次に、2カラムの Row Layout コンテナを追加します。

左側のコンテナには GD > Post Badge ブロックを追加していくつかのバッジを定義し、右側のコンテナには GD > Post Favorite ブロックをドラッグします。

このコンテナの親行レイアウト内に、カスタムクラス（header-position-feature).

この下に画像スライダーを追加します。そのために、 GD > Post Image ブロックをドラッグします。

以下の設定を選択します
出力タイプ: スライダー
自動開始: 有効
アニメーション: スライド

次に、2カラムの Row Layout コンテナ。

左のコンテナ内に、GD詳細ページに必要なブロックを追加します。内容は以下の通りです GD > Single Taxonomies, GD > Single Tabs, GD > Single Next Prev.

以下の設定で

最大幅: 1200px
カラム間隔: SW
行間隔: なし

右のコンテナには、以下を使用します GD > Output Location と GD > Author Actions ブロックをドラッグします。

以下のCSSを使って、GD詳細ページのレイアウトにデザインをさらに加えます。

以下のCSSを外観 > カスタマイズ > 追加CSS

.single-header-image {
    max-height: 400px !important;
    overflow: hidden;
}

.geodir-page-single .entry-header {
	display: none;
}
.geodir-page-single .content-area {
	margin: 0px;
}
.geodir-page-single .content-container {
	padding: 0px;
	max-width: 100%;
}
@media (min-width: 576px) {
.bsui .row.row-cols-md-0 .card .embed-responsive {
    max-width: 100% !important;
    display: inline-block;
}
}
.geodir-page-single .entry-content-wrap {
	padding: 0px !important;
}
.geodir-page-single .entry-content {
	margin-top: 0px;
}
.single-header-image {
	max-height: 400px !important;
	overflow: hidden;
}
.single-feature {
	padding: 10px !important;
}

.header-position-feature {
	position: absolute !important;
	width: 100%;
}

.kb-row-layout-id15_c06314-2b > .kt-row-column-wrap {
    z-index: 1;
    position: relative;
		padding:0px !important;
}

これでGD詳細ページの準備が整いました。

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

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

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

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

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

このガイドを使って、作成プロセスをスムーズに進めましょう：ディレクトリウェブサイト作成のステップバイステップガイド.

可能性は無限大です。