DE{CODE}：现代主题和 WordPress 的未来：使用完整站点编辑及其他

WordPress 5.9 在核心中引入了全站编辑，标志着我们使用 WordPress 构建网站的方式发生了重大转变。 在此 DE{CODE} 会议中，加入 WP Engine 开发倡导者 Nick Diego 解压缩这些更改，以及您可以利用它们构建更好网站的一些方法 - 现代 WordPress 方式。

会议幻灯片

全文抄本

NICK DIEGO ：您好，欢迎来到“在 WordPress 中使用完整站点编辑和现代主题的未来”。 我叫 Nick Diego，是 WP Engine 的一名开发人员。 关于我的一点点——所以我在 2012 年开始使用 WordPress。我最初是一名插件开发人员，从那以后我已经过渡到使用块主题做很多事情。 我实际上是在 2021 年 11 月加入 WP Engine，所以这对我来说是一种新的工作。 我对块和模式以及所有全站点编辑充满热情，这就是为什么我今天能做这个演讲感到无比兴奋。

那么什么是全站编辑呢？ 在过去的几年里，我们已经听说过很多。 因此，它实际上是“一组功能，将块的熟悉体验和可扩展性带到您网站的所有部分，而不仅仅是帖子和页面。” 所以它实际上是一个功能伞，包括站点编辑器、全局样式、主题块、模板，当然还有块主题。

所以在我们今天的谈话中，我们将讨论一些不同的事情。 我们将从基础开始。 我想确保我们都在同一页面上，尤其是从术语的角度来看。 然后我们将讨论块主题的剖析，然后是全局样式，包括 theme.json 文件的内部设置。 最后，我将分享我对现代主题的想法以及它的外观。

因此，在今天的演示中，我们将使用一系列不同的示例，这些示例将来自 2022 年主题，该主题早在 2022 年 1 月就包含在 WordPress 5.9 中。这是一个由 Core 开发的块主题WordPress 团队，这是一个很好的起点，它在插件存储库中可用，因此没有更好的主题可以用作示例。

因此，当我们今天开始时，我们将从基础开始。 没有什么比块更基本的了。 因此，如果您过去几年一直在使用 WordPress，您可能对块非常熟悉。 它们是 WordPress 中的基本内容单元。 它可以是一段文字到图片库。 它几乎可以采用任何形式。 全站点编辑背后的想法是，很快或现在，您网站上的所有内容都将成为障碍。 我们将详细讨论它是如何工作的。

现在这里我们有一个当前在 WordPress 中的一堆不同块的示例。 左边两列你应该很熟悉了。 我们有段落、标题和封面块——等等。 在今年发布的 5.9 中，我们现在有了所谓的主题块。 这些块包含传统上您无法直接从 WordPress 中编辑的内容。

这些包括您的站点徽标、查询循环、帖子摘录、帖子作者等内容。 这些都是您需要深入研究基于 PHP 的模板文件并直接编写代码或使用第三方插件来帮助您编辑这些区域的所有类型的内容。 而这些都来了或者已经来了WordPress，允许用户直接编辑，而且都是以块的形式出现。

接下来，我们要谈谈模式。 模式是全站编辑体验的基石。 模式本身就是一个完整的对话，但如果您不熟悉模式，我们将让您先睹为快。 同样，模式只是形成特定布局的预定义块集合。 模式可以是具有某种样式的单个块。 它可以是多个块。

模式允许用户通过单击将整个设计直接插入他们的站点，而不必手动构建设计，一次一个块，这可以真正加快站点的开发。 如果您还记得的话，它也非常有用——您看到了这个漂亮的网站演示，其中包含所有这些内容。 然后你安装了主题，就像，好吧，我如何获得该演示？ 模式可以为您解决这个问题，因为主题作者可以提供一大堆页面布局或单独的设计，只需单击一下，用户就可以插入并获取他们在选择主题时看到并被吸引的演示。

因此，让我们快速浏览一下此处的模式。 我们只有一个简单的标题、一些文本和一些按钮。 这可以再次通过单击插入页面，我们在这里看到它由三个不同的块组成，一个标题块、一个段落块和一个按钮块。

