完整的WordPress+Woocommerce独立站教程，最新的区块Block建站

WordPress+Woocommerce网站是做独立站不错的的起步方式，因为门槛低，很多新手愿意使用这个，别的我就不多说，现在就开始。

第一步：购买一款适合自己的主机

选主机这个事是很多新手纠结的事情，因为不熟悉，又不想投入太多，又怕操作麻烦，所以为了节省大家时间，我这里直接推荐几款，主要是两类，基本不会错：

1. 共享虚拟主机（web hosting），这类主机适合起步:

• Siteground，口碑最高的网站托管主机，老牌主机，常年4.8-4.9分
• Hostinger，这家的后台面板操作非常直观，速度价格都不错，几十年的老牌主机
• Bluehost，同样老牌主机，有些数据不透明，但是用户量巨大，也是wordpress官方推荐的主机之一
• Interserver，一家价格比较稳定，续费也不是很高的主机商。

2. 全托管主机，这类主机省事，各种服务全面：

• Cloudways，全托管云主机和VPS主机，可以选择google云主机，亚马逊云主机，但是我建议选择digitalocean足够，独立IP，独立环境，3天免费试用，
• Kinsta，豪华全托管主机，非常多的高级功能，价格也偏高，但是省事，免费试用1个月。
• WordPress.com，wordpress原创者建立的全托管主机，有永久体验套餐

第二种价格通常比第一种高，但是第一种通常是以年销售，预算有限起步就用第一种，以后升级可以迁移至第二种，大部分支持免费迁移网站。

这一步选择不同主机的步骤不同，但这一步根本没什么难度可言，就是购买付款的过程，所以这一步也根本不影响后面的教程，因为WordPress后台一模一样。所以这一步你直接选择最合适你的预算开始就行。

如果非要演示，我只能选一个，但这不能代表所有主机，我就以第一个SiteGround为例。

购买SiteGround主机

Web Hosting或者WordPress Hosting都行，起步选择Startup即可：

点击SELECT PLAN，接下来的页面会让你设置域名，有两种选择：

1. New Domain，如果你没有域名，在这里新注册一个，首年免费
2. Existing Domain，填入你现有的域名，这种情况需要你自己绑定域名到SiteGround

所以其实我建议选择第一种，除非你已经注册好了域名，可以看我的教程绑定域名到主机。

填写好域名之后，点击continue,

接下来的页面就是注册资料，在第一个红框中可以选择数据中心所在地，可看到首年一年的费用大概是30多美元，最后勾选Order summary的两条，点击pay now。

付款完毕你会收到一到两份邮件，注册账号成功以及你的主机信息。

接下来可以登陆你的SiteGround后台Client Area。

第二步：安装WordPress和SSL证书

首次登陆你的SiteGround后台，会建议你设置的网站，这个就是SiteGround的setup wizard如下图：

点击FINISH SITE SETUP，接下来又会让你选择域名，默认就是前面的那个域名，因为他们实际上是可以让你绑定多个域名，所以会还有这么一步，通常你不用改，直接点Continue就行

下一步就是开始建站，新网站当然是Start New Website

我们这是WordPress独立站教程，所以选择WordPress，点击Select，

然后在Set up Login会让你填写WordPress的登陆信息:

填写你的wordpress登陆邮箱和密码，点击Continue，然后等系统自动安装WordPress并设置登录信息，设置完成后会通知你。之后你就可以通过刚刚设置的邮箱和密码登陆你的wordpress后台，默认的后台登陆地址是：https://yourdomain.com/wp-admin。

设置SSL证书

其实在这一步开头设置网站的界面有个extra（在FINISH SITE SETUP下面）里面就有SSL：

点击Add，然后选择你的域名，选择Let’s encrypt，这个是免费的。

SiteGround会自动给你获取安装并自动更新。

一旦激活，你的网站在浏览器地址栏前面会有一个锁的图标。

SSL证书一定要安装，不然Google等搜索引擎会认定为不安全。

第三步：开始设置WordPress并安装主题和插件

现在可以通过链接进入的wordpress后台：https://yourdomain.com/wp-admin，把yourdomain换成你的域名名称。用户名和密码就是最开始application管理界面看到的Username和password。

不过这里要说一下的就是，可以删除里面的Hello world这篇文章，Hello Dolly这个插件，还有sample page也可以删除，其他预置的内容就先别动。

