WordPress传统主题与FSE主题模板结构差异详解

本文旨在深入解析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主题在模板结构上的主要差异：

Waymark

Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。

79

查看详情

回退机制

值得注意的是，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中文网其它相关文章！