如何使用 WordPress 查詢循環塊

WordPress 編輯器正在成長為一個成熟的網站構建器。 由於完整的站點編輯和新的主題塊，如查詢循環塊，您可以輕鬆地在 WordPress 中的任何位置顯示任何帖子類型的動態內容列表。

在本文中，我們將深入探討 WordPress 查詢循環塊，以便您更好地了解它是什麼以及如何使用它。

什麼是 WordPress 查詢循環塊？

查詢循環塊是新站點編輯器中可用的最先進的 WordPress 主題塊之一。 它在 5.8 版中添加到 WordPress 核心，是最新帖子塊的更複雜版本。 它允許任何人可視化地構建一個塊，將帖子內容動態地拉取並顯示到頁面或模板。 查詢循環塊也不限於顯示博客文章。 您可以使用它從您可能擁有的任何自定義帖子類型中提取內容。 您甚至可以將它與 WooCommerce Blocks 一起使用來展示產品。

什麼是“查詢”和“循環”？

在 WordPress 術語中，“循環”是一種重複顯示相似信息的方式。 因此，博客文章循環是一系列具有公共屬性（例如博客標題、特色圖片、作者姓名、發布日期和簡短描述）的博客文章。 該循環從帖子（或任何帖子類型）中提取此數據並將它們放入循環中。 然後循環向站點訪問者顯示帖子。

“查詢循環”的查詢方面意味著用戶可以查詢或命令將某些信息拉入循環。 因此，查詢循環塊可以拉取並顯示所有帖子或特定類別的帖子——僅舉幾個選項。 這允許某人顯示“類別 A”中的帖子，而不顯示類別 B 或 C 中的帖子。

查詢循環塊可以顯示：

• 博客文章
• 網站頁面
• WooCommerce 產品
• 其他自定義帖子類型

任何帖子類型都可以在動態循環中顯示。

查詢循環嵌套塊

有兩個直接的“嵌套塊”屬於查詢循環塊：

• 帖子模板塊 – 包含顯示帖子元數據（標題、特色圖片、作者等）的進一步嵌套塊
• 分頁塊 - 允許帖子溢出到頁面中以顯示更多內容

我們不會在本文中介紹這些嵌套塊，但您可以單擊上面的任何超鏈接以獲取有關每個嵌套塊如何在查詢循環塊中工作的所有信息。

如何將查詢循環塊添加到索引 WordPress 模板

在此示例中，我們使用“Twenty Twenty-two”默認 WordPress 主題。 這是第一個包含通過站點編輯器（以前稱為“完整站點編輯器”）進行編輯的默認主題。

我們將介紹如何將 WordPress 查詢循環塊添加到站點編輯器中的模板。 要到達那裡，首先，將鼠標懸停在“外觀”上，然後單擊“編輯器”。

然後，單擊左上角的圖標以下拉下拉菜單。 在該菜單中，單擊“模板”。

現在，從顯示的模板列表中，找到您要編輯的模板。 此塊最自然的模板之一是“索引”模板，因為它是索引或顯示網站帖子的模板。

您現在位於 Twenty Twenty-two 的索引模板上。 您會注意到它已經配置了查詢循環塊。 但是，如果您使用的是不同的塊主題，那麼它可能不會附帶。

要添加新的查詢循環塊，請單擊“(+)”圖標。 向下滾動到“主題”塊或在搜索欄中鍵入“查詢循環”。 將查詢循環塊拖到站點編輯器中。

WordPress 預定義了“模式”，可以讓您在設計查詢循環時搶占先機。 如果您知道有適合您需要的模式，您可以選擇一種特定模式，或者您可以從空白開始。 我們將單擊“開始空白”。

有四種默認變體可應用於查詢循環。 對於此示例，單擊“標題和日期”變體。

這將創建帶有“標題和日期”變體的查詢循環。

注意嵌套塊出現在 WordPress 的查詢循環塊中。 這是因為這些塊為查詢循環提供了必要的功能。 由於我們選擇了“標題和日期”變體，因此需要包含這些嵌套塊以顯示“標題”和“日期”信息。 不同的變體會加載不同排列的嵌套塊。

現在查詢循環塊位於模板上，我們將探索此高級主題塊的工具欄和設置。

查詢循環塊工具欄和設置

站點編輯器和塊編輯器中的每個塊都有自己的工具欄選項和更多設置的邊欄。

查詢循環塊工具欄

要找到查詢循環塊的工具欄，最簡單的方法是轉到列表視圖並選擇該塊——確保未選擇嵌套塊。

查詢循環塊的第一個獨特的工具欄選項是“顯示設置”。 單擊它將顯示三個選項：

• 每頁項目數——控制循環中一次顯示的帖子數
• 偏移 - 跳過帖子的起點一定數量
• 最大顯示頁面——限制顯示的頁面數量，即使查詢有更多結果

工具欄上的下一個是“替換”按鈕。 這提供了剝離查詢循環塊的模式並將其替換為不同模式的選項。

查詢循環塊的最後一個獨特的工具欄選項是列表視圖和網格視圖之間的切換。 列表視圖將帖子循環顯示為“列表”，帖子堆疊在一起。 網格視圖將帖子循環顯示為網格，其中包含更多要填充的帖子的表格佈局。

查詢循環塊設置側邊欄

查詢循環塊在“更多設置”側欄中有其他配置。 要顯示側邊欄，請單擊嵌套在工具欄中的“顯示更多設置”選項，或者在選擇查詢循環塊時單擊右上角的“齒輪”圖標。

第一個可見的側邊欄設置使站點所有者能夠從此編輯頁面為查詢循環創建新帖子。 之後是佈局切換，它會影響嵌套塊與查詢循環塊相比如何使用佈局寬度——稍後會詳細介紹。 設置切換允許為塊選擇自定義或繼承的查詢——下面還有更多內容。

