区块主题（FSE）：theme.json 与块模板
一个判断方法，三秒钟认出来
打开一个主题目录，先看有没有 templates/ 文件夹，里面是不是 .html 文件。
- 有
templates/index.html→ 区块主题（FSE） - 只有
index.php、single.php这些 → 经典主题
我自己的 caogenbj 属于后者：11 个 PHP 文件，一个 .html 模板都没有。
这两类主题的差别，不是”新写法旧写法”的区别，而是整个页面的组装方式换了。
经典主题：结构写在 PHP 里
我现在的首页（简化过）：
<?php get_header(); ?>
<div class="container">
<div class="jumbotron">
<h1>...</h1>
<p>...</p>
</div>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php endwhile; endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>页面的骨架是 HTML 标签，动态部分是 PHP 函数。 想改结构，改 PHP 文件。
区块主题：结构写在 HTML 注释里
同样一个首页，在区块主题里长这样（templates/index.html）：
<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:query {"query":{"perPage":10,"postType":"post"}} -->
<div class="wp-block-query">
<!-- wp:post-template -->
<!-- wp:post-title /-->
<!-- /wp:post-template -->
</div>
<!-- /wp:query -->
</div>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer"} /-->看着像 HTML，其实是“注释包裹的块声明”。WordPress 读这些注释，才知道这里放什么。
所以两个关键区别：
| 经典主题 | 区块主题 | |
|---|---|---|
| 页面结构 | PHP 文件 | templates/*.html |
| 循环写法 | while ( have_posts() ) |
<!-- wp:query --> |
| 改样式的方式 | CSS 文件 | 后台”站点编辑器”可视化调 |
| 页头页脚 | header.php |
parts/header.html |
最本质的区别在最后一行：区块主题的页面结构，用户可以自己在后台改。 不用碰代码。
theme.json 管什么
区块主题必须有一个 theme.json，它是”设计系统的配置文件”：
{
"version": 3,
"settings": {
"color": {
"palette": [
{ "slug": "primary", "color": "#2b6cb0", "name": "主色" }
]
},
"typography": {
"fontSizes": [
{ "slug": "small", "size": "14px", "name": "小" },
{ "slug": "normal", "size": "16px", "name": "正文" },
{ "slug": "large", "size": "22px", "name": "大" }
]
},
"layout": { "contentSize": "760px" }
}
}三个作用：
- 定义调色板和字号——后台编辑器里就出现这些选项，用户只能选你给的颜色，不会乱配；
- 生成 CSS 变量——WordPress 会自动产出
--wp--preset--color--primary这样的变量，你的 CSS 直接用； - 控制布局宽度——
contentSize就是正文最大宽度，不用再在 CSS 里写max-width。
对主题作者来说，theme.json 最大的价值是约束：它让”用户能改的东西”和”不能改的东西”有了明确边界。
四种目录，各放什么
my-theme/
├── style.css ← 必须有（身份证）
├── theme.json ← 设计系统
├── templates/ ← 页面级模板
│ ├── index.html
│ ├── single.html
│ ├── page.html
│ └── archive.html
├── parts/ ← 可复用的区块片段
│ ├── header.html
│ └── footer.html
└── patterns/ ← 预设的区块组合（用户可插入）templates/ 对应经典主题的 single.php、page.php；parts/ 对应 header.php、footer.php；patterns/ 是新增的东西，经典主题里没有对应物。
模板层级的规则还是一样的：WordPress 先找 single-{post_type}.html，再找 single.html，再找 index.html。卷一讲的那套层级逻辑，在这里依然成立，只是后缀从 .php 变成了 .html。
混合主题：两者可以共存
这是很多人不知道的：一个主题可以同时有 index.php 和 templates/index.html。
WordPress 的规则是：如果 templates/ 里有对应模板，就用块模板；没有，就退回 PHP 模板。
所以你可以：
- 文章页继续用
single.php（因为有复杂的自定义逻辑）； - 首页改成
templates/front-page.html（让用户在后台调）；
对老站来说，这是最现实的迁移路径——不是一次性全换，而是一页一页换。
我的判断：老站别急着转
说结论：我这个站短期内不会转区块主题。 三个理由：
一、我的页面结构是”算出来的”，不是”排出来的”。
比如分类页的标题要拼上分类名，文章页的相关文章要按标签查。这些逻辑区块系统表达起来很别扭——要么写自定义块，要么还是得回到 PHP。
二、转过去之后，我原来那套 SEO 代码要重写。
我现在的 head-seo.php 是挂在 wp_head 上手动输出的。区块主题有自己的 head 生成机制，硬塞进去容易冲突。
三、收益不明显。
区块主题最大的好处是”用户能在后台改页面”。我这个站只有我一个人维护，这个好处对我等于零。
什么情况下该用
反过来说，三种情况值得：
- 新建站点，而且以后要交给不懂代码的人维护。 比如给学校、给店里做的站；
- 页面以”排版”为主，逻辑简单。 落地页、介绍页、作品集；
- 想用 WordPress 的块生态。 很多新插件现在只出块，不出短代码了。
一句话：页面结构要”算”的，用经典主题；页面结构要”排”的，用区块主题。
小结
一句话记住：区块主题把”页面结构”从 PHP 搬到了 HTML 注释里，代价是复杂逻辑更难写，收益是用户能可视化编辑。老站不急，新站可以考虑。
下一篇聊安全：三个最常见的漏洞，以及主题作者该在哪一层拦。