关于如何使用块创建自定义网站的 WordPress Gutenberg 教程

这是一个 WordPress Gutenberg 教程，由在使用其新块编辑器创建 WordPress 网站方面具有丰富经验的 Web 开发人员编写。

在本指南中，我们将向您展示如何创建一个包含内容模板、档案和自定义搜索的复杂网站。 我们将使用名为 Gutenberg 和 Toolset Blocks 的 WordPress Block Editor 来构建网站。

为什么古腾堡现在是构建网站的好方法

Gutenberg 已经推出近一年了，并且已经足够成熟，现在它是设计您所计划的确切网站的一种出色而可靠的方法。

古腾堡使用块来构建您的页面。 块是包含不同类型内容的元素，因此您可以创建布局。

块编辑器仍在不断发展，但它已经非常直观和灵活。 您无需成为编码专家即可创建内容。 此外，当您将其与工具集块等插件结合使用时，您可以轻松创建看起来很棒的复杂网站。

Gutenberg 也比其前身更容易在移动设备上使用。 鉴于我们在手机上所做的工作量越来越大，这是朝着正确方向迈出的重要一步。

与古腾堡一起使用的最佳主题类型

有许多高级 WordPress 主题与古腾堡块编辑器兼容，还支持其他高级插件。

您可以通过查看我们与古腾堡兼容的 30 多个 WordPress 主题列表来快速浏览最佳主题。

与古腾堡一起使用的最佳块插件

自一年多前 Gutenberg 推出以来，已经发布了许多优秀的插件，这些插件补充了新的 WordPress 编辑器。

对于我们的 WordPress Gutenberg 教程，我们将使用 Toolset Blocks 和 Gutenberg 来构建我们的 WordPress 网站。 工具集块提供了许多优势，这将使编码人员和非编码人员更容易快速设计和实施他们的网站：

• 您的工作流程会简单得多。 现在您无需设计页面然后实施它们。 您可以简单地在 WordPress 上构建它们，并立即查看它们的外观。
• 无需在后端和前端之间切换。 相反，您可以简单地在后端设计模板，然后立即查看它们的外观。
• 非开发人员可以建立他们梦想中的网站。 您不再需要成为编码专家来创建您想要的网站。 使用块，您可以轻松地自己添加复杂的元素，而无需 html 或 css。
• 花更少的时间阅读文档。 工具集块的简单和直观特性意味着您无需阅读大量文档即可了解如何构建某些元素。 许多块描述了您可以实现的目标，并且可以轻松使用和试验。
• 不再与任何第三方插件集成。 使用经典的 WordPress 编辑器，您需要安装页面构建器和其他兼容插件。 这可能会使您的网站膨胀，从而显着降低速度。 您还依赖第三方更新他们的插件并确保它们的安全。 Toolset Blocks 与 Gutenberg 和 WordPress 集成，因此不会导致相同的问题。
• 遵循与 WordPress 核心相同的工作流程。 您无需担心更改使用新 WordPress 编辑器的方式。

关于如何使用块构建自定义网站的 WordPress Gutenberg 教程

我们现在可以开始构建我们的自定义网站。 例如，我们将创建一个演示网站，您可以使用它来搜索您所在地区最好的健身房或私人教练。

以下是我们将在本 WordPress Gutenberg 教程中介绍的内容：

• 添加、编辑、移动和删除块
• 并排显示内容
• 浏览你的区块
• 在块编辑器设计中显示字段
• 显示图片库
• 编辑器中的样式工具集块
• 排版控件
• 创建模板
• 构建您的存档页面
• 创建自定义内容列表
• 添加自定义搜索

让我们开始吧！

添加、编辑、移动和删除块

首先，让我们了解如何创建和删除块的基础知识。 Blocks 是一种全新的网站构建方式，但它应该只需要几分钟就可以适应它们。

1. 在页面或帖子上单击 + 按钮。
2. 搜索并单击要使用的块以插入它。

