边缘开发者平台
  • Pages
    • 产品简介
    • 快速开始
      • 导入 Git 仓库
      • 从模板开始
      • 直接上传
    • 框架指南
    • 项目指南
      • 项目管理
      • edgeone.json
      • 缓存配置
      • 错误码
    • 构建指南
    • 部署指南
      • 概览
      • 触发部署
      • 管理部署
      • 部署按钮
      • 使用 Github Action
    • 域名管理
      • 概览
      • 自定义域名
      • 配置 HTTPS 证书
      • 如何配置 DNS 的 CNAME 记录
    • Pages Functions
    • KV 存储
    • 边缘 AI
    • API Token
    • EdgeOne CLI
    • Pages MCP
    • 集成指南
      • 数据库
        • Supabase 集成
        • Pages KV 集成
      • 电商
        • Shopify 集成
        • WooCommerce 集成
      • 支付
        • Stripe 集成
        • Paddle 集成
      • CMS
        • WordPress 集成
        • Contentful 集成
        • Sanity 集成
      • 身份验证
        • Supabase 集成
        • Clerk 集成
    • 最佳实践
      • 使用 Deepseek-R1 模型快速搭建对话型AI站点
      • 使用 WordPress + WooCommerce 和 GatsbyJS 搭建电商平台
      • 使用 Supabase 和 Stripe 搭建 SaaS 站点
      • 如何快速搭建公司品牌站点
    • 迁移指南
      • 从 Vercel 迁移至 EdgeOne Pages
      • 从 Cloudflare Pages 迁移至 EdgeOne Pages
      • 从 Netlify 迁移至 EdgeOne Pages
    • 排障指南
    • 常见问题
    • 联系我们
    • 产品动态
解锁 1年EdgeOne + 1TB CDN： 加入我们的开发者之旅
立即开始！
当前为国际站中文文档，如需访问中国站文档，请点击这里
文档概览/
边缘开发者平台/
Pages/
最佳实践/
使用 WordPress + WooCommerce 和 GatsbyJS 搭建电商平台/

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

本文介绍了如何基于 Pages 的模板，快速搭建 JAMStack 架构的，高性能、易维护的电商网站，并实现了登录、购物车、订单等常用的动态功能，方便您快速搭建属于自己的高性能电商网站。


背景介绍

WordPress 驱动着互联网上超过40%的网站，其生态系统丰富且成熟。通过 WooCommerce 插件，WordPress 可以轻松转变为功能完备的电商平台，支持产品管理、库存控制、支付处理和订单管理等核心功能。GatsbyJS 是基于 React 的静态网站生成器，它利用现代前端技术，将网站内容预渲染为静态 HTML、CSS 和 JavaScript 文件。将 WordPress 与 GatsbyJS 结合搭建电商平台，能够实现优势互补。其中:
WordPress + WooCommerce 作为后端，管理内容和电商功能
GatsbyJS 作为前端，负责展示和用户交互
这种分离架构提供了多方面的优势:
1. 性能卓越: 静态生成的页面部署到 EdgeOne Pages后，可利用 CDN 实现快速加载
2. 安全增强: 前端与后端分离，减少攻击面
3. 可扩展性: 可以独立扩展前端或后端
4. 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

部署成功后，点击链接即可看到完整页面。