エクストラを使用した製品レビューサイトの構築–パート3
公開: 2017-09-14Extraを使用して製品レビューサイトを開発する方法に関するこの4部シリーズのパート3へようこそ。 あなたが製品レビューサイトの開発を始める方法に頭を悩ませているなら、このシリーズはあなたのためです。 組み込みのレビュー機能とスマートな投稿分類を備えたExtraは、見栄えの良いレビュー、製品投稿テンプレート、メガメニュー、カテゴリレイアウトを数分で作成できるように特別に装備されています。 Extraの力を探求するときに、私と一緒に参加してください。
このシリーズのパート2では、Extraの組み込み設定とVisualBuilderを使用して製品レビュー投稿テンプレートを作成しました。 新しい投稿テンプレートを使用すると、投稿を追加して、それぞれのカテゴリに割り当てることができました。
今日は、ExtraのCategoryBuilderを使用して2つのカテゴリレイアウトを作成します。 最初のレイアウトでは、ホームページに投稿/製品レビューが表示され、最新の人気のあるレビューが強調表示されます。 2番目のレイアウトでは、カルーセルスライダーモジュールを使用して、すべてのカテゴリを1ページに表示します。 このチュートリアルを完了すると、適切に設計された製品レビューサイトの優れた基盤が得られます。
これが私たちが構築しようとしているもののスニークピークです
デザイン要素の準備
カテゴリのレイアウトは投稿のコンテンツに大きく依存するため、独自のコンテンツを追加したときにサイトがどのように表示されるかを感じることができるように、十分な数の投稿を追加するようにしてください。 このシリーズのパート2で説明したように、私のカテゴリレイアウトには、4つのカテゴリがあり、各カテゴリに3つの製品があります。 投稿の注目画像には、shutterstockのストック画像を使用しています。
カテゴリレイアウトを設計するために、ExtraのCategoryBuilderと小さなカスタムCSSを使用します。
始めましょう。
エクストラを使用した製品レビューサイトの構築–パート3
私たちのYoutubeチャンネルを購読する
ホームページのカテゴリレイアウトの作成
デフォルトでは、extraはホームページのカテゴリレイアウトを使用します。 カスタムレイアウトを作成するには、WordPressダッシュボードのサイドバーから[追加]> [カテゴリの作成]に移動します。 すでにそこにある「ホームページ」という名前のカテゴリレイアウトを見つけて、その上にカーソルを置き、[編集]を選択します。
次に、現在のデフォルトレイアウトを消去するために、紫色のビルダーメニューの[レイアウトのクリア]をクリックします。
これで、カスタムレイアウトの作成を開始できます。 標準セクションの行に3分の2、3分の1の列を追加することから始めます。
左側（3分の2）の列に、注目の投稿スライダーを追加します。
注目の投稿スライダーモジュールの設定を次のように更新します。
[コンテンツ]タブの下…
カテゴリ：すべて
注目の投稿のみを表示する：[注目する投稿を決定するまで、これはオフにしておきます。 投稿エディタページの[追加設定]ボックスで、特定の投稿を特集として指定できます。]
著者を表示：オフ
表示日：オフ
[デザイン]タブの下…
ナビゲーション矢印の色：#ffffff
ナビゲーション矢印の背景：＃000000
キャプションの背景：rgba（255,255,255,0.4）
タイトルフォントサイズ：24px
タイトルテキストの色：＃000000
メタフォントサイズ：16px
メタテキストの色：＃000000
カスタムマージン：下0px
[詳細設定]タブの下…
[メイン要素]テキストボックスに次のカスタムCSSを入力します。
border: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; margin-bottom: 0px !important;
設定を保存する
次に、テキストモジュールを右側（3分の1）の列に追加し、テキストモジュールの設定を次のように更新します。
[コンテンツ]タブで、次のhtmlをコンテンツボックスの[テキスト]タブに追加します。
<h1>Get the Latest Reviews on Popular Products</h1> <a class="join-cta" href="/reviews" target="_blank">Click to Join</a>
ここでのリンクは、模擬CTAボタンとして機能することを目的としています。 あなたはそれを好きなように使うことを選ぶことができます。 URLとリンクテキストを更新するだけです。
ヒント：このCTAをクリックすると、Bloomを使用してメールオプチンポップアップボックスをトリガーできます。 そうすれば、訪問者はあなたの電子メールマーケティングキャンペーンで製品について今日起き続けることができます。 これを行うには、Bloomをインストールし、ポップアップフォームを追加して、電子メールプロバイダーを統合する必要があります。 次に、上記のhtmlコードのリンククラスに対応するCSSセレクター「a.join-cta」をクリックしたときにポップアップを表示することを選択します。
ボタンをクリックしたときにブルームオプチンフォームをポップアップさせる方法の詳細も読むことができます。
次に、テキストモジュール設定に戻ります。
[デザイン]タブの下…
テキストフォントサイズ：40px（デスクトップ）、24px（タブレットとスマートフォン）
ヘッダーフォントサイズ：42px（デスクトップ）、38px（タブレット）、28px（スマートフォン）
カスタムパディング：40px（上）、15px（右）、15px（下）、15px（左）
設定を保存する
次に、 [行の設定]に移動して、行の背景のスタイルを設定します。
次に、以下を更新します。
[コンテンツ]タブの下…
背景：#ffffff
[デザイン]タブの下…
この行を全幅にする：はい
列の高さを等しくする：はい
[詳細設定]タブで、次のカスタムCSSを[メイン要素]入力ボックスに追加します。
border-top: 10px solid #121212; border-radius: 3px; -webkit-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); -moz-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); 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);
設定を保存する
今すぐカスタム機能のスライダーセクションをチェックしてください。
これまでのところよさそうだ。
続けましょう。 カテゴリビルダーに戻り、現在のセクションの下に標準セクションを追加し、テキストモジュールを使用して1列の行を追加します。
次に、テキストモジュールの設定を次のように更新します。
[コンテンツ]タブの下では、コンテンツボックスのテキスト]タブでは、このHTMLの見出しを追加します。
<h1 class="subtitle fancy"><span>Product Reviews</span></h1>
[デザイン]タブの下…
テキストの向き：中央
ヘッダーフォント：B（太字）
ヘッダーフォントサイズ：48px（デスクトップ）、42px（タブレット）、36px（スマートフォン）
設定を保存する
これは、製品レビューを表示する以下のセクションのタイトルとして機能します。
次に、次の4分の3、4分の1の列構造を持つ特殊セクションを追加します。
左側（4分の3）のセクションに、2列の行を追加します。
その行の左側の列に、投稿モジュールを追加します
次に、モジュールにカテゴリを割り当てて、[コンテンツ]タブの[投稿]モジュール設定を更新します。 このように、投稿モジュールはそのカテゴリのみを表示します。 これを行うには、カテゴリとして「衣類」を選択します。
次に、以下を更新します。
作者を表示：いいえ
表示日：いいえ
設定を保存する
この投稿モジュールを複製して、左側の列に2つの投稿モジュール、右側に2つの投稿モジュールを積み重ねます。
次に、各モジュールの設定を異なるカテゴリで更新します。 私が持っているカテゴリは、衣料品、電子機器、キッチン、健康とフィットネスです。
ビデオレビューを表示する投稿モジュールを追加する場合は、ここに追加できます。 まず、動画という新しい投稿カテゴリを追加し、カテゴリに色＃222222を割り当てる必要があります。 次に、新しい投稿を作成し、[フォーマット]で[ビデオ]を選択して、Extraの組み込みの[ビデオフォーマットオプション]ボックスにビデオURLを追加します。
次に、レビューボックスの内容を追加して、ビデオの下に表示できます。
いくつかの動画をアップロードしたら、必ずそれらを[動画]カテゴリに追加してください。 次に、ホームページのカテゴリビルダーに戻り、4つの投稿モジュールを含む行の下に1列の行を追加します。 次に、前の行から投稿モジュールを複製し、新しい行に追加します。 [コンテンツ]タブの[投稿モジュール設定]で、[動画]カテゴリを選択します。 これで、ビデオを表示する投稿モジュールができました。
専門セクションの右側（サイドバー）の領域に、さらに2つの投稿モジュールを積み重ねて追加します。
1つ目は、投稿モジュールの設定を更新して、「すべて」のカテゴリを含めます。 次に、ソート方法「最高評価」を選択します。
その投稿モジュールを複製して、別のモジュールがその下にスタックするようにします。 次に、そのソート方法を「最も人気のある」に更新します。
先に進み、投稿を更新して設定を保存します。 これまでのレイアウトは次のようになります。
次に、「Product Reviews」というタイトルのテキストモジュールを含む、2番目のメインセクションを複製（またはコピー）します。
次に、複製したセクションを特殊セクションの下にドラッグ（または貼り付け）します。 新しいセクションで、テキストモジュール設定のコンテンツを次のhtmlで更新します。
<h2 class="subtitle fancy"><span>Latest Reviews</span></h2>
設定を保存する
次に、最新のものから始まるすべての製品レビューを表示するブログフィードを追加します。
更新したテキストモジュールの下で、ブログフィード組積造モジュールを列に追加します。 ブログフィード組積造モジュールの設定の[コンテンツ]タブで、フィードに表示するすべてのカテゴリを選択します。
設定を保存する
そして最後に、ブログフィード組積造モジュールの下に、投稿カルーセルモジュールを追加します。 [コンテンツ]タブの[投稿カルーセルモジュール設定]を更新してすべてのカテゴリを含め、[はい]を選択して注目の投稿のみを表示します。
このカルーセルは、商品レビューの投稿を作成するときに、注目アイテムとして選択した投稿のみを表示することを目的としています。
次に、最終的なレイアウトがどのようになるかを見てみましょう。
カスタムCSSの数行を追加する
デザインをまとめるには、カスタムCSSを数行追加する必要があります。 [テーマカスタマイザー]> [追加のCSS]に移動し、既に存在する現在のCSSコードの先頭に以下を追加します。
.et_pb_extra_module, .posts-blog-feed-module.masonry .hentry {
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);
border-top: 10px solid;
}
次に、最小幅980pxに設定されたメディアクエリブラケット内に、以下を追加します。
.join-cta {
display: block;
text-align: center;
border: 3px solid #333;
color: #333;
padding: 20px 15px;
text-transform: uppercase;
font-weight: 600;
font-size: 30px;
}
最初のCSSスニペットは、モジュールに少し暗い影と高い上部境界線を追加します。 2つ目は、上部セクションの[今すぐ参加]ボタンをカスタマイズします。
さて、ホームページカテゴリのレイアウトは以上です。 最終結果は次のようになります。
ホームページのカテゴリレイアウトに加えて、すべてのカテゴリを1ページに表示するための簡単なレイアウトをもう1つ追加しましょう。
「すべてのカテゴリ」レイアウトの構築
このレイアウトは、すべての投稿が読み込まれ、カテゴリが設定され、テーマのスタイルが設定されているため、非常に簡単に作成できます。 このレイアウトの目的は、すべてのカテゴリと製品を1つのページに表示するページを作成することです。 これはさまざまな方法で実行できますが、Extraでは、投稿カルーセルモジュールを利用して、HuluやNetflixなどのビデオストリーミングWebサイトで表示されるのと同様のレイアウトでカテゴリと投稿を表示したいと思いました。
レイアウトを追加するには、現在のカテゴリレイアウトの一番上までスクロールし、[新規追加]を選択します。 カテゴリビルダーを使用して、1列の行を標準セクションに追加します。 次に、テキストモジュールを行に追加します。 [コンテンツ]タブの[テキストモジュール設定]を更新して、コンテンツボックスに次のh1タグを含めます。
<h1 class="subtitle fancy"><span>All Categories</span></h1>
設定を保存する
次に、テキストモジュールの下に投稿カルーセルモジュールを追加します。 投稿カルーセルモジュール設定で、カテゴリとして[衣類]を選択します。
設定を保存する
次に、衣料品カテゴリの投稿カルーセルの下にテキストモジュールを追加します。 [テキストモジュールの設定]で、[コンテンツ]タブの[コンテンツ]ボックスに次のリンクを追加します。
<a href="/category/clothing">view all clothing reviews</a>
URLやリンクテキストはサイトによって変更する必要があるかもしれませんが、そのカテゴリのすべての製品レビューを表示するには、その特定のカテゴリのカテゴリページにリンクすることをお勧めします。
[デザイン]タブで、[テキストの向き]を[右]に変更します。
設定を保存する
次の3つのカテゴリを同じ方法で表示するには、特定のカテゴリに割り当てられた投稿カルーセルモジュールを追加し、その後に対応するカテゴリページへのリンクを含むテキストモジュールを追加するプロセスを繰り返します。
ビルダーの右側にあるカテゴリボックスで、「すべてのカテゴリ」という新しいカテゴリを追加し、このレイアウト用に選択します。 そうすれば、「すべてのカテゴリ」カテゴリページにリンクするたびに、このテンプレートが表示されます。
終了すると、最終的なレイアウトは次のようになります。
そして、これがサイト上でのカテゴリーレイアウトの様子です。
まだ多くの商品が追加されていないため、現時点でわかりますが、これは最終的に、投稿カルーセルスライダーモジュールを使用して各カテゴリの商品をシャッフルする便利な方法として機能します。
今日の投稿は以上です。 Extraを使用した製品レビューサイトの構築に関するこの4部構成のシリーズの第3部を楽しんでいただけたと思います。
まだ飽きていないことを願っています。シリーズの最後の投稿が1つあります。
来る
シリーズの最後の投稿では、製品レビューサイトのヘッダー要素とナビゲーション要素をカスタマイズします。 メニューの作成に加えて、サイト全体のカテゴリの色に対応するメニューリンクに色を割り当てるクールな方法を紹介します。 また、数回クリックするだけでメガメニューを作成する方法も紹介します。
私たちのウェブサイトの最後の部分を一緒に構築することを楽しみにしています。
いつものように、以下にコメントを送信してください。