WordPress 中的查詢循環塊：指南、提示和技巧

已發表: 2023-04-11

Query Loop 是一個整潔的 WordPress 塊，使您能夠顯示相關博客文章、產品和頁面的列表。作為初學者，您可能想知道如何利用此功能。

幸運的是，Query Loop 塊相對容易使用。您可以選擇自己喜歡的預建佈局或從頭開始創建一些東西。此外，您可以配置嵌套塊的顯示並完全自定義設計。

在這篇文章中，我們將仔細研究 WordPress 中的查詢循環塊。然後，我們將向您展示如何使用該塊並討論具體的用例。

什麼是 WordPress 中的查詢循環塊？

Query Loop 塊是一種工具，它使 WordPress 用戶能夠根據特定屬性顯示動態的帖子列表。例如，它可以設置為循環顯示某個類別的所有帖子，顯示每個帖子的標題和圖像。

這個塊的配置可能非常技術性。因此，初學者傾向於避免使用它，而是選擇 Post List 塊，它是查詢循環的更簡單版本。

雖然查詢循環塊更複雜，但它也具有更大的靈活性。例如，您可以創建一個包含最佳食譜的頁面或展示項目組合。

何時在 WordPress 中使用查詢循環塊

Query Loop 塊為宣傳您的內容提供了多種機會。以下是您可以使用它實現的一些結果：

為您的博客創建一個相關的帖子部分，其中包含帖子標題、摘錄和圖片。
顯示來自自定義帖子類型的內容，例如推薦或投資組合項目。
顯示相同標籤或類別的帖子。
顯示相關的 WooCommerce 產品。
顯示按價格分組的產品網格。
在企業目錄中按位置列出公司。
根據特定星級列出書評。

這些只是一些例子。您可以通過多種方式配置查詢循環塊。

如何在 WordPress 中使用查詢循環塊

要開始使用查詢循環塊，您需要導航到要使用它的帖子或頁面。然後，單擊+以添加新塊並蒐索Query Loop 。

您還可以使用塊模式選擇器插入塊。切換到模式並從下拉菜單中選擇查詢。然後，選擇您喜歡的佈局。

有很多查詢循環佈局可供選擇。例如，您可以在網格中顯示您的帖子，在左側顯示圖像，或者堅持使用默認格式。

或者，單擊Start Blank從頭開始創建您的查詢循環並完全控制您的內容設計。

您必須先選擇一個變體。您可能想要顯示帖子的圖片、日期和標題，或者只顯示帖子標題和摘錄。

無論您是從頭開始創建塊還是使用模板，您都會在編輯器中看到塊的預覽。

您的查詢循環塊由幾個不同的子塊組成，例如帖子標題、特色圖片等。如果單擊工具欄中的“顯示設置”圖標，則可以配置每頁的項目數。

您還可以使用右側面板中的塊設置來進一步自定義查詢循環。您可能決定更改項目的順序、為您的提要創建新帖子、應用過濾器、更改顏色等等。

查詢循環塊中有哪些子塊？

在查詢循環塊中，您會發現幾個子塊組合在一起。儘管它們的名稱中包含“帖子”一詞，但它們也可以應用於其他內容，如頁面、投資組合項目或產品。

讓我們來看看每個子塊。

1. 職位名稱

帖子標題塊顯示每個帖子的標題。您可以將標題轉換為鏈接並在塊設置中調整字體和顏色。

2. 發布日期

使用此塊，您可以顯示內容的發布日期。您可以更改默認格式、顯示最後修改日期以及鏈接到設置中的帖子。

3. 發佈內容

帖子內容塊在查詢循環塊中顯示您的帖子或頁面的全部內容。這可能會使您的街區變得很長，這可能會讓訪問者感到厭煩。

4. 文章摘錄

帖子摘錄顯示每條內容的摘要。訪問者將能夠查看您的摘錄並找到“閱讀更多”鏈接。您可以將此鏈接添加到新行或摘錄末尾。另外，您可以修改錨文本、更改鏈接顏色並選擇新的字體大小。

5. 發布特色圖片

如果您選擇將此塊包含在您的查詢循環中，您將顯示您的帖子或產品的特色圖片。此外，您可以啟用帶有圖像的鏈接，以便在單擊時將訪問者引導至該內容。

