全托管主机自建WordPress+Woocommerce独立站(三)：通过editor搭建整个网站布局

前面已经完成了主题插件的安装和后台设置，这篇文章我们来说一说整个网站的布局，也就是框架，这个过程基本上都是在Appearance的Editor中完成。

网站依然是基于Cloudways主机搭建的WordPress+Woocommerce独立站。

页头

一个网站第一个映入大家眼帘的基本上都是页头，所以我们就从页头(header)开始，从左侧菜单的Appearance进入Editor，点击Pattern:

pattern是wordpress网站的一些组件模板，选择Header，安装woocommerce之后header里面有两个模板，一个header，一个checkout header，通用模板是header，所以我们选择header，checkout的header我们之后再设计。

点击header进入到编辑界面，在这里Ollie主题有几个做好的header模板，你可以选择一个，或者直接修改，自从wordpress进入block时代，header不再受限于主题固定的页头结构，用户可以自己调整，让页头具有完全的自主性和独特性。

我们选择最后一个主题预置的页头模板，如上图，三行的模式，编辑界面分三栏：

第一栏是区块block的列表，在这里可以添加删除区块，并且随意拖动区块的位置来排列区块在页面的位置。
第二栏就是可视化快速预览界面，这里就是到时候真正要显示在你网站前台的界面，这个位置可以更改block的内容。
最后一栏分多个标签，一个是当前模板或者页面的基本信息，另外就是区块的更多设置，当你需要设置具体的某一个区块的时候，选中区块，然后在这里切换到block就能进行设置了。

以后不管是页面，还是文章的设置界面都是这套逻辑，多操作几次，相信任何人都不会太难，而且你以后的网站界面都是你自己设计结构和内容，和别人一样的情况会非常少，因为每一个区块都可以排列摆放不同位置，这就让每个人的网站都有区别，不像以前，一套模板下来，用同一个主题的大部分都看起来很像。

这里我们虽然选择了一个预置的页头模板，但是我们仍然可以调整位置和页头的内容，因为这个页头已经元素挺齐全了，我们可以稍作调整。

第一行是网站的一些通知和促销，这一栏我们暂且不修改，当然你可以修改底色和文字颜色大小，内容就不改，我们修改第二行，在左侧的列表中叫header row 1，我们来看一下都有什么区块：

区块分别是网站名称/标题，主菜单，客户账号和购物车，再往下看第三行Header Row2，我们不需要点开都知道也是一个菜单和一个搜索框，我们现在要调整为，第二行，是网站logo，搜索框，客户账号和购物车，第三行改成菜单和社交图标。我们要做几个动作：

删掉第二行的主菜单，
把搜索框拖到第二行中间，
设置区块
添加一个social图标列表。

删除区块

删除很简单，直接点击要删除的区块，也就是navigation，按电脑的delete键，或者点击右边竖排三点（⋮），点击delete：

拖动区块

拖动区块更换位置也一样简单，点击需要拖动的区块，按住鼠标不要动，拖到你想放置的位置，如图所示：

你可以在列表中拖动区块放在列表想要的位置，也就是site title后面，也可以放置到中间可视化界面的相应位置，以下是拖动后的位置：

就是这么简单，记得点击右上角save保存。现在的wordpress已经向大部分页面建站工具的方向靠拢，为的就是让新手能够更简单的建站，除了一些老登思想的人还是坚持wp的老一套建站，有些人甚至骂wordpress，时代在进步，我认为即便以前的有他的优点还是要跟进时代的步伐的。

区块设置

我们就以这个设置区块来看看区块的设置，区块的如上文所说在右侧的标签block中设置：

看上面两个图，搜索区块的设置分两个部分，一个是基本设置就是螺帽图标，可以设置搜索框的外观，宽度这些，而样式也就是黑白圆图标，这里可以设置颜色字体这些，根据自己的需求调整，然后左边可视化界面就会跟着变化，所以这一步其实不需要我每一个介绍，大家直接调整看效果就行了。

添加区块

现在我们来添加一个区块，前面说过要在第三行添加一个社交图标区块，添加区块可以从两个地方添加：

如上图所示，两个箭头所指的+按钮都可以添加新区块，点击后，我们直接搜索框，搜索social，就会列出相关的区块，然后点击就添加上了：

如上图所示，点击social icons，就可以添加多个社交图标，然后同样点击加号添加不同的社交图标，：

每一个图标可以添加链接，就可以把你的社交账号链接填写在相应的社交图标上，填好后记得点击弯箭头，这样才能绑定链接。

然后根据你的需求在右侧对区块进行设置，比如我把图标颜色都换成黑色，透明底：