现在又是今年发布的 5.9，我们看到了 Pattern Explorer 的引入。 因此，我之前提到的 2022 主题，我们在所有示例中使用的主题，被称为孵化场主题——很多鸟。 您可以在 Pattern Explorer 中看到，我们有主题作者构建的一堆不同的设计。

因此，作为用户，我可以将其中任何一个直接插入网站，并且我得到与主题作者设计主题相同的美感，所以它的扬声器系列，一些并排的鸟 - 无论你喜欢什么。 和模式，以及与主题一起提供的模式，对于全站点编辑体验非常重要。

接下来，我们有编辑器。 我们不能不谈论编辑器。 如果您一直在使用 WordPress，您可能对此非常熟悉。 但我确实想提一下这一点，因为编辑器在过去有过许多不同的名字——Block Editor、Gutenberg、The Gutenberg Editor。 出于本次讨论的目的，我们将呼叫编辑器。 这是它的正式名称，这就是你在这里看到的。 同样，这是在 2018 年底的 WordPress 5.0 中引入的。

因此，在编辑器中，您只需单击插入器，即可插入您的块和模式。 现在，我想显示屏幕，因为接下来我们需要讨论站点编辑器。 最终，站点编辑器的站点前缀可能会消失，我们将只有编辑器。 但站点编辑器是一种内聚体验，允许您直接在各种模板、模板部分、样式选项等之间进行编辑和导航。

所以基本上，站点编辑器采用了我们在过去几年中已经习惯的标准编辑器，并将其提升到一个新的水平，允许用户编辑您网站的其他区域，这些区域现在都由块提供支持。 所以 WordPress 5.9 引入了全站点编辑，随之而来的还有站点编辑器。 在将于 5 月发布的 6.0 中，我们将看到很多增强功能，这非常令人兴奋。

因此，如果您使用的是像 2022 这样的块主题，您将能够访问网站编辑器。 有两种不同的方式，顶部侧边栏然后在外观部分下方。 现在，站点编辑器，再次，因为它是的一部分——它非常强大，它只对管理员可用。 所以别担心，编辑们，他们将无法访问站点编辑器。 您必须是管理员才能访问站点编辑器。

一旦我们进入这里，它看起来与标准编辑器非常相似，但您会注意到有些不同。 在这里的顶部，我们有主页。 这告诉我们，我们实际上是在编辑 home.HTML 模板，我们有几个不同的页面区域可以单独编辑。 正如您在这里看到的，我们有页眉和页脚。

所以这是你以前永远做不到的事情。 您永远无法编辑 home.PHP，但现在直接从界面编辑 HTML 模板，而不是没有其他第三方扩展。

如果我们点击进入页面和列表视图，我们可以看到我们有一个查询循环。 同样，那些熟悉的构建主题可能非常、非常、非常熟悉在主题模板中构建循环，但在这里我们可以使用查询循环对块进行所有操作。 我们还可以看到其他一些主题块，例如帖子标题、特色图片、帖子摘录和发布日期。 这些都可以由用户从界面移动和修改，无需任何编码。

现在，如果您单击一个小的 WordPress 图标或站点图标，我们可以得到这个侧边栏。 然后我们可以看到我们可以访问我们所有的模板和模板部分。 现在，我确实想指出流程——所有这些屏幕都在全面开发中。 全站点编辑仍处于测试阶段，并且将会有很多改进和改进。 所以我们今天看到的可能在六个月后看起来不一样，但这是一个美妙的开始。

因此，如果我们转到模板，我们可以看到 2022 中包含的所有模板。您应该会看到一些熟悉的模板，例如 Page 和 Index 以及 Home 和 404。然后如果我们转到我们的模板部分，我们可以看到一些自定义的主题作者包含的模板部分。 所以我们有几个不同的页眉和页脚。

现在，所有这些都可以由用户编辑。 所以，如果我们在这里看到这个小点，我们可以看到这个标题模板部分已经被我编辑过了。 现在，当您编辑模板部件或模板时，这些更改会保存到数据库中。 他们实际上并没有修改您主题中的模板，这很好，因为您可以随时恢复到主题模板或模板部分。

