区块

许多人抱怨开始构建古腾堡区块和应用程序的障碍。学习曲线陡峭，主要是由于开发环境的安装和配置困难。此外，扎实的JavaScript、Node.js、React和Redux知识是这个相当复杂的秘诀的必备要素。 官方的WordPress区块编辑器手册为开发人员提供了大量信息，但您可能会发现自己迷失在这些细节的海洋中。 值得一提的是，Gutenberg项目的首席架构师Matías Ventura在接受WP Tavern采访时所报告的内容： 虽然有些人可以快速学习它，但这对人们来说仍然是一个很大的障碍。我认为这有几个层次；文档在组织和演示方面可能要好一个数量级。我希望我们可以在那里做更多的事情。 考虑到这一点，我们决定提供一个分步教程，旨在帮助我们的读者开始使用Gutenberg区块开发。 古腾堡区块开发先决条件 什么是古腾堡区块？ 设置您的WordPress开发环境 初学者区块脚手架的演练 项目：建造你的第一个古腾堡区块 古腾堡区块开发先决条件 对于本教程，唯一需要的技能是对WordPress插件开发有很好的了解，并且至少对HTML、CSS、JavaScript和React有基本的了解。 这会是一个雄心勃勃的项目吗？你打赌它会的！ 在完整性和简单性之间找到正确的折衷方案或决定包含哪些主题和省略哪些主题并不容易。 希望中高级读者能原谅我们没有深入研究某些概念，例如React状态、Redux存储、高阶组件等。这些主题需要额外的空间和注意力，并且可能对于开始区块开发来说太高级了（除非您是 React 开发人员）。 出于同样的原因，我们不会涵盖与Gutenberg区块开发相关的一些更高级的主题，例如动态区块和元框。 有了本文结尾您将获得的知识，您将能够立即开始享受乐趣并提高工作效率。 一旦您开始构建区块，您将准备好进一步提高您的技能并自行构建更高级的古腾堡区块。 什么是古腾堡区块？ 自2018年12月首次发布以来，区块编辑器在各个方面都得到了极大的改进：更强大的API、更高级的用户界面、改进的可用性、大量新区块、全站点编辑的首次实现等等. 简而言之，即使古腾堡仍在大力开发中，它也已经走过了漫长的道路——如今，区块编辑器已成为可靠的功能性页面和网站构建器的成熟候选者。 从开发人员的角度来看，Gutenberg是一个基于React的单页应用程序(SPA)，它允许WordPress用户在WordPress中创建、编辑和删除内容。但是，这不应该让您想到传统内容编辑器的增强版。 我们想明确这一点： Gutenberg不是常规的WYSIWYG编辑器。相反，它重新定义了WordPress中的整个编辑体验。 在古腾堡，内容被划分为区块，这些区块是用户可以用来创建文章和页面或整个网站的“砖块”。 但从技术上讲，什么是区块？ 我们喜欢WordPress的定义： “区块”是用于描述标记单元的抽象术语，这些标记单元组合在一起形成网页的内容或布局。这个想法将我们今天在WordPress中实现的概念与短代码、自定义HTML和嵌入发现结合到一个一致的API和用户体验中。 标题、段落、列、图像、画廊以及构成编辑器界面的所有元素，从侧边栏面板到区块工具栏控件，都是React组件。 那么，什么是React组件？W3Schools提供以下定义： 组件是独立且可重用的代码。它们的用途与JavaScript函数相同，但独立工作并通过render()函数返回HTML。 在WordPress 5.8中使用Gutenberg区块 虽然Gutenberg提供的编辑体验与经典的WordPress编辑器相比是全新的，但WordPress将您的内容片段存储在数据库中的方式根本没有改变。这是因为Gutenberg是一个在WordPress中运行的应用程序，但不会改变CMS的核心工作方式。 使用Gutenberg创建的文章（包括文章、页面和自定义文章类型）仍存储在wp_posts表中，与经典编辑器完全相同。 但是在使用Gutenberg创建的文章中，您会在表格中找到更多信息，这些信息代表了通过Classic Editor与Gutenberg创建的文章之间的根本区别。 这些信息看起来像HTML注释，它们有一个特定的功能：分隔区块： 代码编辑器视图中的博客文章。 区块分隔符告诉WordPress要在屏幕上呈现什么区块。它们还为JSON对象中的区块属性提供值。这些道具决定了区块应该在屏幕上呈现的方式： wp_posts存储在表中的博客文章 设置您的WordPress开发环境 设置现代JavaScript开发环境需要扎实的高级技术知识，例如Webpack、React和JSX、Babel、ESLint等。 被吓倒了？不要！WordPress社区已经通过提供强大的工具来帮助您避免混乱的手动配置过程。 为简单起见，我们不会在本文中介绍转译（不过，我们建议您在了解区块开发的基础知识后熟悉一下）。相反，我们将介绍两种替代工具，您可以使用它们在几分钟内快速轻松地设置现代JavaScript开发环境。您可以选择对您的项目最方便的一个。 设置JavaScript开发环境以构建Gutenberg区块是一个三步过程： 安装Node.js和npm 设置开发环境 设置区块插件 让我们开始吧。 1. […]

