如何使用 WordPress 区块编辑器 – 你的 WordPress Gutenberg 指南

随着 2018 年 WordPress 5.0 的发布,WordPress 引入了 Gutenberg 编辑器。但你可能更熟悉它的另一个名字——"WordPress 编辑器"或"区块编辑器"。

区块编辑器推出了一种完全不同的内容创建方式,即区块这就是名称的由来…)。区块为在你的网站上设计文章和页面提供了一种更灵活、更用户友好的方式。

如果你是 WordPress 新手,你可能想了解如何使用这些区块来制作 WordPress 网站。我们会向你展示如何操作,同时也会深入探讨编辑器的其他所有功能,帮助你在网站上创建内容。

wordpress gutenberg guide

首先,我们将带你了解如何使用区块编辑器为你的文章和页面创建内容。然后,我们将向你展示区块编辑器如何超越文章和页面,进入"全站编辑"。借助这些全站编辑功能,你可以使用区块来控制小部件区域、设计主题模板等等。

让我们一起来看看!

📚 目录:

什么是 Gutenberg?

那么,Gutenberg 是什么?它只是 WordPress 区块编辑器的项目名称,在 WordPress 5.0 中取代了 WordPress TinyMCE 编辑器,成为默认的 WordPress 编辑器。

Gutenberg 是编辑器在开发过程中的官方名称,但现在它只是"WordPress 区块编辑器"或"WordPress 编辑器",因为它已正式成为核心软件的一部分。因此,在这篇文章中,你经常会看到我称它为"区块编辑器"而不是"Gutenberg"。

简单回顾一下,这是旧的 WordPress TinyMCE 编辑器的样子。这个编辑器现在被称为经典编辑器

wordpress gutenberg editor update 1

这是 WordPress 区块编辑器(也就是 Gutenberg)中的样子:

gutenberg

不过,这不仅仅是外观上的更新。Gutenberg 通过采用基于区块的内容创建方法,完全改变了编辑体验(关于区块到底是什么,稍后会详细介绍!)。

虽然 Gutenberg 革新了内容创建流程,但 WordPress 也"超越了文章,进入页面模板,最终实现了全站定制"。这一变化的官方名称是全站编辑

这意味着你能够使用区块来构建整个网站,包括落地页、页眉和其他重要内容。这些全站编辑功能中的一部分从 WordPress 5.8 起就已成为 WordPress 核心软件的一部分——我们将在文章末尾介绍这些内容。

Gutenberg 是 WordPress 的一部分吗?

Gutenberg 于 2018 年 12 月 6 日作为 WordPress 5.0 的一部分正式发布。如果你使用的 WordPress 版本是 5.0 或更高版本,区块编辑器将成为默认编辑器。

不过,并非每个人都会更新他们的WordPress核心文件。对于较小的项目,比如随意的个人博客,情况更是如此,这些用户并不觉得升级有什么紧迫感,甚至找不到升级的理由。

如果你属于这一类,那么你的网站可能还没有运行WordPress 5.0,因此你将无法默认使用区块编辑器。

在这种情况下,你可以选择将WordPress版本升级到最新版本,或者不做任何操作并忽略本教程,或者使用官方Gutenberg插件。最后一个选项——官方插件——如果你真的不想更新WordPress核心文件,这是一个使用区块编辑器的好方法。

WordPress Gutenberg编辑器的工作原理

刚才我告诉你Gutenberg是一个基于区块的编辑器。这样说有点不厚道,因为如果你和大多数人一样,你可能不知道这意味着什么。

以下是区块编辑的基础知识

本质上,Gutenberg用许多独立的“区块”取代了WordPress TinyMCE编辑器的单一编辑字段。

这些区块允许你构建比旧版经典WordPress编辑器更复杂的设计。

那么什么是区块呢?

