门头沟网站建设：使用额外的第4部分构建产品评审站点

欢迎收看本系列的第4部分如何使用。如果你正在绞尽脑汁地思考如何开始开发一个产品评论网站，这个系列是给你的。它的内置评审功能和智能后分类，额外是特别配备创建伟大的外观评论，产品后模板，超级菜单，和类别布局在几分钟内。和我一起探索额外的力量。

在……里面第一部分我们设置了主题选项和自定义程序设置。在……里面第二部分，我们添加了我们的帖子，并建立了一个帖子布局来显示我们的产品评论。在……里面第3部分在本系列中，我们为我们的产品评审站点创建了两个类别布局-一个用于我们的主页，一个用于“所有类别”页面。

今天，门头沟网站建设将通过构建默认的类别布局、菜单和页脚来完成我们的产品评审站点。今天的文章的亮点将是自定义菜单，其中的菜单链接，以匹配其相应的类别页面的颜色。我还将向您展示如何在超级菜单选项中部署External的内置选项，并添加一些我们自己的自定义。

这是我们将要建造的东西的偷窥

我们开始吧。

使用额外的第4部分构建产品评审站点

订阅门头沟网站建设的YOUTUBE频道

构建默认类别页

额外附带一个默认类别页已经安装。默认类别页是在查看未选定特定类别布局的类别页时使用的布局。在本系列的第3部分中，我们为主页指定了一个类别布局，并将“所有类别”页面分配给特定类别“所有类别”。对于产品评审类别页面的其余部分，我们将使用此默认类别布局。

若要自定义默认类别布局，请转到WordPress仪表板并导航到Extern外>分类生成器。然后悬停在“默认类别”上，然后单击编辑链接。

默认情况下，默认类别在标准节的一列行中相互叠加两个模块。在对布局进行任何更改之前，请确保选择“使用此布局作为默认布局？”在右侧栏的“布局使用”框中。

首先，用一个POST旋转木马模块替换顶部特色的POST Slider。然后，通过检查“当前类别/标记/分类法”作为该模块的类别来更新模块设置。现在，这个帖子旋转木马模块将只显示正在访问的类别页面的产品。很聪明吧？

储蓄与退出

您可以将博客源砖石模块留给它的默认设置。只需确保将来添加到此页面的任何类别模块都指定了“当前类别/标记/分类法”类别。

现在，门头沟网站建设为了给类别页面H1标题添加样式，您需要将以下自定义CSS添加到主题定制器中的附加CSS中。确保将其放入最小宽度为980 px的媒体查询中。

.archive h1 {

text-align: center;

font-size: 48px;

line-height: 1.3em;

}

这就是默认的类别布局。让我们看看我们的默认布局是什么样子在我的厨房类别页面。

现在我们已经设置了默认的类别布局，让我们关注我们网站中最重要的部分之一-导航菜单。

我们已经在本系列的第1部分中设置了基本的标题样式。但今天，我们将创建和样式我们的主要导航菜单。

从WordPress仪表板导航到外观>菜单然后选择菜单。选择页面顶部的“创建一个新菜单”链接，并输入名称“类别菜单”作为菜单名。然后在“菜单设置”部分下选择“主菜单”作为显示位置。

现在我们可以开始将菜单项添加到菜单中。单击页面左侧的类别切换。在出现的选项中，选择“查看所有”，以确保可以看到所有可用的类别。检查您创建的所有5个类别(未分类)，并单击“添加到菜单”按钮，将它们添加到页面右侧的“菜单结构”部分。现在，您可以按以下顺序单击并拖动要显示的每个菜单项：

· 电子

· 服装

· 厨房

· 健康与健康

· 所有类别

在编辑菜单项之前，请选择页面顶部的“屏幕选项”链接。在打开的“高级菜单属性”部分中，请确保选中“CSS类”旁边的框。这将允许我们在每个菜单项中添加一个自定义CSS类。

回到菜单上去。从电子类别菜单项开始，单击以切换打开配置选项。在CSS类框中，添加一个名为“Green”的类。对于额外的Mega菜单选项，选择“Mega菜单3特色”。

这将完成两件事。首先，“绿色”类将用于在悬停时将菜单项变为绿色。第二，超级菜单3选项将添加三个特色项目作为一个超级菜单时，悬停在菜单项上。

