WordPress 无头（Headless）配置实战：把 WP 当纯后端，前端随便选

云上的幻象2026-09-217 分钟阅读2,713 字110

100%

WordPress 无头（Headless）配置实战：把 WP 当纯后端，前端随便选

一句话结论

WordPress 无头（Headless）就是把”后台内容管理”和”前台页面渲染”彻底拆开——WordPress 只负责存内容和提供 API，页面由 Next.js 、 Nuxt 等现代前端框架渲染，从而获得更快的加载速度和更灵活的部署，同时保留你熟悉的 WP 编辑体验。

什么场景适合上无头

无头不是银弹。下面这些情况收益最明显：

团队已有 React / Vue 技术栈，想用 WP 当”内容中台”；
需要把同一份内容同时喂给网站、 App 、小程序多个前端；
对首屏速度和 SEO 要求高，想用 SSR/SSG（服务端/静态渲染）；
内容编辑用 WP 后台，前端交给工程团队独立迭代。

如果只是做个普通企业站、博客，传统主题方案（如本站的 theme.json 配置）更简单省心，不必硬上无头。

六步把 WordPress 配成纯后端

在子域名（如 cms.example.com）装一份干净的 WordPress，只当内容后台，主题可以用极简空白主题。

关闭前台渲染：用插件（Headless Mode / Disable Frontend）或 functions.php 把非 /wp-admin 、非 /wp-json 的请求重定向到后台。

确认 REST API 默认已开启，测试 /wp-json/wp/v2/posts 能拿到数据；需要更灵活查询再装 WPGraphQL 。

配置 CORS，只允许你的前端域名跨域访问 API（见下方代码）。

用 Next.js / Nuxt 等框架搭前端，通过 fetch 或 Apollo 拉取 WP 内容，配合 SSG/ISR 做缓存。

（可选）安装官方 Headless 插件，获得预览跳转、菜单/站点设置接口与缓存失效回调。

关键代码：关闭前台 + 配置 CORS

把下面两段放进主题的 functions.php（或 MU 插件），即可隐藏前台并放开指定域名的跨域访问：

// 1) 非后台、非 REST 请求一律跳后台
add_action( 'template_redirect', function () {
    if ( ! is_admin() && ! ( defined( 'REST_REQUEST' ) && REST_REQUEST ) ) {
        wp_safe_redirect( admin_url() );
        exit;
    }
} );

// 2) 仅放行前端域名的 CORS
add_filter( 'rest_pre_serve_request', function ( $response ) {
    $allowed = array( 'https://www.yourfrontend.com' );
    $origin  = isset( $_SERVER['HTTP_ORIGIN'] ) ? sanitize_url( wp_unslash( $_SERVER['HTTP_ORIGIN'] ) ) : '';
    if ( in_array( $origin, $allowed, true ) ) {
        $response->header( 'Access-Control-Allow-Origin', $origin );
        $response->header( 'Access-Control-Allow-Methods', 'GET, POST, OPTIONS' );
    }
    return $response;
} );

REST API 还是 GraphQL？

REST API 零插件、上手快，适合常规内容读取；WPGraphQL 查询更灵活、能精确指定字段、减少冗余传输，适合复杂前端。社区主流组合是 “WordPress + WPGraphQL + Next.js”。

前端怎么取数据（Next.js 示例）

async function getPosts() {
  const res = await fetch( 'https://cms.example.com/wp-json/wp/v2/posts', {
    next: { revalidate: 60 }, // ISR：每 60 秒重新验证
  } );
  if ( ! res.ok ) throw new Error( 'Failed to fetch posts' );
  return res.json();
}

查看官方 Headless 插件说明