全托管WordPress主机Cloudways自建跨境电商独立站(8步喂饭级教程)

Build wordpress site with Cloudways

今天带大家使用全托管主机Cloudways搭建独立站。为何选cloudways,首先这家主机商起步门槛比较低一点,其次他们是用的VPS主机配置的全托管wordpress主机,拥有独立IP和独立的环境,可自主选择主机,Cloudways提供多个云服务器商,包括google和亚马逊云。

至于全托管wordpress主机与共享主机有什么区别,那就是全托管的服务更完善,网站速度优化好,安全性高,他们的目的就是让用户能甩手,让你的时间和精力花在网站建设运营上面,什么技术,维护优化等等问题都交给他们,而且这类主机提供一些advanced高级功能,总体来说钱可能要多一点,但是你少操很多心,而且更轻松。

现在购买Cloudways优惠:

优惠码: QSC10,前三个月优惠10%
优惠码: QSC20,前两个月优惠20%

更多全托管wordpress主机看这里:盘点国外全托管WordPress主机。

目录

    Cloudways自建跨境B2C独立站准备

    Cloudways搭建wordpress独立站和共享主机在步骤上没有多大区别。不过因为Cloudways本身没有域名服务,所以域名一定是要第三方的,那么要准备什么呢?

    • 一个顶级域名,建议去NameCheap购买,价格比较优惠,购买时记得一定要选privacy保护,如果你有其他更便宜的域名当然也可以
    • 一个wordpress主题,起步免费的就有很多优秀的主题,比如,Astra、Ollie或者Kadence都有免费的,而且基本够用
    • 注册Cloudways账号的资料:邮箱最好是gmail,hotmail或outlook,另外因为他们的防垃圾机制,需要用户提供身份资料来激活账号,我觉得肯定有太多的人注册试用但并未使用他们的服务,这导致他们的资源被滥用才不得已出这样的政策。

    Cloudways虽然提供免费体验,但是只有三天,所以当然你还需要外币信用卡或者一个paypal账号,试用期间不需要。好了,接下来手把手的带大家用cloudways自建wordpress跨境电商独立站。

    为何选择Cloudways:

    • 起步价格不高
    • 比起有些全托管,他使用主流名牌VPS,独立IP
    • 升级方便,功能齐全丰富
    • 建站数量自由

    第一步:注册Cloudways账号并安装WordPress

    因为可以免费体验三天,一开始你不需要购买Cloudways主机,只要先注册一个账号,进入Cloudways官网,点击Get started Free,想注册任何账号一样按照他们的要求填写资料(可以像我填写的那样),完成注册。

    image 25

    注册完成后会收到一封邮件,告诉你需要提供一些身份资料才能激活账号,直接通过邮件发给他们就行了,就如我上文说的Cloudwasy这是防止免费试用滥用。对于咱做事认真的外贸人,做跨境电商,各个平台提供这个那个资料真的司空见惯了。

    按他们的邮件回复资料之后,他们当然是需要一定时间查看的,所以一般是一到两个工作日回复你,快的时候当天就给你激活了,不过如果几天过去都没有消息,可以发个邮件催一下。

    在没激活账号之前,那就只有等了,也不用死磕这个主机,还有很多不错的全托管主机。

    启动并配置服务器和WordPress(自动安装)

    拿到激活的账号后,登陆后台,后台页面中间就会出现一个Launch Now,有时候可能点走了,如果没见到launch,你就点击左边的Flexible,也同样有Launch Now。

    CLOUDWAYS

    点击之后你可以选择你需要的主机大小以及主机里面需要安装的应用。可以选择的应用包括wordpress、woocommerce、PHP stack、Magento等等,

    image 24
    • APPLICATION & SERVER这里直接选optimize wordpress就是吧,woocommerce其实是一样的,只是给你预装了这个插件。然后就是填写名称,包括应用,服务器(主机)名和项目名,尽量做一些区分,我这里为了演示,都是用的一个名字。
    • 然后选择主机商,Cloudways被DigitalOcean收购,DigitalOcean是非常实力的主机商,这就是他自家的,选这家就行,Linode或Vultr两家价格页都差不多,如果你是土豪就选AWS(亚马逊云)和GCP(google云)了。
    • 在Server Type服务器大小这里的话,因为起步,你不需要选太高配置的,比较小型的网站比如我这种博客1GB就够用了,初期的wordpress+woocommerce小型电商网站1G也够用的,后期不够再升级就是了,不过比较稳一点的话2G是最好,而且2G以上主机包含免费的对象缓存,这是一种对内存优化的加速技术,所以不想很快升级,建议选择2GB。这里还有一个Premium和standard,就是进阶和标准,标准价格会稍微便宜点,但不多。
    • 然后再Location这里有7到8个地区的数据中心供你选择,默认是选择离你主要经营地最近的地区,比如虽然你是中国商家,但是你的买家主要来自欧洲,那就选离欧洲的数据中心,不过Cloudways包含CDN服务的,这个能使网站在全球大部分地区打开都有相当不错的速度。

    我们就选择2G的开始,2G的DigitalOcean主机是大概是二十多美元一个月,计费是按时,收费时按月,这只是给你参考,三天试用后才正式计费,一开始也不会直接收你二十几元,用多少收多少,比如一个月只有29天,可能比你看到的少一点,如果31天就多一点,这是按照VPS的收费规则,你什么时候都能申请退款,也没有续费涨价的事,试用过后,真正付款的时候记得用上我的优惠券:

    🎉优惠码: QSC10,前三个月优惠10%
    🎉 优惠码: QSC20,前两个月优惠20%

    如果不懂怎么用可以找客服。

    最后点击Launch Now按钮到下一步,提示你选择安装插件可以一个都不选,因为以后都能从wordpress后台安装,点击Install

    image 26

    大概会需要7分钟左右。

    image 27

    完成后,你可以看到两个标签,一个Servers服务器(主机)和一个Applications应用,Servers里面列出了刚刚配置的主机并给你分配的独立IP了,右边两个图标也是应用(圆形www的图标)和服务器(文件夹图标)。

    image 28 edited
    Servers服务器
    cloudways
    Applications应用

    切换到Applications里面列出的就是你的应用,也就是刚刚在主机上安装的WordPress,点击应用(qingsongb2c)就可以进入到应用管理界面,或者点击如下图那个www的圆形图标(像地球),从右侧会弹出一个侧边栏,点击侧边栏你的application名字,同样能进入应用的管理。

    image 29

    进入到的就应用管理就是以下界面,这里需要你做的主要是两个地方,一个就是domain域名,另一个就是ssl证书,其他的基本上是没有需要你操作的,最少目前没有,不懂的话别乱动,因为Cloudways帮你设置了最佳的效果。

    image 30
    应用管理界面

    图中你看到可以进入wordpress后台面板(Admin Panel),密码可以自行更改,也可以预览一下网站(Application URL)。实际上站点基础已经搭建完成,你可以点击Application URL在任何地方预览你的网站首页,只不过当前用的域名是cloudways的子域名,可以先进入wordpress建站,也可以先绑定域名,我先来绑定域名吧,反正迟早要绑定的,然后在后台关闭搜索引擎收录。

    第二步:添加绑定域名并安装SSL证书

    点击左侧的Domain Management,这里列出了你的域名,目前是一个cloudways自动分配的子域名,你需要绑定你自己的域名,

    image 32

    点击蓝色按钮Add Domain,以下就可以填写你的域名,如果你子域名,要添加子域名,比如xxx.example.com就是子域名,有多个子域名建议勾上右边的Add as WildCard,这个是一次应用到多个子域名,请注意www也是子域名。所以如果有子域名的话,最少要添加两次。

    至于cloudflare这个就先不要勾选,这里给你提供的是企业级的付费版,新网站直接到cloudflare注册账号可以使用免费版,免费版非常够用的,除非你的业务非常大全球非常广泛了到时候再升级cloudflare付费版。

    image 33

    我这里随便用一个闲置的域名,填写好域名后,点击右下角的Add Domain按钮。

    image 45

    添加好的域名就出现在列表中,如上图,记得把你的域名改成primary主域名。

    image 46

    这样就好了吗,浏览器中输入这个域名就能打开你的这个网站了吗,并没有,你只是把域名添加到了这里,仅仅是一个添加动作,但还未绑定主机IP,所以还要到你的域名商后台去绑定(解析)前面提到的Server里的那个IP地址。

    我的域名是namecheap购买的,所以登陆他们的后台,一次选择刚刚的域名,点击manage,点击Advanced DNS,可以删掉里面原有的记录,然后点击下面的ADD NEW RECORD,添加一条A Record,value这里填写刚刚的IP, 保存,如果你需要www开头的网址,添加一条CNAME RECORD,如图所示,直接照抄。

    image 36

    添加完成后可能要等几分钟才会完成绑定,或者在这个网址搜索自己的域名:whatsmydns.net,看看A记录指向的IP地址在所有地区都是显示绿色。

    **实在不懂解析的可以咨询域名商或者直接找cloudways客服,他们可以帮你解决,很多时候你购买一项服务别忘记了你的权益。

    之后你可以在浏览器输入你的域名看看:

    image 37

    这就是网站的前台了,cloudways分配的子域名显示就是刚刚安装的wordpress。

    Cloudways用的是VPS做的全托管主机,其实一台主机可以搭建多个网站,就是在Applications这里点击右上角的Add Application添加新的wordpress。

    image 38

    然后依次按照前面的步骤,绑定域名,就是新的网站。

    不过小主机毕竟资源有限,所以一台主机实际建一两个小站还是可以的,多了就负担不起了。

    安装SSL证书

    刚刚前面通过自己域名预览网站首页的适合,地址栏出现了不安全的字样,其实就是没有安装SSL证书。

    什么是SSL,这是一种网站(服务器)和用户之间传输数据的时候保证重要敏感隐私信息的安全层,现在对于google来说,是必不可少的,因为没有SSL证书google会视你的网站不安全,因此降低搜索权重,不排名甚至直接不收录,所以做跨境电商独立站SSL证书是必须要安装的,不过不要怕,Cloudways提供免费的SSL证书。

    *注意:等域名绑定成功之后,你才能安装SSL证书,绑定成功之前都会安装失败。

    同样在cloudways主机的应用管理里面,左侧SSL Certificate。

    image 39
    • 首先选择证书类型或者说证书颁发机构,默认是Let’s Encrypt,这个是免费的,你也可以购买更高级的其他证书,但是大部分网站Let’s Encrypt足够,所以这里选择Let’s Encrypt就行。
    • 输入你的邮箱地址,随便一个常用的都行
    • 填写你的域名,后面Apply Wildcard意思是其实就是将证书应用到所有的子域名,建议勾选,因为Let’s Encrypt现在也支持,还有很多人喜欢www开头,以后可能还要添加其他子域名。

    不过,如果用apply wildcard,还需要在域名商后台的DNS中添加一条CNAME记录,在你勾选Apply Wildcard时会出现这条记录:

    image 40

    等待解析完成,然后点击verify DNS,绿色提示表示可以安装SSL证书了。

    前面如果不选择Apply Wildcard,可以通过ADD DOMAIN这里可以添加任何想要的子域名,这里操作实在不懂也是可以直接找cloudways客服,告诉他你的需求,他们都会帮你做好的。

    image 41

    点击Install Certicate开始安装证书,需要等一会:

    image 42

    只要SSL安装成功了,你打开你的网站首页看看现在浏览器地址栏前面是不是多了一把小锁?

    image 43

    搞定了SSL证书之后,可以说主机方面的操作基本就一劳永逸了,其他的都是主机商的事情了,有问题直接找客服即可,购买全托管就是购买更好的服务,其实刚刚做的这些,你只要把域名给他们,给客服权限配置DNS,你一样可以什么都不做,直接登陆WordPress的后台。

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

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

    image 44

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

    image 47

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

    1. 后台设置

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

    image

    Genenal

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

    image 1

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

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

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

    Reading

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

    image 3

    简单说明一下:

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

    image 4

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

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

    image 5

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

    2. 安装插件

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

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

    暂且就这些了,其他的以后有需求在慢慢安装,安装也很简单,直接左边点击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上购买的主题。

    image 7

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

    image 8

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

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

    image 9

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

    • Browse Styles,点击去可以选择整体站点色调和字体,总共有8个,随便选择一个色系即可。
    • Typography,这里是字体设置,里面的fonts可以选择Google字体,先会询问你一下,然后点确认就行了,都是免费可商用的,想要什么字体就用什么字体。
    image 10
    • Colors,颜色设置,里面Palette是调色板,就是你刚刚选择的色调就会在这里,你可以在这里自定义颜色或者重选色系。
    • Background,页面背景,不要设置
    • Shadows,阴影,也不要设置
    • Layouts,这里要修改一下,默认的页面宽度太窄了,把里面的内容宽度(content width)设置成1260,宽幅宽度(wide width)默认就是1260,我建议设置成一样,不然之后在一些宽屏幕上页头页脚和内容宽度不一致,为了一致和省事,所以我建议设置成一样的。如果还不够宽,可以自由调节到你希望的大小,现在的电脑分辨率普遍比较高,不过1260应该能适应大部分设备。

    剩下的其他都不要改了。

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

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

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

    1. 页头

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

    通过editor搭建整个wordpress网站布局

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

    image 12

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

    image 13

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

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

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

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

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

    image 14

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

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

    删除区块

    删除很简单,直接点击要删除的区块,也就是navigation,按电脑的delete键,或者点击右边竖排三点(⋮),点击delete:

    image 15

    拖动区块

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

    image 16

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

    image 17

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

    区块设置

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

    image 18
    image 19

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

    添加区块

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

    image 20

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

    image 21

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

    image 22

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

    image 23

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

    image 24

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

    菜单设置

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

    image 25

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

    image 26

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

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

    image 27

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

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

    image 29

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

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

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

    2. 页脚

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

    image 28

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

    3. 页面模板

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

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

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

    页面(Pages)模板

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

    image 30

    我都用文字标明了:

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

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

    image 31

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

    调整标题

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

    image 34

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

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

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

    image 35

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

    页面Feature Image

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

    增加面包屑(breadcrum)

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

    image 36

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

    image 37

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

    image 38

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

    image 39

    保存,查看一下前台效果:

    image 40

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

    文章(Posts)模板

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

    image 41

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

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

    侧边栏和添加新模板

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

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

    image 42

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

    image 43

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

    image 44

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

    image 45

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

    • 修改Columns分栏的宽度,默认两列宽度分别占内容的2/3和1/3,也就是66.6%和33.3%,选中任何一列,右侧就会出现width设置,修改成你需要的宽度比如下图25%,记得把另外一列设置成75%,总之保证100%宽度,不然前台内容会多出不少空白
    • 要给侧边栏内增加新区块,选中第二列,点击右下加的黑色+按钮,添加需要的区块,这里的侧边栏会通用到所有文章,比如某一个促销节,在这里放置几个banner是很不错的,一次添加,所有文章页面生效。
    image 46
    • 如何在移动设备上隐藏侧边栏,大家都知道移动设备大都是竖版内容,如果再加个侧边栏会很影响界面,不仅很挤,而且内容会非常窄,所以移动设备有必要隐藏掉,那也不难,选中当前column,点击右边竖排三点(⋮),就有隐藏按钮,选择平板和手机隐藏保存就好了
    image 47

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

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

    文章分类模板

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

    image 50

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

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

    4. WooCommerce各个页面模板

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

    单一产品模板

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

    image 51

    修改产品图片布局

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

    image 52

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

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

    image 53

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

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

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

    产品类目列表模板

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

    image 54

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

    image 55

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

    image 56

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

    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在这块基本没有改过,只是界面可能更美观了:

    4. 支付方式Payments

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

    支付方式支持主体费率
    PayPal支持中国大陆用户,包括个人用户,建议使用商业账户,可能需要严重营业执照4.4%+固定费用($0.30),不同币种固定费用不同
    不建议使用香港PayPal账户,会有2.5%的汇率转换费用
    WooPayments支持香港个体工商户或者香港公司,美国公司当然支持了,官方的支付方式,基于Stripe支付服务,类似shopify payments这些,安全稳定高效香港区域费用3.4% + HKD 2.35
    Stripe支持香港身份用户和公司,全球最大的中小企业信用卡收单方式,大部分支付方式是和这家合作包括我哦payments,shopify payments, google pay等等,对大陆用户不友好,风控非常严格2.9% + 固定费用($0.30)
    AirWallex空中云汇支持大陆公司账户,新一代跨境电商信用卡收单方式,看起来这几年很红火,他们同时也做电子账户帮用户收款结汇到国内大陆用户费用4.30%+ $0.30
    香港用户费用3.30%+ HK$2.35
    美国本土卡费用2.80%+ $0.30
    英国本土卡1.30%+ £0.20
    UseePay类似AirWallex空中云汇的一家香港收单公司需联系客服

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

    5. 账号和隐私Accounts & Privacy

    我是这样设置的

    image 57

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

    6. 邮件管理Emails

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

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

    image 58

    首先是发送邮件的信息包括发送名字和邮箱,最好是用企业邮箱,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的一些特性,以及新特性和在开发的特性,比如优化性能等,基本上不需要你做什么修改,官方默认的基本是是最稳定的,但是你可以去研究以下他们提供了什么功能,比如最新的功能:
    image 59

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

    image 61

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

    第六步:添加和编辑页面

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

    1. 添加页面

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

    image 62

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

    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)。

    image 67

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

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

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

    添加大横幅

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

    image 68

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

    image 70

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

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

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

    添加三栏产品分类

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

    image 72

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

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

    添加热卖和新到产品

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

    image 74

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

    Call to Action

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

    image 75

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

    image 76

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

    image 77

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

    3. 店铺页面介绍

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

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

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

    image 63

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

    image 66

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

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

    第七步:添加产品

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

    1. 批量上传产品

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

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

    image 81

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

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

    image 79

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

    image 80

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

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

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

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

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

    2. 单个添加产品

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

    image 78

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

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

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

    3. 产品详情页面展示

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

    image 84

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

    image 85

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

    image 87

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

    第八步:发布网站

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

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

    1. woocommerce设置中上线店铺

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

    image 86

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

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

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

    image 88

    记得保存,如果之前设置过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默认有国外三家巨头。

    image 89

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

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

    总结

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

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

    开始免费试用Cloudways ⟶

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

    分享到

    评论

    发表回复

    您的邮箱地址不会被公开。 必填项已用 * 标注

    这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

    搜索
    目录快览
      热门建站方式