本文旨在深入剖析WordPress传统主题与Full Site Editing (FSE) 主题在模板结构上的关键差异。通过对比文件目录、模板层级关系以及文件类型，帮助开发者理解FSE主题的工作原理，掌握构建现代WordPress主题的方法，并了解在FSE主题中如何利用HTML模板和`theme.json`文件进行样式控制。
WordPress的Full Site Editing (FSE) 功能带来了主题开发的重大变革。理解传统主题与FSE主题之间的模板结构差异，是掌握现代WordPress主题开发的关键。本文将详细对比这两种主题的模板结构，帮助开发者更好地理解和应用FSE技术。
传统主题模板结构
传统的WordPress主题主要依赖PHP文件来定义页面结构和内容。其模板文件通常遵循WordPress的模板层级结构，例如index.php、single.php、archive.php等。此外，主题还会包含一些模板部件（template parts），如header.php、footer.php等，用于在多个页面中复用代码。
以下是一个典型的传统主题目录结构示例：
├── theme-name │ ├── template-parts │ │ ├── content.php │ ├── templates │ │ ├── template-cover.php │ │ ├── template-full-width.php │ ├── index.php │ ├── style.css │ ├── functions.php
- index.php: 网站首页的模板文件。
- single.php: 文章页面的模板文件。
- archive.php: 分类、标签等归档页面的模板文件。
- template-parts/content.php: 用于显示文章内容的模板部件，可在多个页面中调用。
- templates/template-cover.php 和 templates/template-full-width.php: 自定义页面模板。
- style.css: 主题的样式表文件。
- functions.php: 主题的功能文件，用于添加自定义功能和钩子。
FSE主题模板结构
FSE主题则采用基于区块（Block）的编辑方式，使用HTML文件作为模板，并通过theme.json文件来定义主题的样式和设置。FSE主题同样遵循WordPress的模板层级结构，但其模板文件存储在block-templates和block-template-parts目录下。
以下是一个简单的FSE主题目录结构示例：
├── theme-name │ ├── block-template-parts │ │ ├── header.html │ │ ├── footer.html │ ├── block-templates │ │ ├── index.html │ ├── index.php │ ├── style.css │ ├── theme.json │ ├── functions.php
- block-templates/index.html: 网站首页的模板文件，使用HTML和区块标记定义页面结构。
- block-templates/single.html: 文章页面的模板文件。
- block-templates/archive.html: 归档页面的模板文件。
- block-template-parts/header.html: 页眉模板部件。
- block-template-parts/footer.html: 页脚模板部件。
- style.css: 尽管FSE主题主要依赖theme.json进行样式定义，但仍然可以包含style.css文件，用于添加额外的CSS样式。
- theme.json: 用于定义主题的全局样式、区块样式和设置。
- functions.php: 仍然可以用于添加自定义功能和钩子，但其作用在FSE主题中有所减弱。
关键差异总结
- 模板文件类型： 传统主题使用PHP文件作为模板，而FSE主题使用HTML文件。
- 模板部件： 传统主题的模板部件通常存储在template-parts目录下，而FSE主题的模板部件存储在block-template-parts目录下。
- 样式定义： 传统主题主要通过style.css文件定义样式，而FSE主题则主要通过theme.json文件定义样式。
- 编辑方式： 传统主题主要通过代码编辑来修改模板，而FSE主题则可以通过区块编辑器进行可视化编辑。
theme.json 的作用
theme.json 文件是 FSE 主题的核心配置文件，它允许开发者以声明式的方式定义主题的样式和设置，而无需编写大量的 CSS 代码。通过 theme.json，可以控制以下方面：
- 全局样式： 定义网站的全局字体、颜色、间距等样式。
- 区块样式： 定义各个区块的默认样式，例如按钮、标题、段落等。
- 设置： 启用或禁用某些功能，例如自定义颜色、字体大小等。
以下是一个简单的 theme.json 文件示例：
{
"version": 2,
"settings": {
"appearanceTools": true,
"color": {
"palette": [
{
"color": "#ffffff",
"name": "White",
"slug": "white"
},
{
"color": "#000000",
"name": "Black",
"slug": "black"
}
]
},
"typography": {
"fontFamilies": [
{
"fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
"name": "System Font",
"slug": "system-font"
}
]
}
},
"styles": {
"elements": {
"link": {
"color": {
"text": "#007bff"
}
}
}
}
}模板层级关系
无论是传统主题还是FSE主题，都遵循WordPress的模板层级关系。这意味着WordPress会根据请求的页面类型，按照一定的顺序查找对应的模板文件。例如，当请求一个文章页面时，WordPress会首先查找single.php或single.html文件，如果找不到，则会查找singular.php或singular.html文件，依此类推。
理解模板层级关系对于主题开发至关重要，可以帮助开发者更好地组织模板文件，并确保WordPress能够正确地加载所需的模板。
总结与注意事项
FSE主题的出现为WordPress主题开发带来了新的可能性。通过使用HTML模板和theme.json文件，开发者可以更加灵活地控制主题的样式和结构，并实现更加现代化的网站设计。
注意事项：
- FSE主题需要WordPress 5.9或更高版本才能正常运行。
- theme.json文件的语法需要遵循JSON格式，否则可能会导致主题无法正常加载。
- 在开发FSE主题时，建议参考WordPress官方文档，了解最新的API和最佳实践。
- 如果WordPress找不到对应的HTML模板，它会尝试查找对应的PHP模板作为备选方案，因此可以混合使用HTML和PHP模板。
通过本文的介绍，相信读者已经对WordPress传统主题与FSE主题的模板结构差异有了更深入的了解。掌握这些知识，将有助于开发者更好地进行WordPress主题开发，并构建出更加优秀和现代化的网站。
