在 入门 章节中，您学习了主题的基本概念以及如何无需代码即可运行主题。对于简单的主题来说，无需代码的方法是完全没问题的，但一旦您需要添加用户界面中无法实现的功能，就需要开始直接编写代码了。

自定义主题代码的第一步是在您喜欢的文件编辑器中打开主题。您可以使用任何主题来完成此操作，甚至可以使用您在入门章节中创建的主题。

了解其他人正在做的事情是个好主意，因此请随时查看 WordPress 主题目录中的几个 区块主题。

本文档将带您了解典型区块主题的文件和文件夹结构。

文件和文件夹

WordPress 主题无非是各种文件的集合，这些文件依赖于不同的 Web 技术，例如 HTML、CSS 和 PHP。区块主题在如何布局这些文件方面也遵循标准结构。

在最基本的情况下，主题的结构将类似于以下内容。请注意标记为 必需 的文件/文件夹，因为它们对于区块主题的正常运行是必要的：

  • parts/
    • footer.html
    • header.html
  • patterns/
    • example.php
  • styles/
    • example.json
  • templates/
    • 404.html
    • archive.html
    • index.html (必需)
    • singular.html
  • README.txt
  • functions.php
  • screenshot.png
  • style.css (必需)
  • theme.json

必需文件

有两个必要的文件供 WordPress 识别您的区块主题，您将在接下来的文档中了解更多关于这些文件的信息：

  • style.css (主样式表)：此文件用于配置主题数据，例如名称和描述。它也可用于添加自定义 CSS。
  • templates/index.html (模板)：默认/备用模板。这是 WordPress 将其视为区块主题所必需的。

可选文件

主题可以包含除上述必需列表之外的任何数量的自定义文件。WordPress 还会寻找其他几个文件，如果可用则使用它们：

  • README.txt (主题审查：文件)：这不是 WordPress 软件直接使用的文件。但在向官方 WordPress 主题目录提交主题时，这是一个必需的文件，旨在为用户提供有关该主题的信息。
  • functions.php (自定义功能)：一个 PHP 文件，WordPress 会在页面加载过程中初始化主题后自动加载它。您可以使用它来运行自定义 PHP。
  • screenshot.png：您主题的 1200×900 像素截图图像。用于在 WordPress 后台的 外观 > 主题 下以及（如果提交到该目录）WordPress 主题目录中显示您的主题。.png 和 .jpg 都是可接受的文件格式。
  • theme.json (全局设置和样式)：用于配置站点设置和样式，并与用户界面集成。

标准文件夹

在上面的示例中，包含了一些文件夹。主题可以有更多文件夹，但 WordPress 已指定其中几个用于特定功能。当您阅读本章时，您将了解更多关于这些文件夹的信息：

  • parts (模板部分)：存放您主题的自定义模板部分。部分是较小的部分，您可以将其包含在顶级模板中。通常，这将包括标题、页脚和侧边栏等内容。
  • patterns (区块模式)：由一个或多个块组成的可重用模式，用户可通过编辑器界面插入它们。WordPress 将自动注册此文件夹中包含的文件。
  • styles (样式变体)：存储在单独 JSON 文件中的主题全局设置和样式的变体。
  • templates (模板)：代表前端整体文档结构的文件。模板由区块标记组成，是网站访问者看到的内容。

高级主题结构

本节旨在让您熟悉主题中常见的一些文件，但不会详细涵盖所有可能性。这些文件完全是可选的，并且因主题而异。如果您不熟悉更高级的开发方法，现在可以跳过此部分。

实际上，区块主题可以包含更多文件和文件夹。项目越复杂，其结构就越复杂。

让我们为原始示例添加几个额外的文件和文件夹：

  • assets/
    • css/
      • core-site-title.css
    • images/
      • header-background.png
    • js/
      • navigation.js
  • inc/
    • ClassName.php
    • functions-helpers.php
  • parts/
    • footer.html
    • header.html
  • patterns/
    • example.php
  • styles/
    • example.json
  • templates/
    • 404.html
    • archive.html
    • index.html (必需)
    • singular.html
  • .editorconfig
  • .gitattributes
  • .gitignore
  • CHANGELOG.md
  • LICENSE.md
  • README.txt
  • functions.php
  • package.json
  • screenshot.png
  • style.css (必需)
  • theme.json

可选文件夹

没有对可包含的文件夹数量的限制，但上面的示例添加了您在 WordPress 主题中遇到的最常见的两种用例：

  • assets (包含资源)：许多主题作者使用此文件夹来存储其主题所需的额外 CSS、图像/媒体和 JavaScript。此文件夹也可能有其他名称，例如 resources 或 public。
  • inc (自定义功能)：主题通常在此文件夹中存储自定义 PHP 类或文件以提供额外功能。此文件夹也可能被命名为 includes、src 等。

可选文件

此列表远非详尽无遗，但包含了一些在主题开发中常用的文件。（注意：以下大多数链接指向外部第三方网站，与 WordPress 无关。）

  • .editorconfig (EditorConfig)：用于配置代码编辑器的格式，例如换行符和间距。
  • .gitattributes (Git：属性)：配置 Git 版本控制系统中的属性。
  • .gitignore (Git：忽略)：定义在将代码提交到 Git 存储库时要忽略的文件。
  • CHANGELOG.md (保持变更日志)：您主题的每个版本的重要变更的人类可读日志。
  • LICENSE.md (主题审查：许可与版权)：定义主题的许可证。请注意，提交到 WordPress 主题目录的所有主题都必须使用 GPL v2+ 许可证。
  • package.json (npm: package.json)：通常用于在 Node 环境中定义构建过程和开发依赖项。

如果您目前不理解所有这些文件及其用途，请不要感到气馁。再次强调，这些完全是开发人员工作流程中的可选元素。请随时在您自己的节奏下稍后了解更多关于它们的信息。

代码编辑器视图

这是一个具有高级结构的现实世界主题的快速编辑器视图：

Visual Studio Code 编辑器显示主题文件和文件夹的结构。在代码区域中，显示了一个 theme.json 文件。

这比本文档介绍的基础知识要复杂得多。重点是，即使遵循标准做法构建区块主题，您也将拥有大量自定义内容的自由。您可能希望与版本控制系统集成，添加构建过程等。

因此，请将此文档视为您可以在此基础上构建的基础。但保持简单并坚持基础没有任何害处。