栏目是大多数现代网站和页面构建器的关键组件。幸运的是，WordPress区块编辑器使您能够同时使用列和行，因此您可以完全控制每个页面的布局。然而，尽管Builder将自动添加行，你需要选择在哪里以及如何使用栏目区块添加栏目。 在本教程中，我们将向您展示如何在 WordPress中添加此区块以及如何配置它。然后，我们将介绍一些提示，以便您可以充分利用您的专栏，以及一些有关区块的常见问题 (FAQ) 如何将栏目区块添加至页面或文章 首先，打开要处理的页面或文章的区块编辑器。单击您添加的最后一个区块下方的加号图标 (1)，或使用屏幕顶部的菜单，然后选择“栏目” 选项 (2)： 区块编辑器为您提供了多个选项，供您选择要在所选行中包含的栏目数： 默认情况下，区块编辑器仅允许您选择在一行中最多包含三列的预设。但是，一旦您放置了这些预设之一，您就可以单击它们之间的加号以向该行添加更多元素： 可以这么说，编辑器将每一列视为自己的“部分”。例如，如果您有一行包含三列，您可以在每列中添加单独的区块以创建定价表： 您可以将编辑器中可用的任何区块添加到您正在处理的每一列。放置所需的区块后，您可能还想花一些时间自定义列的设置。 栏目区块设置和选项 当您将鼠标悬停在区块编辑器中带有列的行上时，将出现一个格式菜单。该菜单包括用于移动列 (1)、更改其对齐方式 (2) 和修改行宽 (3) 的选项： 您看到的格式菜单会随着您添加区块而改变。当您将鼠标悬停在包含区块的列上时，该元素的格式菜单将替换默认菜单。 对于此示例，我们向所有列添加了表格区块。当我们将鼠标悬停在其中任何一个上时，会出现以下格式菜单： 除了格式菜单之外，还有另一组选项可让您自定义栏目区块。要访问它，请选择包含要编辑的栏目的行，然后单击屏幕右上角的齿轮图标 (1)。将弹出一个侧边栏，包括更改该行颜色 (2)、填充 (3) 和列宽 (4) 的选项： 颜色设置使您能够更改行内文本和链接的颜色，以及其背景的颜色。请记住，您在此处选择的设置适用于行中的所有列。但是，您可以通过调整每列中的各个区块设置来取代这些选项。 如果您想进一步自定义此区块，您还可以从设置菜单的“高级”选项卡中设置HTML锚点和其他CSS类： 这就是您需要了解的有关如何使用和配置这个重要区块的所有信息。现在让我们回顾一些提示，以帮助您有效地使用栏目。 有效使用栏目区块的提示和最佳实践 栏目是网页设计中的通用元素。您几乎可以在任何情况下使用它们，因为它们有助于为任何页面或文章提供结构。 在视觉上，栏目可帮助您分解长段的段落，并将列表、表格甚至图像并排放置。这是默认WordPress主题之一的示例，使用列来实现与图片区块的重叠效果： 在大多数情况下，您不希望列重叠。但是，对于如何使用列并没有一成不变的规则。只要结果看起来美观，您就可以随意使用此区块进行试验。 关于栏目区块的常见问题 到目前为止，您已经对如何在WordPress中使用栏目有了扎实的掌握。为确保您没有遗漏任何内容，让我们回顾一些常见问题。 栏目区块可与页面构建器插件一起使用吗？ 一般情况下，第三方页面构建器插件取代了默认的WordPress编辑器。这意味着您将无法访问栏目区块。但是，大多数页面构建器插件都包含自己的行和列，因此您可以使用类似的功能。 可在页面或帖子中添加多少列？ 栏目区块允许您在预设行内添加到三列。但是，您可以手动添加更多行。请记住，如果添加太多列，它们可能没有足够的空间来正确显示其内容。 可以在小部件中使用栏目区块吗？ WordPress支持使用区块编辑器自定义小部件区域，例如页脚或侧边栏。这意味着您可以访问与处理页面或文章时相同的所有区块。请记住，由于您的工作空间可能会减少，因此在小部件区域中使用多个列会使您的内容看起来很拥挤。 小结 对于现代页面构建器工具而言，仅行是不够的。创建和自定义行和列的选项使您可以完全控制网站上每个元素的位置。 WordPress栏目区块使用起来非常简单。您可以在任何单行中添加任意数量的列。此外，您可以在列中放置任何您想要的区块，并自定义其内容、样式等。

您在网站上组织和排列元素的方式会对网站的整体外观甚至用户体验 (UX) 产生重大影响。WordPress空格区块是一个简单的工具，可以帮助您更有效地做到这一点。顾名思义，它在区块之间创建空间，这可以使您的页面和文章更具吸引力且更易于阅读。 在本教程中，我们将解释如何将空间区块添加到您的WordPress文章或页面以及如何使用它。我们将探索区块的各种设置和选项，并提供一些有效使用它的最佳提示和最佳实践。然后我们将通过回答一些常见问题来结束。 如何将空格区块添加到文章或页面 如果您想为WordPress内容添加一些额外的空间，您可以先导航到任何文章或页面。接下来，单击编辑器中的“添加区块”按钮，该按钮由加号图标 (1) 标记。在那里您可以搜索“spacer”，然后选择第一个选项 (2)： 或者，您可以通过在编辑器的文本字段中输入“/spacer”来将区块添加到文章或页面。打你的输入键，空间区块将自动添加。 插入区块后，您会注意到顶部有一个新工具栏。我们将在下一节探讨它提供的各种选项。 空格区块设置和选项 如果您熟悉使用WordPress区块，您可能已经知道每个区块都有自己的一组控件，可用于配置它。所述空格区块是没有什么不同。 在区块工具栏中，有三个主要选项： 转换按钮，它可以让你转换成区块一组或栏目 移动手柄（和/或拖动图标），使您能够在页面或文章上向上或向下移动区块 更多选项（三个垂直点），打开带有附加设置的菜单 您可以在此处找到这些按钮： 在更多选项菜单下，您可以复制或复制区块： 还有用于将空白区块添加至可重用块、作为HTML编辑等的设置。 WordPress区块编辑器的有用之处之一是它还允许您调整区块的大小。例如，如果要调整区块的高度，可以在右侧菜单中进行： 在“间隔设置”部分下，您将找到以像素为单位调整区块高度的选项。您可以使用滑块或在文本字段中手动输入所需的值。然后您可以查看高级部分以配置HTML锚点和其他CSS类。 有效使用空格区块的提示和最佳实践 空格区块是比较容易的WordPress区块使用的一个。它没有大量的设置或配置选项。 但是，在使用它时，您可能需要牢记一些提示。例如，请记住，有效利用空白（也称为“负空间”）可以在您的网页设计中大有帮助。它可以帮助使您的页面看起来更干净，从而更专业。因此，在您的内容看起来过于拥挤或难以阅读的区域中考虑使用空格区块是明智之举。 此外，我们还建议您仅在要向页面上的特定区域添加空白时才使用此区块，而不是在段落之间添加空格。对于后者，我们建议改用段落区块。 最后，为了确保页面的外观保持一致，您可能需要考虑为您使用的每个空格区块设置相同的高度。默认情况下，它设置为100像素，但您可以随意使用最适合您网站设计的任何内容。 关于空白区块的常见问题 在这一点上，您应该对这个WordPress区块以及如何使用它感到非常熟悉。但是，让我们回顾一些关于它的流行和常见问题，以确保我们已经涵盖了所有基础知识。 如何调用空格区块？ 要在WordPress中找到这个区块，您有几个选择。第一步是导航到您想要将其添加到的文章或页面。接下来，单击“添加区块”按钮（或加号图标），然后在文本字段中搜索“空格”。或者，您可以直接在文本编辑器中键入“/spacer”，然后按Enter键。 空格区块在文章和页面中有什么作用？ 正如它的名字一样，这个区块在你的WordPress页面和文章上的其他区块之间增加了空间。当您想在页面上创建更多空白或只是想扩大默认设置的区块之间的区域时，它可以是一个有效的工具。 可在任何地方添加空格区块吗？ 您可以在WordPress站点上的任何位置使用空格区块，以授予您对区块编辑器的访问权限。当然，您最有可能使用它的地方是您的页面和文章。但是，您也可以在编辑WordPress工具时添加它。 小结 有很多方法可以组织您网站上的页面和文章，使其既实用又美观。如果您希望在页面上的区块之间创建更多空白，则空格区块是一个重要的工具。 正如我们所见，此区块是一种分离WordPress内容中元素的简单方法。您可以根据需要轻松地将其多次插入您的文章和页面，然后以像素为单位自定义其高度。

