WordPress 站点编辑器 FSE 详解：块主题怎么用、要不要换

引言：外观菜单里多了一个”编辑器”

WordPress 5.9 之后，后台”外观”下多了一个”编辑器（beta）”入口，点进去是一个全屏的编辑界面，可以直接改页头、页脚、首页模板——不用再改 PHP 文件。

这就是 FSE（Full Site Editing，全站编辑）。Twenty Twenty-Two 之后的所有官方主题都是块主题（Block Theme），走的就是这套机制。

但对使用经典主题（Astra、GeneratePress、OceanWP 之类）的站点来说，这个入口要么不存在，要么点进去提示”当前主题不支持”。要不要为了它换主题，是个需要算账的决定。

原理分析：FSE 到底改了什么

传统主题的结构是 PHP 模板层级：

index.php → single.php → page.php → header.php / footer.php / sidebar.php

要改页头，就得改 header.php，或者靠主题的 Customizer 选项、或者靠钩子。

块主题的结构是 HTML 模板文件 + theme.json：

templates/index.html
templates/single.html
templates/page.html
parts/header.html
parts/footer.html
theme.json

这些 .html 文件里全是区块标记：

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
  <!-- wp:query {"queryId":0,"query":{"perPage":10,"postType":"post"}} -->
    <!-- wp:post-template -->
      <!-- wp:post-title {"isLink":true} /-->
      <!-- wp:post-excerpt /-->
    <!-- /wp:post-template -->
  <!-- /wp:query -->
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

关键变化有三点：

1. 模板变成可编辑内容：你在站点编辑器里改了 parts/header.html，改动会写进数据库（存为 wp_template_part 类型的文章），覆盖主题文件。
2. 样式由 theme.json 统一声明：配色、字号、间距、布局宽度都在这里定义，编辑器的选项全部来自它。
3. Customizer 基本废弃：块主题不依赖 Customizer，所有设置走”外观 → 编辑器”或全局样式界面。

判断一个主题是不是块主题：看主题根目录有没有 theme.json 和 templates/index.html。

ls wp-content/themes/你的主题/theme.json wp-content/themes/你的主题/templates/

保姆级实操

一、theme.json 基础配置

theme.json 是块主题的”总开关”。最小可用版本：

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "720px",
      "wideSize": "1200px"
    },
    "color": {
      "palette": [
        { "slug": "base",    "color": "#ffffff", "name": "底色" },
        { "slug": "contrast","color": "#1a1a1a", "name": "主文字" },
        { "slug": "primary", "color": "#c0392b", "name": "主色" },
        { "slug": "accent",  "color": "#f5f5f5", "name": "浅灰" }
      ]
    },
    "typography": {
      "fontSizes": [
        { "slug": "small",  "size": "14px", "name": "小" },
        { "slug": "medium", "size": "18px", "name": "中" },
        { "slug": "large",  "size": "28px", "name": "大" },
        { "slug": "x-large","size": "42px", "name": "特大" }
      ]
    },
    "spacing": {
      "units": [ "px", "rem", "em", "%" ]
    }
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--base)",
      "text": "var(--wp--preset--color--contrast)"
    },
    "typography": {
      "fontSize": "18px",
      "lineHeight": "1.7"
    }
  },
  "templateParts": [
    { "name": "header", "title": "页头", "area": "header" },
    { "name": "footer", "title": "页脚", "area": "footer" }
  ]
}

appearanceTools: true 是个开关合集，一次性打开边框、间距、链接颜色等一堆设置项，新手建议直接开。

二、在站点编辑器里改页头页脚

外观 → 编辑器 → 点左上角 WordPress 图标 → 选”模板部件” → 选页头 → 直接用区块编辑 → 保存。

保存后改动存在数据库：

wp post list --post_type=wp_template_part --fields=ID,post_name,post_status

三、重置到主题默认（改动搞砸了）

站点编辑器右上角三点 → “重置”，或者删除数据库里的自定义版本：

wp post delete $(wp post list --post_type=wp_template_part --format=ids) --force
wp post delete $(wp post list --post_type=wp_template --format=ids) --force

删掉后回退到主题 .html 文件的默认状态。

四、创建新模板

站点编辑器 → 模板 → 新增。可以为某个分类、某个页面创建专属模板。

等价于在主题里建 templates/page-about.html。

五、经典主题能不能用站点编辑器

不能全站用，但可以用一部分。WordPress 6.x 允许经典主题也启用”区块模板部件”：

// 主题 functions.php
add_theme_support( 'block-template-parts' );

不过更实用的做法是：经典主题继续用 Customizer + 页面构建器，把 FSE 当作未来方向。

六、要不要换块主题（决策清单）

建议换的场景：

• 新站，没有历史包袱；
• 内容以文章为主，布局简单；
• 想减少 PHP 维护，让非技术人员能改页头页脚；
• 站点结构简单，不需要复杂的动态模板。

不建议换的场景：

• 用了大量主题钩子、子主题改了大量 PHP；
• 依赖 Customizer 里的大量设置（换主题后全部失效，要重新配）；
• 用页面构建器做的复杂落地页；
• 有自定义文章类型和复杂归档模板；
• 商业主题（换主题等于重做）。

推荐的成熟块主题：Twenty Twenty-Four（官方）、Blocksy（兼容性好，介于两者之间）、Kadence（也有块主题版本）、Ollie、Frost。

常见踩坑与失败案例

1. 案例一：某站换成 Twenty Twenty-Four 后发现原来的 Customizer 设置（logo、配色、菜单）全没了，前台一片默认样式。换块主题 = 重新配置外观，不是无缝迁移。
2. 案例二：在站点编辑器里改了页头，换主题后改动丢失。因为改动存在数据库里绑定当前主题的 wp_template_part，换主题后 slug 对不上就失效。重要模板改动建议写进主题文件而不是数据库。
3. theme.json 改了没生效：浏览器缓存 + 对象缓存。清 wp cache flush，并在站点编辑器里点”重置全局样式”。
4. 菜单不显示：块主题用”导航区块”，不是经典的小工具菜单。外观 → 编辑器 → 页头模板部件 → 插入导航区块 → 选择菜单。
5. 案例三：某站在块主题里启用了旧版的”菜单小工具”，前台样式完全错乱。块主题下小工具基本不再使用，页脚也要用区块重写。
6. wp_template 和 wp_template_part 在数据库里越堆越多：每次改动生成新版本。定期清理：

bash
wp post delete $(wp post list --post_type=wp_template_part --post_status=draft --format=ids) --force

7. 中文主题名和 slug：templateParts 的 name 要用英文 slug，中文会导致模板部件找不到（尤其是 Windows 服务器上的编码问题）。

总结

FSE 的核心变化是把模板从 PHP 文件变成可编辑的区块内容，样式统一由 theme.json 声明。它的好处是非技术人员能改页头页脚、样式系统统一；代价是 Customizer 生态断裂、老主题和页面构建器的积累全部作废。务实的做法是：新站可以考虑块主题，老站除非重构否则别动；如果要用，先在子站或 staging 上跑一遍完整迁移（菜单、小工具、自定义模板、SEO 设置都要重新配）。另外记住，站点编辑器的改动存在数据库里，换主题会丢——重要的模板改动请写进主题文件。