3. 输入块的内容信息。 例如，在这里我们添加了“标题”块并将为其插入标题。
4. 在每个块的左侧，您将看到一组控件，您可以使用它们来移动块。

5. 使用右侧边栏更改所选块的选项。 例如，您可以更改字体颜色、图像大小或文本对齐方式。
6. 如果您单击三点选项，您可以看到其他选项，例如删除块

如何并排显示您的内容

通过使用列块，您可以轻松地在页面上彼此相邻地显示您的内容。

1. 选择 + 按钮。
2. 搜索 Columns 块并插入它。

3. 您现在可以看到两列，您可以像往常一样向其中添加块。

4. 通过选择列块并切换右侧栏上的数字来增加列数。

浏览你的区块

在您构建站点时，您的一些设计和模板将包含很多块。 选择要编辑的块的最简单方法之一是使用编辑器顶部的块导航按钮并选择要使用的块。

在块编辑器设计中显示字段

您可以显示来自帖子字段（标题、正文等）或来自您可能使用工具集块创建的自定义字段的信息。

您可以通过三种方式来显示您的字段，我们将在下面作为 WordPress Gutenberg 教程的一部分进行概述：

1. 将块内容设置为来自字段值

工具集块库中的每个块都允许您从字段设置其内容。 例如，您可以将任何标题文本设置为来自帖子字段或工具集自定义字段。

下面让我们通过将帖子字段中的标题文本添加到我们的私人教练的工具集标题块来看看它是如何工作的。

1. 创建一个新的内容模板并选择要显示的自定义帖子类型。
2. 选择 + 按钮。
3. 添加工具集标题块。

4. 打开动态标题文本。

5. 选择要显示的帖子字段。 下面我选择了Post Title 。

您现在将能够看到与特定自定义帖子类型相关的每个帖子的正确标题。

2. 将字段显示为单独的块

您可以将使用工具集创建的任何帖子字段或单个自定义字段显示为块。 例如，下面我们将主要帖子内容添加到我们的健身房模板中。

1. 选择Single Field 模块。
2. 在右侧栏上的字段类型下，选择标准字段。
3. 在Post Field 下选择Post Content (body)选项。

每个健身房的描述现在将出现在各自的帖子中。

3.将字段与文本合并在一个块中

您可能需要将字段和文本混合添加到您的设计中。 例如，您可能需要在自定义字段旁边添加标签。

1. 选择字段和文本块。

2. 输入要添加的标签。 例如，我添加了“评级”，因为我想显示评级自定义字段的结果，该字段显示每个健身房的得分（满分 5 分）。

3. 从图标中选择要添加的内容类型。 您可以添加字段、表单或条件输出。 在我们的例子中，我们想要添加一个字段。

4. 选择您要添加的内容（在我的例子中是评级字段），然后单击以插入简码。

显示图片库

您还可以使用块将多张图片添加到您的帖子中。

1. 选择重复字段/画廊块。

2. 选择要显示的自定义字段组。
3. 选择要显示的自定义字段。

在编辑器中设置块样式

当您创建网站时，您需要为您的块设置样式。 例如，您可能想要更改块的字体、颜色、背景或边距。

您可以通过两种方式设置块的样式：

1. 使用界面设计项目

1. 选择要设置样式的块。 例如，我选择了之前添加的Ratings块。
2. 展开侧栏中的样式设置部分。
3. 在这里您可以调整您的背景颜色、内边距、边框等等。

当然，每个块都会提供不同的样式选项。 例如，图像块将包含许多额外的自定义功能，例如调整图像位置、模糊或旋转多少的能力。

2. 使用容器块

容器块是您只能通过工具集块才能找到的块。 使用容器块将某些块组合在一起，并为每个帖子显示每个块的某些样式。

例如，我添加了一个容器块，以在一个统一的部分中显示私人教练的所有相关信息，包括图像、标题、评级等等。 我现在可以设置 Container Block 的样式，以便我的每个 Personal Trainer 帖子都显示相同的样式。

