使用 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 处理附属链接。毕竟，对于大多数人来说，他们的产品评论网站的最终目标是赚钱。请随时在下面的评论中分享您对此事的看法。

我期待着您的回音。