BlockstrapテーマとそのディレクトリChild Themeで優れたディレクトリウェブサイトを作成する方法
私たちは最近Blockstrapを開発しました。これはプラグイン（ページ構築ブロックを提供）とブロックテーマ（FSE – フルサイト編集）の両方を兼ね備え、WordPressの新しいサイトエディターとBootstrap 5のパワーを組み合わせたものです。
Blockstrapは私たちの新世代のDirectoryテーマのフレームワークとして開発されました。近日中には、ジェネリックビジネスディレクトリ＆イベントテーマ、不動産テーマ、求人ボードテーマ、クラシファイドテーマ、そしてさらに多くのWordPress向けDirectoryテンプレートが含まれる予定です。
これらのテーマはすべて、GeoDirectoryを使用してピクセルパーフェクトなディレクトリサイトを構築するために特別に設計されています。
このチュートリアルでは、BlockstrapテーマとDirectoryチャイルドテーマ、そしてGeoDirectoryプラグインを使ってディレクトリウェブサイトを構築するためのステップバイステップガイドを紹介します：
- Blockstrap / DirectoryテーマをインストールするZZ
- GeoDirectoryをインストールして設定する
- ブロックテーマビルダーを使ってディレクトリウェブサイトをデザインする
このガイドでは、DirectoryテーマとGeoDirectoryプラグインを使って、魅力的なオンラインディレクトリを作成する方法をご紹介します。
このセットアップを使えば、位置情報に基づいた機能を簡単に追加し、サイトを魅力的に見せ、動的に変化するさまざまな種類のコンテンツを追加できます。
でも今は、シンプルでわかりやすい内容にとどめておきましょう。
このチュートリアルでは、以下の内容を取り上げます：
テーマとプラグインのインストール。
1. Blockstrap テーマとその ディレクトリ子テーマ
まずは Directory テーマをインストールしましょう。これは Blockstrap の子テーマなので、メインテーマも自動的にインストールされます。
Blockstrap テーマをインストールすると、Blockstrap プラグインのインストールも促されます。
Blockstrap プラグインはページビルダーであり、Blockstrap ブロックのコレクションを追加してあなたの ディレクトリサイト.
テーマの1つ星レビューが3件あることが気になる方へ：これらのレビューは、他の開発者が制作した非常に古いバージョンのテーマに対するものであり、現在のバージョンとは関係ありません。私たちはそのコンセプトを高く評価し、新製品に活用したいと考えたため、元の「Directory」テーマとそのURL（wordpress.org/themes/directory/）を取得しました。残念ながら、それに伴い過去のネガティブなレビューも引き継ぐことになりました。
WordPress サイトにアクセスし、
WP-Admin >> Appearance >> テーマ >> Add Newから「Directory」を検索して、最初のテーマオプションをインストールしてください。
2. GeoDirectoryをインストールする
手順は以下のとおりです：
- 「プラグイン」から「新規追加」へ進みます。
- GeoDirectory を検索します。
- インストールして有効化してください。
以上です！プラグインの設定がすべて完了しました。
3. GeoDirectory インストールウィザード
GeoDirectoryでは、セットアップウィザードを完了して、Google Maps APIキーを設定し、いくつかのダミーリスティングをインポートする必要があります。
マップシステムの選択（Google Maps または OpenStreetMap）
セットアップの最初のステップでは、Google MapsとOpenStreetMapsの2つのマップシステムからいずれかを選択します。このガイドでは、OpenStreetMapsを使用します。
Google Mapsをご希望の場合は、いくつか追加の手順があります：
- 「Generate Key」ボタンをクリックし、有効なAPIキーを作成するためにこちらに記載された手順に従ってください。
- 重要な手順は以下のとおりです：
- キーを有効化します。
- 新しいプロジェクトを作成するか、既存のプロジェクトを選択します。
- キーを取得します。
- 請求アカウントを設定します。
- APIキーに制限を設ける（自分のウェブサイトのURLからのみ機能するように）。
ステップ4は必須ですが、月額200ドルを超えた場合のみ料金が発生します。ただし、ほとんどのディレクトリのニーズは無料クレジットで十分に賄えます。
では、デフォルトの都市の設定に進みましょう。
デフォルトの都市を設定する
次に、ディレクトリのメイン都市となるデフォルトの場所を選択します。
ここではPhiladelphiaをデフォルトの都市に設定していますが、お好みの場所を自由に選択していただけます。
複数の都市をカバーするディレクトリを作成する場合は、Location Managerアドオンが必要です。
追加機能を加える
このステップでは、UsersWPをセットアップします。これは ユーザー登録用のプラグインです。これにより、ユーザーがウェブサイトにサインアップしてログインできるようになります。
UsersWPは、ユーザーがリスティングを管理したり、プロフィールを作成したり、レビューなどの機能にアクセスしたりするために欠かせないプラグインです。
さらに、 Ninja Formsもインストールします。これにより、すべてのリスティングにお問い合わせフォームが追加されます。このフォームからリスティングオーナーに直接メールが送信されます。(注: BlockStrapにはこの用途に使えるシンプルなお問い合わせフォームが用意されており、より高度なフォームが必要な場合はNinja Formsが便利です)
このチュートリアルでは、WordPressダッシュボードからプレミアムGeoDirectoryアドオンを直接追加したい場合を除き、AyeCode Connectは必須ではありません。
ダミーデータを追加する
インストールウィザードで最後に行うのは、サンプルリスティングの追加です。これによりリスティングのカテゴリも作成されますが、後からいつでも変更できます。
をデザインする Blockstrap/Directory テーマ ディレクトリウェブサイト
テーマとプラグインのインストールが完了し、GeoDirectoryの初期設定も終わったところで、いよいよディレクトリウェブサイトのデザインを始めましょう。
私たちの Blockstrapの チャイルドテーマである Directory テーマには、GeoDirectoryページ用のブロックテンプレートがあらかじめ用意されています。
この記事では、これらのプリビルドテンプレートを直接カスタマイズしていきます。
1. Blockstrap/Directory ホームページのデザイン
ホームページのデザインをカスタマイズするには。
に移動します Appearance >> エディター >> 「テンプレート」をクリック
次にフロントページテンプレートを選択し、編集アイコンをクリックします。
ホームページテンプレートを編集する前に、まずウェブサイトのロゴを作成しましょう。
1. ロゴ
まず最初に、ウェブサイト用のロゴが必要です。
ロゴの最初のバージョンを作成するためにデザイナーを雇う必要はありません。
新しいディレクトリを始める際に犯しがちな最大のミスの一つは、自分が作ろうとしているものを人々が必要としているかどうかをテストする前に、時間とお金をかけすぎてしまうことです。
Canvaのようなアプリを使えば、わずか5分でロゴを作ることができます。Canvaは素晴らしいツールで無料で使えます（プレミアムプランを選択した場合でも、その機能に対して非常にリーズナブルです）。
プロダクトの基本バージョン（MVP、つまり実用最小限のプロダクトと呼ばれます）には、Canvaで作ったロゴで十分です。
選べるロゴテンプレートがたくさんあるので、最初のロゴが完璧でなかったり、際立ってユニークでなくても問題ありません。
プロジェクトが順調に進み始めたら、後からロゴを改善したり、完全に変更したりすることもいつでもできます。
普通のロゴが原因でプロジェクトが失敗することは、まずありません。
このロゴは、ウェブサイトのヘッダーを作成する際に使用します。
ヘッダー
では、以下のスクリーンショットに示されているように、左側から適切なブロックを選択してこのロゴ画像を追加しましょう。
次に、いくつかの必要なメニュー項目を追加しましょう。例えば ホーム, スポット、および ブログ、お問い合わせ、会社概要 を今回のケースでは追加します。
新しいメニュー項目を追加するには BS > Nav item ブロックを使用できます。
プロのヒント：ホームページに透過ヘッダーを使用する場合は、通常のヘッダーと透過ヘッダーの両方にロゴを追加する必要があります。
コンテンツ
これは、デフォルトのホームページが Blockstrap's Directory Child Theme.
でどのように表示されるかです。すでに完成されているように見えますが、いくつかの細かな変更を加えていきます。
The gd_location ショートコードは Geodirectory Location Manager アドオンに属しています。現時点ではこのアドオンを使用していないため、以下のスクリーンショットに表示されているショートコードを削除します。
現在のホームページはこのようになっています。
新しいセクションを追加したり、ページのコンテンツを変更したりしたい場合は、 Blockstrap theme に組み込まれているブロックをご利用ください。ブロック名は BS >
2. Blockstrap/Directory ウェブサイトのリストと検索ページのデザイン
前述のとおり、Blockstrap および Directory テーマには、GD ページ用のあらかじめ作成されたテンプレートが用意されています。
これらのテンプレートはすべて単独で完結しているため、変更を加える必要はありません。
内部ページにはヒーローヘッダーが使用されているため、アーカイブページのヘッダーセクションをカスタマイズし、新しいロゴとメニュー項目に更新する必要があります。
次へ進む： Appearance >> エディター >> 「テンプレート」をクリック >> 選択 GD Archive （アーカイブページのレイアウト用）。
ホームページと同様に、GD アーカイブページのヘッダーに新しいロゴとメニュー項目をアップロードします。
これがデフォルトデザインでの GD アーカイブページの表示です。
同様に、 GD Search ページでは GD Search Archive テンプレートを開き、必要な変更を加えてください。
この記事ではレイアウトをデフォルトのままにしています。
3. Blockstrap/Directory ウェブサイトの個別リスティングページのデザイン
カスタマイズするには GD Detail ページでは GD Single ページテンプレートを開き、必要な変更を加えてください。
これがGD詳細ページのデフォルトテンプレートの外観です。完成度が高く、必要な要素がすべて含まれているため、編集は行いません。
プラグインにプレミアム機能を追加する Blockstrap/Directory ウェブサイト
ご希望であれば、次のようなプレミアム機能をディレクトリに追加することができます：
- 有料リスティング：GeoDirectory の Listing Price Manager アドオンを使用すると、リスティングの追加にかかる費用を自由に設定できます。オプションごとに異なる料金を設定することも可能です。たとえば、有料リスティングでは画像をより多く掲載できるなど追加機能を提供しつつ、無料リスティングの機能を制限することができます。また、利用可能な特別フィールドや説明文の文字数も自由に決められます。
- Claim Listings：この機能はディレクトリサイトにとって非常に重要です。仕組みはこうです。まず管理者がデータベースを構築し、次にビジネスオーナーを招待して無料リスティングを管理してもらいます。ビジネスオーナーが完全な管理権限を求める場合は、まず有料リスティングにアップグレードする必要があるかもしれません。
- Advertising: 広告の販売 は オンラインディレクトリを収益化する。ウェブサイトへの訪問者が多い場合は広告ネットワークを利用できます。訪問者が少ない場合は、広告を直接販売することもできます。つまり、企業はサイトの特定エリアにバナーを表示するために料金を支払ったり、検索結果の上位など目立つ場所にリスティングを広告として表示させることができます。
これらはほんの三つの例に過ぎません。しかし、 ディレクトリウェブサイトはオンラインで収益を得る多くの方法を提供しています.
ハンドメイド品のワールドワイドマーケットを作ったり、イベントチケットを販売したり、割引クーポンを提供したりすることができます。
始めることに興味があれば、こちらのリソースをご覧ください： ディレクトリウェブサイトをゼロから作る方法.
このチュートリアルは汎用性が高く、あらゆるテーマやページビルダーに合わせて応用できます。
ウェブサイトでできることの可能性は無限大です。
まとめ
私たちは、代表的なテーマやページビルダーを使ったディレクトリの構築に関するチュートリアルを多数公開しています。
それらをお読みいただければ、Blockstrapフレームワークとそのディレクトリ子テーマを使った構築がいかに簡単かがおわかりいただけるでしょう。
仕上がりも格段に美しくなります。
そして最後に、Blockstrapのディレクトリウェブサイトをテストしてみると、これまでチュートリアルを公開してきた他のどのサイトよりも大幅に高速であることにもお気づきいただけるでしょう。
最大の魅力は、BlockstrapテーマとプラグインおよびディレクトリChild Themeがすべて100%無料であることです！
さあ、何を待っているのですか？今すぐBlockstrapとGeoDirectoryプラグインでディレクトリウェブサイトを始めて、オンラインで収益を上げましょう！
ニュースレター - 最新情報をお届け！
最新ニュース、ヒント、限定コンテンツを直接メールボックスにお届けします。