好了，接下来就是你自己操做wordpress建站的时间了。

1. 后台设置

WordPress没安装插件什么之前还是挺简洁的，每一项是什么也一目了然，就是界面可能有点老式，几十年都是这个鸟样。

Genenal

我们要设置的东西不多，基本都在settings里面，首先是Genenal：

这里主要是开始三项，这三项是你网站的基本信息，包括：

• 站点名称SiteTitle，这个可以是你的品牌名或者公司名。
• 站点副标题Tagline，这里一句话介绍你的网站或者你的品牌什么的。
• 站点图标，这个图标就是浏览器上标签页显示的那个图标，比如本网站的就是圆形帆船。

General里面其他的不用改，除非你自己想改一些东西。

Reading

接下来是Reading里面设置，这里主要是两个设置，一个是Homepage也就是首页设置，另一个是Search engine visibility，按照以下图片设置即可。

简单说明一下：

Homepage——这个选择static page也就是静态页，不然你的首页就是你的最新博客文章页面，选择静态页面先要有静态页面，去Pages里面新建一个home和一个blog页面即可，都只要先输入标题，不要内容，点击发布，然后在这里就可以选择了。Home页面到时候可以编辑内容，标题也可以更改，Blog就不用任何修改，就空着，以后打开blog页面就是所有文章页表。

Search engine visibility，这个意思就是先让搜索引擎别收录你的网站，因为网站还没建好，现在收录的都是一些简陋的页面，根本排不上名，会影响以后的SEO效果。

另外一个设置就是Permalink Settings，建议在Permalink structure这里选择Post name，其实不选也可以，这样的话只是让网站的链接看起来更清晰简洁，有利于你自己管理。

后台的设置基本就是这样了，对于新手来说已经足够了，没那么复杂的。

2. 安装插件

现在我们来安装插件，在SiteGround完成wordpress安装之后，通常会安装几个插件(可能偶尔会有变化，因为SiteGround偶尔会更新，所以不是每个人看到的插件都一样)，wordpress自带一个Hello Doll，除了删除这个，其他的建议都别删除，因为SiteGround安装的插件都是他们对wordpress网站的优化或者安全等目的，比如Speed Optimizer。接下来我建议大家先安装的插件有以下这些：

• Woocommerce，WordPress独立站必备的电商插件，安装激活后会有一个设置向导，可以跳过，之后反正都要给woocommerce做设置的。
• WooCommerce PayPal Payments，官方的paypal插件
• Rankmath，SEO插件，也可以改成Yoast SEO等其他的，我觉得Rankmath很不错
• CookieYes ，GDPR插件，做欧盟和加州的必须要有的，为的是标明你网站对隐私的注重

暂且就这些了，其他的以后有需求在慢慢安装，安装也很简单，直接左边点击Plugins，然后点击Add Plugins，搜索要安装的插件就行了，安装完之后记得启用（Activate）主题。

3. 安装主题

WordPress主题是真的很多，随着wordpress7.0的发布，官方越来越重视block页面编辑器了，也就是通过区块化建站，这更适合新手也简化了很多设置，看过我以前的教程都知道我们用的是Kadence或者Astra这些老牌经典主题，这些主题不是不优秀，但是对最新的wordpress block建站并没有完全跟进。而且7.1发布以来，我发现wordpress真的比以前快多了，看来因为各种现代建站系统的出现，以及ai的影响，让wordpress团队真的着急了，现在努力的优化就明显看得出来，这对于用户是好事。

为了跟上wordpress的步伐，我们选择全block主题，也就是FSE 是 Full Site Editing（全站编辑），官方的2025主题就是，如果你是一个动手能力很强的人，那么直接用官方2025就可以搭建一个很漂亮的主题。不过我推荐一个主题叫Ollie WP的主题，这个很轻量，也有免费版，免费版对于起步网站也是够用的。

安装主题和安装插件差不多，从左侧菜单的Appearance -> Themes -> Add Theme搜索要安装的主题，不仅可以搜索，也可以上传你在别的地方购买的主题，比如Themeforest上购买的主题。

鼠标滑倒主题上就有Install按钮，点击之后同样启动主题，激活主题之后可以预览以下你的首页：

是不是和之前的不一样了，现在是新主题的样式了，可以在themes里面删除2023和2024主题，那两个没什么用了。

