善用 WordPress 查詢迴圈區塊 (Query Loop Block) 建立文章列表 (Post Grid) 功能

這篇文章最後更新日期：2024 年 2 月 18 日 | 作者： Mack Chan

文章列表 (Post Grid) 功能是很多新手部落格站長非常關心和頭痛的一環，傳統的網站架設流程是交由 WordPress 的佈景主題負責，不過隨著 WordPress Gutenberg 計劃 的推進，愈來愈多原本是佈景主題負責的項目將交由 WordPress 區塊編輯器負責。

在 2024 年，站長們應該需要開始準備習慣和熟習 WordPress 全站編輯 (Full Site Editing) 會變成我們使用 WordPress 的日常操作，這不會是短期內發生，各種工具會慢慢被核心程式取代，減少了依賴第三方的工具和外掛。

這次介紹的 WordPress 查詢迴圈區塊 (Query Loop Block) 就能做到「最新文章」、「熱門文章」或「分類文章」等等的多用途效果，而這些變化你都不用離開 WordPress 區塊編輯器的範圍。

---

---

查詢迴圈區塊 (Query Loop Block) 的目的是什麼？

這次教學上半部分是設計一份可以重複套用的「文章範本」，範本內容包含文章標題、精選圖片、內容摘要、發文時間和文章分類等等，然後交給「查詢迴圈」功能執行。

所以「查詢迴圈」的角色就是重複執行「文章範本」，而重複次數取決於文章查詢總數，次數的部分站長可以自由控制。

※ 官方功能說明：
查詢迴圈區塊 能顯示指定參數的文章，與 PHP 迴圈相似但不須撰寫程式碼。這個區塊能顯示指定分類的文章，能達成類似建立作品集或私房食譜頁面的目標。

使用者可以將這個區塊類比為功能較為複雜但更為強大的 [最新文章] 區塊。此外，區塊版面配置建議能讓建立指定條件的文章清單變得比以往更容易。

---

新手高機率會遇到卡關，難度系數約 ★★★☆☆

抱歉，這篇教學文章會比較累贅和沉長，但的確「查詢迴圈」並不是三言兩語可以簡單介紹給新手，尤其如果新手沒有「文章列表」觀念，會像進入了迷霧的森林一樣，閱讀這篇教學可能需要約 1 小時才能完整消化，或者新手可以加入瀏覽器的書籤 (bookmark) 裡，分開數天來閱讀。

---

如果你沒有使用佈景主題建立文章列表 (Post Grid) 的經驗？

WordPress 佈景主題可以說是這個 內容管理系統 (CMS) 的靈魂和核心的組成部分，新手第一次接觸自架站，會對佈景主題在網站發揮什麼作用感到疑惑？

但不容擔心，網站迷谷這次會細分不同的重點解說，用淺顯易懂的文字，帶新手從零開始了解這個最迷人的地方。直到今天為止，官方公佈有 7,500 個免費佈景主題。

加上大量第三方的網頁程式開發公司協助開發的付費佈景主題，市場上總計有超過 10,000 多個的選擇給大家。網站迷谷為大家整理了一系列的選擇，替您選出最合適的 WordPress 佈景主題。

這次介紹的文章列表 (Post Grid) 功能，因為一向是由 WordPress 的佈景主題 負責，例如知名的主題如 GeneratePress、Astra、Blocksy 或 Themeforest 等等，都會內建讓文章 (Post) 按站長需求，整齊地排列出來，所以如果你已經有了數年架站經驗的站長，在「觀念」上會較容易上手。反倒如果你是今年才開始自架站，以下教學內容要放慢一點腳步和慢慢領悟。

---

如何新增查詢迴圈區塊 (Query Loop Block) ？

由於文章列表需要一片比較大的空間 (Space)，推薦建立一個全新的頁面 (Page)，而且沒有資料欄 / 側邊欄 (Sidebar)，讓訪客可以集中注意力在文章的列表之上，在 SEO 之上也有加分，不要把任何頁面都填滿資訊。

步驟一：
像其他區塊編輯器的操作相同，在適當的位置找到 [+] 符號就能新增區塊。

步驟二：
在搜尋欄位輸入「查詢迴圈」，點擊那個像「無盡迴圈」的 icon。

---

[單欄式] 文章列表「清單檢視 List view」 | 選擇外觀設計流程

第一次來到查詢迴圈區塊 (Query Loop Block) 的介面，預設使用「清單檢視 List view」，你可以理解為單欄式的文章列表。直至 2021 年 08 月份為止，總共提供「6 款」文章顯示的外觀選擇，往後官方可能會新增更多選擇也說不定。

步驟一：
預設使用清單檢視 (List view)，什麼都不需要變更。

