WordPress主题模板结构差异：传统主题 vs. FSE主题

本文旨在深入探讨WordPress传统主题与FSE（全站编辑）主题在模板结构上的关键差异。通过对比文件目录、模板类型和加载机制，帮助开发者理解两种主题类型的本质区别，掌握FSE主题的开发要点，从而更好地利用WordPress的强大功能构建灵活、现代化的网站。

WordPress主题的演进带来了全新的全站编辑（FSE）主题，它与传统的PHP模板主题在结构和工作方式上存在显著差异。理解这些差异对于开发者至关重要，以便能够有效地构建和维护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 目录则包含完整的页面模板。

相比之下，FSE主题的核心在于使用HTML文件和区块来构建整个网站。一个简单的FSE主题结构可能如下所示：

├── theme-name
│ ├── block-template-parts
│ │ ├── header.html // 页眉区块模板
│ │ ├── footer.html // 页脚区块模板
│ ├── block-templates
│ │ ├── index.html // 首页模板
│ ├── index.php // (可选) PHP回退文件
│ ├── style.css // 样式表
│ ├── theme.json // 全局样式配置
│ ├── functions.php // (可选) 主题功能

关键区别在于，FSE主题使用 block-templates 和 block-template-parts 目录来存储HTML模板。theme.json 文件用于定义网站的全局样式设置，而 functions.php 文件则用于注册和管理自定义区块或其他主题功能。

模板层级与回退机制

FSE主题仍然遵循WordPress的模板层级结构。这意味着WordPress会根据请求的页面类型（例如，首页、文章页、存档页）查找相应的HTML模板。例如，index.html 用于首页，single.html 用于单个文章页，archive.html 用于存档页。

一个重要的特性是，如果WordPress无法找到对应的HTML模板，它会尝试查找PHP版本的模板作为回退。例如，如果 index.html 不存在，WordPress将尝试加载 index.php。这为开发者提供了灵活性，允许他们逐步将PHP模板迁移到HTML区块模板。

猫眼课题宝

5分钟定创新选题，3步生成高质量标书！

85

查看详情

theme.json：全局样式配置

theme.json 文件是FSE主题的核心组成部分，它允许开发者定义网站的全局样式设置，例如颜色、排版和间距。这使得在整个网站上保持一致的视觉风格变得更加容易。

以下是一个简单的 theme.json 示例：

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "primary",
          "color": "#007bff",
          "name": "Primary"
        },
        {
          "slug": "secondary",
          "color": "#6c757d",
          "name": "Secondary"
        }
      ]
    },
    "typography": {
      "fontSizes": [
        {
          "slug": "small",
          "size": "14px",
          "name": "Small"
        },
        {
          "slug": "normal",
          "size": "16px",
          "name": "Normal"
        }
      ]
    }
  }
}

在这个示例中，我们定义了两种颜色（Primary和Secondary）和两种字体大小（Small和Normal）。这些设置可以在区块编辑器中使用，从而允许用户轻松地自定义网站的样式。

总结与注意事项

FSE主题代表了WordPress主题开发的重大转变，它将网站构建的重点从PHP模板转移到HTML区块模板。通过使用 theme.json 文件进行全局样式配置，开发者可以更轻松地创建一致且可定制的网站。

以下是一些关键的注意事项：

• 理解模板层级： FSE主题仍然遵循WordPress的模板层级结构。
• 利用 theme.json： 使用 theme.json 文件定义全局样式设置，以保持网站风格的一致性。
• 掌握区块开发： 熟悉区块开发是构建FSE主题的关键。
• 逐步迁移： 可以逐步将PHP模板迁移到HTML区块模板。

通过掌握这些概念，开发者可以充分利用FSE主题的强大功能，构建灵活、现代化的WordPress网站。

以上就是WordPress主题模板结构差异：传统主题 vs. FSE主题的详细内容，更多请关注php中文网其它相关文章！