WordPress块主题介绍

构成典型 WordPress 主题的组件多年来没有太大变化。 以至于项目联合创始人 Matt Mullenweg 打趣说，老式的 Kubrick 主题（2005 年发布）仍然适用于现代版本的内容管理系统。

当然，主题开发人员已经加入了自己的添加。 我们已经看到了从复杂设置 UI 到集成页面构建器的所有内容。 但在它们的核心，主题保持了一致的结构。 也就是说，直到引入块主题。

块主题将成为 WordPress 的未来。 它们将改变我们构建和维护网站的方式。 此外，它们与 Gutenberg 块编辑器的集成比它们的“经典”对应物更紧密。

想知道所有的大惊小怪是什么？ 今天，我们将向您介绍 WordPress 块主题的基础知识。 在此过程中，我们将探索它们如何与传统主题进行比较和对比。 让我们开始吧！

为什么要阻止主题？

在其存在的最初几年中，块编辑器主要是一种设置样式和构建内容的方法。 当与经典主题相结合时，这意味着页面和帖子可以根据您的内心需求制作。

在进行影响整个主题的更改时，WordPress Customizer 仍然是首选资源。 此工具提供对主题作者提供的设计和布局设置的访问。 如果它不在定制器中，您可能必须深入研究代码。

但是，块编辑器的主要原则之一是在 WordPress 仪表板中创建更统一的界面。 我们已经看到小部件屏幕移动到基于块的 UI 时会发生这种情况。 定制器根本不适合这个模具。

引入完整站点编辑 (FSE) 是此过程的下一步。 它不仅仅是设计我们的页面和帖子。 现在，主题设计的各个方面（页眉、页脚、页面模板等）都可以直接在 WordPress 中进行管理。

块主题充当此功能的门户。 因此，它们在构建时专门考虑了块。

WordPress 块主题的内部工作原理

经典主题和块主题之间没有太多相似之处。 但两者都有一套指导他们化妆的基本规则。 如果您要下载块主题并浏览其文件结构，则可能会出现一些关键对比。

模板文件是 HTML，而不是 PHP

在经典主题中，您会找到名称为index.php和header.php的模板文件。 块主题取消了 PHP，而是带有.html文件扩展名。

在内部，模板文件包含 HTML 和块标记的组合。 例如，让我们看一下 WordPress 官方文档中的这个模板：

 <!-- wp:site-title /--> <!-- wp:image {"sizeSlug":"large"} --> <figure class="wp-block-image size-large"> <img src="https://cldup.com/0BNcqkoMdq.jpg" alt="" /> </figure> <!-- /wp:image --> <!-- wp:group --> <div class="wp-block-group"> <!-- wp:post-title /--> <!-- wp:post-content /--> </div> <!-- /wp:group --> <!-- wp:group --> <div class="wp-block-group"> <!-- wp:heading --> <h2>Footer</h2> <!-- /wp:heading --> </div> <!-- /wp:group -->

块标记看起来很像 HTML 注释。 但它包括将特定块调用到模板中的语法。 WordPress 完整站点编辑网站有一个方便的参考，其中包括每个默认块的标记。

如果这种类型的代码看起来很熟悉，那么您可能已经在 Gutenberg 的代码编辑器视图中看到过类似的东西。

文件夹的使用

经典主题能够在文件夹中存储模板，但这不是必需的。 块主题需要几个子文件夹：

/parts
包含可重复使用的项目，例如页眉、页脚和侧边栏。

/templates
包含各种类型内容的模板。 页面、帖子档案和单数帖子等项目是常见的示例。 请注意，它们的命名约定遵循 WordPress 模板层次结构——与经典主题的另一个相似之处。

这种安排的积极副作用之一是主题将得到更好的组织。 拥有标准化的文件夹结构意味着搜索特定文件所花费的时间更少。

Theme.json 样式

theme.json文件用于将默认设置分配给块编辑器。 这意味着，除其他外，可以设置默认调色板、排版和间距。 设置可以在站点范围内或应用于特定块。

由于theme.json会根据其配置自动生成适当的 CSS，因此您可能不需要太多地填写主题的style.css文件。 在这种情况下，样式表用于定义一些基础知识，而其他一切都依赖于这个新奇的文件。

创建和编辑模板

WordPress 长期以来一直提供直接在仪表板中编辑主题模板文件的能力。 这通常是不鼓励的，因为即使是一个小的编码错误也可能导致网站无法访问。 更不用说更新主题时更改被覆盖的可能性（因此，使用子主题的部分原因）。 一些开发人员完全关闭了该功能，以避免哪怕是很小的灾难机会。

但是块主题都是关于仪表板内的编辑。 主题中包含的模板可以通过块编辑器进行调整，也可以创建新的自定义模板。

如您所料，在这种情况下代码是完全可选的。 一切都可以通过新的站点编辑器进行编辑（外观>编辑器-需要 WordPress 5.9 或更高版本），它在激活块主题时替换旧版定制器。 而且，就像页面或帖子一样，站点编辑器使用熟悉的块编辑器 UI。

这还不是全部。 您在 WordPress 中所做的任何更改都可以导出。 这将使您能够在多个网站上使用您的自定义块主题。

这降低了那些想要定制甚至创建主题的人的进入门槛。 现在，设计的基本眼光和块的工作知识可以导致自定义网站。

要记住的事情

在您潜入并切换所有网站以使用块主题之前，您应该知道一些事情。

首先，区块主题是一项新兴技术。 并非所有功能都已最终确定，需要解决一些最佳实践。 另外，我们才刚刚开始了解这些主题在生产环境中是如何工作的。 随着事情的发展，预计会有一些变化。

如果您为客户构建网站并希望保持一些未来的灵活性，那么混合主题可能会引起您的兴趣。 它们允许使用 FSE 功能，同时仍保持经典主题的 PHP 结构。 您甚至可以改造现有主题以使用此功能。

最后，区块主题并不意味着经典主题的终结——至少在可预见的未来不会。 这样一来，就不必立即过渡到这种新的主题化方式。 例如，可以在本地环境中试验块，同时在生产中仍然依赖您最喜欢的经典主题。

块主题资源

如果您想了解有关 WordPress 块主题的更多信息，可以使用一些出色的资源。 以下是我们的一些最爱：

• 通过 WordPress 阻止主题文档
• Automattic 的 Blockbase 主题
• 卡罗琳娜·尼马克 (Carolina Nymark) 的全站编辑
• Rich Tabor 的古腾堡 WordPress 块模板终极指南
• WordPress Block 主题革命正在悄然兴起 Justin Tadlock
• WordPress的WordPress主题实验