如何使用 WordPress 查询循环块

已发表: 2023-01-28

WordPress 编辑器正在成长为一个成熟的网站构建器。 由于完整的站点编辑和新的主题块,如查询循环块,您可以轻松地在 WordPress 中的任何位置显示任何帖子类型的动态内容列表。

在本文中,我们将深入探讨 WordPress 查询循环块,以便您更好地了解它是什么以及如何使用它。

什么是 WordPress 查询循环块?

查询循环块是新站点编辑器中可用的最先进的 WordPress 主题块之一。 它在 5.8 版中添加到 WordPress 核心,是最新帖子块的更复杂版本。 它允许任何人可视化地构建一个块,将帖子内容动态地拉取并显示到页面或模板。 查询循环块也不限于显示博客文章。 您可以使用它从您可能拥有的任何自定义帖子类型中提取内容。 您甚至可以将它与 WooCommerce Blocks 一起使用来展示产品。

什么是“查询”和“循环”?

在 WordPress 术语中,“循环”是一种重复显示相似信息的方式。 因此,博客文章循环是一系列具有公共属性(例如博客标题、特色图片、作者​​姓名、发布日期和简短描述)的博客文章。 该循环从帖子(或任何帖子类型)中提取此数据并将它们放入循环中。 然后循环向站点访问者显示帖子。

“查询循环”的查询方面意味着用户可以查询或命令将某些信息拉入循环。 因此,查询循环块可以拉取并显示所有帖子或特定类别的帖子——仅举几个选项。 这允许某人显示“类别 A”中的帖子,而不显示类别 B 或 C 中的帖子。

查询循环块可以显示:

  • 博客文章
  • 网站页面
  • WooCommerce 产品
  • 其他自定义帖子类型

任何帖子类型都可以在动态循环中显示。

查询循环嵌套块

有两个直接的“嵌套块”属于查询循环块:

  • 帖子模板块 – 包含显示帖子元数据(标题、特色图片、作者​​等)的进一步嵌套块
  • 分页块 - 允许帖子溢出到页面中以显示更多内容

我们不会在本文中介绍这些嵌套块,但您可以单击上面的任何超链接以获取有关每个嵌套块如何在查询循环块中工作的所有信息。

如何将查询循环块添加到索引 WordPress 模板

在此示例中,我们使用“Twenty Twenty-two”默认 WordPress 主题。 这是第一个包含通过站点编辑器(以前称为“完整站点编辑器”)进行编辑的默认主题。

我们将介绍如何将 WordPress 查询循环块添加到站点编辑器中的模板。 要到达那里,首先,将鼠标悬停在“外观”上,然后单击“编辑器”。

编辑 WordPress 块主题模板 - 第 1 步

然后,单击左上角的图标以下拉下拉菜单。 在该菜单中,单击“模板”。

编辑 WordPress 块主题模板 - 步骤 2-3

现在,从显示的模板列表中,找到您要编辑的模板。 此块最自然的模板之一是“索引”模板,因为它是索引或显示网站帖子的模板。

编辑 WordPress 块主题模板 - 第 4 步

您现在位于 Twenty Twenty-two 的索引模板上。 您会注意到它已经配置了查询循环块。 但是,如果您使用的是不同的块主题,那么它可能不会附带。

要添加新的查询循环块,请单击“(+)”图标。 向下滚动到“主题”块或在搜索栏中键入“查询循环”。 将查询循环块拖到站点编辑器中。

创建查询循环块 - 步骤 1-2

WordPress 预定义了“模式”,可以让您在设计查询循环时抢占先机。 如果您知道有适合您需要的模式,您可以选择一种特定模式,或者您可以从空白开始。 我们将单击“开始空白”。

创建查询循环块 - 第 3 步

有四种默认变体可应用于查询循环。 对于此示例,单击“标题和日期”变体。

创建查询循环块 - 第 4 步

这将创建带有“标题和日期”变体的查询循环。

创建查询循环块 - 第 5 步 - 结果

注意嵌套块出现在 WordPress 的查询循环块中。 这是因为这些块为查询循环提供了必要的功能。 由于我们选择了“标题和日期”变体,因此需要包含这些嵌套块以显示“标题”和“日期”信息。 不同的变体会加载不同排列的嵌套块。

创建查询循环块 - 列出审核结果

现在查询循环块位于模板上,我们将探索此高级主题块的工具栏和设置。

查询循环块工具栏和设置

站点编辑器和块编辑器中的每个块都有自己的工具栏选项和更多设置的边栏。

查询循环块工具栏

要找到查询循环块的工具栏,最简单的方法是转到列表视图并选择该块——确保未选择嵌套块。

查询循环块的第一个独特的工具栏选项是“显示设置”。 单击它将显示三个选项:

  • 每页项目数——控制循环中一次显示的帖子数
  • 偏移 - 跳过帖子的起点一定数量
  • 最大显示页面——限制显示的页面数量,即使查询有更多结果

查询循环工具栏 - 显示设置

工具栏上的下一个是“替换”按钮。 这提供了剥离查询循环块的模式并将其替换为不同模式的选项。

查询循环工具栏 - 替换模式

查询循环块的最后一个独特的工具栏选项是列表视图和网格视图之间的切换。 列表视图将帖子循环显示为“列表”,帖子堆叠在一起。 网格视图将帖子循环显示为网格,其中包含更多要填充的帖子的表格布局。

查询循环工具栏 - 列表与网格视图切换

查询循环块设置侧边栏

查询循环块在“更多设置”侧栏中有其他配置。 要显示侧边栏,请单击嵌套在工具栏中的“显示更多设置”选项,或者在选择查询循环块时单击右上角的“齿轮”图标。

查询循环工具栏 - 更多设置

