产品简介
快速开始
- 导入 Git 仓库
- 从模板开始
- 直接上传
- 从 AI 开始
框架指南
- 前端
- 后端
- 全栈
  - Next.js
- 自定义 404 页面
项目指南
- 项目管理
- edgeone.json
- 缓存配置
- 错误码
构建指南
部署指南
- 概览
- 触发部署
- 管理部署
- 部署按钮
- 使用 Github Action
- 使用 CNB 插件
- 使用 IDE 插件
- 使用 CodeBuddy IDE
域名管理
- 概览
- 自定义域名
- 配置 HTTPS 证书
- 如何配置 DNS 的 CNAME 记录
Pages Functions
- 概览
- Edge Functions
- Node Functions
日志分析
KV 存储
边缘 AI
API Token
EdgeOne CLI
Pages MCP
集成指南
- AI
  - 对话型大模型集成
  - 图片大模型集成
- 数据库
  - Supabase 集成
  - Pages KV 集成
- 电商
  - Shopify 集成
  - WooCommerce 集成
- 支付
  - Stripe 集成
  - Paddle 集成
- CMS
  - WordPress 集成
  - Contentful 集成
  - Sanity 集成
- 身份验证
  - Supabase 集成
  - Clerk 集成
最佳实践
- 使用通用大模型快速搭建AI应用
- 使用 Deepseek-R1 模型快速搭建对话型AI站点
- 使用 WordPress + WooCommerce 和 GatsbyJS 搭建电商平台
- 使用 Supabase 和 Stripe 搭建 SaaS 站点
- 如何快速搭建公司品牌站点
- 如何快速搭建博客站点
迁移指南
- 从 Vercel 迁移至 EdgeOne Pages
- 从 Cloudflare Pages 迁移至 EdgeOne Pages
- 从 Netlify 迁移至 EdgeOne Pages
排障指南
常见问题
联系我们
产品动态

使用 WordPress + WooCommerce 和 GatsbyJS 搭建电商平台

本文介绍了如何基于 Pages 的模板，快速搭建 JAMStack 架构的，高性能、易维护的电商网站，并实现了登录、购物车、订单等常用的动态功能，方便您快速搭建属于自己的高性能电商网站。
﻿
背景介绍
WordPress 驱动着互联网上超过40%的网站，其生态系统丰富且成熟。通过 WooCommerce 插件可转变为完备电商平台，支持产品管理、库存、支付和订单等核心功能。GatsbyJS 是基于 React 的静态网站生成器，将内容预渲染为静态文件。WordPress 与 GatsbyJS 结合搭建电商平台，可实现优势互补。
﻿
主要特性与优势：
性能卓越: 静态生成的页面部署到 EdgeOne Pages 后，可利用 CDN 实现快速加载
可扩展性: 可以独立扩展前端或后端
SEO友好: 预渲染内容有利于搜索引擎索引
﻿
适用场景
1、中小电商企业
中小电商企业资金技术有限。使用我们的模板搭建电商平台，无需雇佣专业开发团队。WordPress 低门槛操作让员工快速上手内容管理和店铺运营，GatsbyJS 高性能在有限预算内提供出色购物体验，帮助企业在激烈竞争中脱颖而出。
﻿
2、内容驱动型电商
如果您的电商策略高度依赖内容营销，如博客文章、教程、购买指南等内容吸引客户，这种组合将充分发挥 WordPress 的内容管理优势，同时通过GatsbyJS提供出色的阅读体验。
﻿
WordPress 后台搭建
Docker 部署（推荐）
示例场景：假设您想快速尝试，从0到1搭建一个电商管理后台
﻿
我们提供了可供直接部署的 docker 项目，可以直接使用 docker 容器部署到您的服务器上。
docker 环境的安装和部署可以参考腾讯云轻量服务器 Docker 容器环境。
部署完成后打开 wp-admin：https://your.site.domain/wp-admin/admin.php。
登录后可以看到已经配置好的产品信息和页面。
﻿
自行搭建
示例场景：如果您已有自己的 WordPress 服务，想要扩展电商功能，也可以按照如下步骤自行配置环境。
﻿
1、安装插件
在您的 WordPress 服务安装如下插件并激活：
Advanced Custom Fields
JWT Authentication for WP-API
WooCommerce
WPGraphQL
WPGraphQL for ACF
WPGraphQL for WooCommerce
WPGraphQL JWT Authentication
﻿
2、导入/创建商品
激活 WooCommerce 插件后，点击导航栏的 Products，进入商品管理页面。
可以根据需求自行创建商品
﻿
或者下载 csv 文件下载进行导入。
﻿
3、创建页面
先创建以下几个页面，用于首页 Banner 的展示
/highlight
/promotion
/sample-page
点击左边菜单的 ACF，下载配置文件并导入字段配置。
导入完成后，回到上面创建的页面进行编辑，填入 ACF数据。
﻿
编辑完成后发布。
﻿
部署到 EdgeOne Pages
1、部署模板
完成电商管理后台的搭建之后，在 Pages 平台进入 WordPress Woocommerce Template，点击"Deploy"
﻿
2、添加环境变量
在准备部署界面点击"Environment Variables"，分别配置以下环境变量：
WP_URL：填入您的WordPress站点地址
GATSBY_ENV：设置为production
﻿
部署成功后，点击链接即可看到完整页面。
﻿
﻿

背景介绍
适用场景
- 1、中小电商企业
- 2、内容驱动型电商
WordPress 后台搭建
- Docker 部署（推荐）
- 自行搭建
部署到 EdgeOne Pages
- 1、部署模板
- 2、添加环境变量