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

公開: 2017-09-17

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

パート1では、テーマオプションとカスタマイザー設定を設定します。パート2では、投稿を追加し、商品レビューを表示するための投稿レイアウトを作成しました。このシリーズのパート3では、製品レビューサイト用に2つのカテゴリレイアウトを作成しました。1つはホームページ用、もう1つは「すべてのカテゴリ」ページ用です。

今日は、デフォルトのカテゴリレイアウト、メニュー、およびフッターを作成して、製品レビューサイトを完成させます。今日の投稿のハイライトは、対応するカテゴリページの色と一致するメニューリンクを持つカスタムメニューです。また、Extraの組み込みメガメニューオプションを展開し、独自のカスタマイズをいくつか追加する方法も示します。

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

製品レビュー

始めましょう。

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

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

デフォルトのカテゴリページの作成

Extraには、デフォルトのカテゴリページがすでにインストールされています。デフォルトのカテゴリページは、特定のカテゴリレイアウトが選択されていないカテゴリページを表示するときに使用されるレイアウトです。このシリーズのパート3では、ホームページのカテゴリレイアウトを指定し、「すべてのカテゴリ」ページを特定のカテゴリ「すべてのカテゴリ」に割り当てました。製品レビューカテゴリページの残りの部分では、このデフォルトのカテゴリレイアウトを使用します。

デフォルトのカテゴリレイアウトをカスタマイズするには、ワードプレスダッシュボードに移動し、[追加]> [カテゴリビルダー]に移動します。次に、「デフォルトのカテゴリ」にカーソルを合わせ、編集リンクをクリックします。

製品レビュー

デフォルトでは、デフォルトのカテゴリには、標準セクションの1列の行内に2つのモジュールが積み重ねられています。レイアウトを変更する前に、「このレイアウトをデフォルトのレイアウトとして使用しますか？」オプションを選択していることを確認してください。右側のサイドバーの[レイアウトの使用法]ボックスにあります。

製品レビュー

まず、上部の注目の投稿スライダーを投稿カルーセルモジュールに置き換えます。次に、このモジュールのカテゴリとして「現在のカテゴリ/タグ/分類法」をチェックして、モジュール設定を更新します。これで、この投稿カルーセルモジュールは、アクセスされているカテゴリページの製品のみを表示します。かなり賢いですね

保存して終了

ブログフィード組積造モジュールは、デフォルト設定のままにしておくことができます。今後このページに追加するカテゴリモジュールには、「現在のカテゴリ/タグ/分類法」というカテゴリが割り当てられていることを確認してください。

カテゴリページのh1タイトルのスタイルを設定するには、テーマカスタマイザの追加CSSに次のカスタムCSSを追加する必要があります。最小幅980pxのメディアクエリ内に配置してください。

.archive h1 {
text-align: center;
font-size: 48px;
line-height: 1.3em;
}

デフォルトのカテゴリレイアウトは以上です。キッチンのカテゴリページで、デフォルトのレイアウトがどのように表示されるかを確認しましょう。

製品レビュー

デフォルトのカテゴリレイアウトが設定されたので、Webサイトの最も重要な部分の1つであるナビゲーションメニューに注目しましょう。

このシリーズのパート1では、基本的なヘッダースタイルをすでに設定しています。しかし、今日は、主要なナビゲーションメニューを作成してスタイルを設定します。

あなたのワードプレスのダッシュボードから、外観にナビゲート>メニューは、メニューを選択します。ページ上部の「新しいメニューを作成する」リンクを選択し、メニュー名として「カテゴリメニュー」という名前を入力します。次に、[メニュー設定]セクションの表示場所として[プライマリメニュー]を選択します。
製品レビュー

これで、メニュー項目をメニューに追加できるようになりました。ページの左側にある[カテゴリ]トグルをクリックします。表示されるオプションで、[すべて表示]を選択して、使用可能なすべてのカテゴリが表示されることを確認します。作成した5つのカテゴリ（未分類ではない）をすべてチェックし、[メニューに追加]ボタンをクリックして、ページの右側のメニュー構造セクションに追加します。これで、次の順序で表示される各メニュー項目をクリックしてドラッグできます。

電子
衣類
キッチン
ヘルス＆フィットネス
すべてのカテゴリ

製品レビュー

メニュー項目を編集する前に、ページ上部の画面オプションリンクを選択してください。開いた詳細メニューのプロパティセクションで、[CSSクラス]の横にあるチェックボックスをオンにします。これにより、各メニュー項目にカスタムCSSクラスを追加できるようになります。