但是同样，如果我们点击这里，我们可以开始编辑那个标题模板部分，你会看到所有这些都是由块组成的。 因此，这与您在编辑帖子或页面时在编辑器中使用的体验相同。 您现在可以在站点编辑器中为所有模板和模板部分执行此操作。

所以这是对站点编辑器及其工作原理的快速浏览，但现在我想谈谈块主题的剖析，这是全站点编辑的主要基本组成部分。 那么块主题的剖析是如何工作的呢？ 好吧，它实际上分为几个不同的类别。 所以我们有块主题。 他们完全接受全站点编辑。 主题模板完全由块组成。 模板和模板部件是 HTML 而不是 PHP。

然后我想指出块主题可以非常简单。 它需要做的只是包含一个 style.CSS 文件和一个 index.html 文件，以及一个 index.PHP 文件。 这个 PHP 文件是传统 WordPress 主题开发的残余，将来可能会消失。

最后，大多数块主题都包含一个 theme.JSON 文件。 我们将单独讨论这个。 这是一个关于全局设置和样式的非常重要的话题。 那么让我们看一下主题文件结构。 所以这是 2022，2022 内部文件结构的简化版本。我们可以在这里看到那些所需的文件。

然后我们也注意到有一些文件夹，分别是Templates和Template Parts。 在这些文件夹中的每一个中，您都有每个模板和模板部件的所有 HTML 文件。 在这里看不到的东西，实际上真的很令人兴奋，所以我想把它偷偷放进去，Gutenberg，Gutenberg 插件，所有这些未来开发的全站编辑都在这里完成，实际上最近引入了一个名为 Patterns 的新文件夹。 所以你实际上可以把你的模式文件放在 Pattern 文件夹中，WordPress 会为你注册它们。 只是先睹为快。 我强烈建议您查看 Gutenberg 和所有新功能。

但回到这里的幻灯片。 我们有模板和模板部件。 您可以看到每个文件的单独 HTML 文件。 现在，为了进一步了解它是如何工作的，我们将看一下 404.HTML 文件。 这是您站点中的文件或页面，您永远无法直接编辑，除非您深入研究代码或使用允许您编辑此模板的第三方资源。

所以回到站点编辑器，我们可以看到我们的 404 页面就在这里。 如果我们点击它，用户现在可以编辑该模板的不同组件。 但是，让我们看一下构成此模板的实际 HTML 代码，即主题中实际的代码。

所以在这里，我们可以看到我们有 404.HTML 文件，它有一堆标记。 从顶部和底部开始，我们看到我们有模板零件块的规范。 它正在做的是引用我们注册的模板部分并将它们拉入模板。 所以如果我们跳回到这里，我们可以看到我们有一个 footer.HTML 部分和一个 header.HTML 部分。 这就是这里所引用的内容。

所以这是一个独特的块，允许您拉入由其他块组成的模板。 现在，当然，您可以只包含构成页眉的所有块和构成页脚的所有块，但是通过引用模板部分，您可以在一个地方完成所有操作，然后应用相同的模板部分跨所有模板，类似于您在使用 PHP 的传统 WordPress 中执行的操作。

现在，当我们进一步看时，我们有一些标记，只是一些主要标记，然后我们有一个 div。 我不打算深入探讨这个问题。 这里发生了一些有趣的事情，即这里的布局，是的，它正在做一些布局设置，但这只是页面的一般标记，即 404 模式。

现在，我提到了模式。 这个主题中的 404 实际上被捆绑成一个模式。 所以组成404内容的所有块都处于一个模式中。 然后我们有一个模式块，它实际上引用该模式，然后拉入这些块。 现在，当然，您可以再次在此处包含构成 404 页面的所有块，但是通过将它们放入一个模式然后引用它们，它只会让管理变得更容易一些。

因此，当我们返回站点编辑器时，我们已经有了我们的内容，并且可以看到不同的部分。 所以顶部是被拉入的标题模板部分。然后，很明显，主要部分是被拉入的 404 模式。现在，因为这些都是块，我们需要做的就是像往常一样编辑它们. 我们可以把它加粗。 我们可以改变颜色。 我们可以删除块、添加块——等等。

