WordPress古腾堡区块编辑器全面教程与使用指南

WordPress 5.0为内容创作带来了革命性的变革，引入了全新的Gutenberg编辑器，彻底改变了用户与平台交互的方式。这一创新不仅提升了视觉呈现的掌控力，更在WordPress 5.9中通过完整的站点编辑功能将区块编辑的概念推向了新的高度。如今，Gutenberg编辑器已经取代了WordPress定制器，成为定制主题和网站外观的核心工具。本文将深入探讨如何运用这一强大的编辑器进行完整的站点编辑，揭示其工作原理、使用方法以及带来的革命性变化。

### 什么是古腾堡编辑器？

古腾堡（Gutenberg）编辑器是WordPress 5.0及更高版本中预装的内容创作工具，它以区块为基础，为用户提供了前所未有的内容控制能力。通过这种全新的编辑方式，用户可以更加直观地管理文章和页面中的各种元素，包括文本、图像、文件和链接，从而实现更加精细化的内容定制。

### 古腾堡编辑器如何工作？

Gutenberg编辑器采用内容区块的概念，将网站元素分解为独立的区块，每个区块都可以单独编辑和自定义。与传统的TinyMCE编辑器专注于文本编辑不同，Gutenberg允许用户通过拖放和配置区块来构建整个页面，极大地简化了内容创作的流程。此外，虽然Gutenberg编辑器在WordPress 5.0及更高版本中默认可用，但旧版本的用户也可以通过安装Gutenberg插件来体验这一功能。不过，我们强烈建议所有用户将WordPress核心软件更新到最新版本，以获得最佳体验。

在WordPress 5.9更新之后，Gutenberg编辑器的功能得到了显著扩展，不再局限于内容编辑。它现在涵盖了网站定制的所有方面，包括主题编辑和页面或文章的创建，提供了更加直观的页面视觉表示，使其更像一个专业的页面构建器。用户可以通过简单的拖放操作调整区块的位置，并通过顶部的工具栏进行个性化设置，如背景颜色、排版等，而不会影响其他区块或元素。

### 使用古腾堡区块编辑器

#### 添加新的博客文章或页面

在Gutenberg编辑器中创建新文章或页面是一个直观的过程。要添加新文章，请访问WordPress仪表盘中的“文章”>“添加新内容”。您将看到一个空白的草稿，其中包含文章标题和第一段区块的占位符。在右侧边栏中，您可以设置文章作者、模板、固定链接和类别等属性。创建新页面的过程类似，但需要导航到“页面”>“添加新页面”，并在右侧边栏中指定父页面和页面顺序。

#### 全局样式界面

WordPress 5.9引入的全局样式界面允许用户无需编写代码即可自定义整个站点的颜色、排版和布局。这一功能仅在基于区块的主题中可用，包括基于区块的子主题。通过导航到“外观”>“站点编辑器”，然后点击右上角的黑白图标，即可进入全局样式界面。在这里，您可以调整排版、颜色、布局和区块等四个方面的设置，为您的网站打造独特的视觉风格。

#### 模板编辑模式

Gutenberg编辑器还提供了模板编辑模式，允许用户编辑文章、页面或404页面的主题模板，甚至创建新的模板。导航到“外观”>“站点编辑器”，点击左上角的WordPress徽标并选择“模板”，即可访问模板编辑模式。在这里，您可以轻松地修改和创建模板，为您的网站提供更加个性化的设计。

#### 插入区块样板

如果您希望快速构建页面，可以使用内置的区块样板。点击编辑器顶部的加号(+)按钮，选择“Patterns”选项卡，即可找到各种预构建的区块样板，包括按钮、列、画廊和标题等。这些样板可以帮助您节省时间，快速创建专业的内容布局。

#### 添加一个新区块

区块是Gutenberg编辑器的核心功能。默认情况下，新文章或页面会包含一个段落区块，方便您开始内容创作。要添加更多区块，只需按回车键，编辑器会自动添加新的段落区块。您也可以通过点击加号(+)按钮，选择或搜索所需的区块，将它们插入到内容中。

#### 插入小工具

小工具现在已集成到Gutenberg编辑器中，添加小工具与添加其他区块相同。点击编辑器顶部的加号(+)按钮，选择“Blocks”选项卡，向下滚动到“小工具”部分，即可找到所有可用的区块。这一功能简化了小工具的管理，无需再使用特定的小工具页面或主题定制器。

#### 使用区块

Gutenberg编辑器提供了丰富的工具和选项，帮助用户轻松地创建和编辑内容。每个区块都配备了专门的工具栏，允许用户进行格式化、对齐和自定义设置。例如，段落区块提供粗体、斜体和文本对齐等选项，而图像区块则允许您更改图像对齐、添加替代文本和调整图像大小。

#### 封面文字选项

Gutenberg编辑器在样式标题和段落区块方面提供了更多的自由度。您可以为文本和区块的背景创建首字下沉，并设置自定义颜色。这些选项可以通过点击“选项”>“显示活动区块中的更多设置”来访问，为您的网站增添独特的视觉元素。

#### 内容详情