製品レビュー

メニューに戻ります。 [電子機器カテゴリ]メニュー項目から始めて、クリックして構成オプションを切り替えて開きます。 [CSSクラス]ボックスに、「green」という名前のクラスを追加します。また、[エクストラメガメニュー]オプションで、[メガメニュー3特集]を選択します。

これにより、2つのことが達成されます。まず、クラス「緑」を使用して、ホバー時にメニュー項目を緑にします。次に、メガメニュー3の注目オプションは、メニュー項目にカーソルを合わせると、メガメニューとして3つの注目項目を追加します。

衣料品カテゴリメニュー項目に、クラス「青」を追加し、 「メガメニュー3注目」オプションを選択します。

キッチンカテゴリメニュー項目に、クラス「ピンク」を追加し、 「メガメニュー3注目」オプションを選択します。

Health＆Fitness Category Menuアイテムに、クラス「purple」を追加し、 「Mega Menu3Featured」オプションを選択します。

製品レビュー

「すべてのカテゴリ」メニュー項目は少し異なります。先に進み、CSSクラスのテキストボックスを空白のままにします。また、メガメニューオプションは「メガメニューリスト」を選択してください。このタイプのメガメニューは、サブメニュー項目のリストを作成する、より伝統的なメガメニューです。このメガメニューリンクの目的は、すべてのカテゴリをその製品のリストとともに表示することです。

戻ってカテゴリボックスを切り替えて開き、同じ4つのカテゴリ（電子機器、衣料品、キッチン、健康とフィットネス）を選択して、メニューに追加します。次に、追加した各カテゴリを「すべてのカテゴリ」メガメニュー項目の下に1レベルドラッグします。

製品レビュー

これらの各カテゴリメニュー項目の構成オプションを切り替えて、以前と同じようにそれぞれに同じCSSクラスを追加します。追加する必要のあるクラスのカテゴリは次のとおりです。

エレクトロニクス–グリーン
衣類–青
キッチン–ピンク
健康とフィットネス–紫

次に、メガメニューの各カテゴリの注目カテゴリ画像として機能する独自のカスタム画像を追加します。

フォトエディタを使用して、各画像を幅500px、高さ300pxに縮小およびトリミングします。

それらをWordPressMediaライブラリに追加/ドラッグします。

次に、WordPressAdminのメニューページに戻ります。

この例では、メガメニューの一番上のカテゴリリンクは「Electronics」です。「Electronics」項目の右側にある矢印をクリックします。 [ナビゲーションラベル]ボックスで、「Electronics」というテキストの直前にhtmlimgタグを使用して必要な画像を追加します。画像タグは次のようになります。

<img src="Insert Image Url" width="100%" />

製品レビュー

画像のURLを見つけるには、[メディア]→[ライブラリ]に移動します。追加する画像をクリックします。 [添付ファイルの詳細]ポップアップ画面で、右側のセクションでURLを見つけて強調表示し、ctrl + cを使用してクリップボードにコピーします。

次に、メニューページの[電子機器]メニュー項目の構成に戻り、ctrl + vを使用して画像のURLを貼り付けて、[画像のURLを挿入]というテキストを置き換えます。

次の3つのカテゴリメニュー項目に対して同じプロセスを繰り返します。

4つの画像タグすべてを各カテゴリメニュー項目に追加したら、それぞれのカテゴリの下に単一の投稿メニュー項目（製品レビューへのリンク）を追加します。

クリックして切り替え、左側の[投稿]ボックスを開き、[すべて表示]タブを選択します。次に、12個の製品をすべて選択し、[メニューに追加]をクリックします。次に、各投稿メニュー項目を各カテゴリの1レベル下にドラッグします。

製品レビューメニューを保存

新しいメニューをチェックする前に、カスタムCSSを追加して、メニューの最後の仕上げを行う必要があります。

[テーマカスタマイザー]> [追加のCSS]に移動し、次のCSSを入力します。

/****************************
style menu
*****************************/

#et-menu li.green a:hover, #et-menu li.current-menu-item.green a {
color: #5bd999 !important;
}

li.green a:before {
background-color: #5bd999 !important;
}

#et-menu li.pink a:hover, #et-menu li.current-menu-item.pink a {
color: #e6567a !important;
}

li.pink a:before {
background-color: #e6567a !important;
}