非常简单，我们根本不需要编辑任何代码。 我们需要了解代码是如何工作的，但我们不需要接触任何代码。 然后当我们满意时，我们只需单击“保存”。 同样，这些更改会保存到数据库中，因此您实际上并没有修改主题文件。 因此，如果我们要恢复更改，我们将回到主题提供的任何内容。

站点编辑器的一大优点——同样，它仍在开发中——是您可以添加新的模板部分。 同样，这个主题添加了一堆不同的页眉和页脚，但是如果我们想添加更多呢？ 也许我们想要一个侧边栏。 也许我们想要不同的内容部分。 我们可以直接在站点编辑器中执行此操作。

再一次，这个流程将得到改进——更多的特性，更多的功能。 但它目前可以正常使用，您可以在此处添加所有内容。 需要注意的一件事是您还不能在站点编辑器中添加模板。 您可以在 WordPress 编辑器的不同界面中使用，但还不能在站点编辑器中使用。 但那将会到来。

所以最后一部分是我们谈到了进行所有这些更改。 好吧，如果您可以将所有更改导出为一个实际即将到来的主题，那么看看这将如何影响主题开发真的很有趣。 因此，使用最新版本的 Gutenberg，您现在可以导出所有更改以及原始主题。

它们被合并，您可以将其导出为全新的主题，并将所有更改应用于主题内的文件。 所以你可以想象 2022 年。你上传它。 您进行所有更改。 您可以修改一些模板，然后导出完整的主题。 它对未来的主题开发有一些非常有趣的影响。

现在我们需要谈谈全局设置和样式。 这是 theme.JSON 文件。 这对 WordPress 来说是全新的，既令人兴奋又棘手。 因此，如果我们回顾 2022 年的主题，我们可以看到该文件位于顶部。 当我们进入 theme.JSON 文件时，它实际上有五个部分，其中一个只是版本号。

我将简要介绍自定义模板和模板部件。 因此，如果您有一个自定义模板，一个完全自定义的模板，WordPress 自然无法识别的模板，您可以在这里注册。 这也是您注册所有这些模板部分（如页眉和页脚）的地方。 任何传统模板，如 Index、Page、Post——那些 WordPress 普遍认可的模板——你不需要放在这里，只需自定义的，当然还有你自己的模板部分。

但是 theme.JSON 的核心是您的设置和样式部分。 因此，如果我们首先查看设置，这里会发生很多事情。 再一次，这是非常删节的。 但顶部是全局设置。 这些设置会影响站点编辑器和整个站点的编辑器。 这些包括边框、颜色和排版等内容。 您可以在此处设置主题的调色板、主题的排版设置、字体等等。

然后我们还有块级设置，例如，您可以在其中为整个站点设置一个调色板，然后设置一个较小的调色板，以及完全不同的调色板，例如，为段落块或按钮块。 因此它提供了巨大的灵活性，但设置是用户在编辑器或块中可以使用的功能。

因此，如果我们再次查看颜色，我们已经在此处定义了调色板。 我们有前景色、背景色，然后是原色、黑色、白色和一种森林绿色。 然后如果我们进入编辑器，我们可以看到当我们的颜色选择器弹出时，我们已经定义了这些颜色供用户选择。

现在，让我们进入风格。 所以样式基本上就像你的 CSS。 所以传统上，您会将所有 CSS 添加到 styles.CSS 文件或其他设置中。 但是 theme.JSON 的样式部分允许您在块级别以及整个主题中的全局级别设置样式。 将这些视为默认设置，对吧，因为编辑器——重点是用户可以进入那里并开始修改和进行更改，并按照他们喜欢使用块的方式设计他们的网站。

但是需要有一个默认值，这些在 theme.JSON 的样式部分中设置是默认值。 再说一次，我们有全局样式，有点像我们的全局颜色、全局排版，然后我们还可以在块级别设置样式。 所以关于全局样式的事情就是我们设置主题背景颜色的地方。 在这里我们可以设置标题的字体大小、链接、文本和标题的不同排版选项，以及所有类似的东西。 在块级别，我们可以做同样的事情，但专门针对块。

