使用 Extra 構建產品評論網站 - 第 4 部分

已發表: 2017-09-17

歡迎閱讀有關如何使用 Extra 開發產品評論網站的 4 部分系列的第 4 部分。 如果您正在絞盡腦汁思考如何開始開發產品評論網站，那麼本系列適合您。 憑藉其內置的評論功能和智能帖子分類，Extra 專門用於在幾分鐘內創建漂亮的評論、產品帖子模板、大型菜單和類別佈局。 和我一起探索 Extra 的力量。

在第 1 部分中，我們設置了主題選項和定制器設置。在第 2 部分中，我們添加了我們的帖子並構建了一個帖子佈局來顯示我們的產品評論。在本系列的第 3 部分中，我們為我們的產品評論網站創建了兩種類別佈局——一種用於我們的主頁，一種用於“所有類別”頁面。

今天，我們將通過構建默認類別佈局、菜單和頁腳來完成我們的產品評論站點。今天帖子的亮點將是自定義菜單，其中的菜單鏈接與其相應類別頁面的顏色相匹配。我還將向您展示如何部署 Extra 的內置超級菜單選項並添加一些我們自己的自定義。

這是我們將要構建的內容的先睹為快

產品審核

讓我們開始吧。

使用 Extra 構建產品評論網站 - 第 4 部分

訂閱我們的 YouTube 頻道

構建默認類別頁面

Extra 帶有已安裝的默認類別頁面。默認類別頁面是查看未選擇特定類別佈局的類別頁面時將使用的佈局。在本系列的第 3 部分中，我們為主頁指定了類別佈局，並將“所有類別”頁面分配給特定類別“所有類別”。對於我們的其餘產品評論類別頁面，我們將使用此默認類別佈局。

要自定義我們的默認類別佈局，請轉到 wordpress 儀表板並導航到 Extra > Category Builder。然後將鼠標懸停在“默認類別”上並單擊編輯鏈接。

產品審核

默認情況下，您的默認類別有兩個模塊在標準部分的一列行內彼此堆疊。在我們對佈局進行任何更改之前，請確保您選擇了“將此佈局用作默認佈局？”選項。在右側邊欄的“佈局使用”框中。

產品審核

首先，用帖子輪播模塊替換頂部的精選帖子滑塊。然後通過選中“當前類別/標籤/分類法”作為此模塊的類別來更新模塊設置。現在這個帖子輪播模塊將只顯示正在訪問的類別頁面的產品。很聰明吧？

保存並退出

您可以將博客 Feed 砌體模塊保留為默認設置。只需確保您將來添加到此頁面的任何類別模塊都分配有類別“當前類別/標籤/分類法”。

現在，為了設置類別頁面 h1 標題的樣式，您需要將以下自定義 CSS 添加到主題定制器中的附加 CSS。確保將其放在最小寬度為 980 像素的媒體查詢中。

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

這就是默認類別佈局。讓我們看看我們的廚房類別頁面上的默認佈局是什麼樣的。

產品審核

現在我們已經有了默認的類別佈局，讓我們把注意力集中在我們網站最重要的部分之一——導航菜單。

我們已經在本系列的第 1 部分中設置了我們的基本標題樣式。但是今天我們將創建和設計我們的主導航菜單。

從您的 WordPress 儀表板，導航到外觀 > 菜單，然後選擇菜單。選擇頁面頂部的“創建新菜單”鏈接並輸入名稱“類別菜單”作為菜單名稱。然後選擇“主菜單”作為菜單設置部分下的顯示位置。
產品審核

現在我們可以開始將我們的菜單項添加到我們的菜單中。單擊頁面左側的類別切換按鈕。在出現的選項中，選擇“查看全部”以確保您可以看到所有可用類別。勾選您創建的所有 5 個類別（未分類），然後單擊添加到菜單按鈕將它們添加到頁面右側的菜單結構部分。現在，您可以按以下順序單擊並拖動要顯示的每個菜單項：

電子的
衣服
廚房
健康與健身
所有類別

產品審核

在我們編輯菜單項之前，選擇頁面頂部的屏幕選項鍊接。在打開的高級菜單屬性部分中，確保選中“CSS 類”旁邊的框。這將允許我們為每個菜單項添加自定義 CSS 類。

