一、快速入门
EdgeOne 提供了完整的 WordPress + WooCommerce + Gatsby 集成方案，你只需要下载并配置数据库即可快速部署：
·WordPress + WooCommerce 后端
·Gatsby 前端模板
下载这两个模板并按照说明部署，即可快速搭建电商网站。
WooCommerce 集成主要包含以下三个步骤：配置 WordPress 和 WooCommerce、使用 Gatsby 生成静态页面、部署到 EdgeOne 。你可以按照下文的步骤手动配置。
二、配置 WordPress 和 WooCommerce
你可以通过以下两种方式配置 WordPress 和 WooCommerce：
三、方式一：自行部署 WordPress（这篇推荐的方式）
EdgeOne 提供了一个预配置好的 WordPress + WooCommerce Docker 模板，让你能够快速完成自行部署。这个模板已经集成了 MySQL 数据库和配置好的 WooCommerce，并且预装了以下必要的插件：
·Advanced Custom Fields – 用于自定义字段管理。
·WooCommerce – 电商功能核心。
·JWT Authentication for WP-API – REST API 认证。
·WPGraphQL – GraphQL API 支持。
·WPGraphQL for ACF – ACF 的 GraphQL 支持。
·WPGraphQL for WooCommerce (WooGraphQL) – WooCommerce 的 GraphQL 支持。
·WPGraphQL JWT Authentication – GraphQL API 认证。
首先，克隆项目到本地：
git clone https://github.com/TencentEdgeOne/wp-ecommerce-docker-demo.gitcd wp-ecommerce-docker-demo
如果你需要在部署机器上进行本地验证，需要在项目根目录创建 .env 文件并配置以下环境变量：
# 数据库配置WORDPRESS_DB_PASSWORD=wordpress123MYSQL_ROOT_PASSWORD=somewordpressMYSQL_PASSWORD=wordpress123# GraphQL认证配置GRAPHQL_JWT_AUTH_SECRET_KEY=your-hwt-auth-secret-key# 站点配置WP_HOME_URL=http://localhost # 替换为你的站点URLWP_DOMAIN=localhost # 替换为你的站点域名WP_HOST=80 # 替换为你的站点端口
配置完成后，使用 Docker 启动项目：
docker-compose up -d
服务启动完成后，你可以通过访问 http://your.site.ip/wp-admin/admin.php 进入 WordPress 管理界面。
注意：此模板已预装 MySQL 数据库和配置好的 WooCommerce，无需额外配置。首次登录后请及时修改默认密码。
四、核心
在 WordPress 后台，你需要创建以下三个页面：
·highlight – 用于展示特色产品。
·promotion – 用于展示促销活动。
·sample-page – 用于展示示例内容。
创建页面后，需要配置 Advanced Custom Fields：
·进入 WordPress 后台的“自定义字段”菜单。
·单击“Tools”标签。
·在“Import Field Groups”部分，选择并上传acf-export-2025-02-13.json 文件（该文件位于 wp-ecommerce-docker-demo 模板项目录的wordpress-data ）。
1. 单击 Import 完成导入。
2. 导入完成后，进入“Field Groups”标签。
3. 将导入的字段组与对应的页面类型进行关联配置。
完成 ACF 配置后，你需要将 Field Group 配置到相应的页面上，我们按名称对应即可，这样页面才能使用这些自定义字段。
接下来，让我们配置 WooCommerce 的商品数据。登录 WordPress 管理界面后，点击左侧菜单的“WooCommerce”，进入 WooCommerce 管理控制台。在这里，你可以看到所有需要配置的数据项：
由于我们使用 WordPress 主要是为了提供数据接口，而前端页面将通过 Gatsby 项目来实现，因此你可以跳过“Customize your store”（自定义商店）的配置。请重点关注产品、订单、支付等基础功能的配置。如果你对 WooCommerce 的 具体配置有疑问，可以参见 WooCommerce 产品文档。
这里我们不对数据配置的具体细节作详细说明，你可以根据自己的需求在 WooCommerce 管理界面中进行配置。
五、数据验证
配置完成后，我们需要验证 WordPress 和 WooCommerce 的 API 是否能正常提供数据。由于我们已经安装了 WPGraphQL 和 WooGraphQL 插件，这里使用 GraphQL 方式进行数据验证。
1. WordPress 数据验证
query GetPages { pages(first: 1) { nodes { id title content acf { hero_title hero_description featured_products } } }}
示例返回数据：
{ "data": { "pages": { "nodes": [ { "id": "cGFnZS8x", "title": "Highlight", "content": "页面内容…", "acf": { "hero_title": "Welcome to Our Store", "hero_description": "Discover our featured products", "featured_products": [1, 2, 3] } } ] } }}
2. WooCommerce 数据验证
query GetProducts { products(first: 1) { nodes { id name type status price regularPrice salePrice description images { nodes { id sourceUrl altText } } categories { nodes { id name slug } } } }}
示例返回数据：
{ "data": { "products": { "nodes": [ { "id": "cHJvZHVjdC8x", "name": "Premium Headphones", "type": "SIMPLE", "status": "PUBLISH", "price": "199.99", "regularPrice": "249.99", "salePrice": "199.99", "description": "High-quality wireless headphones with noise cancellation.", "images": { "nodes": [ { "id": "cG9zdC8y", "sourceUrl": "https://your-store.com/wp-content/uploads/headphones.jpg", "altText": "Premium Headphones" } ] }, "categories": { "nodes": [ { "id": "Y2F0ZWdvcnkvMQ==", "name": "Electronics", "slug": "electronics" } ] } } ] } }}
你可以通过访问 http://your-wordpress-url/graphql 来测试 GraphQL 接口。如果能够正常获取上述示例中的数据，说明 GraphQL 接口配置正确，可以提供给外部访问。
六、方式二：使用 WordPress.com 托管（新手使用）
·访问 WordPress.com，注册并创建新站点。
·在站点管理后台，进入“插件” > “安装插件”。
·搜索并安装“方式一”在 WordPress 安装的所有插件。
无论是托管部署还是自己部署，WordPress 作为无头 CMS 时的配置流程基本类似，都是用来管理内容并提供 API 接口，我们只需要参考上面的“方式一”的配置即可。另外，虽然托管部署省去了服务器维护和环境搭建，但现在各大云服务对 WordPress 支持很好，自己部署其实也很方便。
七、支付回调配置
在开始生成静态文件之前，我们需要特别说明一下支付回调的配置。这是因为我们的前端是使用 Gatsby 生成的静态网站，而支付流程需要实时处理支付状态更新。WooCommerce 支持 Stripe、PayPal、Square 等国际支付网关，你只需要在 WooCommerce 后台配置相应的支付方式，设置必要的 API 参数和回调地址即可。
对于前端查询支付状态，WooCommerce 提供了 REST API、GraphQL 和 Webhook 三种方式。由于 EdgeOne 提供的 Gatsby 模板使用 GraphQL 进行数据查询，这里以 GraphQL 方式为例：
query GetOrderStatus($id: ID!) { order(id: $id) { status paymentMethod datePaid }}
查询结果示例：
{ "data": { "order": { "status": "completed", "paymentMethod": "paypal", "datePaid": "2024-03-20T10:30:00" } }}
如果你需要了解更多 GraphQL 查询的细节，可以参考 WPGraphQL 文档 和 WooGraphQL 文档。
八、生成静态文件
EdgeOne 提供了基于 Gatsby 的静态站点模板，你可以通过以下命令获取：
git clone –depth 1 –single-branch https://github.com/TencentEdgeOne/pages-templates.git tempmv temp/examples/gatsby-woocommerce-template .rm -rf tempcd gatsby-woocommerce-templatenpm install
现在我来介绍一下项目中的关键配置点。
所有的 GraphQL 查询语句都位于src/queries/PagesQuery.js 文中，包括商品、订单、页面内容和 ACF 字段等查询。如果你需要自定义查询内容，可以在这里修改 GraphQL 查询语句。
支付相关的组件位于src/components/OrderSummary/OrderSummary.js 文中。在调用支付时，会配置以下关键信息：
await checkout({ shipping: customer.shipping, billing: customer.billing, paymentMethod: 'cod',});
这里配置了：
·收货地址信息（shipping）。
·账单地址信息（billing）。
·支付方式（paymentMethod）。
这个支付请求会调用src/api/api.js 文件中的 checkout 对象，执行具体的支付操作。最终的 GraphQL 查询语句位于 fufunctions/commonueries/Checkout.js如果你需要修改支付逻辑，可以在这里进行更改。
如果你需要修改其他信息的接口交互，可以修改functions/common/queries 目下的其他文件中的 GraphQL 语句。
了解了项目的基本结构和关键配置后，让我们来看看如何启动项目。模板的启动非常简单，你只需要设置WP_URL参数指向你的WordPress 地址即可。在部署到云端时，这个参数会作为环境变量配置。现在让我们先在本地验证项目。
在项目根目录创建 .env 文件，填入以下内容：
WP_URL=http://your-wordpress-urlGATSBY_ENV=dev
然后安装依赖并启动 Gatsby 项目，进入本地预览：
npm installgatsby develop && edgeone makers dev –fePort=8000
至此，我们已经完成了 WordPress + WooCommerce 内容管理系统的配置、前端模板的获取和本地环境的验证。接下来，我们只需要将代码部署到 EdgeOne Makers，就可以让你的网站正式上线了。
九、1. 代码发布到 Git
将代码提交到 git 仓库即可完成部署。假设你已经创建了 gatsby-woocommerce-template 项目，并且将当前目录关联到了该项目，使用以下命令提交：
git add .git commit -m "Initial commit"git push origin main
十、2. 项目导入 Makers
提交完成后，如果你已经是 EdgeOne Makers 用户且已关联 GitHub 账户，访问 控制台 部署对应的项目即可。
十一、3. 添加环境变量
点击 gatsby-woocommerce-template 后，在准备部署界面点击“环境变量”，分别配置以下环境变量：
·WP_URL：填入你的 WordPress 站点地址。
·GATSBY_ENV：设置为 production。
配置完成后，单击立即创建，等待部署完成后将显示部署成功界面：
至此，我们已经完成了 WordPress + WooCommerce 方案的完整部署流程。通过这个方案，你可以：
·使用 WordPress + WooCommerce 管理内容和商品，享受其强大的 CMS 和电商功能。
·利用 Gatsby 生成高性能页面，提升访问速度。
·通过 EdgeOne Makers 实现自动化部署，简化运维工作。
·获得全球 CDN 加速，提升用户体验。
十二、更多相关内容
·查看更多 WordPress 集成方案：EdgeOne Makers 提供的 WooCommerce 模板。
·了解 Gatsby 更多功能：Gatsby 产品文档。
·探索 WooCommerce 更多功能：WooCommerce 产品文档。
·自定义网站样式：Gatsby 样式指南。