边缘开发者平台

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
- 排障指南
- 常见问题
- 联系我们
- 产品动态

当前为国际站中文文档，如需访问中国站文档，请点击这里

WordPress 集成

WordPress作为全球最流行的内容管理系统，不仅提供了强大的内容管理功能，还支持通过REST API将内容管理与展示层分离，使其能够作为无头CMS（Headless CMS）使用。这种架构模式配合静态站点生成器（Static Site Generator），可以为网站提供更好的性能和更灵活的展示方式。
﻿
概览
本文主要介绍如何将WordPress作为无头CMS，配合静态站点生成器来构建高性能的网站。在这个架构中，WordPress负责内容的创建和管理，而静态站点生成器则负责将内容转换为高性能的静态页面。目前主流的静态站点生成器包括Hexo和Gatsby等，它们各有特点：Hexo以其简单易用和丰富的主题生态受到广泛欢迎，而Gatsby则提供了更强大的数据获取和构建能力。考虑到大多数用户的需求，本文将以Hexo为例，详细介绍如何实现WordPress与静态站点生成器的集成，以及如何通过EdgeOne Pages进行部署和加速。
﻿
快速入门
EdgeOne提供了开箱即用的WordPress + Hexo集成方案，您可以直接访问模版，一键部署您的网站。部署完成后，只需修改WordPress数据源配置，即可让站点显示您在WordPress中配置的内容。如果您想在本地预览和调试，也可以从GitHub下载模板到本地。
WordPress集成主要包含以下三个步骤：配置WordPress作为数据源、使用Hexo生成静态页面、部署到EdgeOne Pages。下面将详细介绍每个步骤的具体操作。
WordPress配置
WordPress支持两种部署方式：WordPress.com托管和自托管。两种方式在架构原理上是一致的，区别仅在于部署位置。下面我们以WordPress.com托管为例，详细介绍集成流程。
﻿
1、注册WordPress.com账号
通过访问 https://wordpress.com/start/account/user-social 完成邮箱注册。
2、选择托管方案
WordPress.com提供多种托管方案，主要区别在于API访问权限、插件支持和存储空间等。用户可根据自身需求选择合适的方案。
Personal：基础API访问，6GB存储空间。
Premium：完整API访问，13GB存储空间。
Business及以上：支持自定义插件，200GB及以上存储空间。
由于我们仅将WordPress作为数据源和内容管理工具，不同方案在架构集成方式上基本一致。WordPress REST API v2提供了更完善的端点、更好的性能优化、更丰富的功能支持，以及更好的向后兼容性，是目前最广泛使用的版本。考虑到大多数WordPress用户选择Business方案，且该方案支持GraphQL数据查询模式，以下以Business方案为例，讲解如何将WordPress作为无头CMS与前端框架进行集成。
3、配置站点基本信息
在WordPress后台完成站点标题、描述等基本信息的配置。
安装配置WPGraphQL插件，使数据接口支持GraphQL查询。
﻿
4、准备数据内容
为了测试数据获取功能，您需要创建一些基础内容：
创建几篇示例文章（Posts）
设置文章分类（Categories）
添加文章标签（Tags）
这些内容将用于后续测试数据同步和展示功能。建议创建3-5篇包含不同分类和标签的文章，以便充分测试各项功能。下图展示了创建文章和设置分类标签的界面：
﻿
完成以上配置后，WordPress将作为我们的数据源，提供REST API接口供前端框架调用。
5、测试数据请求
在Business版本中，我们使用WordPress REST API v2接口获取数据。通过以下地址可以访问各类数据：
Posts: https://your-site.com/wp-json/wp/v2/posts﻿
Categories: https://your-site.com/wp-json/wp/v2/categories﻿
Tags: https://your-site.com/wp-json/wp/v2/tags﻿
以获取文章列表为例，v2版本返回的数据格式如下：
[
  {
    "id": 1,
    "date": "2024-03-20T10:00:00",
    "title": {
      "rendered": "Hello World"
    },
    "content": {
      "rendered": "This is my first post!",
      "protected": false
    },
    "excerpt": {
      "rendered": "This is my first post!"
    },
    "featured_media": 0,
    "categories": [1],
    "tags": [1],
    "_links": {
      "self": [{"href": "https://your-site.com/wp-json/wp/v2/posts/1"}],
      "author": [{"href": "https://your-site.com/wp-json/wp/v2/users/1"}],
      "categories": [{"href": "https://your-site.com/wp-json/wp/v2/categories/1"}],
      "tags": [{"href": "https://your-site.com/wp-json/wp/v2/tags/1"}]
    }
  }
]
请访问v2的posts接口进行，如果返回的数据格式与上述示例一致，则表示接口验证正常。后续我们可以通过编辑posts、categories、tags等数据来维护站点的内容。
6、配置API访问
在WordPress后台配置REST API访问权限和CORS策略，确保前端应用可以安全地访问数据。对于WordPress.com托管的站点，需要在站点设置中配置允许访问的域名。具体步骤如下：
1. 点击左侧菜单的"设置"（Settings）
2. 选择"常规"（General）选项
3. 在"WordPress地址"和"站点地址"中确保填写了正确的域名
4. 点击"保存更改"按钮
完成以上设置后，REST API将自动启用，您可以通过访问 https://your-site.com/wp-json 来验证API是否正常工作。
生成静态文件
在开始生成静态页面之前，我们需要先了解Hexo的内容渲染规则。如果您对Hexo的内容管理规范不熟悉，可以参考Hexo官方文档了解更多详情。
﻿
我们的模板（wordpress-hexo-template）已经实现了WordPress REST API数据的接收和转换，能够自动将WordPress的内容转换为Hexo可用的格式。首先，我们需要下载模板文件到本地。
1、获取模板
# 创建目录并初始化git仓库
mkdir wordpress-hexo-template && cd wordpress-hexo-template
git init
# 添加远程仓库
git remote add origin https://github.com/TencentEdgeOne/pages-templates.git
# 启用sparse-checkout并设置只获取Hexo模板
git sparse-checkout set examples/wordpress-hexo-template
# 拉取内容
git pull origin main
# 移动文件到当前目录
mv examples/wordpress-hexo-template/* .
rm -rf examples
2、环境准备
本模板基于Hexo框架开发，需要确保以下环境：
Node.js 14.0 或更高版本
npm 6.0 或更高版本
确认环境满足要求后，首先需要安装项目依赖：
# 安装依赖
npm install
安装完成后，我们就可以开始同步WordPress的内容并启动开发服务器：
# 配置WordPress数据源并启动开发服务器
# 将 https://your.site.url 替换为你的WordPress站点地址
# 例如：https://myblog.wordpress.com
# 注意：无需添加 /wp-json/wp/v2，脚本会自动补全API路径
WP_URL=https://your.site.url node scripts/wp-sync.js
这个命令会：
从WordPress获取文章内容
将内容转换为Hexo可用的格式
启动本地开发服务器预览效果
执行完同步命令后，请检查 source/_posts 目录，查看是否已生成对应的Markdown文件列表。如果能看到WordPress中的文章都已转换为Markdown文件，则说明数据同步成功。
﻿
接下来，请检查以下文件是否已正确生成：
source/categories.json：确认WordPress的分类数据是否已同步
source/tags.json：确认WordPress的标签数据是否已同步
如果以上文件都已正确生成，说明环境准备已完成，可以继续进行下一步操作。
3、打包静态文件
首先，让我们启动本地预览服务器来查看效果：
hexo server
执行后，在浏览器中访问 http://localhost:4000，你将看到类似下图的预览效果：
﻿
预览效果确认无误后，我们就可以生成静态文件了：
hexo generate
执行完成后，将在项目根目录下生成 public 文件夹，其中包含了所有静态文件。
部署到EdgeOne Pages
1、代码发布到 Git
将代码提交到git仓库即可完成部署。假设你已经创建了 wordpress-hexo-template 项目，并且将当前目录关联到了该项目，使用以下命令提交：
git add .
git commit -m "Initial commit"
git push origin main
﻿
2、项目导入 Pages
提交完成后，如果你已经是EdgeOne Pages用户且已关联GitHub账户，访问 控制台 部署对应的项目即可。
﻿
﻿
3、添加环境变量
点击部署blog-with-retypeset-and-contentful后，在准备部署界面点击"Environment Variables"，分别配置以下环境变量：
WP_URL：填入您的WordPress地址。
﻿
点击"Start Deployment"按钮，等待部署完成后将显示部署成功界面：
﻿
至此，我们已经完成了Hexo方案的完整部署流程。通过这个方案，你可以：
使用WordPress管理内容，享受其强大的内容管理功能
利用Hexo生成静态文件，获得极致的访问速度
通过EdgeOne Pages实现自动化部署，简化运维工作
获得全球CDN加速，提升用户体验
﻿
更多相关内容
查看更多WordPress集成方案：EdgeOne Pages提供的WordPress模板﻿
切换Hexo多主题风格：Hexo官方主题列表﻿