把 WordPress 变成纯后端 API 服务:结合 Vue 或 React 打造前后端分离的单页应用网站
传统的 WordPress 开发模式是后端渲染 HTML 直接输出给浏览器。这种模式对 SEO 友好、部署简单,但在需要高度交互、复杂前端状态管理、或者希望用现代前端框架构建用户体验时,显得有些笨重。
WordPress REST API 的出现改变了这一切。它允许你将 WordPress 仅作为内容管理和数据存储的后端,通过标准 HTTP 请求获取 JSON 格式的数据,然后用 Vue、React 或任何前端框架完全接管前端界面。这种模式被称为前后端分离。
WordPress REST API 默认提供了一组核心接口。基础接口包括:
-
/wp-json/wp/v2/posts:获取文章列表,支持分页、过滤、排序 -
/wp-json/wp/v2/pages/{id}:获取单页面内容 -
/wp-json/wp/v2/categories:获取分类列表 -
/wp-json/wp/v2/media/{id}:获取媒体文件信息
对于自定义文章类型,只要注册时将 show_in_rest 参数设为 true,它们也会自动出现在 API 中。例如:
register_post_type('product', array(
'public' => true,
'show_in_rest' => true,
// 其他参数
));
有了 API 接口后,前端开发者就可以用 JavaScript 发起请求。以 Vue 为例,通过 fetch 或 axios 请求 https://你的网站.com/wp-json/wp/v2/posts,拿到数据后渲染到组件中。路由也完全由前端控制,用户点击链接时不再刷新整个页面,实现了单页应用的体验。
REST API 的高级用法包括:
-
通过
register_rest_field扩展 API 返回的字段,比如给文章接口增加作者头像、评论数量或自定义字段值。 -
通过
register_rest_route注册自定义接口,实现业务逻辑,比如“获取近期最热销的产品”。 -
使用 JWT Authentication 插件实现 API 用户登录与权限验证,让前端可以处理登录状态、购物车、个人资料等私有数据。
-
通过
rest_post_query等过滤器修改 API 查询参数,实现更灵活的筛选。
前后端分离的缺点也是存在的:多了一层前端构建流程、对 SEO 不够友好(虽然可以通过 Nuxt 或 Next.js 做服务端渲染解决)、需要额外处理 CORS 跨域问题。但对于后台管理系统、单页应用型官网、移动端 APP 后端等场景,WordPress + REST API + 前端框架的组合是非常成熟的方案。

