追加の製品レビューサイトの構築–パート2

公開: 2017-09-13

Extraを使用して製品レビューサイトを開発する方法に関するこの4部シリーズのパート2へようこそ。 あなたが製品レビューサイトの開発を始める方法に頭を悩ませているなら、このシリーズはあなたのためです。 組み込みのレビュー機能とスマートな投稿分類を備えたExtraは、見栄えの良いレビュー、製品投稿テンプレート、メガメニュー、カテゴリレイアウトを数分で作成できるように特別に装備されています。 Extraの力を探求するときに、私と一緒に参加してください。

このシリーズのパート1では、テーマオプションとテーマカスタマイザー設定を設定することにより、製品レビューサイトを構築する旅を始めました。

今日は、最初の製品レビューを新しい投稿として追加し、DiviBuilderとExtraテーマ設定を使用してその投稿の投稿レイアウトをカスタマイズすることで着手します。 このチュートリアルを完了すると、ライブラリからプルして残りの投稿を簡単に作成できる保存済みの投稿テンプレートが作成されます。

これが私たちが構築しようとしているもののスニークピークです

製品レビュー

デザイン要素の準備

シリーズのこのパートでは商品を追加するため、商品の画像が必要になります。 このチュートリアルでは、4つのカテゴリがあり、各カテゴリに3つの製品があるため、合計12の画像を使用します。 背景が白いシャッターストックのストック画像を使用して、見た目をすっきりさせています。

投稿レイアウトを設計するために、ビジュアルビルダーと小さなカスタムCSSを使用します。

始めましょう。

エクストラを使用した製品レビューサイトの構築–パート2

私たちのYoutubeチャンネルを購読する

最初の製品レビューを新しい投稿として追加する

WordPressダッシュボードから、 [投稿]> [新規追加]に移動します。

各投稿は商品レビューになるため、投稿の名前は商品の名前にする必要があります。 私の製品はフィットネストラッカーになるので、投稿のタイトルとして「フィットネストラッカー」と入力します。

注：まだ行っていない場合は、パーマリンク設定を「投稿名」オプションに設定して、URLに製品名のみが含まれるようにすることをお勧めします（もちろんお好みです）。

次に、「Use Divi Builder」ボタンをクリックしてから、「UseVisualBuilder」ボタンをクリックしてVisualBuilderをデプロイします。

製品レビュー

Visual Builderから、1列の行を挿入し、その列にテキストモジュールを追加します。

製品レビュー

テキストモジュール設定のコンテンツタブで、コンテンツボックスに次のhtmlを入力します（「ビジュアル」タブではなく「テキスト」タブで作業していることを確認してください）。 

<h2 class="subtitle fancy"><span>Product Description</span></h2>

これは、さまざまなセクションの「ファンシー」字幕として機能します。 後でカスタムCSSを使用してスタイルを設定します。

h2タグのすぐ下に、製品の説明テキストを追加できます。 今は「loremipsum」を使っています。

製品レビュー

現在の行の下に別の1列の行を追加し、その中に別のテキストモジュールを追加します。 テキストモジュール設定で、コンテンツセクションのテキストタブに次の「長所と短所」h2タグを挿入して、別のhtmlサブタイトルを追加します。 

<h2 class="subtitle fancy"><span>Pros & Cons</span></h2>

製品レビュー

これにより、製品レビューの長所と短所のセクションが始まります。

次に、前の行の下に1/2（2列）の行を追加します。 左側の列にテキストモジュールを追加し、「Pros」というテキストを含むh3タイトルを入力します。

製品レビュー

次に、そのテキストモジュールを複製し、複製したモジュールを右側の列にドラッグします。 新しいテキストモジュールのh3タイトルを「短所」に変更します。

ヒント：Visual Builderでは、設定を開く代わりに、テキストボックスをクリックして、新しいタイトルを入力するだけです。

製品レビュー

次に、宣伝文モジュールを使用して、長所と短所のタイトルの下にいくつかのサブアイテムを追加します。

左側の列の「長所」テキストモジュールの下に、宣伝文モジュールを追加します。 宣伝文の設定のコンテンツタブで、コンテンツボックスにテキスト行を追加します（今はダミーテキストを使用しています）。

製品レビュー

次に、下にスクロールして「アイコンを使用」を選択します。 表示されるアイコンボックスで、プラス記号を選択します。

製品レビュー

[デザイン]タブをクリックして、以下を更新します。

アイコンの色：#ffffff

円のアイコン：はい

円の色： ＃5bd999

画像/アイコンの配置：左

製品レビュー

設定を保存する

その宣伝文句モジュールを複製（またはコピー）し、「短所」テキストモジュールの下にドラッグ（または貼り付け）します。 次に、[宣伝文の設定のデザイン]タブを次の円の色で更新します： ＃e6567a

製品レビュー

設定を保存する

特定の製品に必要な数がわからないため、各列の宣伝文句を数回複製します。

製品レビュー

