本文旨在深入解析WordPress传统主题与Full Site Editing (FSE) 主题在模板结构上的关键差异。我们将详细对比两种主题的目录结构、文件类型以及模板层级关系，帮助开发者理解FSE主题的工作原理，并掌握如何利用块模板构建现代化的WordPress站点。
WordPress自5.9版本引入了Full Site Editing (FSE) 功能，这标志着WordPress主题开发进入了一个全新的时代。FSE主题与传统主题在模板结构上存在显著差异。理解这些差异对于开发者至关重要，有助于他们更好地构建和维护WordPress网站。
传统主题模板结构
在传统WordPress主题中，模板主要由PHP文件构成，并遵循一定的模板层级结构。常见的目录结构如下：
├── theme-name │ ├── template-parts │ │ ├── content.php // 文章内容模板 │ ├── templates │ │ ├── template-cover.php // 封面模板 │ │ ├── template-full-width.php // 全宽模板 │ ├── index.php // 首页模板 │ ├── style.css // 样式文件
- template-parts: 存放可重用的PHP代码片段，用于构建页面不同部分，如文章内容、评论等。
- templates: 存放自定义页面模板，允许用户在后台选择不同的页面布局。
- index.php: 作为默认的首页模板，当WordPress找不到更具体的模板时，会使用该文件。
- style.css: 主题的样式表，用于控制网站的视觉呈现。
传统主题依赖PHP代码来动态生成HTML内容，并通过WordPress的模板层级结构来确定使用哪个模板文件。
FSE主题模板结构
FSE主题则采用基于块的模板，主要使用HTML文件和theme.json配置文件。典型的FSE主题目录结构如下：
├── theme-name │ ├── block-template-parts │ │ ├── header.html // 头部模板 │ │ ├── footer.html // 底部模板 │ ├── block-templates │ │ ├── index.html // 首页模板 │ ├── index.php // (可选) PHP 回退模板 │ ├── style.css // 样式文件 │ ├── theme.json // 主题配置
- block-template-parts: 存放可重用的HTML代码片段，用于构建页面的头部、底部等部分。
- block-templates: 存放HTML模板文件，定义了不同页面（如首页、文章页、归档页）的布局结构。
- index.html: 首页的HTML模板。
- index.php: FSE主题通常不需要index.php，但为了兼容性，可以保留一个简单的index.php作为回退方案。
- style.css: 主题的样式表。
- theme.json: 用于配置主题的全局样式、颜色、排版等，是FSE主题的核心配置文件。
FSE主题使用HTML文件定义模板结构，并通过块编辑器在后台进行可视化编辑。theme.json文件则允许开发者以声明式的方式控制主题的样式和行为。
关键差异总结
以下表格总结了传统主题和FSE主题在模板结构上的主要差异：
| 特性 | 传统主题 | FSE主题 |
|---|---|---|
| 模板文件类型 | PHP | HTML |
| 模板目录 | template-parts, templates | block-template-parts, block-templates |
| 样式配置 | style.css | style.css, theme.json |
| 编辑方式 | 代码编辑 | 块编辑器可视化编辑 |
| 模板层级 | 遵循WordPress传统模板层级 | 遵循WordPress模板层级，但优先查找HTML模板 |
| 核心理念 | 基于PHP的动态模板 | 基于块的静态模板，通过theme.json控制样式和行为 |
回退机制
值得注意的是，FSE主题也支持PHP回退机制。如果WordPress在block-templates目录中找不到对应的HTML模板，它会尝试查找同名的PHP文件。这为开发者提供了一种混合使用PHP和HTML模板的灵活性。
示例：简单的FSE主题
一个最简单的FSE主题可能包含以下文件：
theme
|__ style.css
|__ theme.json
|__ functions.php // (可选) 用于添加自定义功能
|__ block-templates
|__ index.html
|__ single.html
|__ archive.html
|__ block-template-parts
|__ header.html
|__ footer.html
index.html 可能包含以下内容：
<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:query -->
<!-- wp:post-template -->
<!-- wp:post-title {"level":3} /-->
<!-- wp:post-excerpt /-->
<!-- /wp:post-template -->
<!-- /wp:query -->
<!-- wp:template-part {"slug":"footer"} /-->
这段代码使用了块语法，引用了头部和底部模板部件，并使用查询块来显示文章列表。
注意事项
- FSE主题需要WordPress 5.9或更高版本。
- theme.json文件对于FSE主题至关重要，它定义了主题的全局样式和行为。
- 理解WordPress的模板层级结构对于创建FSE主题仍然很重要。
总结
FSE主题代表了WordPress主题开发的未来。通过使用块模板和theme.json配置文件，开发者可以更灵活、更高效地构建现代化的WordPress网站。理解传统主题和FSE主题之间的差异是掌握WordPress开发的必要一步。
以上就是WordPress传统主题与FSE主题模板结构差异详解的详细内容，更多请关注php中文网其它相关文章！