现在，我们刚刚谈到的关于设置部分的巧妙之处之一是，每当您创建设置时，WordPress 都会定义一个变量。 因此，当我们查看该调色板时，我们定义了背景、前景和主要颜色。 WordPress 实际上将生成一个映射到该十六进制代码的变量，无论为主要、前景、背景设置的十六进制代码是什么。

在样式中，我们可以使用这些变量来定义全局样式和块级样式。 这样做的好处是，如果用户曾经更改过任何背景颜色，那么它将流过 theme.JSON 中的样式规范。 现在，如果我们看一下块部分，这里有我们的按钮块，我们从主题设计师那里得到了它。

我希望我的按钮具有默认的绿色和一些白色文本。 您可以看到，在按钮块的颜色部分，我们将背景色定义为原色，即森林绿，而我们的文本是背景色，即白色。 所以我们可以在整个 theme.JSON 中使用这些变量来为我们的块和站点本身定义样式。

现在，这与我之前提到的全局样式有关。 所以回到站点编辑器，如果我们点击顶部的这个双音小圆圈，我们将打开我们的全局样式面板。 现在，这里发生了很多事情，所以我将快速演示一下它是如何工作的。 但请注意，我鼓励您下载 2022 主题或其他块主题并真正探索全球风格。

如果我们跳到这里查看颜色，单击它，现在我们可以看到调色板在那里，主题提供的调色板，以及一些不同的元素，例如我们的背景、文本和链接. 现在，在我们正在查看的这个面板上，我们正在编辑站点的全局元素。 例如，我们谈到了网站的背景。 现在，它是白色的。 所以如果我点击背景，我可以进入这里，我可以看到它被选为白色。 这是我们在 theme.JSON 中设置的颜色。

但是，如果我真的喜欢这种桃色怎么办？ 好吧，只需单击一下，我就可以单击，然后就可以了。 我们网站的背景颜色现在是桃色。 因此，这为用户提供了前所未有的控制权，可以完全修改他们的网站以满足他们的需求。 但同样，theme.JSON 提供默认设置，作为主题开发人员，您提供用户，然后他们可以从那里获取它。

所以这是对全站点编辑以及站点编辑器和块主题的非常简短的概述。 但我想花点时间谈谈我对现代主题的未来的看法。 因此，当我们考虑现代主题时，我相信现代主题将强调设计而不是开发。 现在，您可能会想，嗯，设计主题总是关于设计的。

但是如果你回想一下传统的主题开发，就会发现有很多实际的编码需要完成。 所有模板文件都是 PHP，这需要大量的 WordPress 知识以及 PHP 开发才能正确完成。 好吧，这有点改变。 我们看到，现在有了编辑器，您可以直接在站点编辑器和传统编辑器的 UI 中设计主题。

这将成为我们设计主题的主要方式。 所以我是 WP Engine 的开发者倡导者，在我们的团队中，我们正在构建一个名为 Frost 的实验性主题。 当我们制作新图案或想要修改模板时，我们不会进入文件并调整文件。 我们将进入站点编辑器或进入编辑器并修改该模式，或构建模式或构建模板。 然后我们对它感到满意，然后我们将其导出，然后将其放入主题中。

所以我们实际上并没有编码。 我们实际上是在视觉上做所有事情。 这样做的好处是我们知道用户，将要使用主题的人，他们也将在那里调整模式或调整模板。 因此，在构建主题时，我们正在执行与用户使用主题相同的过程，我认为这有点神奇。

这将导致主题开发的低代码甚至无代码方法。 现在，当然，我们正在参加开发者大会，对吧？ 所以我们谈论的是无代码和低代码。 但我的最后一点是，我们将讨论我认为发展的方向。 但我认为这真的很令人兴奋，因为这将带来新一代用户，他们想要构建自己的主题，定制自己的主题，但他们可能不知道 PHP，也许他们不知道 JavaScript .

他们现在可以在站点编辑器中完成这一切，我认为这是 WordPress 的精神，使出版民主化。 而且我认为全站点编辑确实在朝着这个方向努力。 在过去两年或去年，坦率地说，我们已经看到了全站点编辑的这种进步。 它变得非常令人兴奋。 所以我坚信全站编辑是传统 WordPress 的未来。