6. 帖子類別

通過在查詢循環中添加一個 Post Categories 塊，您可以顯示與該內容相關的類別。這是顯示涵蓋相似主題或同一類別產品的博客文章的好方法。您還可以在設置中更改顏色和字體。

7. 發布標籤

帖子標籤塊使您能夠顯示添加到帖子中的標籤。這是展示類似內容的另一種有用方式。

分頁是添加到您的查詢循環中最有價值的塊之一，因為它顯示指向您上一篇或下一篇文章的鏈接。分頁由三個獨立的塊組成：

以前的
頁碼
下一個

要使用它，您首先需要使用列表視圖選擇 Post Template 塊。然後，您可以單擊+添加分頁塊。

9. 文章作者

顧名思義，Post Author 展示了作者的詳細信息，例如作者姓名、頭像和簡介。如果您選擇包含此塊，則需要使用塊設置中的下拉菜單選擇用戶。在這裡，您還可以配置頭像可見性、更改頭像大小、顯示/隱藏您的作者簡介以及更改顏色和尺寸。

10. 作者傳記

如果您不想在您的查詢循環中包含您的作者姓名和頭像，但您希望作者簡介可見，那麼此塊適合您。您的所有訪問者都將能夠看到生物。此外，您可以自定義其外觀，調整尺寸、字體和顏色。

查詢循環塊用例示例

現在您對查詢循環塊有了更好的了解，讓我們來看看您可以使用它的三種方式。

1.創建一個“最近的帖子”部分

此部分可以使您最近發布的內容更加可見。

首先，您需要使用兩個查詢循環塊。添加您的第一個，然後選擇一種模式或從頭開始。對於像食譜這樣的視覺帖子，圖片、日期和標題可能是一個不錯的選擇。

如果您已經配置了查詢循環，您的帖子將顯示在這裡。如果沒有，請單擊為此提要創建新帖子以編寫和發布您要包含的帖子。

由於這是您最近發布的帖子所在的位置，因此您只想顯示一個內容。導航到顯示設置。在ITEMS PER PAGE旁邊，輸入“1”。

現在，您應該只能看到區塊中列出的最新帖子。

然後您可以添加第二個查詢循環塊來顯示其他最近的帖子。選擇您喜歡的佈局。然後，導航到工具欄並從列表視圖切換到網格視圖。這樣，讀者可以一次看到更多您的食譜。

現在，單擊顯示設置並將偏移值更改為“1”。這將從您的第二個查詢循環塊中刪除您最近的帖子。

此外，您可以自定義塊的佈局。例如，您可能希望減小標題的字體大小以提高文本的可讀性。您可以從工具欄執行此操作。

您可能還想減小日期的大小。您可以在“阻止”設置中進行這些更改。找到Typography並選擇更合適的字體大小。

您還可以為特色圖像設置新尺寸，並更改食譜標題的對齊方式。準備就緒後，單擊保存草稿或發布。

2. 將查詢循環塊添加到索引模板

如果您使用的是塊主題，則可以將查詢循環塊添加到模板中。這在為查詢循環及其子塊設置全局樣式時會派上用場。

在您的 WordPress 儀表板中，轉到外觀 → 編輯器。

單擊當前設置為主頁或頁面（取決於您的主題）的下拉菜單，然後選擇瀏覽所有模板。

從模板列表中，選擇您要編輯的模板。索引模板往往是一個不錯的選擇，因為它是索引和顯示網站帖子的模板。

如果你選擇Index ，你會發現模板已經帶有一個 Query Loop 塊，但你可以刪除它並添加你自己的。然後您可以調整佈局，在列表視圖和網格視圖之間切換。

您還可以通過單擊子塊並輸入您喜歡的號召性用語來自定義“閱讀更多”文本。

如果轉到工具欄並單擊顯示更多設置，您還會發現所有可用的阻止設置。 在這裡，您可以更改文本大小和顏色，並為圖像設置新的尺寸。

3. 為您的查詢循環塊設置全局樣式

如果您計劃在站點上頻繁使用查詢循環塊，那麼一遍又一遍地創建和配置循環可能會很耗時。這就是為什麼為查詢循環和嵌套塊設置全局樣式是個好主意。