嗯,区块几乎可以是任何东西。例如,你可以有用于以下内容的区块:

  • 普通文本
  • 图片
  • 视频嵌入
  • 按钮
  • 小部件(是的,就是你在侧边栏中使用的小部件
  • 表格
  • 等等

而且很棒的是,开发者将能够创建自己的第三方区块,你可以通过插件获取这些区块,从而获得更大的灵活性。

每个区块都是独立的实体,你可以单独操作。例如,这是一个包含三个区块的快速Gutenberg帖子:

  • 2个文本区块
  • 1个图片区块

看看我是如何通过拖放轻松重新排列这些区块的:

而且由于每个区块都是“独立的”,你还可以为特定区块添加自定义背景等内容。

总的来说,它为你提供了更多的灵活性和深入的控制。

那么Gutenberg就是页面构建器,对吧?

嗯,不完全是。至少在单独使用时是这样。

Gutenberg确实让博客文章或标准页面等常规内容的样式设置变得更加容易,但与经典WordPress主题一起使用时,它并不是页面构建器的1:1替代品。然而,当与区块主题和Otter Blocks这样的区块扩展插件一起使用时,你可以实现与使用页面构建器大致相同的结果。也许不是1:1,但页面构建器本身也不是1:1的比较。

换句话说,ElementorBeaver Builder并不相同,所以,说区块编辑器与它们不完全一样也不为过。关键是,如果你使用区块主题和区块扩展插件,你可以通过Gutenberg以用户友好的方式实现与使用页面构建器插件大致相同的结果。

既然已经多次提到区块主题,你可能想知道经典主题和区块主题之间的区别。别担心,我们稍后会介绍经典主题与区块主题。

目前,这里最重要的要点是,当与区块主题和区块扩展插件结合使用时,Gutenberg区块编辑器几乎消除了大多数内容类型对页面构建器的需求。它还为WordPress中创建更复杂的帖子布局创建了统一的单一方法。

你必须使用区块编辑器吗?可以继续使用之前的WordPress编辑器吗?

,你不必使用区块编辑器,是的,你可以继续使用之前的WordPress编辑器。要停用Gutenberg区块编辑器并将你的网站恢复为经典编辑器,你可以使用官方的经典编辑器插件。

不过需要说明的是,该插件的页面显示,截至目前,它"将得到全面支持和维护,直至2024年,或在必要的时间内"。如何解读取决于你,但我觉得这款插件迟早会被淘汰。

请阅读我们的指南如何禁用Gutenberg块编辑器了解更多信息。

是否需要特殊主题才能使用Gutenberg块编辑器?

由于它现在是WordPress默认编辑器,块编辑器可以与任何WordPress主题配合使用。不过,选择一个专门宣传已通过Gutenberg兼容性测试的主题会带来一些好处,主要是不会出现问题。

话虽如此,考虑到Gutenberg已经是多个WordPress版本的标配,这个问题正变得越来越少。与其相反,找一个提供Gutenberg兼容性的知名主题可能更具挑战性。

世事难料。

仍有一些小众主题,用户群较小,口碑也不怎么样,也许你会偶然发现一个从未更新或未针对块编辑器进行测试的主题。所以,检查一下是很好的做法。

不过,这种检查仅对经典主题是必要的。块主题默认与块编辑器兼容。鉴于其名称,如果它们不兼容反而会有些误导。

如果你担心兼容性问题,块主题也是最安全的选择。

这正好引出下一个话题……

经典主题与块主题

通过WordPress 5.9,我们获得了全站编辑器(FSE)的访问权限,这个稍后会讨论。然而,FSE的出现催生了一种全新的主题类型——块主题。

块主题扩展了你的编辑能力,因为它们是用块而非小工具构建的。现在你可以在没有第三方插件或CSS的情况下实现某些特定的样式效果(以及某些功能)。

此外,它们还包含由多个块组成的预制模板(称为"块模式")。这意味着你只需要找到一个喜欢的预制模板,将其插入文章或页面中,然后填入内容即可。你可以根据不同用途使用几个不同的模板(例如,行动号召、英雄区域、页眉、页脚等)。最终,这使得创建页面和文章(甚至整个网站)的过程变得更快。

WordPress自定义器与全站编辑器

以经典主题Neve为例。Neve允许你使用所谓的WordPress自定义器来自定义主题。然而,由于它是经典主题,无法解锁全站编辑器的访问权限。简单来说,情况如下:

  • 经典主题通过WordPress自定义器进行自定义
  • 块主题通过全站编辑器进行自定义。

理解这一点很重要,因为自定义器的编辑能力不如全站编辑器强大。

不过需要指出的是,Neve专业版确实提供了Neve独有的独特功能。这些功能(例如,页眉/页脚构建器、预制博客布局等)实际上将Neve的自定义能力扩展到了自定义器所能做的范围之外,但它们不一定在其他经典主题中可用。

相比之下,所有块主题(如Neve FSE)都可以访问全站编辑器及其所有自定义功能。

neve fse

使用 Neve FSE,您可以直接在完整网站编辑器中修改标头和菜单。您还可以使用 WordPress 区块编辑网站模板。更棒的是,您可以创建配色方案并配置整个网站的默认字体样式和大小,从而实现快速便捷的网站建设。

三个区块主题推荐

如果您只是想使用一个主题进行测试,以下主题都支持区块编辑器(和 FSE):

  • Neve FSE – 我们专门为完整网站编辑器(FSE)构建的新主题。
  • Raft – 一个轻量级、多用途的主题,完全兼容 FSE。它是 WordPress 主题库中目前最受欢迎的区块主题。
  • Inspiro Blocks – 这是 WPZOOM 开发的高度可定制主题。

欲了解更多选项,请查看我们精选的最佳 Gutenberg 兼容 WordPress 主题,其中包括兼容 Gutenberg 的区块主题和经典主题。

使用 Gutenberg WordPress 区块编辑器构建您的第一个布局

假设您使用的是 WordPress 5.0(或更高版本)并且使用区块编辑器,您已经准备好深入了解本文的核心内容。下方,我将向您展示如何实际使用 WordPress Gutenberg 区块编辑器来构建完整的页面布局。

WordPress 区块编辑器界面快速导览

在您开始添加区块之前,让我们快速浏览一下主区块界面各元素的功能:

gutenberg layout
  • (A) – 允许您添加新区块
  • (B) – 撤销/重做按钮
  • (C) – 查看所有区块的列表视图(大纲)– 可帮助您快速在区块之间导航
  • (D) – 访问文档设置,包括分类、标签、特色图片等。类似于 WordPress 编辑器中当前的侧边栏
  • (E) – 当您选中某个单独的区块时,您可以访问该区块特有的设置
  • (F) – 允许您访问文章的实时预览或发布/更新文章
  • (G) – 添加一些区块后,您将在此处实际处理文章的内容

添加新区块

正如我在引言中所述,您将使用单独的“区块”在编辑器中构建布局。

要添加新区块,您只需点击 +Plus 图标,然后选择要添加的内容类型:

在上方的示例中,我向您展示了如何添加基本的段落区块。但 Gutenberg 实际上包含大量不同的区块,分为不同的部分:

gutenberg block sections
  • 文本 – 段落、标题、列表、引用等
  • 媒体 – 插入图片、图库、视频、音频文件和其他媒体
  • 设计 – 添加按钮、列、区块、分隔符等
  • 小工具 – 插入 WordPress 小工具,例如分类列表或最新文章
  • 嵌入 – 嵌入来自第三方来源的内容,如 Twitter、YouTube、Spotify、Vimeo 等

使用 Gutenberg 构建基本布局

让我们从简单的开始。假设您只想构建一个包含以下内容的博客文章布局:

  • 普通文字
  • 一张图片
  • 引用
  • 嵌入的 YouTube 视频

使用 Gutenberg,您可以这样做:

首先,你需要在编辑器中撰写完整的文章。或者,如果你像我一样更喜欢在 Google Docs 中撰写,你可以将内容全部粘贴进去,然后 Gutenberg 会自动将其转换为块。

添加非文本块

现在你的内容已经分成块了,你可以将鼠标悬停在想要插入第一张图片的位置,然后点击加号图标。这会创建一个分隔符。然后,再次点击加号图标来插入图片块:

这将允许你插入一个图片块,你可以从中上传或选择图片,方式与当前 WordPress 编辑器类似:

image uploader

选择图片后,你应该会看到它直接显示在页面布局中:

uploaded image

接下来,将鼠标悬停在想要插入引用块的位置,使用相同的方法插入另一个块。你可以搜索"quote"或点击展开完整的块插入器,在文本部分找到它:

然后,你会看到新的引用块。要创建引用,只需点击该块并输入内容即可:

adding quote

要插入 YouTube 视频,你可以从嵌入部分添加一个新的 YouTube 块(或者直接搜索 YouTube)。要插入视频,只需输入 URL 并点击嵌入即可:

可选 – 创建不同的列

想更有创意一些?Gutenberg 内置了一个列块,让你快速创建多列。你只需要从设计部分添加块。然后,你可以在其中插入其他块。如果想要更灵活的列,你还可以找到第三方 Gutenberg 插件来添加这些块——稍后会详细介绍块插件。

完成后,你只需要点击发布按钮:

publish

然后你就会在前端看到格式化的博客文章。

如何自定义单个块

由于 WordPress Gutenberg 编辑器包含大量不同的块,我无法向你展示如何使用每个单独的块。

但我可以给你一个适用于所有块的基本框架

基本上,你可以在编辑器的实际内容区域控制内容

对于基本的文本样式和对齐方式,你可以使用悬停在块上时出现的菜单栏:

对于更高级的样式,你通常在设置标签页中设置该块的样式。

要访问该标签页,选择你要编辑的块,然后浏览到标签页:

如何重新排列单个块

重新排列块有两个选项。你可以使用块工具栏中的箭头将块移到相应方向:

move blocks up down

或者,你可以拖放块。要激活拖放功能,你需要点击上下箭头旁边的六个点。然后,你就可以将块拖到你想要的位置。

总结

一旦你掌握了块编辑器的工作流程,操作就变得相当简单和直观了。

一开始,你可能会遇到一些困难,挣扎着完成一些你认为理所当然的基本操作。

但是一旦你掌握了这些技巧——构建布局就会变得轻而易举。借助 Gutenberg 自带的高级区块,你将拥有比 TinyMCE WordPress 编辑器更大的灵活性。

一些不错但更高级的 Gutenberg 技巧

随着你对 WordPress Gutenberg 区块编辑器越来越熟悉,你会发现其中一些技巧可以节省时间。

打字快速创建新区块

上面,我展示了如何使用插入按钮创建区块。但为了节省时间,你实际上可以直接输入以下语法来创建区块:

/BLOCK-NAME

将会出现一个自动建议框来帮助你找到相关的区块。

例如,只需用键盘就可以创建一个图片区块:

非常方便,而且能节省大量时间!

直接编辑源代码

在任何时候,你都可以通过点击右上角的三个点并选择代码编辑器来编辑整个文章的源代码。你也可以点击区块工具栏上的三个点菜单,然后选择编辑为 HTML来打开单个区块的源代码:

激活全屏模式、固定工具栏等

区块编辑器包含几种不同的模式,可以让你更改编辑体验。你可以:

  • 添加类似 TinyMCE 编辑器的固定工具栏
  • 全屏显示
  • 将焦点放在当前激活的区块上

要使用这些“视图”,请点击右上角的三个点图标。

top toolbar

使用 Gutenberg 键盘快捷键节省时间

除了标准格式快捷键外,区块编辑器还有许多专门的键盘快捷键,可以帮助你:

  • 在所选区块的上方或下方插入新区块
  • 删除区块
  • 复制区块
  • 等等

要打开完整的键盘快捷键列表,请使用 Shift + Alt + H 快捷键。

keyboard shortcuts

使用列表视图快速导航到特定区块

一旦你开始将区块嵌套在彼此内部(例如在列区块内),可能很难选择正确的区块。或者,如果你有数十个不同的区块,情况也是如此。为了解决这个问题,你可以打开列表视图来查看设计中的每个区块,包括嵌套的区块。

从 WordPress 6.0(2022 年 5 月发布)开始,你现在还可以在列表视图中选择多个区块,使用拖放重新排列区块,并为每个区块打开基本设置。

要打开列表视图,请点击顶部工具栏上的图标。

list view

使用区块模式作为模板

“区块模式”本质上是一个模板,你可以将其作为设计的起点。默认情况下,WordPress 自带了一些预构建的模式,例如多列布局、页眉等。但插件也可以添加自己的区块模式

要插入区块模式:

  • 点击左上角的主区块插入器(加号图标)。
  • 选择模式选项卡。
  • 选择你要插入的模式

你也可以点击探索按钮打开完整的模式浏览器。

block patterns

在 WordPress.org 资源库查找更多区块模式

就像 WordPress.org 有免费插件和主题库一样,现在也有一个官方区块图案库,提供免费的图案设计。您可以浏览该库,像复制粘贴文本一样轻松地将图案复制粘贴到编辑器中。

使用 WordPress.org 图案库的方法:

  • 点击此处访问该库
  • 使用搜索和筛选选项找到您喜欢的图案。
  • 点击复制图案按钮。
  • 返回编辑器,像粘贴文本一样粘贴(Ctrl/Cmd + V)。
pattern library

创建可复用的区块模板

如果您需要在多个地方重用特定的区块集合/排列,您可以将一组区块保存为可复用模板。您可以为模板命名,然后像插入普通区块一样插入它。

创建模板的方法:

  • 选择您想要包含的区块
  • 点击三个点图标
  • 选择添加到可复用区块
reusable blocks

编辑可复用区块内容

除了可以轻松快速插入格式化的内容外,可复用区块还可以让您快速更新该可复用区块的所有实例。

也就是说,一旦您编辑了可复用区块的内容,使用该可复用区块的每篇文章也会获得新内容。

当您编辑可复用区块并点击文章或页面中的发布按钮时,您将可以选择发布整篇文章或仅发布可复用区块的更改(反之亦然)。点击发布后出现在菜单中您会看到此选项。

publish reusable block

使用插件扩展区块编辑器

如果您想更高级,现在可以找到很多 Gutenberg 扩展插件,它们提供自己的区块。

我之前提到的插件 Otter Blocks 是一个很好的入门选择。它为您提供额外的区块,用于定价、客户评价、Google 地图、分享图标、"点击发推文"按钮等功能。

使用区块管理器控制混乱

编辑器添加了很多区块,特别是如果您使用我们上面提到的那些区块插件的话。这可能会让界面有点混乱并拖慢您的速度。如果您有一些从不打算使用的区块,可以使用区块管理器来禁用它们。

使用区块管理器的方法:

  • 点击右上角的三个点图标
  • 选择区块管理器
  • 使用复选框根据需要禁用区块
block manager

复制粘贴区块同时保留样式

对于区块编辑器中的文本,您可以像其他编辑器一样复制粘贴。但是,如果您想复制粘贴整个区块同时保留其设置,就不能像往常一样使用 Ctrl + C

不过,您仍然可以做到。您需要做的是点击区块工具栏中的三个点图标,然后选择复制。以这种方式复制后,您就可以像正常粘贴内容一样粘贴(例如 Ctrl + V)。

copy block

在编辑模式和选择模式之间切换

通过 WordPress 5.4,我们可以使用两种不同的模式,可以使用顶部工具栏在它们之间切换:

  • 编辑 – 这是你大多数时候使用的地方。它可以让你编辑所有区块的内容。这是默认的编辑器模式。
  • 选择 – 这可以让你更轻松地选择特定的区块,尤其是在处理嵌套区块时(例如列内的区块)。一旦你点击进入某个区块,会自动切换回编辑模式。
select edit modes

体验全新的区块编辑器功能

自从区块编辑器被合并到核心以来,实际上有两个版本的区块编辑器:

  1. WordPress核心软件中的原生版本(这可能就是你在使用的)
  2. Gutenberg插件

Gutenberg插件版本基本上是核心编辑器的测试场。插件版本包含正在开发中的新功能。最终,这些功能会被合并到核心中。但如果你想提前体验它们,只需要从WordPress.org安装Gutenberg插件即可。

你的所有旧内容会怎么样?

在我结束介绍区块编辑器的内容编辑功能之前,让我快速介绍一下一旦你开始使用WordPress区块编辑器(如果你还没有的话),你所有的旧内容会发生什么。

不用担心——它不会消失!但体验会有点不同:

当你启用区块编辑器时,如果你有使用原始TinyMCE编辑器创建的内容,区块编辑器会将你所有的旧内容放入一个经典区块中。这个经典区块基本上就是TinyMCE编辑器……但它是嵌入在区块编辑器中的。

要处理你的旧内容,你可以:

  • 将它留在经典区块中,就像使用旧版WordPress编辑器一样进行编辑
  • 点击经典区块工具栏上的转换为区块按钮,将你的内容转换为独立的区块
old content

如何使用区块编辑器进行全站编辑

正如我们之前提到的,区块编辑器的目标是将其用于不仅仅是内容编辑器。为此,WordPress 5.9为我们引入了全站编辑器。在当前版本中,你可以使用基于区块的编辑来创建和编辑主题的模板模板部件

Neve FSE Templates and Template Parts

它支持以下全站编辑功能:

  • 模板部件编辑。你现在可以使用区块来管理侧边栏、页脚和其他小部件区域。在FSE中,这些区块被归类在模板部件类别下。(经典主题用户仍然会保留一个名为小部件的菜单项,但它将基于区块并使用区块编辑器进行编辑。)
  • 模板编辑。你可以设计网站上的各种模板,包括404页面、首页、单篇文章等。
  • 主题区块。这些区块可以显示你网站/主题的动态内容,如文章的发布日期或最近博客文章列表。
  • 站点编辑器。一种统一的体验,允许你直接编辑和在各种模板、模板部件、样式选项之间导航等。
  • 全局样式。你将获得一个样式管理器来管理主题的全局样式,以及各个区块的样式。

让我们来介绍这些新的WordPress全站编辑功能。我们将使用Neve FSE作为我们的区块主题来展示FSE的全部潜力。

Neve FSE 是一款轻量级、响应式的主题,让你可以自定义所有模板和模板部件。此外,你还可以设置全站样式变体,以打造一致的用户体验。

模板部件取代小工具(区块主题用户)

FSE 中的模板部件编辑部分允许你创建、编辑和移除模板部件,这些是包含在模板中的较小部分。它们也恰好是以前使用小工具的迷你部分(或者如果你在使用经典主题,仍然在使用小工具)。

Neve FSE Template Parts inside the Full Site Editor

使用区块取代小工具(经典主题用户)

从 WordPress 5.8 开始,小工具不再使用了!现在,如果你使用的是经典主题,不再使用小工具来控制侧边栏、页脚和其他小工具区域,而是使用区块和简化版的区块编辑器。

当你通过外观 > 小工具或使用 WordPress 自定义器打开小工具区域时,你会看到由区块驱动的新界面。这些编辑器的使用方式与区块编辑器完全一样——只是界面稍微简化了一些。

Block Widgets

如果你不喜欢这个功能,想继续使用旧的 WordPress 小工具系统,可以通过安装官方经典小工具插件来禁用此功能。

WordPress 区块编辑器模板编辑模式

模板编辑模式是随 WordPress 5.8 一起发布的,可能是 WordPress 全站编辑最大的飞跃。

通过模板编辑模式,你可以使用区块编辑器来设计文章和页面使用的实际模板。例如,你可以设计一个内容以多列布局显示的模板,而不是普通的单列布局。当你将该模板分配给普通文章时,该文章会自动使用模板的布局——无需手动重新创建。

要构建模板,你可以使用我们在上一节中详细介绍的主题区块。

模板编辑模式是 WordPress 5.8 的核心功能。但是,如果你使用的是经典主题,那么它只有在主题开发者专门在主题代码中启用后才会可见。因此,如果你没有看到下方截图中的选项,可能是因为你的主题还不支持此功能。

如果你的主题支持模板编辑模式,在编辑文章或页面时,你应该在文章/页面侧边栏中看到一个全新的模板部分。

你可以使用该部分选择现有模板或创建新模板。

template section

如果创建新模板,你将能够使用全站编辑器和我们在上面详细介绍的主题区块来设计它。

WordPress 主题区块

主题区块在全站编辑中也扮演着关键角色。基本上,它们让你插入来自网站的动态内容,而不是静态内容。

例如,假设你想在内容的某个位置显示文章的发布日期。无需手动输入日期,你只需添加文章日期区块,它就会自动插入文章的实际发布日期。如果你更新了文章的发布日期,文章日期区块会自动显示新日期。

最有用的主题区块可能是查询循环区块,它让你插入最近内容的列表。你还可以使用过滤器来选择特定内容。例如,你可以列出某个分类中最近的五篇博客文章。

你还可以控制文章的显示模板,比如调整文章标题和特色图片的顺序。

query loop neve

这个查询循环块特别有用,因为它本质上让你可以使用块编辑器创建自己的博客列表页面。

你可以在块插入器的 主题 部分找到所有新块。

theme blocks

用于全站点编辑的 WordPress 站点编辑器

WordPress 站点编辑器最初于 WordPress 5.9(2022年1月)发布,随后在 WordPress 6.0(2022年5月)中进行了扩展。

它与模板编辑模式有一些相似之处。但不仅仅是仅仅设计可以分配给文章或页面的模板,你实际上可以使用块从头开始设计整个主题。

要查看站点编辑器,你需要使用支持块的主题。你可以通过 WordPress.org 的全站点编辑功能筛选器 找到这些主题。

如果你的主题支持站点编辑器,你可以通过 WordPress 仪表板的 外观 > 编辑器 打开它。你会注意到它取代了旧的 自定义 菜单,因为使用站点编辑器不再需要 WordPress 自定义器

fse wordpress

首先,你会看到站点首页的编辑器。但你可以使用 模板模板部件 链接来访问完整页面设计(如单个文章和存档)以及部分站点设计(如页眉和页脚)。

fse template list

选择模板后,你将能够使用块编辑器和上面提到的特殊主题块自定义该模板。

using fse

根据你正在编辑的具体模板,你可能会使用不同的块。例如,如果你正在编辑页眉或页脚,可以使用导航块,它取代了支持块的 WordPress 旧菜单系统。

全局样式

全局样式是另一个适用于支持块的主题的新全站点编辑功能。使用全局样式,在 WordPress 6.0 中你可以做两件主要的事情:

  1. 控制主题的全局样式,如颜色和排版。
  2. 编辑单个块的默认样式。例如,你可以自定义按钮块的默认设计。你始终可以从编辑器内部覆盖这些

如果你使用的是支持块的主题,可以从上一节中看到的相同站点编辑器界面访问这些样式。只需在站点编辑器中编辑任何模板时点击右上角的 样式 图标即可。

fse styles scaled 1

返回顶部

Gutenberg 块编辑器的下一步是什么?

虽然我们上面详述的内容显示了块编辑器自最初发布以来有了很大的发展,但 WordPress 团队远未完成 Gutenberg 项目。目前,核心团队正在继续努力改进和扩展全站点编辑。

然而,还有其他项目(如导航编辑器和小部件编辑器)可以让经典主题采用更基于区块的框架。这是为了作为一个垫脚石,帮助更多人习惯使用FSE。

越来越多的开发者也在创建基于区块的主题,让你能够利用古腾堡的力量来构建整个网站。因此,既然FSE的发展势头不减,尽快开始学习区块编辑器界面将是值得的!

如果你想自己测试基于区块的主题,古腾堡的插件版本目前包含一系列全站编辑功能,让你了解体验是什么样的。你也可以在WordPress.org上找到基于区块的主题。

总的来说,古腾堡肯定会继续存在,所以值得花时间学习如何充分利用它。

对于大多数普通用户来说,经过一些初期的阵痛后,它将带来更灵活的内容创作体验。

非开发者将能够直观地创建更复杂的布局,包括按钮、内容嵌入等更多元素。而这将有望帮助WordPress继续增长。

您可能还有兴趣:

现在,我们很乐意听到您的声音。我相信你们很多人对WordPress古腾堡区块编辑器都有强烈的看法——请在评论中告诉我们!

别忘了参加我们的WordPress网站加速速成课程。在下面了解更多:

如何加速您的WordPress网站

通过一些简单的修复,您可以将加载时间减少50-80% 🚀

通讯表单 – 侧边栏

名 *

您的邮箱 *

立即订阅!

如果是人类,请留空此字段。

Δ

通过输入您的邮箱,即表示您订阅了我们的每周通讯。您可以随时更改主意。我们尊重您的收件箱和隐私。

布局、演示和编辑由Karol K和Colin Newcomer完成。

分享你的喜爱

留下评论

您的邮箱地址不会被公开。 必填项已用 * 标注