对于服装类别菜单项，添加类“蓝色”并选择“梅加菜单3”选择。

对于厨房类别菜单项，添加类“粉红色”并选择“梅加菜单3”选择。

对于健康和健身类别菜单项，添加类“紫色”并选择“梅加菜单3”选择。

“所有类别”菜单项将略有不同。继续，将CSS类文本框保留为空白。对于Mega菜单选项，选择“Mega菜单列表”。这种类型的超级菜单是一个更传统的超级菜单，它创建了一个子菜单项目列表。这个超级菜单链接的目标是显示所有类别，并在下面列出它们的产品列表。

返回并切换，打开“类别”框，选择相同的四个类别(电子产品、服装、厨房和健康与健身)，并将它们添加到菜单中。然后拖动刚才在“所有类别”超级菜单项下添加的一个级别的每个类别。

切换每个类别菜单项的配置选项，并向每个菜单项添加相同的CSS类，就像以前一样。下面是需要添加的类别：

电子-绿色
服装-蓝色
厨房粉红
健康与健康-紫色

接下来，门头沟网站建设将添加自己的自定义图像，作为超级菜单中每个类别的特色类别图像。

使用照片编辑器缩小和裁剪每幅图像的宽度为500 px，高度为300 px。

将它们添加/拖动到WordPress媒体库中。

现在回到WordPress管理中的菜单页面。

在这个例子中，我的超级菜单中的顶级链接是“电子”。单击“电子”项目右侧的箭头。在导航标签框中，使用html IMG标记在文本“Electronics”之前添加您想要的图像。图像标记应该如下所示：

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

若要查找图像的url，请转到媒体→库。单击要添加的图像。在“附件详细信息”弹出屏幕中，找到右侧部分中的url，突出显示它，然后使用ctrl+c将其复制到剪贴板。

现在回到菜单页面上的“电子”菜单项配置，使用ctrl+v粘贴图像的网址，替换文本“插入图像URL”。

对下三个类别菜单项重复相同的处理。

一旦您将所有四个图像标记添加到每个类别菜单项中，就可以在它们各自的类别下添加您的单个帖子菜单项(指向您的产品评论的链接)。

单击此处可切换到左侧的POST框，并选择“查看所有”选项卡。然后选择所有12种产品，然后单击“添加到”菜单。然后将每个POST菜单项拖到每个类别下一个级别。

保存菜单

在我们检查我们的新菜单之前，我们需要添加一些定制的CSS来对我们的菜单进行最后的修改。

转到主题Customizer>附加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;gt;ul&amp;amp;gt;li&amp;amp;gt;a:before {

height: 8px;

}

保存并发布设置。

现在让我们看看我们的新菜单。当您悬停在菜单项上时，请注意它们的颜色。这些颜色与其相应的类别颜色相匹配。

建造页脚

为了为我们的产品评审站点构建页脚，我们将利用Extern外的内置小部件来显示最新的产品评论和类别列表。

首先，我们需要进入主题定制>页脚设置。然后单击“布局”并选择2列布局。

返回并选择排版并更新以下内容：

标题文本大小：32
正文/链接文本大小：16
小部件文本颜色：RGBA(255，255，255，0.6)
小部件链接颜色：#ffffff
小部件标题颜色：#ffffff

保存和发布

返回到主题定制器的主菜单并选择Widget。然后选择左侧的页脚边框，然后单击按钮添加一个Widget。选择“最新评论”小部件

返回到小部件菜单，并选择页脚边栏向右，并添加类别小部件。

转到其他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部分，并完成了关于使用External构建产品评审站点的系列文章。

最终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;

}

}

包起来

门头沟网站建设希望你喜欢探索的力量，额外在建立一个产品审查网站与我。如果有什么不同的话，我相信你至少会对这个杰出的主题有一个新的欣赏和一点灵感去做更多的事情。内置的评审系统、智能类别布局和Divi Builder的强大功能使其非常适合产品评审站点。

我没有提到的一个主题(为以后的文章保存)是如何使用额外的方式处理附属链接。毕竟，对大多数人来说，他们的产品评论网站的最终目标是赚钱。请在下面的评论中分享你对这件事的想法。

门头沟网站建设期待着收到你的来信。