步驟二：
可以透過「< 向左選擇」和「> 向右選擇」從 6 款樣式中選擇，下方會立即演算最終結果給您參考。

---

[一欄式] 文章列表 | 樣式 01

最典型的一欄式文章列表，順序分別是「文章標題」>「精選圖片」>「文章摘要」>「文章日期」，跟 WordPress 預設的部落格樣式相似，應該適合大部分使用者。

---

[兩欄式] 文章列表 | 樣式 02

比較活潑和生動的表達樣式，兩欄式的文章列表，當中的空白部分，是使用「空白區塊」製作的，不會讓訪客覺得網站排版很「沉悶」和「死板」沒生氣。 順序分別是「 精選圖片 」>「文章標題」> 「文章日期」。

---

[兩欄式] 文章列表 | 樣式 03

如果是資訊性或雜誌類的豐富版型網站，可能無法容納太大的精選圖片，因為需要塞滿很多東西，多餘的資訊像分類、作者和日期就移除掉，只留下「精選圖片」和「文章標題」。

---

[兩欄式] 文章列表 | 樣式 04

這個版型適合放在網站最「顯眼」的上方，例如新聞網站的焦點新聞或頭條新聞，雖然佔用的版面非常巨大，但非常吸收讀者的眼球。左邊單欄是巨大的「精選圖片」，另外一邊是文章的「相關資料」和次要的內容。

---

[三欄式] 文章列表 | 樣式 05 (不推薦)

這種三欄的版型不太推薦，可以做到四欄或五欄，不過觀感不佳，也沒有實用性，可能是用來充數的樣式，請略過。

---

[兩欄式] 文章列表 | 樣式 06

如果你網站的文章類型是沒有「精選圖片」，純文章的結站，可以直接用這種「標題殺人法」的版型會有不錯的效果，像「小說類」或「新聞清淡專欄」等等，簡單直接。左邊顯示「文章日期」和右邊顯示強調的「文章標題」。

---

[必修技能] 你必須懂得精確使用以下知識
認識 WordPress Block Editor (區塊編輯器)

在 WordPress 5.0 版本更新之後，經典的舊版編輯器已替換為全新的區塊編輯器 (Block Editor)，並持續快速地改良和完善功能，差不多每個小版本的改動，其核心都是圍繞著區塊 (Block)。

由於這篇教學是進階程度，我們假設你已經擁有基礎的區塊編輯器的操作能力，不然在製作「文章範本」之上你可能會遇上卡關，因為需要懂得靈活新增、移動、修改和刪除區塊，建議新手還是重溫一遍基礎教學。

---

什麼是「清單檢視 / List View」功能？

由於 WordPress 區塊編輯器已經推出了一段時間，不過部分新手在操作時發現不好上手，尤其在選取目標「區塊」元素時，常常選不到自己希望選擇的物件。

還有因為「隱藏」的線框，沒有相關的區塊觀念可能會碰壁。這次從「觀念」介紹如何更「精準」和「正確」地選取區塊物件，這需要配合「清單檢視 List View」功能的協助。

WordPress 在 5.8 更後的「清單檢視 List View」功能，也會在 WordPress 查詢迴圈區塊 (Query Loop Block) 領域大派用場，你確保你完全瞭解這個操作，接著在下方就不再重複和累贅相關的知識和技巧，望見諒。

---

請放慢腳步，瞭解什麼是「格狀檢視 Grid view」的文章列表

這張警告圖很重要，暫時來說我們認為這個 UI / UX 設計真不太好，當你切換至「格狀檢視 Grid view」的文章列表，在沒有「任何提示信息」之下，新手可能會認為這個介面是文章列表的最終效果。

但剛剛相反，這個介面是「選擇」文章列表的外觀畫面，千萬不要點擊圖片的文章外觀，然後又會帶你到另一些設定介面，但完全沒有任何提醒資訊，只能靠猜的，不太滿意這種設計。

步驟一：
點擊格狀檢視 (Grid View) 的文章列表，接著先放慢腳步，先閱讀下方解說再作進一步行動。

---

請將「焦點」放在右邊的網頁捲軸

在「文章範本」區塊裡，你可以發現右邊的網頁捲軸，從「上」往「下」拉動，你會發現約 6 種的排版外觀，跟之前介紹的差不多，就不再重覆介紹一次，而且你隨時都可以自由變動當中的「區塊」和重新排序。

步驟一：
善用網頁捲軸，從「上」往「下」拉動，觀察不同外觀樣式的差異，評估那種最適合自己。

---

從「多個」外觀，選擇一款喜歡的樣式

每個人有自己的喜好，這類不評論那種最適合，但可以選擇的款式暫時不多，可能因為這個官方剛推出的新功能，期待往後推出更多實用性高和美觀的樣式。