现在，它可能并不适合所有人。 我想说得很清楚。 而且仍然需要很多发展。 因此，当我们谈论使用 WordPress 的不同类型的人时，我们涵盖了从标准用户到代理机构的所有内容。 代理机构可能希望为其客户提供一个非常干净、非常结构化的界面，以便在他们的网站上使用和工作。 这可能不是全站编辑。 我觉得没关系。

但正如我们在经济中看到的那样，我们有 Squarespace、Wix、Element 或其他页面构建器。 网络社区中有大量用户需要一种工具来允许他们并授权他们编辑和设计自己的网站。 而且我认为 WordPress 确实缺乏 WordPress，尤其是 Core。 我认为这是全站编辑的目标，也是全站编辑的承诺。

有很多事情要做。 还有很多事情要做。 还有很多事情我们需要弄清楚，比如响应式控件以及我们如何限制 UI 的不同组件，以便某些用户不会搞乱设计或修改他们不应该修改的东西。 所以还有很多事情要弄清楚。

但我认为真正令人兴奋的领域之一是开发全站点编辑。 现在我们有了这个允许用户设计自己的主题或设计自己的网站的工具，我们需要开始考虑如何将其提升到一个新的水平。 作为开发人员，我们如何在此基础上进行构建？ 如果我们回想传统的 WordPress，请使用小部件屏幕——一般来说是小部件。 WordPress 提供了非常基础的小部件和功能，开发人员开始构建各种扩展。

我认为同样的想法需要应用于全站点编辑。 现在，很少有（如果有的话）扩展和插件能够真正利用完整的站点编辑并将其提升到一个新的水平。 WordPress 将继续迭代全站点编辑，它会达到一定程度。 但它永远不会做每个人想要的一切，我认为现在是时候认真对待全站点编辑并开始思考我们作为开发人员可以在此基础上构建并真正将这种体验带到下一个的方式等级。

所以我挑战大家走出去，探索古腾堡，试用 2022 主题，并安装它，开始学习区块开发。 利基块有令人难以置信的机会。 并尝试构建自己的主题。 尝试使用 2022。尝试修改它。 尝试构建您的基本主题。 这真的很有趣，而且这些东西有很大的潜力。

所以我想就此打住，感谢大家的出席。 在我走之前，我想谈谈一些我认为非常重要的资源，尤其是在这个演示文稿中，如果你是全站点编辑的新手并且你想了解更多。 再说一次，你当然可以跟我来。 我一直在发推文。

但是有一些资源。 所以第一个是弗罗斯特。 我之前提到过这一点。 所以这是 WP Engine 开发人员关系正在构建的主题。 而且是实验品。 我不应该说产品。 这是一个实验，我们试图用它来教育社区如何构建块主题。 我们一路学习。 在此过程中，我们进行了大量更改和更新，试图与 WordPress 保持同步，但它是一个很好的资源。 同样，2022 年的主题——一个开始和学习的好地方。

接下来，我要插件 Learn WordPress。 这是 learn.wordpress.org。 wordpress.org 的培训团队正在做大量工作来尝试教育并将这些概念带给公众。 因此，如果您有兴趣并想了解更多信息，这是一个很棒的地方。 我们在那里有研讨会和各种不同的内容，包括社交学习空间。 这些每周举行一次，我们讨论不同的主题，深入探讨如何编写块代码以及如何构建块主题等等。

然后，当然，如果您对开发感兴趣，请始终从块编辑器手册开始。 这就是我开始的地方，而且有很多很棒的资源。 最后，古腾堡。 如果您不熟悉 Gutenberg，我鼓励您熟悉 Gutenberg，尤其是如果您对 WordPress 开发感兴趣的话。 这是一个深入研究、探索如何构建全站点编辑、如何构建不同块以及如何将其应用到您自己的工作流程的好地方。

非常感谢您的出席。 我希望您能从本次演示中学到很多，并鼓励您继续探索全站点编辑。 非常感谢。