在WordPress页面和文章中显示代码可能很棘手。仅在内容中发布代码可能会产生有趣的结果，特别是如果WordPress显示错误或您的安全系统将您锁定在恶意活动之外。幸运的是，WordPress代码区块可以轻松显示代码片段。了解如何使用此块将帮助您以最佳方式在您的网站和读者的内容中显示代码。 在本教程中，我们将查看WordPress代码区块并了解它的作用。我们将了解如何将其添加至文章和页面，并查看其设置和选项。坚持到底，查看有关如何使用它的提示和最佳实践，并查看常见问题。 如何将代码区块添加至文章或页面 要将代码区块添加到页面和文章，请选择要放置代码块的内容区域旁边的区块插入器工具，或选择页面左上角的插入器。输入区块的名称并在它出现时选择它或滚动区块以查看其中的内容。 如果您愿意，可以在希望区块出现的区域键入/code。然后，只需按Enter键或从出现的选项中选择区块。 现在，您的内容中有一个代码区块，您可以在其中添加要显示的任何类型的代码。代码会自动标记代码标签，因此它可以正确显示为代码。这有助于为读者提供示例以供他们在自己的项目中学习或使用。在这个例子中，我使用了来自WordPress支持页面的伪代码（因为）lazy.level = advanced。 代码区块设置和选项 代码区块有两个地方可以找到设置和选项。第一个是区块上方的代码工具栏。第二个是右侧栏中的选项。我们会看看两者。 代码区块工具栏 单击区块中的任意位置以查看其工具栏。如果您没有看到所有工具，请将鼠标放在块下方的新区块位置，然后单击该区块。所有设置都会出现。 更改代码区块类型或样式 第一个设置使用左右箭头。这会将块更改为自定义HTML区块、预格式化区块、更改列，并允许您创建一个组，以便您可以调整背景颜色、选择边框和调整其他选项。将鼠标悬停在它们上方可让您预览它们的外观。我将鼠标悬停在自定义HTML选项上。 拖拽 拖动工具包括六个点。抓住这些点将块拖动到任何你想要的地方。当您将鼠标悬停在不同区域上时，会出现一条蓝线，它将放置在每个可能的位置。 当你放下它时，方块将被放置在它的新位置。 上下移动 每次单击内容区块时，向上和向下移动箭头都会将块向上或向下移动一个区块。 粗体和斜体 粗体和斜体设置适用于您突出显示的代码。您可以一起或单独使用它们。在这个例子中，我同时使用和独立使用。这是引起对代码中某些行或命令的注意的好方法。 链接 该链接可让您将任何代码设为可点击的链接。您可以搜索或输入突出显示的代码部分的 URL。如果您想链接到每个命令的教程、其他示例、代码的来源等，这很好。您可以在同一选项卡或新选项卡中打开链接。 更多设置 代码区块的更多设置会打开一个包含多个选项的下拉框。我已经应用了这个例子中的每个选项。 内联代码– 显示格式化为代码的文本。它将文本单独放置在一行上。由于所有内容都格式化为代码，因此字体看起来相同。 内嵌图像– 在您放置鼠标的文本中放置图像。它会打开媒体库，您可以在其中选择图像。如果单击图像，您将看到一个下拉框，您可以在其中更改其宽度。 键盘输入– 将键盘标签添加到您选择的代码中。代码以浏览器的默认等宽字体显示。 删除线– 在您突出显示的代码中添加一行。 下标– 将代码格式化为下标。 上标– 将代码格式化为上标。您可以同时使用下标和上标。这减小了字体的大小并使代码水平居中。 文本颜色– 更改您突出显示的代码的颜色。从预制颜色中选择，在颜色选择器工具上选择一种颜色，或输入 HEX、RBG 或 HSL 形式的值。 更多选项 代码区块选项位于工具栏最右侧的三个点内。选项包括： 隐藏更多设置 – 隐藏右侧边栏，为您提供干净宽敞的工作区。 复制– 复制区块，以便您可以将其粘贴到内容区域内的任何位置。 创建副本– 复制区块并将其放在原始区块下。 在区块前插入– 在代码区块上方添加一个内容区域。 […]