步驟一：
請再三思考，如上圖中，如果最終確認了款式，就按下「左鍵」確認。

---

「寬幅寬度」vs「全幅寬度」的差異？

大部分部落格網站都推薦使用「寬幅寬度」，就是網站的兩側不會無盡地延伸，一般固定在一定的數值之內，例如 1,400 像素寬度等等。

反之形象網站有時候會使用大膽的背景和圖片輪播等等，就比較適合「全幅寬度」，不過實際情況因人而異。

寬幅寬度：
網站寬度是「固定」，例如常見在 900 像素至 1,400 像素之間，每一行可以容納 3 至 5 篇文章。

全幅寬度：
網站寬度是「無限」的，視乎瀏覽器和裝置螢幕，其實這樣不太好控制文章列表的數量，因為會無限廷伸，新手站長自行評估。

---

「清單檢視 List View」和「格狀檢視 Grid view」比較

兩種都是主流的文章列表格式，沒有對與錯，不過可以從網站文章的方產速度去發想，如果您網站只有一位作者 (站長)，每個月只能生產或創作微量文章，那使用「清單檢視 List View」可能比較合適，也不會讓人覺得網站沒什麼內容和很空洞。

反之如果你網站是多作者或已經累積了大量文章數目，那使用「格狀檢視 Grid View」就能呈現給訪客內容豐富的感覺，加上「分類」的應用，可以化身成為一間小型的媒體公司。

清單檢視 (List View)：
經典的由上而下排序，看似沒有特色，不過實用度非常足夠，有足夠的空間放置精選圖片和文章摘要。

格狀檢視 (Grid View)：
隨著科技進步，人們的電腦螢幕和手機螢幕的尺寸和解像度愈來愈高，可以放置更多的內容，如果你網站內容非常豐富和足夠，不要懷疑，就選用格狀檢視。

---

關於「顯示設定 Display settings」的配置

當設計完「文章範本」之後，我們進入設定「查詢迴圈」的階段，你可以在這裡設計文章列出的文章出現篇數。關於第二點「略過 Offset」是可以讓文章分配得比較平均。

例如你有 10 篇關於日本旅遊的文章，設為「1」的話，文章列表會顯示雙數的篇幅，像第 2、4、6、8 和 10 篇的文章。最後的顯示數量上限就是文章列表的總數，預設是 0 代表「無上限」。

※ 備注：
即使頁面查詢有更多結果，仍然限制頁面的顯示數量。如需顯示全部頁面，請設定為 0。

每頁顯示項目數量：
同一個頁面，顯示多少個文章 (Post)？例如你想製作兩行，而每行顯示 3 篇文章，你就設定 (3 x 2) = 6 篇。

需要略過的文章數量：
像上方說明一樣，如果文章少的話，就設定 0，反之文章多的話，可以設定 2 或 4 也可以。

頁面顯示數量上限：
預設是 0，理論上沒必要調整，不過如果需要查詢的數量太多，會影響主機效能和資料庫的負荷。

---

回到「區塊編輯器」的設定

在文章或頁面的編輯介面，當你選取「文章列表」區塊，右方會出現相關的設定選項，你可以什麼都不做，使用「預設值」。也可以跟據不同網頁元素去設定，下方我們會有數個章節逐個介紹各自的功能。

步驟一：
在區塊編輯器選取不同網頁元件會出現不同設定，所以如果你發現消失了，請點擊一下「文章列表」元素就會回來。

---

查詢迴圈 | 區塊設定 01

這裡可以設計文章外表的基礎外觀，例如「文字色彩」和「背景色彩」，WordPress 允許你針對每個細項調整，然後你可以控制是出現文章或頁面等等，然後調整一下排序方式，一個基礎的文章列表就完成。

步驟一：調整文字色彩
點擊對應的元素，然後調整「文章標題」、「內文摘要」和「其他文字」的文字色彩，有 12 種預設色彩，也可以按下「自訂色彩」輸入色彩碼，反之可以按「清除」來移除不合適的色彩。

步驟二：調整背景色彩
同上相同，點擊對應的元素，然後調整「文章標題」、「內文摘要」和「其他背景」的背景色彩，有 12 種預設色彩，也可以按下「自訂色彩」輸入色彩碼，反之可以按「清除」來移除不合適的色彩。

步驟三：繼承範本查詢內容
啟用這項設定後，便能使用目前範本所設定全域查詢內容。停用以個別自訂設定。

步驟四：內容類型
WordPress 包含不同類型的內容，並將這些內容區分成稱為「內容類型」的集合。核心程式預設內建幾個內容類型，如網站「文章」或「頁面」，而外掛能為網站加入更多內容類型。