產品審核

回到你的菜單。從 Electronics Category 菜單項開始，單擊以打開配置選項。在 CSS Classes 框中，添加一個名為“green”的類。對於 Extra Mega Menu 選項，選擇“Mega Menu 3 Featured”。

這將完成兩件事。首先，類“green”將用於在懸停時將菜單項變為綠色。其次，當鼠標懸停在菜單項上時，超級菜單 3 特色選項將添加三個特色項目作為超級菜單。

對於 Clothing Category Menu 項目，添加類“blue”並選擇“Mega Menu 3 Featured”選項。

對於廚房類別菜單項，添加類別“粉紅色”並選擇“Mega Menu 3 Featured”選項。

對於健康與健身類別菜單項，添加類別“紫色”並選擇“Mega Menu 3 Featured”選項。

產品審核

“所有類別”菜單項將略有不同。繼續，將 CSS Classes 文本框留空。對於 Mega Menu 選項，選擇“Mega Menu List”。這種類型的超級菜單是一種更傳統的超級菜單，它創建子菜單項列表。此大型菜單鏈接的目標是顯示所有類別，並在下方列出其產品列表。

返回並切換打開類別框並選擇相同的四個類別（電子、服裝、廚房和健康與健身）並將它們添加到菜單中。然後將您剛剛添加的每個類別拖到“所有類別”大型菜單項下。

產品審核

切換每個類別菜單項的配置選項，並像以前一樣向每個菜單項添加相同的 CSS 類。以下是您需要添加的類的類別：

電子 – 綠色
服裝 – 藍色
廚房 – 粉紅色
健康與健身 – 紫色

接下來，我們將添加我們自己的自定義圖像，作為超級菜單中每個類別的特色類別圖像。

使用照片編輯器縮小和裁剪每個圖像，使其寬度為 500 像素，高度為 300 像素。

將它們添加/拖動到 WordPress 媒體庫。

現在返回 WordPress Admin 中的菜單頁面。

在這個例子中，我的超級菜單中的頂級類別鏈接是“電子”。單擊“電子”項右側的箭頭。在導航標籤框中，直接在文本“電子”之前使用 html img 標籤添加您想要的圖像。圖像標籤應如下所示：

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

產品審核

要查找圖像的 url，請轉到媒體 → 庫。單擊要添加的圖像。在“附件詳細信息”彈出屏幕中，找到右側部分中的 url，突出顯示它，然後使用 ctrl+c 將其複製到剪貼板。

現在返回菜單頁面上的“電子”菜單項配置，並通過使用 ctrl+v 粘貼圖像的 url 來替換文本“插入圖像 URL”。

對接下來的 3 個類別菜單項重複相同的過程。

將所有四個圖像標籤添加到每個類別菜單項後，就可以在每個類別下添加單個帖子菜單項（指向產品評論的鏈接）。

單擊以切換打開左側的帖子框並選擇“查看全部”選項卡。然後選擇所有 12 種產品並單擊添加到菜單。然後將每個帖子菜單項拖到每個類別下一級。

產品審核保存菜單

在我們查看我們的新菜單之前，我們需要添加一些自定義 CSS 來對我們的菜單進行最後的潤色。

轉到 Theme Customizer > Additional 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 列佈局。

產品審核

返回並選擇 Typography 並更新以下內容：

標題文字大小：32
正文/鏈接文字大小：16
小部件文本顏色：rgba(255,255,255,0.6)
小工具鏈接顏色：#ffffff
小部件標題顏色：#ffffff

產品審核

保存並發布

返回主題定制器的主菜單並選擇小部件。然後選擇頁腳側邊欄左側並單擊按鈕添加小部件。選擇額外 - 最近的評論小部件

產品審核

返回小部件菜單並選擇頁腳側邊欄右側並添加類別小部件。

產品審核

轉到附加 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 的強大功能使其非常適合產品評論網站。

我沒有解決的一個主題（將其保存以備將來發布）是如何使用 Extra 處理附屬鏈接。畢竟，對於大多數人來說，他們的產品評論網站的最終目標是賺錢。請隨時在下面的評論中分享您對此事的看法。

我期待著您的回音。