WordPress文件区块可以轻松地为您的页面和文章中的文件添加下载链接。这是最独特的WordPress区块之一，因为它根据所选文件的类型添加了不同的选项。知道如何很好地使用这个区块可以引起人们对下载的注意。 在本教程中，我们将查看文件区块并了解如何将其添加到您的文章和页面。我们还将查看它的设置和选项，查看使用它的提示和最佳实践，并查看常见问题。 如何将文件区块添加到文章或页面 要添加文件区块，首先，单击要放置区块的位置或编辑器左上角的区块插入器工具。接下来，搜索“文件”并选择它。 您还可以按类型 /file 添加块，然后在您希望块出现的位置按 Enter 键，或从您键入时出现的选项中选择文件。 然后文件区块将被添加到您的内容区域。 要使用它，只需选择上传文件或选择媒体库来选择文件。PDF将显示文件的预览。PDF的工具会因浏览器而异。我正在Chrome中查看 PDF，其中包括用于显示或隐藏PDF菜单、查看标题、页码、比例、适合页面、旋转、下载、打印和查看PDF查看选项的PDF工具。 其他文件，例如图像，将显示文件名和下载按钮。 文件区块设置和选项 文件区块包括块本身和右侧边栏中的设置和选项。 文件区块工具栏 当您选择区块时，文件区块工具栏位于块上方。 选择文件中的文本，例如按钮的文件名，为文本添加新设置。 更改区块类型或样式 您可以将区块样式更改为栏目或组合。栏目更改列数，而组合允许您将多个区块的样式控制为单个区块。 拖动和移动 拖动工具可让您将区块拖动到您想要的任何位置。您还可以使用移动工具的向上和向下箭头在您的内容中向上或向下移动区块。 文件更改对齐 对齐选项包括左、右、宽幅和全幅。将其左右放置在屏幕的那一侧，并用其下方段落中的文本将其包裹起来。 这是宽幅。它将区块放置在内容区域的左侧。 粗体和斜体 选择文件名或下载按钮会显示粗体和斜体选项。这些会影响您突出显示的文本，它们可以一起使用或单独使用。我将文件名设为粗体，按钮文本设为斜体。 更多选择 更多选项可打开用于设置文本样式的选项。我在示例中添加了其中的几个。它们包括： 内联代码– 将文本样式设置为看起来像代码。 内嵌图像– 将媒体库中的图像添加到鼠标光标所在的位置。我在按钮上添加了一个图像。 键盘输入– 使用键盘 HTML 格式设置文本样式。 删除线– 在文本中放置一行，如上图中的文件标题。 下标– 使文本成为下标。 上标– 使文本上标。 文本颜色– 允许您更改文本的颜色，如上面的文件标题。图标在使用时移动到工具栏。 对于颜色选项，包括预先选择的颜色或创建自定义颜色选择器。颜色选择器包括一个用于十六进制代码、RGB代码或HSL代码的字段。 文件替换 此选项可让您将文件与库中的另一个文件或您上传的文件交换。 复制网址 这会将文件的URL复制到剪贴板。您会在左下角看到一条消息，表明URL已被复制。 选项 选项包括： 隐藏更多设置– 隐藏侧边栏。 复制– […]

WordPress视频区块使您可以轻松地将视频上传和添加到您的页面和文章。它为您提供了大量控制大小和功能的选项。使用此区块添加视频使内容看起来更专业和可取。幸运的是，视频区块易于使用。 在本教程中，我们将探索视频区块。我们还将看到它的设置和选项，查看有关如何使用它的一些提示和最佳实践，以及常见问题。 如何将视频区块添加至文章或页面 要将视频区块添加到您的内容中，首先，将光标放在您希望区块出现的位置，然后选择插入器工具。接下来，将打开一个搜索框，您可以在其中搜索区块或滚动查看选项。搜索视频并在结果中显示时选择它。 如果您愿意，可以在要放置区块的位置键入/video并按 Enter 键或从选项中选择它。 视频区块将放置在内容区域内。插入媒体的工作方式与图片区块相同。上传视频、从库中选择视频或插入要显示的视频的URL。如果URL来自YouTube等来源，则该区块将转换为该类型的区块。在您上传视频之前，选项很少。 视频播放器包括所有基本播放选项，包括播放/暂停按钮、进度条、音频、全屏以及下载和画中画按钮。画中画将视频放置在右下角，以便在用户滚动浏览网站时可以播放。您可以在视频下方放置标题。 视频区块设置和选项 选项和设置包括工具栏和侧边栏。在上传视频之前，您不会看到所有这些设置。 视频区块工具栏 单击视频区块内的任意位置以查看工具。在您在此区块下添加区块区域之前，某些工具可能不会显示。让我们详细看看每个设置。 视频更改区块或样式 选择视频播放图标会打开一个下拉框，您可以在其中将区块转换为其他类型的区块。此示例显示封面。 组合– 这会将区块添加到组中，以便您可以将它们作为单个区块进行调整。 栏目– 这会将区块放置在列中。 媒体和文本– 这会在媒体旁边添加文本，创建两列。 封面– 这会在视频上放置一个标题。您可以将标题从段落区块更改为其他类型的文本区块或按钮。 文件– 这会将视频更改为带有标题的按钮，允许用户下载视频而不是从网站播放。 视频区块拖动工具 用鼠标抓住拖动工具将其移动到内容中的任何位置。将出现一条蓝线，指示在您四处拖动区块时将放置该区块的位置。 然后视频区块将被放置在其新位置。 视频区块移动 使用向上和向下箭头将视频区块移动一个内容部分。 视频区块对齐方式 对齐选项包括左、中、右、宽幅和全幅。左右对齐将下一个区块中的文本环绕在视频周围。我已将此示例设置为右对齐。 这是宽幅。它占据了大部分屏幕。 视频区块文本轨道 文本轨道在视频播放时显示字幕。它们的格式为WebVTT（Web视频文本轨道）.vtt文件。文件从媒体库加载。 上传 .vtt 文件后，您将看到编辑曲目的选项。添加标签，选择语言，然后选择曲目类型。 标签是用户在查看可用轨道时将看到的文本轨道的标题。 源语言是文本轨道的语言。 种类是指将显示的轨道类型。选项包括： 字幕– 对话的翻译。 说明文字– 对话、音效、音乐等的转录。 内容描述– 描述正在发生的事情的文本。 章节– 用于导航的章节标题。 元数据– 供JavaScript使用的数据。 然后将字幕添加到用户可以选择的播放器选项中。 视频区块替换 这使您可以用不同的视频替换视频。 视频区块选项 […]