步驟五：排序方式
這個排序方式可以製作像「最新文章 Latest Posts」的區塊，你可以選擇「由新至舊」或「由舊至新」去排序文章，另外比較罕有就是由「由 A 至 Z」或「由 Z 至 A」的阿拉伯字母排序，但這不適用於中文標題。

步驟六：置頂文章
網站文章可以進行置頂。「置頂」是能將文章置於文章首頁頂端、直到有新的置頂文章發佈取代舊的置頂文章的功能。

---

查詢迴圈 | 區塊設定 02

設定文章列表的「篩選條件」，如果是希望製作「全部文章」，可以使用預設值即可，但也可以善用「分類」功能，讓不同的區域展示不同的分類文章列表。另外「作者」和「關鍵字」比較少人會使用，但可以讓你製作更多樣化的效果。

步驟一：分類
有一個明顯的缺點，這裡沒有分類的「下拉式選單」，所以請直接輸入分類名稱，請使用逗號或按 Enter 鍵進行分隔。

步驟二：標籤
標籤也是沒有「下拉式選單」，這真的考驗站長的記憶力，請使用逗號或按 Enter 鍵進行分隔。

步驟三：作者
預設的作者是「全部」，大部分網站都只有站長自己一個，除非是「共筆網站」或多作者平台。

步驟四：關鍵字
利用「關鍵字 / Keywords」作為文章列表的依據，適用特別的頁面和情況。

步驟五：HTML 元素
HTML 元素保留預設值即可，這給予進階技術的站長調整。

步驟六：附加的 CSS 類別
這個針對懂得 CSS 語法的站長，可以調整文章列表的更多樣式變化。

---

開啟「清單檢視 List View」模式

相信大家對這個列表應該不陌生？整個頁面的區塊都會完整在這裡列出來，慢慢你可以知道自己的網站結構，還有它們之間的關係。

步驟一：
點擊「清單檢視 / List View」 icon。

步驟二：
你可以發現迴圈區塊的結構，它內裡包含一份文章範本，範本又包含不同的網頁元件。

---

預設標準的「文章範本」結構

這個文章範本的「順序」是可以改變或增減，怎至隨著 WordPress 不停強化，你可以加入更多「區塊 Block」進去，暫時看到限制很少，上方只要設計一個最典型的，你不必跟著這個模式。

步驟一：文章標題
文章標題區塊有個缺點，就是強制「全部顯示」，而不能設定顯示多少字數，你會發現有些標題佔用三行，有些佔用一行，會破壞版面。

步驟二：文章精選圖片
精選圖片的尺寸比例盡量要統一吧，這在任何的文章列表都適用，主要都是注意一致性和統一性。

步驟三：文章內容摘要
這邊有個特別的設定，允許加入「在新行顯示連結」，白話文一點說就是行動呼籲 (Call to action) 按鈕。

步驟四：分隔符號
分隔符號用來區隔資訊，使用與否就因人而異，你可以增減或改變外觀。

步驟五：文章發佈日期
文章發佈日期也是看站長的喜好，需不需要顯示也是因人而異。

---

重溫一遍查詢迴圈區塊 (Query Loop Block) 流程

---

完成品：接近 WordPress 佈景主題的效果

初步使用餬結論是不錯的，不過部分 UI / UX 可以改善，不然對部分新手可以會做成錯誤的操作，但非常期待這個功能的發展，作為 全站編輯 (Full Site Editing) 重要的組成部分，這次的更新是一個重要的里程碑，希望新手不要閱讀得太辛苦。

---

---

常見問題 FAQ

---

參考資料和引用文獻：

• The new Gutenberg editing experience
• GitHub – WordPress/gutenberg: The Block Editor project for WordPress and beyond. Plugin is available from the official repository
• WordPress Gutenberg 計劃
• Support — WordPress.com：Full Site Editing Blocks » Query Loop Block
• WordPress Support：Query Loop Block
• TORQUE：What is WordPress 5.8’s Query Loop Block?
• WP Tavern：Query Loop: The Ins and Outs of One of WordPress 5.8’s Most Powerful Features
• WP Development Courses：The Query Block: The Loop in Block-Based Themes
• Toolset：How The New Query Loop Block in WordPress 5.8 Compares to the Toolset View Block
• 網站迷谷：如何寫一篇文章？
• 網站迷谷：區塊編輯器是什麼？
• 網站迷谷：WordPress「清單檢視 List View」是什麼？
• 網站迷谷：什麼是新版 WordPress 小工具 (Widget)？
• 網站迷谷：什麼是傳統編輯器？
• 網站迷谷：如何使用 Qubely 區塊套件制作文章列表？
• 圖片來源：網站迷谷免費圖庫介紹

---

WordPress 學員人數
12,000+ 人 (持續增加之中)