所以添加一个区块也是很简单的。

菜单设置

其实大家发现菜单可能不是自己想要的，没关系，你可以自己新建一个菜单，新建菜单也不需要离开这个editor界面，选中navigation这个区块，然后点击最右栏中Navigation旁边的竖排三点（⋮），这里就有create new Menus，点击它：

点击新建菜单，如下图，就创建好了新菜单，叫menu，而且直接替换掉了之前的菜单，

只不过这个菜单还是空的，没有任何链接，如果你想换回之前的菜单，仍然点击navigation就可以切换回来。

添加菜单项也很简单，点击+就行了，可以添加的菜单项包括页面，文章，文章分类，产品，产品类目，还可以自定义菜单，只要你有的链接都能添加进来。

如图所示，添加菜单项，在列表中选择需要的页面即可，列表中没有的可以新建页面，还可以通过add block添加文章分类页的区块，非常方便。

真正的所有菜单其实在editor首页的Navigations里面：

在这个里面你可以单独设置每一个菜单，可以修改删除菜单项，给真个菜单命名，比如页头的主菜单我们可以改成main menu或者primary menu。

到这里，怎么设计编辑网站页头也就差不多了吧，记得点击右上角的save保存。你要什么其他的区块自己添加，要放在什么位置，想要页头什么结构都可以自由发挥。

而且这里熟练了，之后的页面模板都是这套原理，只是结构不同，区块不同，真的减少非常多的学习成本，而且让网站不再千篇一律。

页脚

编辑好页头，那就是页脚，这两个部分是网站相对固定的位置，所以一次性设计好，之后基本所有页面通用。页脚同样在editor->patterns里面，点击footer进入编辑界面

页脚footer的编辑和页头差不多，你可以选择现成的模板，Ollie总共预置了4个，如果有满意的就选一个，没有满意的就在任何一个基础上编辑，工作同样是删除区块，添加区块，修改区块，设置区块，只是每一个区块的设置和内容各有不同，边设置边预览，没什么技术含量，我觉得我不需要再演示一遍，是在不懂，再看一次前面页头的编辑，然后多操作几次，你自然熟。

页面模板

搞定页头页脚之后，就是网站各个网页中间的主要内容了，因为一个网站有不同类型的页面，所以每一种页面类型wordpress可以设置一套或者多套模板，模板也就是页面的布局，一旦设定某一个类型页面的模板，那么同类型的页面前台格式和布局基本一样，就是内容各不相同，一个woocommerce电商独立站大致包括以下几种类型的页面：

pages页面
posts单一文章
archive文章归档页面，包括文章分类，文章标签页
单个产品页面
产品归档页面，也包括分类和标签页
搜索页面
404页面

主要就是这些类型了，我们接下来编辑几个主要页面的模板，所有的页面模板都在Editor的Templates里面。

页面（Pages）模板

页面通常是首页，about页，privacy页面这些，我们看一下editor的模板里面有多个page模板：

我都用文字标明了：

全宽并且没有标题的页面，就是占满屏幕，左右两边没有空白，现在有些大型网站用的这种，如果你不想整个页面全宽，你可以不改这个模板，但是我们的首页需要用到这个模板，因为首页通常不显示页面标题，最少我们不会用到和其他页面一样的标题结构，所以首页需要用这个模板。
- 如果首页用这个模板，那不是首页内容全宽了，不要担心，到时候编辑首页的时候，我们把区块的宽度设置成网站内容宽度，内容自然不会全宽了。
带侧边栏的页面模板，这个很多时候用不到，现在的页面很多很少有侧边栏了，如果你喜欢用侧边了就从这个模板开始编辑吧。
敬请期待页面模板，在网站还没上线的时候可用这个模板，或者下次你要大改网站用，不用改。
页面，这个就是主要的页面模板，以这个为例来改。

点击Page模板进入到编辑界面：

如上图所示，页面模板其实挺简单，就是几个部分，页头、标题、内容和页脚，页头就是我们前面修改的页头，页脚自然也是，这就是通用性，页头页脚只要运用到任何模板，你只要在也投和页脚模板是修改一次，全局有效。然后标题和内容，其实我觉得这个页面模板也没什么改的，内容区块到时候就是显示每一个页面自己的内容，格式都差不多，当然你可以调整标题大小背景这些，修改这些资料就是上面的区块设置，选中区块，在右侧的block里面设置。

调整标题

我们来给标题增加一个背景：

我们来看图，我给title增加了一个背景，并且把标题放在更上面，信息似乎比较多，不要着急，我们一个一个来解答：