安装完主题，大致设置一下网站的样式和风格，从左侧的Appearance -> Editor进去，如下图

Styles就是网站的样式和风格了，我来一项一项说明一下：

• Browse Styles，点击去可以选择整体站点色调和字体，总共有8个，随便选择一个色系即可。
• Typography，这里是字体设置，里面的fonts可以选择Google字体，先会询问你一下，然后点确认就行了，都是免费可商用的，想要什么字体就用什么字体。

• Colors，颜色设置，里面Palette是调色板，就是你刚刚选择的色调就会在这里，你可以在这里自定义颜色或者重选色系。
• Background，页面背景，不要设置
• Shadows，阴影，也不要设置
• Layouts，这里要修改一下，默认的页面宽度太窄了，把里面的内容宽度(content width)设置成1260，宽幅宽度（wide width）默认就是1260，我建议设置成一样，不然之后在一些宽屏幕上页头页脚和内容宽度不一致，为了一致和省事，所以我建议设置成一样的。如果还不够宽，可以自由调节到你希望的大小，现在的电脑分辨率普遍比较高，不过1260应该能适应大部分设备。

剩下的其他都不要改了。

还有一个地方就是Identity要说一下，这里和前面的General设置是重复的，不过这里多了一个logo的设置，也就是放在页头的网站图标logo，其他都和前面一样。

第四步：通过editor搭建整个网站布局

网站的布局，也就是框架，这个过程基本上都是在Appearance的Editor中完成。这一步会比较长，也是希望大家能看得懂，视频可能会比较直观，但是真的很费劲，录制过程经常出问题，所以先看看图文吧，视频以后看有没有机会。

1. 页头