要查看文章和页面的内容详情，只需点击“详细信息”按钮。您将看到有关内容的字数、字符、标题和区块数的信息，帮助您优化内容长度和结构。文档大纲功能则显示了标题结构，帮助您组织内容并提升SEO效果。

#### 锚支持

锚点是让读者跳转到特定区块的链接，有助于突出显示内容的特定部分，并为网站访问者提供更好的上下文。在Gutenberg编辑器中创建锚点非常简单：选择一个区块，点击“选项”>“显示更多设置”，在“高级”菜单中展开“HTML锚点”文本框，输入唯一的锚点名称。然后，将锚点链接到所需的内容，即可实现快速导航。

#### 使用图像区块

Gutenberg编辑器提供了多种方式来插入和管理图像。您可以从计算机上传图像、从媒体库中选择图像或链接到图像URL。此外，您还可以将图像拖放到内容的任何位置，而无需先创建新区块。图像区块还提供了丰富的自定义选项，包括替代文本、图像大小、标题空间、链接和对齐方式等。

#### 可重用的区块

Gutenberg编辑器允许您保存和重用区块，从而节省时间并保持一致性。要保存一个区块，选择它并点击“选项”>“添加到可重复使用的区块”，输入区块名称并保存。要重用区块，点击加号(+)按钮，选择“Reusable”选项卡，即可找到所有可重复使用的区块。

#### 表区块

Gutenberg编辑器通过引入表区块，简化了表格的创建和管理。点击加号(+)按钮，选择“Table”区块，设置列数和行数，即可创建一个新的表格。表区块提供了丰富的自定义选项，包括文本格式、行、列插入、文本对齐、颜色和边框样式等。

#### 栏目区块

栏目区块提供了一种将内容拆分为最多三列的简单方法，帮助提高内容的可读性和空间效率。点击加号(+)按钮，选择“Columns”区块，选择一种可用的栏目模式，然后向这些区块添加新元素。栏目区块非常适合创建侧边栏，您可以选择30/70或70/30栏目变体，并在较大的列中插入查询循环区块。

#### 实时HTML区块

Gutenberg编辑器提供了实时HTML区块，允许您插入和预览自定义代码。点击加号(+)按钮，选择“Custom HTML”区块，插入您的HTML代码，然后点击“预览”查看效果。这一功能使您无需在可视化编辑器和文本编辑器之间来回切换，即可检查代码的运行效果。

#### 嵌入元素

Gutenberg编辑器提供了多种媒体和嵌入区块，帮助您轻松地添加音频和视频元素。媒体区块包括视频、音频、封面和文件等选项，而嵌入区块则允许您集成来自YouTube、Twitter和Spotify等外部网站的内容。只需复制并粘贴所需的URL，即可将媒体嵌入到您的页面或文章中。

#### 按钮

按钮是提高用户互动和转化率的重要工具。Gutenberg编辑器提供了按钮区块，允许您在网站的任何位置插入按钮。点击加号(+)按钮，选择“Button”区块，输入按钮标签，添加链接，并设置在新选项卡中打开链接的选项。

#### 引文与引用区块

Gutenberg编辑器提供了引文和引用区块，帮助您突出显示重要信息或引用外部来源。点击“Block Directory”>“Pullquote”选择引文区块，或在“Block Directory”>“Blockquote”选择引用区块。在这些区块中输入您的文本，并调整对齐方式，即可创建专业的引文和引用。

### 如何看待古腾堡编辑器？

Gutenberg编辑器在自定义和灵活性方面超越了传统的WordPress编辑器，为用户提供了更加高效和便捷的内容创作体验。然而，它也带来了一些挑战和限制。

#### 优点

– **最少的编码**：通过全局样式界面，用户无需编写代码即可自定义主题的外观。各种区块也使内容创建和编辑更加容易。
– **移动友好**：Gutenberg提供比经典编辑器更好的响应能力，允许用户随时随地发布内容，改善工作流程。
– **更少的插件**：一些区块提供了取代额外插件需求的功能。如果默认区块不够用，用户可以安装区块插件以添加更多选项。
– **灵活的自定义块**：Gutenberg允许开发人员为主题和插件创建自定义区块，为附加组件增加价值并打开更多自定义可能性。
– **元框支持**：Gutenberg编辑器与大多数用于创建自定义字段和向文章添加元数据的元框兼容。

#### 缺点

– **学习曲线**：没有页面构建器经验或更习惯于旧版WordPress编辑器的用户可能需要时间来适应新的布局和工具放置。
– **兼容性问题**：区块编辑器仅在使用基于区块的主题时可用。
– **设计选项限制**：虽然Gutenberg提供了更多自定义项目的自由，但它不是专业的页面构建器，缺少一些设计选项。可以使用区块插件来扩展Gutenberg的功能。

### 小结

古腾堡编辑器引入了一种全新的内容创作方法，通过区块编辑实现了完整的站点编辑和改善用户体验的目标。新的区块编辑器与WordPress 5.0或更高版本的核心软件集成，为用户提供了更加直观和高效的内容管理工具。通过移动区块、使用区块样板、可重复使用的区块和全局样式面板等功能，用户可以轻松地定制和设计网站，而无需编写任何代码。最后，安装WordPress区块插件将为您的编辑器添加更多设计选项，进一步提升工作流程和用户体验。