次に、長所と短所を含む行設定に移動します。 [コンテンツ]タブで、以下を更新します。

列1の背景：＃f8f8f8

列2の背景：＃f8f8f8

[デザイン]タブで、以下を更新します。

カスタムガター幅を使用：はい

側溝幅：1

列の高さを等しくする：はい

列1のパディング：20px（上）、20px（右）、20px（下）、20px（左）

列2のパディング：20px（上）、20px（右）、20px（下）、20px（左）

製品レビュー

[詳細設定]タブで、次のカスタムCSSを[列1のメイン要素]テキストボックスに追加します。

 border-top: 10px solid #5bd999;

次のCSSを[列2のメイン要素]テキストボックスに追加します。

 border-top: 10px solid #e6567a;

製品レビュー

ヒント：Extraの更新バージョンがある場合は、新しいアニメーションをWebサイトに適用できる必要があります。 [デザイン]タブの[行の設定]に移動し、必要なアニメーションスタイルを選択して、長所と短所の行にアニメーションを追加します。 これにより、ユーザーがページを下にスクロールすると、長所と短所のセクションが表示されます。

設定を保存する

サブタイトル「長所と短所」を保持する2番目の行を複製（またはコピー）し、終了した行の下にドラッグ（または貼り付け）します。 次に、h2ヘッダーを「仕様」に変更します。

製品レビュー

長所と短所のリスト項目を含む2列の行を複製し、「仕様」というタイトルの新しいテキストモジュールの下に配置します。 ヘッダー「Pros」と「Cons」を含む2つのテキストモジュールを列から削除します。

製品レビュー

次に、左側の列にある最初の宣伝文モジュールの宣伝文句設定をクリックします。

[コンテンツ]タブで、アイコンをチェックマークに変更します。

[デザイン]タブで、円の色を＃222222に変更します。

設定を保存する

次に、他の宣伝文句モジュールを削除し、それらを複製して適切な場所にドラッグすることにより、更新したばかりの宣伝文句に置き換えます。

製品レビュー

次に、 [行の設定]に移動し、 [列1のメイン要素]テキストボックスと[列2のメイン要素]テキストボックスの両方にあるカスタムCSSを次のように置き換えます。 

border-top: 10px solid #222222;

設定を保存する

この投稿レイアウトに最後に追加する必要があるのは、「購入」ボタンです。 先に進み、新しい1列の行を作成し、ボタンモジュールを追加します。 次に、ボタンモジュールの設定を次のように更新します。

[コンテンツ]タブの下…

ボタンテキスト：今すぐ購入

ボタンのURL：[URLを入力]（おそらくこれは最終的にサードパーティのサイトへのアフィリエイトリンクになります）

URLが開きます：[新しい]タブ

[デザイン]タブの下…

ボタンの配置：中央

テキストの色：暗い

ボタンにカスタムスタイルを使用する：はい

ボタンのテキストサイズ：30px

ボタンのテキストの色：＃222222

ボタンホバーテキストの色：＃5bd999

ボタンホバーの背景色：#ffffff

ボタンホバーの境界線の色：＃5bd999

製品レビュー

商品投稿レイアウトのコンテンツセクションは以上です。 必ずページを保存してください。 ページを保存したら、ビジュアルビルダーを終了して、WordPressダッシュボードから投稿を編集します。

投稿にレビューを追加する

投稿エディタページの一番下までスクロールして、 「レビューボックスの内容」というタイトルのボックスを見つけます。

製品レビュー

Extraへのこのスマートな追加により、投稿に製品評価を追加できます。 評価システムは、1つまたは複数の内訳を持つように設計されています。 内訳は、全体的な評価を構成する要素です。 たとえば、カメラを評価する場合、内訳の例には、デザイン、パフォーマンス、バッテリー寿命などが含まれます。これらは、個別の評価パーセンテージを追加できるカメラのコンポーネントです。 Extraは、これらのコンポーネントに基づいて全体的な評価パーセンテージを計算し、レビューボックスに表示します。 レビューボックスには、レビューボックスのタイトル、概要、および概要のタイトルに役立つ入力領域もあります。

レビューを追加するには、レビューボックスの内容を次のように更新します。

レビューボックスのタイトル：[レビューボックスのタイトルを入力してください]（「製品レビュー」または「編集レビュー」をお勧めします）

要約：[要約を入力]

要約タイトル：[要約のタイトルを入力してください]（単純にするために「要約」を使用しています）

次に、次のように、タイトルと評価率を含む4つの内訳を追加します。

内訳＃0

タイトル：デザイン

評価：85％

内訳＃1

タイトル：パフォーマンス

評価：90％

内訳＃2

タイトル：バッテリー寿命

評価：70％

内訳＃3

タイトル：機能

評価：85％

製品レビュー

評価が設定されたので、公開する前に投稿に最後の仕上げをします。

投稿にカテゴリを割り当てる