一个网站第一个映入大家眼帘的基本上都是页头，所以我们就从页头(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，搜索框，客户账号和购物车，第三行改成菜单和社交图标。我们要做几个动作：

1. 删掉第二行的主菜单，
2. 把搜索框拖到第二行中间，
3. 设置区块
4. 添加一个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保存。你要什么其他的区块自己添加，要放在什么位置，想要页头什么结构都可以自由发挥。

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

2. 页脚

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

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

3. 页面模板

搞定页头页脚之后，就是网站各个网页中间的主要内容了，因为一个网站有不同类型的页面，所以每一种页面类型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，以后你熟悉了，希望不同排版，你再慢慢来调整这个吧。

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

4. 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还有另外两个特殊模板，不过这两个模板我觉得都不需要怎么改，大家直接点击进去自己调整或者增加区块吧。

5. 其他模板

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

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

这一步比较长，也是希望大家能看得懂，其实有视频可能更直观，但是做视频耗费太大，因为录视频过程中肯定经常出错，所以先看看图文吧，视频以后看有没有机会。

第五步：WooCommerce店铺设置

网站的基本结构已经出来了，我们现在就来把店铺设置这块来完成，设置完电商，差不多就能添加内容和产品了，网站也一步步接近成型。

店铺的设置当然就是Woocommerce的后台设置。

1. 一般设置General

这里就是店铺的基本信息设置，主要分四个部分：

• 店铺地址信息，这个没什么好说的，你是哪里就填哪里，不同地区可用的付款方式可能不同。
• 销售区域，通常大家都是全球销售吧，如果固定某个区域，救灾这里设定，没有特殊要求不用改。
• 税务和优惠券，如果你的产品不含税，最好是不要勾选税率，至于优惠券coupons，可以勾选第一个，也就是勾选Enable the use of coupon codes，第二个就不要勾选了，第二个的意思是叠加，如果你没处理好，可能最后优惠的力度会非常大。
• 货币币种和格式设置，默认就是美元，多货币需要插件完成。

这里没什么好说的，自行按实际情况填写即可。

2. 产品Products

产品设置这里有多项设置：

• general，又是general，这里需要你改的就是Measurements，默认是英制，我觉得用国际通用的kg和cm更好，你自己也算的清楚，买家也大部分搞得清楚。
• Inventory，库存，这里有个地方要填邮箱，最好填你的企业邮箱，比如xxx@yourdomain.com，如果没有那就gmail这些吧，其他不用改。
• Downable products，这是虚拟产品，做跨境电商的跳过。
• Advanced，高级设置里面，可以全部勾选，是关于产品属性的，比如颜色尺寸，方便用户搜索过滤。

3. 物流发货Shipping

物流这块，我之前有详细写过文章，可以看我之前的文章，因为woocommerce在这块基本没有改过，只是界面可能更美观了：

• WooCommerce设置一之Shipping Zones（运送区域）和Shipping options
• WooCommerce设置之二Shipping methods(运输方式)
• WooCommerce设置之三Shipping Classes(发货类别)

4. 支付方式Payments

Woocommerce现在支持市面上大部分主流的支付方式，或者叫收款方式，客户端叫付款方式，最有名的是PayPal，Stripe这些，当然还有官方自己的WooPayments，我们来看一下一些主流的收款方式。

如何对接这些收款方式，只要你有正规的账号，直接下载插件根据步骤完成即可，如果是在不会可找这些服务商客户服务帮忙，值得一说的是PayPal，如果是商业账户也是一样直接根据步骤，但是如果你是个人账户，可能有点麻烦，因为woocommerce不只是搞什么有时候支持有时候不支持，可以试试，参考以下这篇文章添加你的个人账户：

• Woocommerce Paypal个人账户又可使用了，下载woo官方的paypal插件直接绑定就行
• 如何进行Paypal沙盒测试

5. 账号和隐私Accounts & Privacy

我是这样设置的

大家根据自己的要求勾选吧，应该看得懂什么意思吧，不懂的留言。

6. 邮件管理Emails

这里是你要发给用户的一些模板，通常都是一些自动发送的邮件，比如用户购买，下单，发货等等通知问题，一开始一大片都是一些模板正常是不用你去改的，也不建议改，一不小心改错了就不好了。

拉到下面，从Email sender options这里可能有些需要你修改的，看下面图片：

首先是发送邮件的信息包括发送名字和邮箱，最好是用企业邮箱，reply-to是抄送，没有可以不填。

下面email template是邮件模板的一些通用设置，可以设置logo、样式、字体、颜色和宽度等，还可以根据不同设备调整邮件模板的外观，都是可视化的，可以一边改一边看效果。

7. Integration/Site visibility/Point of Sale

这几个设置都不是很重要，甚至不需要：

• Integration，这个里面MaxMind Geolocation意思是根据IP定位用户，用户在浏览你的网站的时候，网站会自动通过用户的ip而展现不同的内容，比如语言和货币，这个需要你网站是多语言的，如果需要可以去MaxMind官网注册一个账号对接。
• Site visibility，这个控制你的店铺上不上线的，等你店铺设置好，产品准备好，记得到这里来点击Live。
• Point of Sale，这个是线下商店快捷支付的功能，比如便利店超市这种，相信大家也用不到。

8. Advanced高级设置

高级设置中主要说一下Blueprint和Features：

• Blueprint蓝图，蓝图目前还是beta测试版，需要在features里面启用，目的是让你备份woocommerce设置，以及设计到woocommerce的主题插件的设置，可以导出导入，这是一个好功能，设置好可以保存，以备不时之需。
• Features，woocommerce的一些特性，以及新特性和在开发的特性，比如优化性能等，基本上不需要你做什么修改，官方默认的基本是是最稳定的，但是你可以去研究以下他们提供了什么功能，比如最新的功能：

如图这些还是可以勾选体验一下，最新的版本woocommerce终于添加了产品收藏功能，也就是wishlist，不过还是实验性的，以前没有的：

Woocommerce的设置并不麻烦，主要是收款和发货这两块可能需要认真研究一下，根据我的教程也并不难。

第六步：添加和编辑页面

前面的步骤基本上把整个电商独立站的框架完成了，按照我们建房子说法就是可以交房了，接下来就是搞装修，添置家具，第一步我们就是添加页面，也就是后台你看到的pages这个页面类型，这里的页面主要是功能性的页面，比如首页，关于，联系等页面，就是更好的让用户知道你们网站是干啥的。

1. 添加页面

其实之前在General设置中已经添加过Home和Blog页面，添加的动作就是这么简单，直接从后台的Pages，点击添加设置一个标题就行了。

所以添加页面这个我就不多说，但是我要说说一个电商网站需要有哪些页面。

2. 一个跨境电商独立站需要哪些页面

首先先来必须的：

• Home，首页当然必须有。
• About us，介绍一下自己，这个页面点击率很高的，别小看。
• Contact us，很多人联系商家习惯在这个页面，把能联系到你的方式都放上去。
• Privacy Policy，对于国际贸易必须要有的，说是注重隐私。
• Terms and Conditions，使用条款和声明，告诉用户你的一些政策等等。

这是非常建议有的页面，其实很多大的公司网站，有些会放到terms里面，但是分开还是更清晰

• Help Center 或者 FAQ，这个其实我觉得非常有必要添加，一些经常问到的问题，放在这里，用户自己去看，他们能快速获取答案，你也省力气。
• Shipping & Returns，发货与退货，这里就是写你们怎么发货，有哪些方式，运费，派送时效，以及退款政策，有些商家会放到terms里面，如果没有放在terms里面，这个页面必须要有的，google也比较重视这个。
• Payments，介绍一下你们的收款方式，跟他们说说你们对付款的安全性保障什么的。

如果还需要什么页面，就按照具体需要什么自己添加页面了，不需要太多，只要达到了传播信息的作用就行，网站SEO不靠这些页面。

3. 编辑首页

添加完页面，我们需要编辑页面，并把内容放上去。

我们就以Home页面为例，首先是标题，标题不一定非得写Home，可以一句简洁的话来表述你的网站，假如网站是一个家具电商网站，首页标题可以是：Elevate Your Space. Embrace the Luna Lifestyle.这是我直接用ai写的，现在ai那么发达，做做这事简直是小菜一碟。

既然提到ai，肯定会有说ai建站的，这里就不细说，总之我不建议ai搭建电商网站，有机会我会写文章。

在具体编辑页面内容之前我们先给选个模板，因为首页不同于其他页面，虽然前面有编辑pages模板，但是首页我们选另一个模板：Page (Full Width, No Title)。

从这个右侧的Template点击Pages，然后点击Change Templates，直接搜索Page，然后选择这个Page (Full Width, No Title)。

开始建站，我们先拟定一个结构，大概分5个部分作为演示：

• 大横幅
• 三栏热门分类
• 热卖产品
• 新产品（New arrivals）
• CTA（call to action），这个通常是一些简单的吸引人的介绍，然后加购买按钮

添加大横幅

我们直接从左上角点击蓝色——按钮，然后从Patterns里面找一个模板，比如下图这个，之前在编辑模板就说过区块的添加方法。

然后记得一定要点击Detach(分离)，所有的pattern都只是模板，应用到具体的页面必须分离，才能单独编辑。

分离之后，编辑这个区块就只作用于这个页面，看上面图片，

• 你可以替换图片为你自己的，也可以裁切并更改图片位置
• 文字修改，直接在现有的文字上修改即可，也可以自己在想要的位置添加其他文字内容，至于文字的颜色大小之前说过在右边block修改，现在wordpress全站基本都是区块编辑，逻辑方法一致，一次掌握了，全站通用。
• 记得把横幅大标题改成H1，因为这个页面采用的是Notitle的模板，但是在SEO的角度来说，每一个页面都应个有个H1的大标题。

横幅怎么编辑，大家慢慢去熟悉，建站肯定是要花一点时间学习的，但是掌握区块建设的原理后真的很方便自由。

添加三栏产品分类

方法依旧是添加区块，仍然可以找现成的patterns模板，同样记得点Detach(分离)

至于怎么编辑，原理一样，选中相应的区块，可以从左侧的区块列表，前文有详细的介绍，把内容替换成你自己的，甚至你自己可以自主修改设计。

如果自己新设计就用coumns区块，分三栏。

添加热卖和新到产品

添加产品列表依旧是添加区块，不过不是patterns，而是在blocks拉到woocommerce的区块中：

就有Best Sellers和New Arrivals，这就是热卖和新品，不过目前并没有产品，当然还有其他的列表，你都可以添加。

Call to Action

最后一个部分直接用模板，如下图，可以调整一下宽度为全宽，其实All里面总共有100多个模板，自由选择，自由发挥。

这个区块改成全宽是这样：

然后把内容，文字图片都改成你自己的。看一下现在的首页：

因为是演示，所以没有真正把内容做完，重点是把方法分享给你们，这才是该做的，你们的首页你们自己做主，可以参考其他电商网站的结构，添加自己想要的，只要区块中有的功能，你们都可以去尝试。

3. 店铺页面介绍

除了刚刚这些页面，作为电商网站，当然也有一些店铺的页面：

• Shop，也就是店铺首页，这个名称是可以改的，模板前面讲过，Shop是属于Product Catalog页面类型的也就是产品分类页面，只不过shop页面是所有产品的列表。
• Cart，购物车页面，模板在Editor里面修改，但是没必要修改。
• Checkout，结账页面，模板在Editor里面修改，目前也没必要修改，以后可以根据自己需求去调整。
• My Account，客户账户后台，你也改不了什么，模板属于Page模板，现在官方还是短代码模式，以后应该会改成block模式，但是在My Account页面需要做一个调整，默认情况下，用户账户页面是全宽的，看下图，让页面的内容宽度和网站页面内容宽度一致。

从pages里面找到My Account，点击Edit，进入编辑页面：

我们要给短代码加个group，这样账户的后台的内容就会和内容一样宽了。

至于woocommerce店铺的产品详情页和产品分类页面不在Pages下，需要编辑的上上期讲过，直接去Appearance的Editor找到相应模板编辑。

页面搞完，接下来我们来添加产品。

第七步：添加产品

产品是独立站的核心，包这盘饺子都是为了这碟醋。上传产品不管什么平台都是两种：批量和单个上传。

1. 批量上传产品

批量上传产品，首先要有现成的产品列表，如果你之前做过别的平台，而且又能导出你之前的产品的话，你可以用之前的产品列表，但是不能直接用别的平台导出的excel产品表格，你需要先找一个woocommerce产品的模板，然后把其他产品的内容放到woocommerce模板里面，属性要一一对应，颜色是颜色，标题是标题，然后再上传这个excel表，通常都是csv格式的。

有人肯定会问我模板，这个很简单，你先单独上传一个产品，了解一下woocommerce添加新产品的功能，本文后面就有方法，上传后，点击导出。

导出的文件就是模板了，你自己的模板更适合你的产品。

我这里有一个现成的csv文件，点击侧边菜单中的products，

然后就有一个Are you already selling somewhere else?，点击就可以上传：

点击continue，然后下一步点击Run the Importer，不要断开网络或者关闭网页，等上传完成

上传结果通常可能有以下问题：

• 图片不成功，因为源服务器不允许你直接拉取图片，或者现在的服务器对大量上传有限制，这个可能需要你自己动手
• 一直上传出错，可能就是文件里面的格式不对，记得用你导出的模板，然后自行添加资料到表格，还有一个原因表格太大，产品太多，可以分多个文件导入。

wordpress的导入文件一直都有一些问题，如果一直折腾都有问题，还是老老实实一个一个传吧，一天几个几个，也很快的，除非你上千个产品。

产品比较多批量上传相对还是比较省时省力，但是产品不多，还是一个一个添加，因为wordpress的上传系统真的很拉跨，顺便也学习一下上传产品的知识，往下看。

2. 单个添加产品

Woocomerce产品编辑器还是用的wordpress的经典编辑器，很多wordpress老用户喜欢这种编辑器，我个人是不太喜欢，不过只是编辑产品信息的话，这个编辑器也没什么问题，也够用。

我用数字标出了每一项的功能如下。

1. 产品标题，也就是产品名
2. 产品详情，在这里重点描述你的产品资料，可以图片文字，甚至链接都行
3. 产品数据设置，产品类型、价格、库存、运输、相关产品、属性（颜色、尺寸）等其他设置，在Simple Product这个位置是可以选择不同产品类型的，总共有四种：
   • Simple product – 单一产品，单一颜色，单一尺寸，单一型号，就是没有变体的，也可以添加虚拟产品，比如什么会员，下载类产品；
   • Variable – 变体产品，大部分是这种产品吧，因为大部分产品都是有颜色尺寸等不同选项的，在变体产品中可以单独为不同颜色设置图片，具体可以参考我详细介绍woocommerce添加变体产品的文章；
   • Grouped – 组合产品, 比如一套衣服，包括上衣，裤子，衬衣，可以组合一起销售；
   • External/Affiliate – 外部产品或联盟产品，你可以发布产品但是链接指向其他网站例如亚马逊，推广你自己的产品或者推广别人的产品；
4. 产品短描述，这个部分的内容相当于一段简短推广产品的话语，会出现在产品的基础信息中，也就是价格和购物车按钮的前面，类似于亚马逊的5条卖点。
5. 产品图片：
   • Product image – 这个是设置主图片的。
   • Product Gallery – 这个是图片相册，图片轮播的话这里可以添加多张。

剩下的就一目了然了，分类，品牌，标签和发布了。我觉得添加产品应该不用演示了，你只要做个任何电商平台都不难。

3. 产品详情页面展示

最后看一下我添加的产品，参考一下产品详情页面。

可以看到已经加入了一个产品在购物车，看看购物车是怎样的：

很现代吧，很有感觉吧，点一下Proceed to Checkout看看结账页面：

我没添加付款方式，所以现在不能付款，但是功能都齐全了，我这只是演示网站。

第八步：发布网站

现在电商网站基本已成，最后一步我们将来发布网站，

其实你要说让网站在互联上能被看到，在浏览器中可以打开，你在SiteGround安装完wordpress那一刻就已经在互联网了，但是最开始我就建议大家屏蔽掉了搜索引擎，所以今天我们要做的就是让搜索引擎能看到你的网站，这样你的网站才有更多自然流量。

1. woocommerce设置中上线店铺

首先woocommerce后台默认是设置了店铺建设中，前台看不到店铺信息，之前在woocommerce店铺后台设置这一期中有提到过，到了这里想必大家也上传了一些产品，那就可以把店铺设置成live在线了：

图片中可以看到设置成Live之后，后台顶部导航中的按钮也变成了Live。

2. 后台解开搜索引擎限制来发布网站

第二步，我们要到wordpress的设置中取消屏蔽搜索引擎的勾选：

记得保存，如果之前设置过coming soon页面的，记得把首页换成你现在的首页，就是在这个界面上面的Homepage这里选实际的首页。

这样就行了吗，如果说是发布到互联网，这样确实行了，但是你肯定想更多人看到你的网站对吧，那就必须把网站提交到各大搜索引擎。

3. 把网站提交到各大搜索引擎

主流的搜索引擎是这几个：

• Google，提交教程→
• Bing，包括yahoo，AOL等都是走这个，提交教程→
• Yandex，东欧俄语地区最大的搜索引擎，别小看，提交教程→
• 百度，基本没用，可以不管。
• Duckduckgo，Perplexity，这些不用你提交，他们会自己通过搜索引擎和互联网获取你的页面，尤其是Duckduckgo，听说非常私密。

提交了网站，那我们的建站工程就完成了。

如果你懂SEO的话，可以上传10个产品之后发布网站，然后慢慢添加产品，这样也让网站显得非常活跃。

4. AI建站

AI发展的如火如荼，AI建站也到处是，WordPress从7.0开始就接入了AI，很多人不知道在哪里，我来告诉大家，在Setting的Connector里面，先要点击蓝色Install the AI plugin安装AI插件，然后连接任何一个AI模型，wordpress默认有国外三家巨头。

都是要付费的，按token（智贝）算，如果你想用相对便宜的比如deepseek可以安装插件，安装完成后，你可以安排ai完成建站工作，而且在区块编辑中能帮你编辑内容。

除了在wordpress里面用ai之外，还有很多平台都推出了AI建站，有兴趣的朋友可以去试试，如果你在用AI建站的过程中发现并没有你想象的那么好的话，那还是回来自己动手建吧，最少花了时间真的能成为自己的经验和知识。

总结

经过几天的奋斗，我把建站教程相当于重写了一遍，其实之前的教程非常完整，为何我要重新写，可以更新原来的教程啊，主要是两个原因，首先以前的教程改的话动静太大，基本相当于重写，第二wordpress进入7.0之后整个方向变了，越来越重视区块建站了，建站方式虽然和以前有相同，但是改动比较大，对于新手就相当于新的建站模式，所以干脆新写一边教程，而且我感觉现在建站比以前更直观，对新手更友好。

教程的操作比较详细，真的是喂饭级的，我是希望尽量让大家掌握建站原理和方法，这样大家搭建独立站的时候就能更自主，我一直秉持的观点就是授人以鱼不如授人以渔，掌握了方法，不管怎么变，你都能应对。

选择一款合适的hosting开始建站 ⟶

版权声明：本文原创文章，首发于青松跨境B2C，版权所有，未经允许，请勿转载！
转载请注明：如若转载，请先取得同意，然后注明原文链接，写点东西不容易啊。