首先我们把标题单独放到了默认Group外面，并给Title单独套了一层Group，就是红框蓝色的这个，title放外面很简单就是拖曳，拖动区块前面讲过，直接按住就能拖动到想要的位置，至于套一层group，我们就是在想要的位置添加一个group区块，然后把title拖到group里面，这些都没什么技术含量，就是点点鼠标。
给title增加一个背景，看右边background就是修改区块背景，不过这个背景是赋予标题外面group的，蓝色背景的group说明已经选中，所以我们当前看到的右边backgroud实际上就是外层group的，背景可以是图片，也可以是颜色，还可以是渐变颜色(Gradient)，我简单的设置了一个颜色，中间就很明显了。
调整标题的边距，让内容看起来不那么挤，首先说一下：padding是内边距，margin是外边距，看右边，可以分别调节上下左右的内外边距。看中间栏的group和title组合里面，我单独设置了顶部底部的内外边距，很明显内边距是在group内，背景依然在，而外边距在group外面，背景没有了，所以以后你要编辑任何一个区块的边距就可以调整内外边距。

如果要给title改颜色和字体需要选中title，然后调整颜色和字体，看下图：

看到现在左侧列表中Title区块变成了蓝色背景，说明选中的是title区块，然后在右侧设置调整颜色大小，背景等。

页面Feature Image

这里有个feature image，通常页面是不需要的，这个就相当于页面的一个招牌图片，在文章中非常重要，相当于一张图可以了解到文章的基本内容，但是页面不需要，页面大多时候是网站的功能页面，所以实际上这个是可以去掉的，你不去掉也行，页面中不设置feature image就自然不显示。

增加面包屑(breadcrum)

但是我们可以给页面增加一个面包屑(breadcrum)，面包屑就页面路径，通常可以放在标题上面，比如我网站面包屑是这样的：

添加面包屑区块如上文说的点击加号来添加，我准备把面包屑放title上面，同一个group中：

还是选中同一个group，然后在左下角点击加号，搜索breadcrumb，就会出现区块，通常有两个，一个是通用的breadcrumbs，一个是store breadcrumbs:

点击breadcrumbs，就可以在当前类型的所有页面显示这个路径了，然后要调整面包屑的字体颜色同样是选中区块右边设置block：

保存，查看一下前台效果：

这是sample Page，刚刚我们要的效果是不是出来了，页面模板这样其实已经足够了，之后的内容就到Pages具体的页面中去修改，这里只是模板，只负责界面布局。

文章（Posts）模板

页面模板完成，我们来修改文章模板，文章模板比页面模板稍显复杂，不过也不难，最多也就是增加几个区块的事，文章模板不管是wordpress还是ollie都只有一个就是Single Posts，我们先来看看现在的模板：

从图片上看，文章多了不少区块，比如Categories分类，作者信息、发布日期，还有comments评论和Latest posts最新的文章。正常来说你什么都不需要改，但也可以增加一个面包屑，参考前文，此处就不再赘述了。其他你想修改的就是颜色字体，背景颜色，边距间距这些了，这些统统都在右边block里面去设置，需要改什么区块就选中哪个区块。

博客文章不适合全宽，所以完全不搞那个模板。

侧边栏和添加新模板

不过博客文章可以增加侧边栏，这是比较常见的，其实对于电商站基本不需要，因为博客文章不是网站的主要内容，当然可以作为一个推广渠道，还有现在大部分用户浏览网站都是手机端了，尤其是上网购物很少有人用电脑，但是有一个侧边栏还是能多增加一些展示的，所以我还是演示一下怎么增加侧边栏。

在现在的single post模板基础上或者新建一个模板都行，我建议新建一个模板，这样就不会影响现在的模板，一旦这个模板没改好，到时候恢复挺麻烦。回到templates界面，点击右上角Add templates：

点击后要等一会，等所有页面类型都显示，这里有点慢，一开始会显示几个，然后等个10秒8秒才会显示更多类型，这可能是wordpress的缘故，以后肯定会改进，等看到有Single item:Post出现就点击这个：

当然你也可以选择Custom template来自定义新创建任何模板，但是点击Single item:Post，里面其实已经有多个不同的模板，只是没展示出来，如下图：

里面有5，6个模板，红框中的哪个就是带右边栏的，就选择这个吧，都不用你自己去添加了。往下看，看看带边栏的模板又有什么不同：

先看边界界面的左侧栏，其实就是把内容通过columns分成了两列，把之前的内容区块放在左边区块，把右边栏放在右边区块。我简单介绍一下一些编辑操作：

