目录
大纲
WP建站和运维

将经典主题转换为区块主题

欢迎来到本课程,我们将探索将经典主题转换为混合主题或完整区块主题的可能性。

通过本课程,您将:

  • 描述转换经典主题的各项要求
  • 区分混合主题与区块主题
  • 列出将经典主题转换为区块主题的步骤

转换经典主题

开始将经典主题转换为区块主题需要准备什么?

如果您选择不添加theme.json(这是您在上节课学到的内容),则需要查看通过functions.php文件添加主题支持的各种选项。

在WordPress仪表盘中快速说明:当用户在”外观”下操作且无法访问站点编辑器时,他们就能知道自己正在使用经典主题或混合主题。

混合主题 vs 区块主题

现在让我们看看混合主题与区块主题的区别。

首先来看经典主题。以Twenty Twenty主题为例,如果我们打开一个示例页面,会发现最终用户可以在”排版”下获得许多区块设置选项。

他们还可以通过选择自定义颜色或主题提供的预设颜色来更改文本和背景颜色。

点击”Inserter”(插入器),最终用户可以选择区块、图案和媒体。在”图案”下,他们可以使用主题自带的预设图案。

在”小工具”中,用户也可以使用区块来构建小工具。

混合主题本质上仍是经典主题,但主题作者选择添加了对区块模板部件等功能的支持。

转换经典主题的步骤

现在让我们看看将经典主题转换为区块主题的具体步骤。

第一步:处理设置与样式

只需在主题中添加theme.json文件,就能弥合经典主题与区块主题之间的差距。您可以在本模块前一节课中了解更多相关信息。或者您也可以选择在functions.php中添加对区块的主题支持。

第二步:优化编辑体验

WordPress核心提供了大量用户选项,但这可能会让用户不知所措。我们刚刚看到,即使在”图案”选项中,也会向用户展示图案目录中的所有可用图案。您可以选择移除这些选项,只保留希望用户使用的主题专属图案。

这个阶段的目标是开始减少样式表中的CSS代码量,转而使用theme.json来实现样式控制。

这里有一篇很棒的博客文章可供参考:《优化WordPress编辑体验的15种方法》,发布在WordPress开发者博客上。文章首先介绍了如何使用theme.json实现优化,但您也可以通过JavaScript或PHP等多种方式实现。

第三步:使用区块编辑器构建页面

现在您可以使用区块编辑器(现在简称为”编辑器”)开始构建页面。虽然此时还无法访问站点编辑器来开发HTML模板,但您可以使用常规编辑器构建页面。

第四步:添加站点编辑器支持

最后一步是为主题添加站点编辑器支持,并开始使用站点编辑器构建所有模板。这意味着您将不再使用PHP模板,而是用HTML模板取而代之。

您不必将经典主题完全转换为区块主题。根据预算情况,您可以选择停留在混合主题阶段。

如果您有兴趣将经典主题转换为混合主题,可以从在functions.php中添加对区块模板部件的支持开始。

请务必查看Learn WordPress上关于如何实现这一目标的教程。