#et-menu li.blue a:hover, #et-menu li.current-menu-item.blue a{
color: #00c0e4 !important;
}

li.blue a:before {
background-color: #00c0e4 !important;
}

#et-menu li.purple a:hover, #et-menu li.current-menu-item.purple a{
color: #7658f8 !important;
}

li.purple a:before {
background-color: #7658f8 !important;
}

/***************************
increase height of line under nav links on hover
****************************/
#et-navigation&amp;amp;amp;gt;ul&amp;amp;amp;gt;li&amp;amp;amp;gt;a:before {
height: 8px;
}

設定を保存して公開します。

それでは、新しいメニューをチェックしてみましょう。メニュー項目にカーソルを合わせると、メニュー項目の色に注意してください。色は、対応するカテゴリの色と一致します。

製品レビュー

フッターの構築

製品レビューサイトのフッターを作成するために、Extraの組み込みウィジェットを利用して、最新の製品レビューとカテゴリリストを表示します。

まず、テーマカスタマイザー>フッター設定に移動する必要があります。次に、[レイアウト]をクリックして、2列のレイアウトを選択します。

製品レビュー

戻ってタイポグラフィを選択し、以下を更新します。

見出しテキストサイズ：32
本文/リンクテキストサイズ：16
ウィジェットのテキストの色：rgba（255,255,255,0.6）
ウィジェットのリンクの色：#ffffff
ウィジェットの見出しの色：#ffffff

製品レビュー

保存して公開

テーマカスタマイザのメインメニューに戻り、ウィジェットを選択します。次に、[フッターサイドバー左]を選択し、ボタンをクリックしてウィジェットを追加します。追加–最近のレビューウィジェットを選択します

製品レビュー

ウィジェットメニューに戻り、Footer Sidebar Rightを選択して、Categoriesウィジェットを追加します。

製品レビュー

[追加のCSS]セクションに移動し、フッターに次のカスタムCSSを追加します。

/****************************
footer
*****************************/
#footer .et_pb_widget li {
border-bottom: none;
color: #fff;
}
.et_pb_widget.widget_et_recent_reviews .review-breakdowns .score-bar-bg {
background: rgba(255,255,255,.1);
}

テーマカスタマイザーの設定を保存して公開し、フッターを確認してください。

製品レビュー

それでおしまい。これでパート4が正常に終了し、Extraを使用した製品レビューサイトの構築に関するシリーズが完了しました。

最終的な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;
}

/****************************
style menu
*****************************/

#et-menu li.green a:hover, #et-menu li.current-menu-item.green a {
color: #5bd999 !important;
}

li.green a:before {
background-color: #5bd999 !important;
}

#et-menu li.pink a:hover, #et-menu li.current-menu-item.pink a {
color: #e6567a !important;
}

li.pink a:before {
background-color: #e6567a !important;
}

#et-menu li.blue a:hover, #et-menu li.current-menu-item.blue a{
color: #00c0e4 !important;
}

li.blue a:before {
background-color: #00c0e4 !important;
}

#et-menu li.purple a:hover, #et-menu li.current-menu-item.purple a{
color: #7658f8 !important;
}

li.purple a:before {
background-color: #7658f8 !important;
}

/***************************
increase height of line under nav links on hover
****************************/
#et-navigation>ul>li>a:before {
height: 8px;
}

/****************************
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) {

.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;
}

/***************************
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;
}
}

/****************************
footer
*****************************/
#footer .et_pb_widget li {
border-bottom: none;
color: #fff;
}

.et_pb_widget.widget_et_recent_reviews .review-breakdowns .score-bar-bg {
background: rgba(255,255,255,.1);
}

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

まとめ

私と一緒に製品レビューサイトを構築する際に、Extraの力を楽しんでいただけたと思います。どちらかといえば、私はあなたが少なくともこの傑出したテーマへの新しい感謝とそれでもっと多くをするための少しのインスピレーションを持って立ち去ると確信しています。組み込みのレビューシステム、スマートなカテゴリレイアウト、およびDivi Builderのパワーにより、製品レビューサイトに最適です。

私が取り上げなかった（将来の投稿のために保存する）トピックの1つは、Extraを使用してアフィリエイトリンクを処理する方法です。結局のところ、ほとんどの人にとって、製品レビューサイトの最終目標はお金を稼ぐことです。以下のコメントで、この問題についてのあなたの考えを自由に共有してください。

あなたからの便りを楽しみにしています。