WordPress区块使用与自定义教程全攻略

在这篇文章中，我们将全面解析 WordPress 区块的所有知识。如果你和我一样，曾是经典 WordPress 编辑器的忠实用户，那么你可能仍将区块视为 WordPress 中的“新”功能。事实上，WordPress 引入区块已有五年多时间，但它们至今仍是理解难度最高、使用率最低的 CMS 功能之一。WordPress 区块就像乐高积木——正如我所言，它们之间存在紧密联系——它们让你能够以几年前需要聘请专业网站设计师和开发人员才能实现的方式构建和定制网站。这也是人们如此喜爱它们的重要原因之一。一旦掌握它们，你会发现它们无比强大。在我解释完它们的工作原理后，你一定会爱上它们。

什么是 WordPress 区块？WordPress 已经有哪些区块？如何使用 WordPress 插件创建自定义区块？如何在没有插件的情况下创建自定义区块？让我们一同探索这些问题的答案。

什么是 WordPress 区块？WordPress 区块，顾名思义，就像可堆叠的积木，你可以将其添加到 WordPress 网站的页面和帖子中。随着 WordPress 5.0 引入古腾堡（Gutenberg）编辑器，区块也随之出现，如今我们大多数人已经熟悉这个编辑器。区块现已成为定制 WordPress 网站的标准方式，不仅限于帖子，你可以在整个网站中使用它们。想象一下，这有点像网站或页面生成器。你可以点击“+”按钮将区块添加到页面或帖子中，然后从各种区块选项中进行选择。当前版本的 WordPress 附带了 90 多个开箱即用的选项。

每个区块本质上都是一个小部件。它们可以执行各种任务，例如嵌入其他网站或服务的内容，为页面添加日历或联系表单等新功能，甚至添加预定义格式的特定内容。此外，大多数区块都提供自定义选项，允许你调整它们在网站上的显示方式或功能。WordPress 区块编辑器是经典编辑器的重大升级。在古腾堡之前的时代，WordPress 用户只能在帖子中添加文本和图片，然后才能深入到自定义代码中。

注：如果你无法在 WordPress 编辑器中访问区块，可能有两个原因：一是你的 WordPress 安装可能严重过时（例如好几年了），二是经典编辑器插件可能禁用了区块编辑器。在 WordPress 网站上激活该插件后，你将恢复经典编辑器体验。请在 wp-admin 中查看插件页面，以确定是否存在这种情况。

WordPress 已经有哪些区块？默认情况下，区块编辑器提供了大量可用的区块。你可以使用这些区块来定制 WordPress 主题，让作家和博主在文章中添加丰富的内容，拉入社交媒体内容，等等。让我们来看看一些最受欢迎和最有用的默认 Gutenberg 区块。

最常见的区块包括：
– 文本区块：你在区块编辑器中编写的每个段落都有自己的文本区块，但文本区块并不局限于段落。可以写一点，也可以写很多。
– 图片区块：当你既想展示又想讲述时，可以在其中加入一张图片，增加一些亮点。
– 列表区块：需要写提纲吗？要不要写一个有序的列表？你可以使用列表区块来完成！
– 图片库区块：分享度假照片或产品照片从来没有这么好看过。
– 表格区块：轻松创建定价表或共享电子表格数据。
– 引文区块：想要引起人们对某一观察结果的注意？受到与您正在撰写的文章相关的一句话的启发？使用引用区块突出显示它！

这些元素都可以通过区块编辑器添加到网站中。然后，你就可以在页面的内容部分对它们进行定位和样式设置。

嵌入式内容区块区块可以非常方便地将外部内容和小工具嵌入 WordPress 网站，而无需添加新插件或第三方附加组件。以下是一些最常用的嵌入区块类型，可用于插入外部内容：
– 日历区块
– 自定义 HTML 区块
– 推特区块
– YouTube 块
– 客户评价区块
– WooCommerce 联系表单
– 常见问题

使用这些区块类型，你可以超越基本的文本编辑器，创建具有各种功能和特性的交互式内容。

专用区块这里的 内容非常精彩。除了基本功能和嵌入式内容外，还有大量的高级区块可供你在特殊情况下使用。比如，你可能想改进网站的导航和用户体验，或者把 WordPress 用作一个完整的网站构建工具。以下是一些值得一看的内容：
– 按钮区块
– 栏目区块
– 组块
– 帖子旋转木马区块
– 帖子内容区块
– 查询循环区块
– 可重复使用区块
– 短代码区块
– 目录区块

通过这些区块，你可以直接从 WordPress 数据库中调入自定义内容，或者完全自定义网站上每个页面或帖子的布局、间距和流程。这一切都很不错。但如果你需要的块不是 WordPress 默认自带的，该怎么办呢？

幸运的是，区块也是可以自定义的。就像部件一样，你可以添加新的区块，甚至创建自己的区块，以满足网站设计和模板的需要。