再一次，我可以通过使用右侧的侧边栏来做到这一点。

排版控件

使用工具集块，您可以使用其排版部分轻松设置文本样式和格式。

以下是您可以调整的列表：

• 字体类型 - 从大量字体中进行选择
• 字体大小、行高和字母间距
• 字体样式
• 文本转换——大写、大写、小写
• 文字颜色
• 文字阴影

如何创建模板以显示自定义帖子

您需要为自定义网站创建的最重要的功能之一是模板。 创建模板时，这意味着相同自定义帖子类型的所有帖子都将具有相同的布局和设计。

例如，我们可以为我们想要显示的每个健身房设计一个模板，作为我们“健身房”自定义帖子类型的一部分。

1. 转到工具集->仪表板，然后单击要为其设计模板的帖子类型的创建内容模板选项。

2. 就像我们之前所做的那样，您可以开始向模板添加字段。 下面我添加了许多不同的块，包括标题、图像和单字段块，它们都包含字段。

3. 保存并发布模板后，该自定义帖子类型的每个帖子都将显示相同的布局和样式。

构建您的存档页面

档案是 WordPress 为您生成的每种自定义帖子类型的内容列表。 您可以使用工具集块和古腾堡来自定义每个存档页面的外观。

下面作为 WordPress Gutenberg 教程的一部分，我为我的“健身房”自定义帖子类型创建了一个存档。

1. 转到“工具集”->“仪表板” ，然后单击要为其创建存档的帖子类型旁边的“创建存档”选项。

2. 在块编辑器中，您现在可以添加要为每个帖子显示的不同元素。 例如，您可以使用工具集块显示所有标准和自定义字段（例如我为“健身房”自定义帖子类型创建的评级、地址和帖子标题）。

3. 要更改列数，请单击“阻止导航”选项并选择WordPress 存档循环。
4. 在循环样式下，您可以调整列数。

5. 您还可以在 WordPress 存档块下对存档的默认设置进行一些更改，例如分页、排序等。

6. 您还可以在将显示您的帖子的主存档循环之前或之后添加自定义文本和其他块。 只需单击循环前后的 + 图标即可添加块或文本。

显示自定义内容列表

您可以使用工具集块和古腾堡以您喜欢的任何顺序将您的任何帖子显示为列表。 您还可以按您喜欢的任何方式设计列表，例如网格、简单的 HTML、表格或任何其他方式。 在工具集中，这种类型的列表称为视图。

然后可以将此列表添加到任何页面。 例如，下面我在主页上添加了一个特色健身房列表。

1. 单击要添加视图的页面上的 + 按钮。
2. 添加Views块并为其命名。
3. 选择您希望视图显示的内容。 例如，我想展示我的健身房。

4. 添加要作为视图的一部分显示的块。
5. 您可以编辑排序、显示哪些内容以及单击“阻止导航” 、选择您的视图并使用侧边栏时的更多内容。

6. 在视图循环下，您可以更改整个视图的许多设置，包括列数。

添加自定义搜索

您可以将您自己的搜索添加到您的视图中，这将允许您的用户在前端缩小他们感兴趣的内容。 例如，您可以为用户创建搜索以找到离他们最近的最佳健身房。

1. 将视图块插入您的页面。
2. 在视图创建向导中启用搜索选项。

3. 然后您可以在视图编辑区域中添加搜索字段、搜索按钮等。

4. 您可以使用右侧边栏来调整此搜索字段的选项。 这包括主要字段设置以及标签和样式选项。

以下是我们对最佳健身房的自定义搜索在前端的外观。

立即开始构建您的自定义网站！

现在您在阅读了这篇 WordPress Gutenberg 教程后了解了基础知识，您可以开始设计和构建您自己的自定义网站。 您可以立即下载 WordPress 和 Toolset Blocks，看看创建自己的网站是多么容易。

如果您有任何想法或问题，请在下面的评论中告诉我们！