您在网站上安排和显示内容的方式会显着影响您的参与度和转化率。为了增强用户体验 (UX)并使您的页面和文章更易于使用，拆分大块文本是一个明智的主意。有多种方法可以做到这一点，但最简单的选择是使用WordPress分隔符区块。 在这篇文章中，我们将向您介绍如何将分隔符区块添加到您的WordPress文章或页面。我们将解释它提供的每个设置和选项，为您提供有效使用它的技巧，并回答一些常见问题。 如何将分隔符区块添加至文章或页面 在您的内容中添加任何WordPress区块是一个快速而简单的过程。首先，导航到要插入分隔符的页面或文章。 单击添加区块按钮 (1)，然后在文本字段 (2) 中搜索“分隔符”。这将是第一个选项 (3)： 您还可以通过在任何段落块的编辑器中键入“/separator”来插入此区块。当您按Enter键时，将自动插入区块。 分隔符区块设置和选项 每个WordPress区块都有其各自的设置和控件。例如，分隔符区块提供了几种直接在编辑器中配置它的方法。 将区块插入文章后，将出现一个工具栏菜单： 让我们来看看每个选项的含义： 转换允许您将区块转换为组合或栏目。 对齐方式可用于将线的对齐方式更改为左对齐、居中对齐或左对齐。 更多选项提供了一些额外的设置。 在更多选项菜单下，您可以复制块并在其前后插入另一个元素。 在屏幕的右侧，您可以找到其他块设置。例如，在样式部分下，您可以选择默认样式或创建粗线或虚线： 您还可以在下拉菜单中设置默认样式。 在颜色部分下，您可以更改分隔线的颜色： 您可以从调色板中包含的一种预设颜色中进行选择。但是，如果您想应用自定义颜色，您也可以单击自定义颜色链接。 如果您想添加自己的CSS，可以通过单击“高级”选项卡来实现。然后您可以在文本字段中输入您喜欢的任何内容。 有效使用分隔符区块的提示和最佳实践 分隔符区块是一个相对简单的和直接的WordPress的功能。一旦您弄清楚如何将其插入文章中，您就应该能够轻松使用和自定义它。 但是，我们确实有一些建议，您可能需要考虑更有效地使用此元素。例如，记住谨慎使用分隔符很重要。 如果您有一篇冗长的博客文章，最佳做法是最多每隔几段添加一行。过于频繁地使用它们可能会分散注意力，而不是无缝分解文本的一种方式。 此外，如果您计划在您的站点中经常使用分隔符并希望保持统一的样式，您可能需要将分隔符添加到您的可重用区块中。这样，您就不必经常应用所需的样式和颜色。相反，您可以简单地从保存的集合中插入它。 关于分隔符区块的常见问题 到目前为止，您应该对WordPress分隔符区块以及如何使用它有一个深入的了解。但是，让我们回顾一下有关此区块的一些最常见问题，以确保我们已涵盖所有基本信息。 如何调用WordPress分隔符区块？ 您可以通过导航到任何文章或页面在WordPress中找到此区块。接下来，在要添加线条的文本区块之间单击，然后选择加号图标。 在搜索字段中，输入“分隔符”，然后单击第一个选项。或者，您可以通过在段落块中键入“/separator”，然后按 Enter键来找到它。 分隔区块和空格区块有什么区别？ 如果您是块编辑器的新手，您可能想知道分隔符区块和空格区块之间有什么区别。这两个功能都可用于在内容区块之间添加空间。 但是，空格区块只是添加了白色或负空间。分隔符区块，则主要是增加了一个可见的线。 在哪里使用WordPress分隔符区块？ 您可以在WordPress中可以访问区块编辑器的任何位置插入此元素。因此，您可以在页面和文章中使用它，也可以在编辑WordPress小工具时使用它。 小结 为了让您的网站内容和博客文章美观且易于使用，最好将大块文本分解为更小、更易消化的文本。有几种不同的方法可以解决这个问题。但是，最简单的选择之一是使用分隔符区块。 这个WordPress区块将在内容区块之间添加一条极简线条。它还提供各种样式和颜色选项，让您可以将其与当前的主题和品牌无缝集成。您可以将其插入到您的任何WordPress文章和页面中，以使您的内容看起来更好、更易于阅读。