要訪問全局樣式編輯器，請單擊屏幕右上角的樣式圖標：

然後，選擇側邊欄底部的塊：

滾動可用塊列表並找到查詢循環。 然後，單擊顏色：

在這裡，您可以管理站點上不同元素和塊的配色方案。如果您想向默認調色板添加更多自定義顏色，請單擊調色板並找到CUSTOM 。

現在，單擊+將新顏色添加到您的調色板。

接下來，返回您的查詢塊循環顏色。您會看到一個元素列表，例如背景、鏈接和標題。

您還可以為這些組件設置默認樣式。為此，請選擇要編輯的元素。

例如，您可以更改查詢循環塊的背景顏色。

如果您決定不應用任何更改，只需單擊清除。

您還可以為標題的背景和文本顏色設置全局樣式。此外，您可以為鏈接分配懸停顏色。完成後，單擊保存以將新的默認樣式應用於您的塊。

擴展查詢循環塊

雖然您現在知道如何在 WordPress 中創建和自定義查詢循環塊，但您可能希望進一步擴展該塊。使用 Block Variations API，您可以指定某些默認設置、禁用自定義選項等。

例如，您可能永遠不會在查詢循環中使用Sticky屬性。作者字段也可能與您的帖子無關。因此，您可以禁用這些控件，使它們不可見。

在這種情況下，變體代碼將如下所示：

 { /** ...variation properties */ allowedControls: [ 'inherit', 'order', 'taxQuery', 'search' ], }

這樣，您的用戶可以訪問固有、順序、分類和搜索功能，但不會顯示作者和置頂字段。

或者，您可能更願意為用戶隱藏搜索選項，在這種情況下，您的資源將如下所示：

 { /** ...variation properties */ allowedControls: [ 'inherit', 'postType', 'order', 'sticky', 'taxQuery', 'author', ], }

如果出於某種原因，您想隱藏查詢循環塊的所有可用控件，您可以在 allowedControls 旁邊設置一個空數組。

如您所見，此方法需要一些技術知識。如果您沒有編碼技能，您可能希望堅持使用塊編輯器中可用的自定義選項。

經常問的問題

雖然我們已嘗試涵蓋查詢循環塊的所有方面，但您可能對此功能仍有一些疑問。讓我們看看最常見的。

什麼是 WordPress 查詢？

查詢翻譯為“詢問”或“命令”。因此在查詢循環塊中，“查詢”部分使用戶能夠請求某些信息以進入循環。這就是查詢循環顯示特定標籤、類別等的所有帖子或頁面的方式。

什麼是 WordPress 循環？

WordPress 循環是一種以循環格式顯示相似信息的方法。例如，您可以創建一個博客帖子循環，在您的頁面上顯示相關文章，顯示帖子標題、摘錄、特色圖片等。

數據從您發布的內容中提取並放置在循環中，該循環位於您的頁面上供訪問者使用。因此，它可以幫助您將用戶引導至其他相關內容，並讓訪問者與您的網站保持互動。

您可以使用查詢循環塊做什麼？

您可以使用查詢循環塊實現很多事情。例如，您可以顯示相關或特色產品的列表。

此外，您可以將用戶引導至您網站上共享相同標籤或類別的其他食譜。對於投資組合網站，您甚至可以在查詢循環塊中展示您的最新或最佳作品。

如何擴展查詢循環塊？

您可以通過向塊添加自定義設置來實現對查詢循環顯示方式的詳細控制。使用 Block Variations API，您可以創建新功能、禁用某些元素並應用您自己的預設。

在 WordPress 中創建一個查詢循環塊

Query Loop 塊是一個有用的 WordPress 塊，可讓您顯示特色帖子、相關頁面或特定類別的產品。您還可以使用它來顯示來自自定義帖子類型的內容，例如推薦和投資組合項目。

查詢循環塊是非常可定制的。您可以配置其中的子塊，例如帖子標題、作者姓名和特色圖片。此外，您可以使用 Block Variations API 擴展塊並添加自定義設置。

另一種幫助訪問者在您的網站上找到正確內容的方法是使用 Jetpack 搜索。非常適合大型網站，您可以提供即時搜索結果並利用強大的過濾器來提升您的用戶體驗。立即開始使用 Jetpack Search！