佈局選項

嵌套塊的“佈局”設置允許設計人員打開（藍色）其他設置。 這些設置允許選擇這些塊是否使用內容和寬度百分比。 它還顯示了左、中或右內容對齊選項。 未切換（灰色）時，嵌套項默認設置為全寬。

查詢設置

當查詢“設置”未切換（灰色）時，您可以準確選擇要查詢的內容。 第一個選項是“帖子”，它可以是頁面、帖子或自定義帖子類型。 接下來，用戶可以為發布日期或字母順序選擇升序或降序。 最後，有一個選項可以在查詢中包含或排除置頂帖子。

切換“設置”（藍色）將查詢循環塊設置為從模板使用的模板繼承查詢。

查詢過濾器

接下來，對於查詢“Filters”，用戶可以選擇通過以下方式過濾帖子來進一步自定義查詢：

• 帖子類別 - 逗號分隔的類別列表
• Post Tag – 逗號分隔的標籤列表
• 文章作者 – 作者下拉列表
• 發布關鍵字 – 輸入要過濾的關鍵字列表

顏色選項和高級設置

最後，我們有顏色設置和高級設置。 顏色選項允許設計師選擇顏色：

• 文字顏色
• 背景顏色
• 鏈接顏色

高級設置包括將 CSS 類添加到 WordPress 查詢循環塊和/或將 HTML 元素分配給該塊的能力。

查詢循環塊中的每個嵌套塊都有自己的工具欄選項和側邊欄設置。 訪問上面的可嵌套塊列表，了解有關每個塊及其設置的更多信息。

在 WordPress 中使用查詢循環塊的技巧和最佳實踐

查詢循環是功能強大的塊。 遵循這些提示和最佳實踐以充分利用它們。

為查詢循環和嵌套塊設置全局樣式

可以逐塊類型地設置全局樣式。 這使設計人員可以創建適用於整個網站中塊的所有實例的全局默認樣式。 這是一個巨大的節省時間。

目前，在 2022 主題上，查詢循環塊允許您為文本顏色、背景和鏈接顏色添加全局樣式。 要進入全局樣式編輯器，請單擊“全局樣式”圖標（半實心圓圈），選擇“塊”，然後找到查詢循環塊。

您還可以為查詢循環中的每個嵌套主題塊（如帖子模板、帖子標題等）分配單獨的全局樣式。

在單個頁面上使用多個查詢循環塊來創建特色博客部分

在創建博客頁面模板時，您可能希望創建突出的特色帖子，因為它是您網站上發布的最新帖子。 下面是這個概念的一個簡單版本。

我們的“索引”模板上需要有兩個查詢循環塊。 頂部的查詢循環塊將有一個“列表視圖”顯示，並且只會顯示一個帖子。 確保它沒有嵌套在第一個查詢循環中的分頁塊。

對於第二個/底部的查詢循環塊，將其設置為“網格視圖”。 它應該在列中顯示多個帖子並將“Offset”設置為 1。偏移量為 1 將跳過查詢的第一篇帖子。 這是需要的，因為上面的查詢循環包含特色帖子。

對顯示相同帖子類型的查詢循環使用一致的設計

用於“博客文章”的查詢循環應該看起來很相似。 如果您對其他帖子類型使用查詢循環塊，請考慮為這些帖子使用稍微不同的樣式，以便您的站點訪問者可以區分什麼是“博客帖子”以及什麼是其他類型的內容。 這將使網站的用戶體驗更加清晰。

使用 Divi 的博客模塊：具有更多設計選項的查詢循環塊替代方案

如果您使用 Divi，博客模塊的功能很像本地 WordPress 查詢循環塊。 將 Divi 的博客模塊添加到頁面或模板很簡單，為您提供自定義動態帖子內容的參數、佈局和設計所需的所有選項。

博客模塊中顯示的內容也非常靈活，允許您選擇特定的帖子類型、帖子類型類別以及要包含的帖子數量。 可以添加或刪除單個模塊元素，例如特色圖像、標題、元文本、正文、閱讀更多鏈接、分頁等。

這些模塊元素中的每一個都可以使用 Divi 廣泛的設計選項進行完全樣式化。 詳細了解如何在模板上使用 Divi 的博客模塊。

常見查詢循環問題

回答有關 WordPress 查詢循環塊的一些最常見問題。

查詢循環塊和最新帖子塊之間有什麼區別？

Query Loop Block 與 Latest Posts Block 相似，因為它具有動態顯示博客上最新帖子列表的能力。 然而，查詢循環塊要高級得多，允許您通過集成其他嵌套塊從頭開始構建您的帖子、頁面或其他帖子類型的“列表”。 例如，如果您有食譜的自定義帖子類型，則可以使用查詢循環塊來創建根據您的喜好自定義的整個食譜頁面。

查詢循環塊是否需要編碼知識？

不，WordPress 查詢循環塊不需要編碼知識，因為該功能已經內置。 此塊使您能夠使用前端的可自定義塊設置在 WordPress 網站上顯示帖子循環。

我在哪裡可以使用查詢循環塊？

WordPress 查詢循環塊循環顯示已發布的帖子和頁面。 當新頁面/帖子滿足查詢參數時，它將自動更新。 這使得此塊在許多地方都很有用，例如帖子或存檔模板，或者在您想要動態顯示最近帖子等內容的靜態頁面上。

您是否在 WordPress 網站上使用過查詢循環塊？ 你有什麼發現？ 請在下面的評論中告訴我們。

特色圖片德米特里·科斯特羅夫 / shutterstock.com