保持网站页面上的内容简洁和有条理很重要，尤其是在您的主页上。幸运的是，WordPress更多区块可让您向访问者展示您的帖子以及全文链接。知道如何正确使用它可以帮助您获得更干净、更有效的WordPress页面。 在这篇文章中，我们将解释如何将此区块添加到您的WordPress文章中。然后我们将讨论它的每个设置和选项、有效使用它的技巧和最佳实践，以及一些常见问题。 如何在WordPress文章中添加更多区块 向您的WordPress内容添加区块既快速又简单。首先，导航到要插入更多区块的文章。请注意，您只能将此元素添加到您的文章中。不幸的是，它不适用于您的WordPress页面。 此外，请务必注意，您需要在希望读者看到的摘要文本之后插入此区块。例如，也许您想在第一段之后切断文章。如果是这种情况，您可以在第一段和第二段之间插入此区块。 为此，请单击“添加区块”图标 (1)，在搜索字段 (2) 中键入“更多”，然后选择第一个选项 (3)： 或者，您可以直接在WordPress编辑器的段落区块中输入“/more” 。然后按 Enter，块将自动插入到文章中。 您可能已经知道每个WordPress区块都有自己独特的一组控件和设置。 更多区块设置和选项 将此区块插入文章后，顶部会出现一个工具栏。它只有两个图标。第一个是更改区块类型或样式： 此选项可让您更改去块的样式。您可以使用它来创建栏目或组。 第二个图标通向区块的选项： 在这里，您会发现可以采取的各种其他操作。例如，您可以复制该区块，在其前后插入另一个元素，或者将其添加到您的可重用区块中。 您还可以编辑默认文本。为此，您可以单击文本，然后将其更改为您想要的任何内容： 右侧边栏中还有一个附加设置。如果它不可见，您可以通过单击右上角的齿轮图标访问此设置面板。然后选择区块选项卡。 有一个选项可以隐藏完整内容页面上的摘要。如果您打开此开关，您的访问者在单击“阅读更多”后将无法看到摘要。 有效使用更多区块的提示和最佳实践 既然您了解了此区块及其各种设置的工作原理，您可能想知道如何使用它。有几个因素可以帮助您有效地利用它。 首先，请记住您可以更改显示的文本。默认情况下，该区块使用“阅读更多”作为链接文本。但是，您可以根据需要对其进行编辑，以匹配您网站的风格和基调。一些例子包括： 继续 阅读全文 下一页 此外，我们建议您对您选择包含在“阅读更多”链接上方的摘要保持战略性。由于您无法展示全文，因此确保您提取或撰写引人入胜的内容非常重要，以吸引访问者的注意力。这样做可以极大地激励读者实际点击链接，从而提高您的参与度和转化率。 更多区块功能的目的是提供一种简单而有效的方式来截断您的博客条目。但是，此元素可用于多种情况。许多WordPress用户将其严格应用于博客存档页面或主页。 但是，还有一些其他情况可以派上用场。例如，如果您有一个FAQ页面，这个块可以让您轻松地为每个问题添加一个简洁的答案，以及一个指向详细解释的链接。 更多区块的常见问题解答 在这一点上，您应该几乎了解有关此 WordPress 元素的所有信息，包括它是什么以及如何使用它。在我们开始之前，让我们通过回答有关此块的一些最常见问题来回顾一下关键信息。 在哪里找到更多区块？ 您可以通过导航到您网站上的任何文章来找到此区块。然后，在您希望显示“阅读更多”链接的摘要段落之后，单击加号图标（“添加区块”按钮）。您可以在文本字段中搜索区块。 或者，您可以通过在段落块中键入“/more”来找到它。然后按 Enter自动将此元素插入文章中。 这个区块有什么作用？ 简而言之，此元素为您提供了一种简单易用的方式来呈现文章的预览或摘要，而实际上不必包含全文。相反，您可以在内容预告之后插入区块以及“阅读更多”链接。您还可以自定义链接文本以说出您想要的任何内容，例如“阅读全文”。 应该在哪里添加这个去块？ 您可以将此区块添加到您的任何WordPress文章中。不幸的是，您目前无法将其插入您的页面。同样重要的是要提到某些主题可能不支持此元素。如果您无法找到它，您可以尝试切换到默认主题以查看您当前的主题是否有问题。 小结 创建主页和存档页面时，您可能希望包含指向许多不同文章的链接。然而，为了吸引访问者实际点击并阅读完整的文章，插入每篇文章的简短摘录以吸引他们的注意力是有帮助的。 正如我们在这篇文章中所讨论的，“更多”区块是一项有用的功能，您可以使用它为用户提供全文文章的预览。您可以将其添加到任何WordPress文章中，并根据需要自定义默认文本。

使用区块编辑器将单个元素添加到您的文章或页面很简单。但是，如果您打算在整个网站中使用类似的区块，则将它们放在一起并将它们保存为模板是有意义的。一旦你掌握了组区块，这样做就变得简单了。 在这篇文章中，我们将谈论哪些组区块原理，以及如何将它添加到您的文章和网页。我们还将向您展示如何配置其设置，并讨论有关分组元素的一些提示和最佳实践。 如何将组区块添加至文章或页面 添加此区块很简单，但需要的过程与您将用于其他区块的过程不同。首先，打开您要处理的文章或页面，选择添加新区块，然后选择“组” 选项： 放置此区块时，将出现一个新部分，包括添加多个元素的选项。请注意，现在有两个用于添加区块的按钮。如果您使用第一个，您将在集合中添加一个项目。第二个按钮将在组区块之后 添加新模块： 您可以在组区块中插入多个任何类型的元素。在我们的示例中，我们添加了三个表块。乍一看，可能不清楚该组中包含哪些元素。为避免混淆，您可以单击块编辑器主菜单中的列表视图 按钮：   这是将组区块添加到文章和页面的第一种方法。另一种方法是在组中添加您想要的所有区块，然后在编辑器中选择它们。如果您选择多个元素，块编辑器将为您提供链接它们的选项： 一旦您的块准备就绪，请记住您可以将特定分组保存为模板或可重复使用的区块。我们将在下一节中向您展示如何做到这一点。 组区块设置和选项 由于组区块可以包含多个不同的元素，因此您可能会看到多个格式菜单。本节将向您展示如何使用此区块的可自定义选项和常规设置。 工具栏设置 如果将多个表格放在一起，则可以选择每个表格区块并访问其格式设置和选项： 如果您选择整个组区块，您可以查看不同的、更直接的格式菜单。以下是它包含的选项： 将区块转换为栏目 使用拖放功能移动区块，或向上或向下移动元素的位置 修改区块的宽度 其他选项，包括分解集合或将其保存为可重复使用的区块 让我们看看在组区块的格式菜单中在哪里可以找到每个设置 ： 这里的大多数选项都相对简单。您可能会花更多时间调整集合中各个区块的格式。这里的两个突出设置是将组区块保存为可重用元素 (1) 或将其分解 (2) 的选项： 如果您选择取消组，则块将分成单独的元素。将添加到可重复使用的区块选项将让您保存独特的分组和它的设置，这样你就可以在其他的文章或网页重用它： 保存块后，当您向任何文章或页面添加新元素时，它会显示在“可重用” 选项卡下： 您可以将可重复使用的区块添加到WordPress中的任何页面或文章。但是，您可能需要更改元素的一些样式设置以使其适合。 其他选项 每个WordPress区块都带有各种设置，您可以通过单击区块编辑器主菜单右上角的齿轮图标来访问这些设置。 组区块是改变你的设定（1）风格的街区，提供设置，修改它的颜色（2），和边框与内部元件（3）之间添加填充物： 组区块，您可以两种风格之间进行选择：有边框或者无边框。如果您选择“边框” 选项，它将在内部组件周围添加一个边框。但是，设置菜单不允许您更改边缘的样式或颜色： 继续，您可以为文本、背景和区块内的链接设置新颜色。但是，请记住，每个内部元素的单独设置将覆盖这些全局选项： 然后，您可以单击“间距” 选项卡来更改区块边框与其内部元素之间的填充。为此，您需要以像素为单位指定距离： 一旦您对区块的配置和样式感到满意，您就可以转到该文章或页面中的其他元素。 有效使用组区块的提示和最佳实践 您可以使用组区块来链接您想要的任何元素。但是，我们建议您仅在有令人信服的理由时才将项目分组。使用此 块的一些重要原因包括： 自定义一组具有相似设置的区块。 在文章或页面布局中移动选定的区块，同时将它们保持在一起 保存一组区块以便稍后在另一个文章或页面上重用它们。 如果您改变了将一组区块链接在一起的想法，请记住，您始终可以将它们分开，并且不会影响它们的单独设置。一旦您熟悉了区块编辑器，您就可以创建华丽而复杂的元素，您可以在整个网站中重复使用这些元素。 关于组区块的常见问题 到目前为止，您几乎了解了有关WordPress组区块的所有信息。最后，我们汇总了有关此元素的最常见问题的集合，以确保您不会遗漏任何关键细节。 我可以将任何WordPress区块组合在一起吗？ 使用组区块，您可以链接任何WordPress的区块。因此，您可以使用它来组合包含多个元素的复杂设计。 我可以编辑组内的单个区块吗？ 区块编辑器使您可以访问包含您正在处理的整个组区块的“全局”选项 。此外，您仍然可以访问集合中每个元素的格式设置和样式设置。 组区块与可重用元素相同吗？ 您可以将大多数块保存为区块编辑器中的可重用元素。但是，组区块使您能够将整组区块组件保存为单个可重复使用的项目。 小结 组区块的WordPress的区块编辑器中最有趣的功能之一。它使您可以将它们链接在一起并同时自定义它们，而不是单独处理区块。 您可以将组区块保存为可重复使用的元素，您可以将这些元素添加到整个站点中，如果要使用单个组件，则可以拆分等等。考虑到WordPress区块编辑器使您能够对任何类型和数量的区块进行分组，因此您几乎无法使用此功能。

