主题结构

入门第章,您学习了主题的基本知识,以及如何在没有代码的情况下创建和运行主题。对于简单的主题,无代码方法是完全可以的,但一旦您想要添加用户界面中不可能的内容,就需要直接开始使用代码。

自定义主题代码的第一步是在首选的文件编辑器中打开主题。您可以为此使用任何主题,甚至可以使用您在“入门”一章中创建的主题。

熟悉别人在做什么是一个好主意,所以请随便看几个块主题从WordPress主题目录。

本文档将引导您了解典型块主题中的文件和文件夹结构。

文件和文件夹

WordPress主题不过是依赖不同web技术(如HTML、CSS和PHP)的各种文件的集合。块主题的布局也遵循标准结构。

最基本的是,主题的结构将类似于以下内容。记下标记的文件/文件夹必修的因为它们是块主题工作所必需的:

  • 零件/
    • 页脚.html
    • 页眉.html
  • 图案/
    • 示例.php
  • 样式/
    • 示例.json
  • 模板/
    • 404.html(英语)
    • 档案.html
    • 索引.html(必需)
    • 单字.html
  • 自述.txt
  • 函数.php
  • 屏幕截图.png
  • 样式表(必需)
  • 主题.json

所需文件

WordPress有两个必要的文件来识别块主题,您将在接下来的文档中了解更多信息:

  • 样式表(主要样式表):配置主题数据时需要此文件,例如其名称和描述。它还可以用于添加自定义CSS。
  • 模板/index.html(模板):默认/回退模板。这对于WordPress将其视为块主题是必要的。

可选文件

主题可以包含除上面所需列表之外的任意数量的自定义文件。WordPress还会查找一些其他文件,并在可用时使用它们:

  • 自述.txt(主题审查:文件):WordPress软件不直接使用此功能。但当将主题提交到官方WordPress主题目录时,它是必需的文件,旨在向用户提供有关主题的信息。
  • 函数.php(自定义功能):在页面加载过程中初始化主题后,WordPress自动加载的PHP文件。您可以使用它来运行自定义PHP。
  • 屏幕截图.png:主题的1200×900屏幕截图。用于在下显示主题外观>主题在WordPress管理员和WordPres主题目录中(如果在那里提交)。两者都有.png码.jpg格式是可接受的文件格式。 
  • 主题.json(全局设置和样式):用于配置站点的设置和样式,与用户界面集成。

标准文件夹

在上面的例子中,包含了一些文件夹。一个主题可以有更多的文件夹,但WordPress为特定功能指定了一些文件夹。阅读本章时,您将了解有关这些文件夹的更多信息:

  • 部分(模板部件):包含主题的自定义模板部件。部件是可以包含在顶级模板中的较小部分。通常,这将包括页眉、页脚和侧栏等内容。
  • 模式(块图案):由一个或多个块组成的可重用模式,用户可以通过编辑器界面插入这些块。WordPress将自动注册此文件夹中包含的文件。
  • 样式(风格变化):主题的全局设置和样式的变化存储在单个JSON文件中。
  • 模板(模板):表示前端总体文档结构的文件。模板由块标记组成,是网站访问者看到的内容。

高级主题结构

本节旨在让您熟悉主题中的一些常见文件,但不是详细介绍所有可能的情况。这些文件是完全可选的,不同的主题会有所不同。如果您不熟悉更高级的开发方法,现在可以跳过这一节。

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

让我们在原来的示例中添加一些额外的文件和文件夹:

  • 资产/
    • css公司/
      • 芯-边-title.css
    • 图像/
      • 标题-背景.png
    • js型/
      • 导航.js
  • 公司/
    • 类名.php
    • 函数-helpers.php
  • 零件/
    • 页脚.html
    • 页眉.html
  • 图案/
    • 示例.php
  • 样式/
    • 示例.json个
  • 模板/
    • 404.html(英语)
    • 档案.html
    • 索引.html(必需)
    • 单数.html
  • .editorconfig(编辑配置)
  • .git属性
  • .gitignore(.git忽略)
  • CHANGELOG.md公司
  • 许可.md
  • 自述.txt
  • 函数.php
  • package.json包
  • 屏幕截图.png
  • 样式表(必需)
  • 主题.json

可选文件夹

可以包含哪些文件夹没有限制,但上面的示例添加了WordPress主题中最常见的两个用例:

  • 资产(包括资产):许多主题作者使用此文件夹存储他们的主题所需的其他CSS、图像/媒体和JavaScript。此文件夹也可能有其他名称,例如资源公众的.
  • 股份有限公司(自定义功能):主题通常会在这个文件夹中存储自定义的PHP类或文件,以获得额外的功能。此文件夹也可能被命名为包括型钢混凝土,等等。

可选文件

这个列表远未穷尽,但它包含了主题开发中使用的一些常见文件。(注意:以下大多数链接指向外部第三方网站,与WordPress无关。)

  • .editorconfig(编辑配置)(编辑器配置):用于配置代码编辑器的格式,如行尾和间距。
  • .git属性(Git:属性):使用Git版本控制系统配置属性。
  • .gitignore(.git忽略)(Git:忽略):定义将代码提交到Git存储库时要忽略的文件。
  • CHANGELOG.md公司(保留更改日志):主题每次发布的重要更改的可读日志。
  • 许可.md(主题回顾:许可与版权):定义主题的许可证。请注意,提交到WordPress主题目录的所有主题都必须在GPL v2+下获得许可。
  • package.json包(npm:打包.json):通常用于在Node环境中定义构建过程和开发依赖项。

如果你还不了解所有这些文件及其目的,不要感到气馁。同样,这些都是开发人员工作流中完全可选的元素。以后可以按照自己的节奏自由地了解更多信息。

代码编辑器视图

以下是具有高级结构的真实世界主题的快速编辑器视图:

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

这比本文档介绍的基础知识要复杂得多。关键是,即使在按照标准实践构建块主题时,您也可以自由地进行自定义。您可能希望与版本控制系统集成、添加生成过程等。

因此,请将此文档视为您可以构建的基础。但保持简单并坚持基本原则并没有坏处。