修改Columns分栏的宽度，默认两列宽度分别占内容的2/3和1/3，也就是66.6%和33.3%，选中任何一列，右侧就会出现width设置，修改成你需要的宽度比如下图25%，记得把另外一列设置成75%，总之保证100%宽度，不然前台内容会多出不少空白
要给侧边栏内增加新区块，选中第二列，点击右下加的黑色+按钮，添加需要的区块，这里的侧边栏会通用到所有文章，比如某一个促销节，在这里放置几个banner是很不错的，一次添加，所有文章页面生效。

如何在移动设备上隐藏侧边栏，大家都知道移动设备大都是竖版内容，如果再加个侧边栏会很影响界面，不仅很挤，而且内容会非常窄，所以移动设备有必要隐藏掉，那也不难，选中当前column，点击右边竖排三点（⋮），就有隐藏按钮，选择平板和手机隐藏保存就好了

这样手机端就不显示了，可以切换看一下不同设备的效果：

一直忘了说，现在的WordPress Block editor是支持多类型不同尺寸屏幕的，一个地方设置，多端生效，这叫响应式设计。

文章分类模板

文章分类模板叫All Archives，包括tags模板都是和这个通用。

这个模板没什么需要改的，目前因为没有任何文章，所以列表中也是No results found，以后你熟悉了，希望不同排版，你再慢慢来调整这个吧。

这几个就是网站页面主要的模板，接下来就是商店的一些模板。

WooCommerce各个页面模板

Woocommerce的页面模板主要是产品详情页和产品分类页面。

单一产品模板

Single Product就是单一产品模板，也就是产品详情页，以前的woocommerce的产品页面是跟随主题固定了布局的，现在你可以自由调整，做出非常现代美观的界面了，来看看吧：

修改产品图片布局

先看图片和基本信息，图片现在是大图和缩略图上下结构，其实可以调整成两列的，也就是缩略图在左边，右边是大图，我们选中Product gallery，然后再右侧block中切换到样式（黑白半球的图标）标签，点击Orientation的箭头改为横向，然后把Product gallery的两个区块Viewer和Thumbnails拖动互换位置如下：

这样就显示为大部分主流的电商网站界面排列了，这样也是最自然的。

但是目前看你起来你会发现图片部分占比太小，能不能做得宽一点，有办法，其实产品图片和基础信息是一个columns的两列，从左侧的区块页表你也看到，这个两列区块叫做Product info Columns，只要把图片这列的宽度调大一些就可以了，选中图片列：

图片上我把图片的宽度调整成了55%，就是说图片占了内容宽度的55%，看起来更舒服了对吧，怎么调就随你自己，另外那一列可以不懂，默认就是自适应。

往下看产品详情，产品详情是传统的放在图片和基础信息下面，你可以随意拖动这个区块放在任何位置，甚至像很多现在很多现代化的电商网站，产品详情和基础信息放在同一列，比如Etsy，其他每一个区块其实你都能自由摆放，拖动区块我就不多说了，前面介绍太多了，自己直接拖动摆放就行了。

产品详情页大致就是这样了，改动都随自己需要，非常自由。

产品类目列表模板

产品列表模板是product catalog，其实编辑方法和其他模板逻辑一样，只是目前产品类目列表页面不是带侧边栏，我觉得应该设置一个左边侧边栏，这个左边栏不同于文章的右边栏，产品列表的左边栏主要是做一个产品过滤器，我们来看看。

这是没有过滤器的产品列表界面，我们来加一个，方法仍然是添加一个columns区块，然后左列小，我们还是设置成25%，右列大，然后把现在的产品列表放右列，左列添加一个产品过滤器：

点击Product Filter就可以添加产品过滤器了：

增加产品过滤器是非常不错的一个功能，这样用户筛选产品也更加方便。

checkout和cart模板

Woocommerce还有另外两个特殊模板，不过这两个模板我觉得都不需要怎么改，大家直接点击进去自己调整或者增加区块吧。

其他模板

还有index，404，搜索结果页面模板，这些都按照默认即可，如果你自己有什么想法基本上就是三件套，删除，添加，编辑区块来使得页面更加独特，更符合你自己的需求。

其实讲到这里，你会发现不管是页头页脚还是任何一个页面的模板都是一套逻辑，就是更改区块以及如何摆放区块来编辑页面的布局。

本文内容确实比较长，也是希望大家能看得懂，其实有视频可能更直观，但是做视频耗费太大，因为录视频过程中肯定经常出错，所以先看看图文吧，视频以后看有没有机会。接下来还是继续这个系列。

分享到

全托管主机自建WordPress+Woocommerce独立站(四)：WooCommerce店铺设置