WordPress封面区块很有趣。它允许您在背景中放置图像、视频或纯色，并将内容区块添加到前景。这意味着您可以将区块放置在其他块上。它比大多数块有更多的选择。了解如何使用封面区块可以极大地增强您网站的设计。 在本教程中，我们将了解封面区块的功能并查看其设置和选项。我们还将看到有关如何使用它的一些最佳实践以及常见问题解答。 如何将封面区块添加至文章或页面 要将封面区块添加到您的页面和文章，请选择您的内容中或页面左上角的区块图标，输入区块的名称，然后选择它。 您也可以输入/cover并按 Enter 键或选择区块。 然后，您的内容中将有一个封面区块，您可以在其中添加图像或视频等媒体，或使用颜色作为背景，并将文本置于前景中。从媒体文件夹或颜色中选择内容后，文本选项会出现在前景中。 我从我的媒体库中添加了一张图片，并在图片上添加了一个标题。标题是一个段落区块。您可以将其更改为其他类型的区块、嵌入视频等。 您还可以通过按 Enter 键添加多个区块。像往常一样从区块中选择。 您还可以从一种预选的背景颜色中进行选择。 该颜色可用作图像的叠加层。 封面区块设置和选项 封面区块有两个带有设置和选项的区域。第一个是封面区块工具栏。第二个是右侧栏中的封面区块选项。 封面区块工具栏 单击封面区块中的任意位置可打开其工具栏。 更改封面区块类型或样式 第一个设置更改栏目，让您分组、更改图像，以及从默认样式或边框中选择样式。悬停显示预览。我将鼠标悬停在图像上。图像删除您在叠加层中的内容区块。 拖动或移动 抓住拖动工具（6 个点）将块拖动到您想要的任何位置。移动工具允许单击箭头向上移动区块或内容中的文本。 对齐方式 对齐选项包括左、中、右、宽幅和全幅。左右包裹区块和它下面的段落。 这是全幅图像。这可用于创建标题、划分部分等。 更改内容位置 这将选择内容位置。它打开一个带点的 3×3 网格。选择一个点会将内容移动到图像中的那个位置。 切换全屏 这会将图像设置为其全屏，而不是调整其大小。 应用双色调滤镜 从预先选择的选项中选择双色调。一种适用于阴影，另一种适用于高光。 在滑块上选择一种颜色进行调整。 在滑块下选择一种颜色以选择预选的颜色。 代替 这将打开媒体选项，以便您可以上传或从库中选择其他图像。 更多选项 更多选项包括： 隐藏更多设置 – 隐藏右侧边栏。 复制– 复制封面区块，以便您可以将其粘贴到页面或文章中的任何位置。 创建副本– 创建封面区块的副本并将其放置在原件下方。 在区块前插入– 在封面去块上方为另一个区块添加空间。 在区块后插入– 在封面区块下方为另一个区块添加空间。 移动到– 让您通过使用箭头键向上或向下移动蓝线来移动区块。按回车键，你的方块就会移动到蓝线的位置。 添加至可重用区块– 将区块添加到您的可重用区块中，以便您可以在任何页面或文章中使用它。 […]

