大家好，我是有风，在这段视频中，我将教大家如何使用WordPress创建一个专业且美观的电商网站。
在设计这个网站时，我借鉴了世界上一些顶级电商网站的设计和功能，比如亚马逊、Flipkart、沃尔玛和淘宝、速卖通、阿里巴巴等。
我们将要创建的网站具备许多高级的功能，包括内置弹出窗口生成器、先进的Mega菜单(超级菜单)、自定义配送选项、直接购买按钮、客户帮助中心、愿望清单功能、产品对比功能、自动跟踪、等多个强大的功能。并且，这个网站完全适配移动设备和平板，还经过SEO设置优化，帮助你在Google搜索结果中获得更好的排名。
►向有风咨询，加入我的知识星球圈子：
➜https://t.zsxq.com/16QP9JP8b
有风用到的AI工具
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
►hostinger 网站主机域名
➜https://bit.ly/47UlunQ
►Motta 电商主题
➜https://1.envato.market/rQ9B95
►阿里云.中国网站服务器租用
➜https://bit.ly/3V1GiGY
►elementor
➜https://bit.ly/3wzeqQH
►stripe 支付收款
➜https://stripe.com/zh-hk
►本期视频文字脚本
➜https://aiyoufeng.com/wordpress-woo
►stripe企业开户教程
https://www.youtube.com/watch?v=B_kCNiQ3Icw
►stripe个人开启教程
https://www.youtube.com/watch?v=3lXG8NMp3MA
► 图标下载
➜ https://flowbite.com/icons/
➜https://www.svgrepo.com/
► 本期用到的素材
➜https://drive.google.com/drive/folders/1rP6Fw1qHX53E4K4ykm5oCB54yR9sh8sQ?usp=sharing
►ColorZill 屏幕取色器
➜https://chromewebstore.google.com/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en
►Shopify 3天免费试用，首月仅需1美元
➜ https://bit.ly/3Xq89AJ
►邮件营销GetResponse
➜https://bit.ly/3RmFRoG
► leonardo AI生成图片
➜https://bit.ly/3yTr0LO
►chatGPT
➜https://chatgpt.com/
➜升级到GPT4会员教程：https://www.youtube.com/watch?v=64SkKkPTAg4
► midjourney AI生成图片
➜https://www.midjourney.com/
► midjourney+ChatGPT 账号合租平台、账号购买
➜https://nf.video/C1dxn
► 办一张国外银行卡
➜https://wildcard.com.cn/i/19YC7OIQ
你不需要任何技术或编程知识，只需简单的拖放操作就能完成整个网站的搭建。在开始创建之前，我先给大家快速的展示下网站，这就是我们在这段视频中要制作的网站。
首先，顶部有一个网站头部，我们提供了10到12种不同的预设头部样式，如果你不喜欢默认的头部样式，可以选择其他的设计。接下来是搜索栏，用户只需输入一两个字母，系统就会自动推荐相关的结果。这是一个实时搜索功能。接着是我的账户页面和愿望清单页面。
左侧有一个分类菜单，如果你有多个类别，可以在这里创建类似的菜单，我们还将学习如何创建Mega菜单（超级菜单）。接下来是一个轮播广告，我会教大家如何创建这些美观的轮播滑块。下拉页面后，我们可以看到一些横幅广告，这些广告可以用来展示不同的产品类别。
我们还有一个产品轮播展示，在这里，打折产品的销售倒计时显示得非常直观。用户可以将产品加入购物车，成功加入后会弹出一个提示框，并推荐类似产品。用户还可以将产品加入愿望清单，或者进行产品对比。
接下来，我们打开一个单一产品页面，比如一台笔记本电脑。通过这段视频中的步骤，你可以为任何类型的产品创建一个电商网站，无论是电子产品、美妆、家电还是时尚服饰等。你还可以为产品设置自定义标签，显示产品的评论数量、价格等信息。如果是多个SKU产品，比如笔记本的不同处理器选项，选择不同的配置后价格也会相应变化。
如果你不想经过购物车页面，可以直接点击“立即购买”按钮，直接跳转到结算页面。在结算页面中，你可以选择支付方式，比如网上银行、信用卡、PayPal等，还可以使用优惠券。我们也会教你如何创建这些优惠券，如何设置不同的配送和税费，比如对不同城市设置不同的快递费。
在产品页面的底部，你还可以添加一些额外的标签，例如“免费配送，3天内到货”等自定义信息。还有产品描述部分，你可以随意设计描述内容，也可以在描述中上传视频或图片。此外，产品评论、额外信息、退货政策等都可以通过自定义选项添加。
这个网站还支持非常强大的过滤功能，比如按照品牌、评分或者折扣来筛选产品。我还会教你如何创建弹出窗口，比如在新窗口中展示优惠信息的弹窗，用户可以输入优惠码获得折扣。
最后，网站还有一个非常重要的功能——帮助中心。我们会为客户创建一个文档页面，让他们可以查询订单取消、包裹跟踪等信息。此外，我还会展示如何创建博客页面、关于我们页面、联系我们页面以及订单追踪页面。客户可以通过账户页面查看他们的订单详情，包括订单日期、订单号、运费、支付方式等。
总之，这个网站的功能非常丰富，如果你喜欢这个网站，想要自己动手创建，记得把本期视频看完，如果你在观看过程中有任何疑问或建议，请在评论区留言。
2、主机和域名购买
现在，让我们开始创建这个网站。无论你要创建的是电商网站、简单博客、企业网站、会员网站还是其他类型的网站，首先需要两样基本的东西：域名和主机账户。
域名 简单来说就是你的网站名称或网址。例如：https://aiyoufeng.com/这些都是不同的域名。当别人想访问你的网站时，只需在浏览器地址栏输入这个域名即可进入你的网站。
其次，最重要的就是主机。主机其实就是一个服务器或计算机，你的网站的所有内容，包括页面、产品、数据库等，都会保存在这个服务器上。这个服务器需要全天候24小时运行，这样无论用户在何时何地访问你的网站，网站都能正常展示。因此，主机对于你的网站至关重要，因为网站的速度、性能、用户体验、搜索排名甚至安全性都与主机密切相关。
如果你选择一个好的主机，网站的速度和性能都会很棒，用户体验也会更好，网站的安全性也更高，不容易遭受攻击或入侵，搜索引擎排名也会有所提升。反之，如果选择了劣质主机，所有的这些效果都会大打折扣。
市面上有成千上万的主机服务商，但真正值得选择的并不多。我测试下来国外不错的就有hostinger”，你可以点击视频描述中的链接，访问我们使用的主机服务——Hostinger。
我们选择的是Hostinger的托管WordPress主机，这是专门为使用WordPress搭建网站而优化的主机。
除了价格实惠，它也是市场上性能最好的一款主机服务，并且受到了WordPress官方推荐。
在Hostinger页面上，你会看到它在TrustPilot上有很高的评分和好评。此外，还有三个不同的套餐可供选择：Premium、Business 和 Cloud Startup云计算初创企业。如果你想省时省力，我建议你直接选择最实惠的Business套餐，点击选择套餐按钮，开始创建网站。
选择Business套餐后，你可以在同一主机上创建多达100个网站。比如今天你创建了一个电商网站，明天想为朋友、客户或自己再创建一个博客或另一个电商网站，你都不需要购买额外的主机。
该套餐还包括200 GB NVMe 存储空间，这对于多个网站来说已经足够多了。而且NVMe存储是目前最快的存储方式，能大大提升网站的加载速度。此外，你还可以免费获得域名、预建模板和主题、SSL证书以及更多与WordPress相关的功能。
接下来，你只需选择主机的购买时长，建议至少选择两年或四年的方案，这样可以享受更多的折扣和优惠。创建账户后，选择适合你的支付方式，例如信用卡、PayPal、支付宝等，完成付款即可。
3、安装wordpress
4、wordpress基本设置 A、首页预览 B、如何进后台 C、后台清理整洁干挣 D、文章、媒体等左边功能简介绍下 E、设置>通用 允许注册及改网站名，固定链接 F、回hostinger可以再装100个网站
4、安装插件
5、安装主题 motta 多供应商和市场 WordPress 主题下载
这个链接已经在视频描述中提供，这是我们将使用的主题：Motta 主题。性价比非常高。
这是一个高级主题，需要购买。目前售价仅为39。不过，不用担心，这只是一次性付款，不需要持续订阅。一旦支付了$39，你可以终身使用这个主题，未来的所有更新、设计和新功能也都将免费获得，不需要再额外支付任何费用。
另外，你还会获得6个月的免费技术支持。从购买主题的那天开始的6个月内，如果你在安装或使用中遇到任何问题，都可以提交工单，他们会帮助解决。而不用担心遇到技术问题。
购买流程非常简单，点击“加入购物车”按钮，完成购买后，在网站的右上角会看到你的用户名。将鼠标悬停在用户名上，点击“下载”，在下载页面选择第二个选项：“可安装的WordPress文件”。然后你会下载一个ZIP文件，这就是我们接下来要上传到你的网站的主题文件。
接下来，你需要回到WordPress的后台管理界面，依次点击“外观”-> “添加新主题”-> “上传主题”，选择刚刚下载的ZIP文件，点击“安装”，最后点击“激活”。激活后，系统会提示你安装一些必要的插件，你只需按照提示操作即可。
5、安装所有必须插件，并激活
A、首页预览看看
B、后台刷新看看
6、woo设置
A、可以将你的网站转化为电商网站，先设下地址 B、产品>• **General：Enable taxes 启用税收 C、产品>• **Size Guide尺码指南：Guide Display>By clicking on a button， Button Position>Beside the Size attribute (for variable products only) 尺寸属性旁边（仅适用于可变产品也就是多SKU）
D、Product Tabs 产品标签启用
E、TAX>Additional tax classes把这个框拉大，加入美国的话就是销售税（Sales Tax）， google搜usa Sales Tax，查看各州税率。 https://taxfoundation.org/data/all/state/2024-sales-taxes/
把Sales Tax 7%加进去，销售税（Sales Tax），保存
F、点到Sales Tax 7%，设置美国的税收：国家代码US，Rate %为7%，Tax name为Sales Tax 7%，Shipping勾去掉。
G、**Shipping快递运输>Add zone，**Zone name为美国阿拉斯加，Zone regions为Alaska, United States (US)
左下角保存Save changes，
Add shipping method增加快递方式：包邮Free shipping
再点左上角：Classes>Add shipping class：电子产品，再加一个大家电。
Shipping zones ：Add zone：美国其他地区，这次运费选Flat rate，
格式为15 * [qty]，
再设一个满200包邮。
7、Payment付款方式
A、安装插件：Payment Plugins for PayPal WooCommerce
https://stripe.com/global 支持国家
https://www.youtube.com/watch?v=B_kCNiQ3Icw stripe企业开户教程
https://www.youtube.com/watch?v=3lXG8NMp3MA stripe个人开启教程
B、启用插件，连接到账号
C、到stripe里面去申请微信和支付宝权限
8、帐户和隐私
A、前面4个打勾
9、高级
A、增加一个Order Tracking Page 页面，命为为Order Tracking 订单查询
B、google搜：woocommerce shortcodes
https://woocommerce.com/document/woocommerce-shortcodes/
C、复制 [woocommerce_order_tracking]，页面插入简码放进去。
D、回到高级，把页面选进去
10、产品上架
A、左边 产品
B、单SKU产品
设置标题， 常规：单个产品 原价，促销价。 库存：SKU写型号，库存管理勾上，数量100 配送：
C、右边上传图片
GPT提示： 我准备用midjourney这个AI图片生成平台生成产品图片，要求产品背景和白底，你现在扮演专业的ai图片prompt提示词生成大师，请根据我的主题帮我生成5个不同的promt
分类（平板电脑）及标签，品牌
发布预览下
D、为产品页启用elementor.
要想让产品页更好看，得用到elementor.
左边Elementor>设置>文章类型 全部勾上
11、回到产品页
刷新，用elementor编辑。
A、新增一个向下的容器，拖入 motta heading，输入文字：Windy Pro，字号38，粗细600.
B、拖入 网格在下面，改成2列1行。
C、第一个行拖入 文本框，字体默认，字号24，粗500，行高32，改颜色为黑并保存为全局颜色方便下次调用。发布
D、更改全局颜色：左上角 站点设置>全局字体 全部改为默许。
E、右边也拖入 文本框，字号16，粗400，行高32，颜色用刚才一样的颜色。
F、增加右容器，里面再拖入一个下容器，复制一个容器得到两个并列一行。 左边拖入图片。
右边也拖入图片并复制一个，然后显示为原图，样式宽度为80%。
G、**More information，**增加下容器，拖入文本框，文字复制进来，选中容器 高级 外距左右20%
H、更改移动端，手机高级 外距0。
12、多sku产品
A、产品>属性:
硬盘容量、启用归档。并配置类别：500G，1TB 处理器、启用归档。并配置类别：英特尔 I5，I7，I9等。
B、上架“
标题：有风笔记本电脑 Go，12.4 英寸触摸屏，酷睿 i5 冰蓝色
产品数据：可变产品。 常规：税收可以加。 库存：SKU为 Laptop001. 配送：填上数据。
属性：选处理器，属性值I5、I7、I9，保存，硬盘容量同样设置。 变量：生成变体，增加价格，设置默认展示产品。 右边信息补充完，类目，标签，图片等。 发布预览下。
C、标题上的小标：新品，更改地址 产品数据>高级>Custom Badge Text。
D、产品分类加图片，brands类别加图片
E、Product Tabs：增加 Shipping & Returns
内容框下面：Tabs Settings ，可以设置显示的位置。
13、增加优惠券
A、营销>优惠券
14、首页制作
A，新建页面为首页，下拉Hide Page Header 勾上，预览看看。
B、设置>阅读 设为首页。
C、页面：首页>编辑： Category Menu Display 改为one page load. 首页为自动加载超级菜单 。
15、首页：使用elemantor编辑。
A、轮播图：容器为两列，
右边拖入motta slides，删除两个，留一个， title为：时下最热， subtitle为新品NEW。 description为：产品直发，一件也包邮. 按纽链接：搜 shop.,按纽文字为马上购买。 背景图设置：backgroud， 复制一个更改背景。 样式：边框圆角为3.
样式>content：宽度为300，文字颜色都改为白。 按纽颜色：Primary butter>extra options，背景改为白色。 加上轮播按纽：样式>slider options, arrows位置为右下，dots位置为左。 更改手机：arrows的item options的尺寸和宽度改为0.让其不显示。 更改手机：dots的Vertical Spacing: 垂直间距,Horizontal Spacing: 水平间距都改为16。 更改手机：宽度200，content间距为18 20 18 20。 手机：轮播图顶上的容器隐藏：高级>响应式>在手机纵向隐藏。 手机：轮播图容器>高级 外距为内距全为0.
B、4个图标
增加容器为网格：3列，左边列数改为4. 拖入 motta icon box到第一列。 下载图标： https://flowbite.com/icons/https://www.svgrepo.com/ 顺丰包邮，订单满99元。 图标位置为左。
样式：content. title字号14，spacing为2. description字号14.
样式：icon. 居中对齐。spacing为15，size为30.颜色为灰。
样式：content.：居中。
再复制三个到后面，改更相关的内容。高级再更改内距上25下35..发布。
更改手机：选中图标容器>布局 列数为2. 更改手机：选中第一个图标>内容 图标位置为TOP,再到样式改为居中。其他几个粘贴样式。
C、分类 增加容器为网格：3列，左边列数改为4.
拖入motta banner image.改里面的文字为：小家电等。 改背景：右边media.居中居中 ，背景尺寸为contain. 样式：高度为400，改字体颜色为绿#99BC49。 按纽primary button>skin为subtle，extra options按纽文字颜色为绿。其他三个粘贴进去就可以了。 更改手机：更改为两列。间距10. 标题字号24，描述14，标题行高1em，再改其他三个。 平板：改为三列，最后一列选中>高级响应式>隐藏，样式行高为360.
D 、产品轮播区
拖入下容器，motta product deals carousel heading：仅限24小时！ 机会难得，快来抢购！距离促销结束还有，查看全部商品，link用shop(https://youfengai.com/shop/). products:选on sale，产品分类选下。 Carousel Settings：slides to show两个为4.。 样式>heading 位置为左。下拉Time 背景色为蓝#0A113E，文本色为灰 选中整个容器>高级 间距上50下30。
手机：复制一个。把原区块隐藏：然后点中 高级 响应式 隐藏。 手机：在复制的这个上：样式 heading位置TOP。并把这个区块在电脑上隐藏。 平板：把刚才复制的隐藏。
E、产品分类
拖入下容器，加入motta heading.:今天想买点什么？（字号26，粗600），link到shop，button text为查看全部。 增加网格：3列。把上面的分类直接复制下来改背景就可以。更改里面的文字。 样式>banner ：Horizontal Position和Alignment改为居中。height为370。 样式>content ：primary button的skin为ghost。 再复制两个一样的。
样式>content ：description的spacing为10. 手机：点中第一个分类>样式 height为320，另外两个粘贴样
F、小区块分类 增加容器为网格：3列，左边列数改为6.
加入 motta image box：更改图片及文字，链接放分类目类链接，去产品里面建一个分类。 样式更改图片的spacing为10，标题字号为24。图片加圆角6。 再复制5个。改内容 手机：改成两列。
G、底部三列
增加下容器：加motta product listing.中间精选产品为空，到产品里面去设为精选产品。 增加内距上50下30.
16、博客
A、新建 博客
B、设博客为文章
C、演示写文章
17、帮助中文
A、help center，增加分类和文章，AI写。
https://flowbite.com/icons/ 加图片。
B、 elementor写文章
增加两列容器。左65%，右35%。 左边拖入：文本编辑器加入内容。
C、再写一篇文章 。
D、新 页面 为 帮助中心
Header Section：headewr v12 Header Background：transparent Hide Page Header ：勾上 Content Top Spacing：no spacing
使用elementor编辑 导入之前的模板：https://drive.google.com/drive/folders/1rP6Fw1qHX53E4K4ykm5oCB54yR9sh8sQ?usp=sharing。
并改为中文，再加一个模板共三个更好看。 有什么可以帮到你 加背景色。点到对应的文章而，顶部 自定义>help center>header layout:选header v12，header transprent打开选dark. 自定义>help center>seach bar：backgroud color改为#B4F4DE，spacing top为150。发布
18、关于我们
A、Header Section：headewr v12，
Hide Page Header ：勾上
使用elementor编辑
导入about us页面。 https://www.pexels.com/search/team/ 搜team，换图片。
19、联系我们
A、Header Section：headewr v12，
Hide Page Header ：勾上
使用elementor编辑
导入about us页面。
底部：我们期待收到您的来信 表单设置： 进入后台>联系：Contact form 1 更改里面的内容，google网盘下的。Contact Form这个文本。 复制里面的内容替换掉原内容。再把短代码换了就可以了
20、菜单
A、新建菜单 顶部 主菜单
选上：首页 (Home) 博客 (Blog) Shop (Shop in English) 关于我们 (About Us) 帮助中心 (Help Center) 联系我们 (Contact Us) Order Tracking 订单查询 勾上：Primary Menu和Secondary Menu
B、底部菜单
建三个底部菜单：前两个随便选些菜单，第三个增加woo相关的菜单。 建顶部左侧菜单：显示选项把 产品类别 显示出来。显示位置勾上这个Category Menu。 顶部轮播图缝隙太大：首页>项部编辑页面 Content Top Spacing 改为no spacing，Header Section为v2。 顶部菜单有重复：菜单>主菜单> Secondary Menu去掉。
C、建顶部左侧菜单 改为 超级菜单
第一个：
在菜单名字下面 平板电脑：Options Mega Menu 点进去启用下。 Mega Menu：Mode为默认，width为自定义870。 Icon：https://flowbite.com/icons/ 找一个图标，Background Color为彩色，Color为白色。
加图片： Mega Menu：Mode为grid。 Add a row，拖动更改点比，左边为45%。 在左边的Mega Menu Items里面把heading加进来，更改文字为 新品，加上链接，选bold。 重复加更多菜单 ：在左边的Mega Menu Items里面把heading加进来，更改文字为 新品，加上链接，选bold。 如果想在两个菜单之间留空间：新建一个 选empty。
右边图片区域菜单：Taxonomy Grid 在左边的Mega Menu Items里面把Taxonomy Grid加进来，设置显示数limit为3、6、9.
第二个：
在菜单名字下面 笔记本电脑：Options Mega Menu 点进去启用下。 Mega Menu：Mode为grid，width为自定义870。
Icon：选图片
Mega Menu： Add a row 拖动更改点比，左边为36%。 在左边的Mega Menu Items里面把heading加进来，更改文字为 新品上市，不加链接，选lable。 再加一个空白：在左边的Mega Menu Items里面把heading加进来，选empty。 再加一个菜单 XX新品：在左边的Mega Menu Items里面把heading加进来，选empty。
右边： 在左边的Mega Menu Items里面把baner加进来.加入图片，标题等。重复再加1个。
21、shop页面
A、在shop页 顶部自定义。
B、自定义 ▸ Header> Header Layout 选 header v2。
C、 自定义 ▸ Header >Account 眼睛勾上你想要的内容。 发布预览
D、查看手机，更改手机不想出现的内容。 自定义 ▸ Header>Hamburger,选择手机上要显示的菜单内容。
更改顶部样式：自定义 ▸ Shop> Page Header>Page Header Style：选Standard (image and text)，更改图片。
22、底部菜单
后台：模板>导入模板 footer section. 使用elementor编辑。 更改里面的内容。
后台：模板>Footer Builder>add new 命名为 底部菜单并 使用 Elementor 编辑，导入模板 footer
把footer加入首页：首页>顶部 自定义>Footer 选上刚才建的底部菜单。
加入邮件订阅弹窗。https://www.getresponse.com/
23、加边栏
外观>小工具:
A、Catalog Sidebar分类侧栏： Motta – Products Filter（价格、处理器、品牌、评分等），保存 到https://youfengai.com/shop/ 去预览。
B、单品页侧栏Single Product Extra Content：Motta – Icon Box， 增加图标：https://flowbite.com/icons/，颜色用灰。 文字： 此商品免费送货和退货 3-5 个工作日内送达 发布预览。查看详情加链接：#tab-shipping-returns 跳到Shipping & Returns卡片上。
C、博客页 加边栏 Blog Sidebar
增加：搜索 增加：Motta – Popular Posts 增加：Motta – Social Links：https://www.youtube.com/@Windyyoufeng 增加：产品分类列表。
24、细节调整。
单产品 自定义 ▸ Single Product>Product Layout 博客 自定义 ▸ Blog Blog Archive
单产品 自定义 ▸ Single Product>Product Layout 博客 自定义 ▸ Blog Blog Archive 自定义 ▸ Header> Logo
2、演示下单
A、下单的时候需要填 哪些内容，电话必填，可以在自定义woo>checkout里改