第一个可见的侧边栏设置使站点所有者能够从此编辑页面为查询循环创建新帖子。 之后是布局切换,它会影响嵌套块与查询循环块相比如何使用布局宽度——稍后会详细介绍。 设置切换允许为块选择自定义或继承的查询——下面还有更多内容。

查询循环侧边栏设置 - 新帖子、布局、查询设置

布局选项

嵌套块的“布局”设置允许设计人员打开(蓝色)其他设置。 这些设置允许选择这些块是否使用内容和宽度百分比。 它还显示了左、中或右内容对齐选项。 未切换(灰色)时,嵌套项默认设置为全宽。

查询循环侧边栏设置 - 布局嵌套内容宽度

查询设置

当查询“设置”未切换(灰色)时,您可以准确选择要查询的内容。 第一个选项是“帖子”,它可以是页面、帖子或自定义帖子类型。 接下来,用户可以为发布日期或字母顺序选择升序或降序。 最后,有一个选项可以在查询中包含或排除置顶帖子。

查询循环边栏设置 - 设置未切换

切换“设置”(蓝色)将查询循环块设置为从模板使用的模板继承查询。

查询循环边栏设置 - 继承查询设置

查询过滤器

接下来,对于查询“Filters”,用户可以选择通过以下方式过滤帖子来进一步自定义查询:

  • 帖子类别 - 逗号分隔的类别列表
  • Post Tag – 逗号分隔的标签列表
  • 文章作者 – 作者下拉列表
  • 发布关键字 – 输入要过滤的关键字列表

查询循环边栏设置 - 查询过滤器

颜色选项和高级设置

最后,我们有颜色设置和高级设置。 颜色选项允许设计师选择颜色:

  • 文字颜色
  • 背景颜色
  • 链接颜色

高级设置包括将 CSS 类添加到 WordPress 查询循环块和/或将 HTML 元素分配给该块的能力。

查询循环边栏设置 - 颜色和高级设置

查询循环块中的每个嵌套块都有自己的工具栏选项和侧边栏设置。 访问上面的可嵌套块列表,了解有关每个块及其设置的更多信息。

在 WordPress 中使用查询循环块的技巧和最佳实践

查询循环是功能强大的块。 遵循这些提示和最佳实践以充分利用它们。

为查询循环和嵌套块设置全局样式

可以逐块类型地设置全局样式。 这使设计人员可以创建适用于整个网站中块的所有实例的全局默认样式。 这是一个巨大的节省时间。

目前,在 2022 主题上,查询循环块允许您为文本颜色、背景和链接颜色添加全局样式。 要进入全局样式编辑器,请单击“全局样式”图标(半实心圆圈),选择“块”,然后找到查询循环块。

您还可以为查询循环中的每个嵌套主题块(如帖子模板、帖子标题等)分配单独的全局样式。

在单个页面上使用多个查询循环块来创建特色博客部分

在创建博客页面模板时,您可能希望创建突出的特色帖子,因为它是您网站上发布的最新帖子。 下面是这个概念的一个简单版本。

特色帖子结果

我们的“索引”模板上需要有两个查询循环块。 顶部的查询循环块将有一个“列表视图”显示,并且只会显示一个帖子。 确保它没有嵌套在第一个查询循环中的分页块。

对于第二个/底部的查询循环块,将其设置为“网格视图”。 它应该在列中显示多个帖子并将“Offset”设置为 1。偏移量为 1 将跳过查询的第一篇帖子。 这是需要的,因为上面的查询循环包含特色帖子。

对显示相同帖子类型的查询循环使用一致的设计

用于“博客文章”的查询循环应该看起来很相似。 如果您对其他帖子类型使用查询循环块,请考虑为这些帖子使用稍微不同的样式,以便您的站点访问者可以区分什么是“博客帖子”以及什么是其他类型的内容。 这将使网站的用户体验更加清晰。

使用 Divi 的博客模块:具有更多设计选项的查询循环块替代方案

如果您使用 Divi,博客模块的功能很像本地 WordPress 查询循环块。 将 Divi 的博客模块添加到页面或模板很简单,为您提供自定义动态帖子内容的参数、布局和设计所需的所有选项。

divi-博客模块

博客模块中显示的内容也非常灵活,允许您选择特定的帖子类型、帖子类型类别以及要包含的帖子数量。 可以添加或删除单个模块元素,例如特色图像、标题、元文本、正文、阅读更多链接、分页等。

这些模块元素中的每一个都可以使用 Divi 广泛的设计选项进行完全样式化。 详细了解如何在模板上使用 Divi 的博客模块。

常见查询循环问题

回答有关 WordPress 查询循环块的一些最常见问题。

查询循环块和最新帖子块之间有什么区别?

Query Loop Block 与 Latest Posts Block 相似,因为它具有动态显示博客上最新帖子列表的能力。 然而,查询循环块要高级得多,允许您通过集成其他嵌套块从头开始构建您的帖子、页面或其他帖子类型的“列表”。 例如,如果您有食谱的自定义帖子类型,则可以使用查询循环块来创建根据您的喜好自定义的整个食谱页面。

查询循环块是否需要编码知识?

不,WordPress 查询循环块不需要编码知识,因为该功能已经内置。 此块使您能够使用前端的可自定义块设置在 WordPress 网站上显示帖子循环。

我在哪里可以使用查询循环块?

WordPress 查询循环块循环显示已发布的帖子和页面。 当新页面/帖子满足查询参数时,它将自动更新。 这使得此块在许多地方都很有用,例如帖子或存档模板,或者在您想要动态显示最近帖子等内容的静态页面上。

您是否在 WordPress 网站上使用过查询循环块? 你有什么发现? 请在下面的评论中告诉我们。

特色图片德米特里·科斯特罗夫 / shutterstock.com