对WordPress块状主题的介绍

378 阅读7分钟

组成一个典型的WordPress主题的组件多年来没有什么变化。以至于项目的联合创始人Matt Mullenweg,老式的Kubrick主题(2005年发布)仍然适用于现代版本的内容管理系统。

当然,主题开发人员已经在他们自己的基础上添加了一些东西。我们已经看到了从复杂的设置UI到集成的页面生成器的一切。但在他们的核心,主题一直保持着一致的结构。也就是说,直到引入块状主题。

块状主题将成为WordPress的未来。它们将改变我们建设和维护网站的方式。此外,它们与Gutenberg块状编辑器的整合比它们的 "经典 "同行更紧密。

想知道所有这些大惊小怪的事情是什么?今天,我们将让你了解WordPress块状主题的基本知识。在此过程中,我们将探讨它们与传统主题的比较和对比。让我们开始吧

为什么是块状主题?

在它存在的最初几年里,块状编辑器主要是一种样式和构建内容的手段。当与经典主题相结合时,这意味着页面和文章可以按照你的意愿进行制作。

当涉及到影响整个主题的变化时,WordPress定制器仍然是首选的资源。这个工具提供了对设计和布局设置的访问,这些设置是由主题的作者提供的。如果它不在定制器中,你很可能不得不去挖掘代码。

然而,块状编辑器的关键原则之一是在WordPress仪表板中创建一个更统一的界面。我们已经看到了这一点,Widgets屏幕已经转移到一个基于块的用户界面。定制器根本不适合这个模式。

全站编辑(FSE)的引入是这个过程中的下一步。它不仅仅是为我们的页面和帖子设计样式。现在,一个主题设计的每个方面(页眉、页脚、页面模板等)都可以在WordPress内直接管理。

块状主题是通往这一功能的门户。因此,它们是专门为块而建的。

Changing a website header with the WordPress Site Editor.

一个WordPress块状主题的内部工作原理

经典主题和块状主题之间并没有太多的相似之处。但两者都有一套基本的规则来指导它们的构成。如果你下载一个块状主题并浏览它的文件结构,有几个关键的对比可能会很突出。

模板文件是HTML,而不是PHP

在一个经典主题中,你会发现模板文件的名称是:index.phpheader.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](https://speckyboy.com/introduction-wordpress-theme-json-file/)文件是用来给块状编辑器分配默认设置的。这意味着,除其他事项外,有可能设置默认的调色板、排版和间距。设置可以是全站性的,也可以应用于特定的块。

由于theme.json 会根据其配置自动生成适当的CSS,你可能不需要把主题的style.css 文件填得那么多。在这种情况下,样式表被用来定义一些基本的东西,而其他的东西都依赖于这个新式的文件。

An example of WordPress block theme structure.

创建和编辑模板

长期以来,WordPress提供了直接在仪表板上编辑主题的模板文件的能力。这通常是不鼓励的,因为即使是一个小的编码错误也会使一个网站无法访问。更不用说当一个主题被更新时,所做的改变可能会被覆盖(因此,使用子主题的部分原因)。一些开发者完全关闭了这个功能,以避免发生灾难的可能性。

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

正如你所期望的,在这种情况下,代码是完全可选的。一切都可以通过新的网站编辑器(外观>** 编辑器--需要WordPress 5.9或以上版本)进行编辑,当一个块状主题被激活时,它将取代传统的自定义器。而且,就像页面或文章一样,网站编辑器使用熟悉的块状编辑器用户界面。

这还不是全部。你在WordPress内做的任何改变都可以导出。这将使你能够在多个网站上使用你定制的块状主题。

这降低了那些想要定制甚至创建主题的人的准入门槛。现在,一个基本的设计眼光和一个关于块的工作知识就可以导致一个定制的网站。

A template listing inside the WordPress Full Site Editor.

需要注意的事项

在你开始使用块状主题并将你所有的网站都换成块状主题之前,有几件事你应该知道。

首先,最重要的是,块状主题是一项新生技术。并非所有的功能都已最终确定,一些最佳实践也需要被理顺。此外,我们刚刚开始看到这些主题在生产环境中是如何工作的。随着事情的发展,预计会有一些变化。

如果你为客户建立网站,并希望保持一些未来的灵活性,混合主题可能是你感兴趣的。它们允许使用FSE功能,同时仍然保持经典主题的PHP结构。你甚至可以改造一个现有的主题来使用这个功能。

最后,块状主题并不意味着经典主题的终结--至少在可预见的未来不会。有了这些,过渡到这种新的主题设计方式并不一定要立即进行。例如,在本地环境中尝试使用块状主题,而在生产中仍然依靠你最喜欢的经典主题,这也是可以的。

An example from the Twenty Twenty Two theme.

块主题资源

如果你想了解更多关于WordPress块状主题的信息,有一些出色的资源可以利用。下面是我们最喜欢的几个。