如何使用 WordPress 插件创建自定义区块？到目前为止，创建自定义区块最简单的方法就是使用插件。Genesis Custom Blocks 插件让创建和启动自己的自定义区块变得非常简单。你需要对 HTML 和 CSS 有基本的了解，才能根据自己的需要创建区块和样式。有了这些基本技能，该插件就能解决所有困难的设置和配置工作，从而实现一个新的区块。

第 1 步：安装 Genesis Block 插件首先做第一件事：进入 WordPress 插件目录，安装 Genesis Custom Block 插件。（别忘了进入插件选项卡并激活它）。

第 2 步：添加新区块安装并激活后，你应该会在 WP 管理面板的左侧导航中看到一个新选项。点击 Custom Blocks > Add New。

第 3 步：自定义编辑器字段现在，我们可以开始创建自定义区块了。第一步是设置字段和自定义选项，当你在网站上使用该区块时，这些字段和选项就会出现。你可以把它想象成迷你版的区块编辑器。你将添加自定义字段和数据，这些字段和数据将由区块本身预先填充，或由编辑器或将区块添加到页面或文章的用户收集。例如，如果你要创建一个自定义的“行动号召”（CTA）区块，你可以添加以下字段：
– 标题文本
– 副标题文本
– 按钮文本
– CTA 按钮 URL

每个字段都有标签、名称和类型。你甚至可以自定义宽度或添加帮助文本，以方便其他编辑或撰稿人使用。

第 4 步：自定义标记和 CSS现在我们已经设置好了区块的后端，我们需要告诉 WordPress 如何实际显示添加的内容。在这里，你所掌握的 HTML 或 CSS 知识将派上用场。在下一步中，你基本上要编写代码区块，这些代码区块将从为代码区块编辑器配置的输入中动态生成。你可以使用普通的 HTML 和 CSS 来编写。你还可以使用双括号和编辑器中的字段名称（slug）从区块编辑器中提取变量。（例如，“{{button-text}}”）。

第 5 步：添加区块使用 Genesis 插件设置好区块后，它就会出现在 WordPress Gutenberg 编辑器的可用区块列表中。只需点击“+”，然后根据其名称找到新区块。添加完成后，你应该会看到 Gutenberg 区块编辑器屏幕，上面有你配置的字段和选项。就是这样！现在你可以使用自定义区块，将其添加到页面、帖子、侧边栏或任何需要的地方。

如何在没有插件的情况下创建自定义区块？如果你想更深入地学习如何从头开始创建新区块，你需要掌握更多高级知识。在本教程中，我们将介绍使用创建区块工具的基本步骤，让你无需使用插件就能创建完全自定义的区块。

警告：这是一个高级工作流程。这是一个高级工作流程。它需要你深入研究命令行。你需要了解 PHP、JavaScript、HTML 和 CSS。别说我们没警告过你！

步骤 #1：设置 Node.js、NPM 和本地 WordPress 安装在使用 create-block 之前，我们需要正确的设置和访问权限。以下是先决条件：
– 本地 WordPress 安装
– 终端或命令行设置
– Node.js 和 npm
你可能还想使用 nvm（Node 版本管理器）来安装或更新兼容的 Node.js 版本。有了这样的设置，我们将使用 NPM 的命令“npx”，直接从云中的托管目录执行 create-block 软件包。

步骤 #2：运行创建区块软件包现在，开始简单的一步。从终端导航到本地计算机上网站的 /wp-content/plugins 目录。然后使用 NPX 运行 create-block 软件包：npx @wordpress/create-block {{block-name}}该软件包将完成所谓“block scaffolding”的设置过程。它将注册所有相关元素，生成正确的文件和目录结构，并为整个程序块生成可编辑和可用的默认代码。

步骤 #3：激活插件新区块本身将以插件的形式出现。创建区块软件包完成后，你需要跳转到 WP 管理页面。进入“插件”页面，激活新创建的插件，其名称应与你在 npx 命令中使用的区块相同。

步骤 #4：自定义区块代码您将在插件目录内的 /src/ 文件夹中自定义区块的内容和功能。您将在 Index.js 中注册程序块并编写主要输出代码：请注意，registerBlockType 函数被设置为同时处理功能块编辑器输入（“编辑”）和前端显示（“保存”）。这只是构建功能区块的皮毛。您可能还想了解使用 WordPress Block API 编写功能块的完整文档。一旦掌握了基础知识，您就可以拉入额外的依赖关系，接入外部数据源，以及其他任何您想要的东西。

步骤 #5：在古腾堡编辑器中添加区块激活插件后，您可以在古腾堡编辑器中将区块添加到任何页面或文章中。使用“+”按钮或”/”命令访问它，就像访问其他区块一样。

小结好了，我们已经从基础阶段进入了高级阶段，但好消息是，现在你已经势不可挡了。有了默认的区块选项、Genesis 插件，再加上从零开始创建自己的区块的能力，没有什么是你做不到的！因为区块的功能如此强大和灵活，所以没有什么是你不能创建的。现在，你的 WordPress 网站拥有几乎无限的功能，你可以创建自己梦想中的网站、应用程序或项目。