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

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

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

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

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

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

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

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

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

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

您可以通过查看我们与 Gutenberg 兼容的 WordPress 主题列表来快速浏览最佳主题。

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

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

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

• 您的工作流程会简单得多。 现在您无需设计页面然后实施它们。 您可以简单地在 WordPress 上构建它们并立即查看它们的外观。
• 无需在后端和前端之间切换。 相反，您可以简单地在后端设计模板并立即查看它们的外观。
• 非开发人员可以建立他们梦想中的网站。 您不再需要成为编码专家来创建您想要的网站。 使用块，您可以轻松地自己添加复杂的元素，而无需 html 或 css。
• 花更少的时间阅读文档。 Toolset Blocks 简单直观的特性意味着您无需阅读大量文档即可了解如何构建某些元素。 许多块描述了您可以实现的目标，并且可以轻松地使用和试验。
• 无需与任何第三方插件进一步集成。 使用经典的 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. 将块内容设置为来自字段值

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

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

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

4. 打开动态标题文本。

5. 选择您要显示的帖子字段。 下面我选择了帖子标题。

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

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

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

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

每个体育馆的描述现在将出现在各自的帖子中。

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

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

1. 选择字段和文本块。

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

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

4. 选择您要添加的内容（在我的例子中是Rating字段），然后单击Insert Shortcode 。

显示图片库

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

1. 选择重复字段/图库块。

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

在编辑器中设置块样式

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

有两种方法可以设置块样式：

1. 使用界面样式化项目

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

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

2.使用容器块

容器块是您只能在工具集块中找到的块。 使用容器块将某些块组合在一起，并为每个块设置特定样式，这些样式将针对每个帖子显示。

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

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

排版控制

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

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

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

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

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

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

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

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

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

建立你的档案页面

档案是 WordPress 为您生成的每种自定义帖子类型的内容列表。 您可以使用 Toolset Blocks 和 Gutenberg 自定义每个存档页面的外观。

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

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

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

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

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

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

显示自定义内容列表

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

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

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

4. 添加要显示的块作为视图的一部分。
5. 您可以编辑排序、显示的内容等，当您单击块导航时，选择您的视图并使用侧边栏。

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

添加自定义搜索

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

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

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

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

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

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

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

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