WordPress 5.0引入了Gutenberg作为其默认编辑器。它为使用区块创建内容提供了新的界面和体验。 WP开发人员通过在WordPress 5.9中引入完整的站点编辑，将区块编辑概念提升到了一个新的水平。本质上，区块编辑器现在取代了WordPress定制器作为编辑主题和网站外观的主要工具。 本文将向您展示如何使用新的WordPress区块编辑器（古腾堡编辑器）进行完整的站点编辑。 什么是古腾堡编辑器？ 古腾堡编辑器如何工作？ 使用古腾堡区块编辑器 如何看待古腾堡编辑器？ 什么是古腾堡编辑器？ 古腾堡（Gutenberg）编辑器是预装在WordPress 5.0及更高版本中的新WordPress编辑器。它为内容创建过程引入了一种新方法，让您可以更好地控制内容的视觉方面。 古腾堡编辑器如何工作？ Gutenberg编辑器使用内容区块的概念来添加和编辑文章和页面中的各种元素，例如文本、图像、文件和链接。以前的默认WordPress编辑器TinyMCE专注于文本编辑。 提示：虽然新的区块编辑器预装在WordPress 5.0及更高版本中，但使用旧版本WordPress的用户也可以通过安装Gutenberg插件来使用区块编辑器。但是，我们强烈建议将核心WordPress软件更新到最新版本。 在WordPress 5.9更新之后，Gutenberg编辑器不仅仅是一个内容编辑器。它包括网站定制的所有方面，包括主题编辑和页面或文章创建。 新编辑器还提供了更好的页面视觉表示，使其比以前的WordPress编辑器更像一个页面构建器。 它将标题、文本和图像等网站元素分解为区块，使它们更易于管理和定制。 选择任何区块，您可以单独对其进行自定义，例如设置不同的背景颜色或排版而不影响其他区块或元素。这为站点编辑提供了更多自定义选项和灵活性。 新界面用户友好，让新用户可以快速学习如何使用WordPress。所有的区块都根据它们的结构列在一个可折叠的列表中。调整他们在网站上的位置很容易，因为用户只需在列表视图中拖放各个区块。 用户可以通过单击顶部栏或页面预览上的加号 (+)按钮来添加区块。 每个区块都有不同的配置和设计工具。例如，段落区块带有更改颜色和排版的工具。另一方面，图像区块具有添加替代文本和调整图像尺寸的工具。 新的全站点编辑方法还减少了对编码和自定义CSS的需求。新的区块编辑器引入了控制theme.json文件的全局样式面板。这使用户可以更改整个站点的样式，例如直接在默认编辑器上添加自定义颜色和更改排版。 使用古腾堡区块编辑器 Gutenberg编辑器界面可能会让初次使用的用户或任何习惯使用经典编辑器的人感到困惑。以下是一些关于通过Gutenberg编辑器构建网站和管理内容的指南。 1. 添加新的博客文章或页面 为您的网站创建内容首先使用Gutenberg区块编辑器添加新文章或页面。 博客文章有一个发布日期，并且通常按时间倒序出现在网站上。同时，页面是静态的并提供永恒的信息，例如About、Privacy Policy和Contact页面。 如果您打算创建一个新文章，请在您的WordPress仪表盘上访问文章->添加新内容。 进入默认内容编辑器后，您会看到一个空白草稿，其中包含文章标题和第一段区块的占位符。添加文章标题和新区块以创建内容。 在右侧边栏中找到文章设置。您可以在此处设置文章作者、文章模板、固定链接和文章类别。 创建新页面是一个类似的过程。导航到Pages -> Add New，您将看到与创建文章的界面相同的界面。唯一的区别是右侧边栏中的页面属性设置，它指定了父页面和页面顺序。页面也没有类别或标签设置。 2. 全局样式界面 当前的WordPress编辑器具有全局样式界面，无需编码即可自定义整个站点的颜色、排版和布局。 但是，该功能仅在WordPress 5.9中使用基于区块的主题时可用，包括基于区块的子主题。通过导航到外观->站点编辑器进入站点编辑器，然后单击屏幕右上角的黑白图标。全局样式界面将出现在右侧。 将有四个方面需要修改——排版、颜色、布局和区块。 在排版设置中管理文本和链接的字体系列、大小、行高和字体外观。 在颜色设置中，您会发现两个主要项目——调色板和元素。调色板显示可用于网站元素的颜色——主题调色板和默认颜色可用于整个网站。自定义颜色选择器可让您向调色板添加更多颜色。 颜色自定义的元素部分包括三个方面——背景、文本和链接。单击其中任何一个以自定义其颜色。 全局样式的下一项是布局。本质上，这使您可以为每个网站元素指定填充。 全局样式界面中的最后一项是区块选项卡，可让您自定义特定区块。选择此选项，您将看到可用区块的列表。选择其中任何一个开始定制。根据区块，您可以修改其布局、颜色、排版或所有这些。 3.模板编辑模式 新的WordPress区块编辑器包括模板编辑模式。大多数基于区块的主题都与此功能兼容，因此您可以使用区块编辑器编辑文章、页面或404页面的主题模板。它甚至允许您创建一个新模板。 导航到Appearance -> Site Editor转到站点编辑器。通过单击屏幕左上角的WordPress徽标并选择Templates打开可折叠导航侧边栏。您应该会在右上角看到可用模板列表和添加新按钮。 4.插入区块样板 如果您没有时间自定义每个区块，则可以使用内置区块样板。单击编辑器屏幕顶部的加号( + ) […]

WordPress区块提供了一种自定义网站内容和外观的新方法。这些区块允许WordPress用户添加和编辑内容元素，如段落、图像和小部件。 当前WordPress版本中有超过90个默认区块可用。它们涵盖文本、媒体、小部件、主题元素和嵌入。 除此之外，与经典编辑器相比，Gutenberg区块编辑器具有拖放功能和更好的内容视觉预览。 因此，与旧编辑器相比，这种新的基于区块的编辑方法提供了更友好的用户体验和更多种类的自定义选项。如果您想扩展基于区块的编辑器的功能，安装WordPress区块插件将添加更多内容区块选项。 本文将解释您需要了解的有关区块的所有信息以及如何使用新的WordPress区块编辑器。我们还将列出10个插件来扩展区块集合并提供更多自定义可能性。 什么是WordPress区块？ 区块是用于在WordPress文章或页面中创建和编辑元素的组件。WordPress编辑器中提供了各种区块类型，用于添加文本、媒体文件和布局元素，让您更灵活地构建内容。 什么是WordPress区块？ 为什么使用WordPress区块？ 区块编辑器中有哪些类型的WordPress区块可用？ 文本区块 媒体区块 设计区块 小工具区块 主题区块 嵌入区块 如何使用WordPress区块来自定义您的网站 10个最佳WordPress区块插件 1. Genesis Blocks 2. Getwid 3. Ultimate Addons for Gutenberg 4. Premium Blocks for Gutenberg 5. PublishPress Blocks 6. Stackable 7. Ultimate Blocks 8. Kadence Blocks 9. Otter Blocks 10. CoBlocks 为什么使用WordPress区块？ 旧的WordPress编辑器是一个专注于文本编辑的TinyMCE编辑器。该界面类似于文本编辑器软件，没有提供页面或文章预览的视觉元素。 相比之下，内容区块允许您更改页面布局并无缝插入各种视觉和交互式元素 – 使用旧的经典编辑器无法完成的任务。 区块在许多方面也提高了易用性。例如，嵌入外部媒体（如YouTube视频）现在就像将特定区块添加到内容并粘贴视频URL一样简单。 […]