カテゴリの横にあるチェックボックスをクリックして、投稿/製品に適切なカテゴリを割り当てていることを確認してください。 この場合、この投稿はフィットネストラッカー向けなので、「健康とフィットネス」のカテゴリを選択します。 また、「未分類」のチェックボックスをオフにします。

製品レビュー

私が使用している製品とそのカテゴリの内訳は次のとおりです。

  • 衣類
    • 靴
    • 時計
    • クールソックス
  • キッチン
    • 包丁
    • ミキサー
    • まな板
  • ヘルス＆フィットネス
    • フィットネストラッカー
    • 重み
    • トレッドミル
  • エレクトロニクス
    • カメラ
    • ヘッドホン
    • ノートパソコン

ページのすぐ下に、[追加設定]ボックスがあります。 これらのコントロールを使用すると、この特定の投稿のデフォルトのテーマ設定を上書きできます。 もちろん、これは好きなようにカスタマイズできますが、この例では、次のチェックボックスをオンにします。

注目の投稿（これにより、製品を特定のカテゴリモジュールの注目の投稿としてプルできます。）

著者ボックスを非表示

製品レビュー

最後に、注目の画像を追加します。 注目の画像には全幅の0ne列のレイアウトを使用するため、幅が1280ピクセル以上であることを確認してください。

製品レビュー

投稿を公開します。

このテンプレートを保存して、すべての製品/投稿にこのプロセスを複製できるようにしてください。 テンプレートを保存するには、ページ下部のビジュアルビルダーメニューの[ライブラリに保存]アイコンをクリックし、テンプレート名を入力して、[ライブラリに保存]をクリックします。

製品レビュー

これで、残りの投稿を追加するときに、ライブラリからこのテンプレートを読み込んで、新製品のレビューのコンテンツを入力できます。 その後、プロセスははるかに速くなります。

カスタムCSSの追加

ほぼ完了です。 投稿のいくつかの要素のスタイルを設定するには、テーマにカスタムCSSを追加する必要があります。 これを行うには、WordPressダッシュボードから[テーマカスタマイザー]> [追加のCSS]に移動し、次のように入力します。 

/****************************
comment box background
*****************************/
#comment-wrap {
    padding: 75px 40px;
	background: #fff;
	border-radius: 3px;
	box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
}
@media (min-width: 980px) {
/***************************
Post Header Size
****************************/
h1.entry-title {
    font-size: 48px;
}

/***************************
Fancy Subtitle
****************************/
.subtitle {
  margin: 1em 0 !important;
font-size: 48px;
}
.fancy {
  text-align: center;
  padding-bottom: 0px;
}
.fancy span {
  display: inline-block;
  position: relative; 
  line-height: 1.3em; 
}
.fancy span:before,
.fancy span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 4px solid #333;
  border-top: 4px solid #333;
  top: 40%;
  width: 100%;
  max-width: 200px;
}
.fancy span:before {
  right: 100%;
  margin-right: 15px;
}
.fancy span:after {
  left: 100%;
  margin-left: 15px;
}

/***************************
Star Rating and Social Icons Style
****************************/
.post-footer .rating-stars .rating-star {
width: 50px;
height: 50px;
}

.et_extra_layout .et_pb_column .module-head h1, .module-head .module-filter {
font-size: 28px;
}

.post-footer .rating-stars #rate-title, .post-footer .social-icons .share-title  {   
	display: block;
    font-size: 20px;
}

.post-footer .rating-stars, .post-footer .social-icons {
width: 100%;
margin: 0 auto;
padding: 30px 0;
}

.post-footer .social-icons {
border-bottom: 4px solid #dddddd;
}
}

/***************************
Mobile Adjustments
****************************/
@media (max-width: 980px) {
.subtitle {
font-size: 30px;
text-align: center;
}
}

保存して公開

それでは、結果を確認しましょう。

製品レビュー

ユーザー評価システム

投稿の下部にユーザーのスター配給システムがあることに注意してください。

製品レビュー

ここで、訪問者は、星のアイコンにカーソルを合わせ、選択した星のレベルをクリックするだけで、任意の製品の開始評価を送信できます。

製品レビュー

全体的なユーザー評価は、投稿の抜粋のメタデータに表示されます。

製品レビュー

[追加設定]ボックスで、この機能を無効にすることをいつでも選択できます。

まあ、それだけです。 このシリーズのパート2を楽しんでいただけたでしょうか。

今後の予定：商品を表示するためのカテゴリレイアウトの作成

パート3では、ホームページとすべてのカテゴリページのカテゴリレイアウトを作成する方法を紹介します。 シリーズのパート3の準備として、新しい投稿テンプレートを使用して、4つのカテゴリごとに少なくとも3つの製品を追加してください。 製品を表示するカテゴリモジュールにデータを入力するためにそれらが必要になります。

パート3で構築することが期待できるものは次のとおりです。

製品レビュー

以下に質問やコメントを送信してください。 あなたからの便りを楽しみにしています。