fbpx
Bluehost 主機最新優惠

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

文章列表 (Post Grid) 功能是很多新手部落格站長非常關心和頭痛的一環,傳統的網站架設流程是交由 WordPress 的佈景主題 負責,不過隨著 WordPress Gutenberg 計劃 的推進,愈來愈多原來是佈景市題負責的項目,站長們應該需要開始準備習慣 全站編輯 (Full Site Editing) 會變成我們使用 WordPress 的日常操作,這不會是短期內發生,各種工具會慢慢被核心程式取代,減少了依賴第三方的工具和外掛。這次介紹的 WordPress 查詢迴圈區塊 (Query Loop Block) 就能做到「最新文章」、「熱鬥文章」或「分類文章」等等的變化,而這些變化你都不用離開區塊編輯器的範圍。

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

這次教學上半部分是設計一份「文章範本」,然後交給「查詢迴圈」功能執行。
這次教學上半部分是設計一份「文章範本」,然後交給「查詢迴圈」功能執行。
「查詢迴圈」的角色是重複執行「文章範本」,而重複次數取決於文章總數
「查詢迴圈」的角色是重複執行「文章範本」,而重複次數取決於文章總數

這次教學上半部分是設計一份可以重複套用的「文章範本」,範本內容包含文章標題、精選圖片、內容摘要、發文時間和文章分類等等,然後交給「查詢迴圈」功能執行。所以「查詢迴圈」的角色就是重複執行「文章範本」,而重複次數取決於文章查詢總數,次數的部分站長可以自由控制。

官方功能說明:
查詢迴圈區塊 能顯示指定參數的文章,與 PHP 迴圈相似但不須撰寫程式碼。這個區塊能顯示指定分類的文章,能達成類似建立作品集或私房食譜頁面的目標,使用者可以將這個區塊類比為功能較為複雜但更為強大的 [最新文章] 區塊。此外,區塊版面配置建議能讓建立指定條件的文章清單變得比以往更容易。

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

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

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

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

如何選擇合適的免費或付費 WordPress 佈景主題?

WordPress 佈景主題可以說是這個內容管理系統(CMS)的【靈魂】和【核心】的組成部分,新手第一次接觸自架站,會對佈景主題在網站發揮什麼作用感到疑惑?但不容擔心,網站迷谷這次會細分不同的重點解說,用淺顯易懂的文字,帶新手從零開始了解這個最迷人的地方。直到今天為止,官方公佈有 7,500 個免費佈景主題,加上大量第三方的網頁程式開發公司協助開發的付費佈景主題,市場上總計有超過 10,000 多個的選擇給大家。網站迷谷為大家整理了一系列的選擇,替您選出最合適的 WordPress 佈景主題。

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

什麼是網站的文章列表 (Post Grid) ?

使用 Qubely 制作華麗和優雅的多樣化【文章列表 Post List】

作為部落格最重要的排版功能,專業的【文章列表 Post Grid】是必不可少,也可以為你的網站規劃專屬的定位佈局。一般在 WordPress 架構的分工之上,這是佈景主題負責的部分,但現在的 第三方頁面編輯器區塊編輯器 的擴充外掛都可以達成相同的工作。

除了使用 WordPress 佈景主題制作文章列表是主流,在 2019 年之後,強勢的「區塊套件外掛」如 QubelyStackable 這類多功能的組合包,一般功能數目不輸主流的「頁面編輯器」,當然在製作文章列表上的可以調整的選項會非常多,你怎至不懂 CSS 語法也可以調整細微如針的「細節」,但這些強大功能不在這次教學範圍之內。


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

如何新增迴圈區塊 (Query Loop Block) ?
如何新增迴圈區塊 (Query Loop Block) ?

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

步驟一:

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

步驟二:

在搜尋欄位輸入「查詢迴圈」,點擊那個像「無盡迴圈」的 icon。

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

善用 WordPress 查詢迴圈區塊 (Query Loop Block) 建立文章列表 (Post Grid) 功能
【單欄式】文章列表「清單檢視 List view」 | 選擇外觀設計流程

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

步驟一:

預設使用「清單檢視 List view」 ,什麼都不需要變更。

步驟二:

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

【一欄式】文章列表 | 樣式 01

 【一欄式】文章列表 |  樣式 01
【一欄式】文章列表

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

【兩欄式】文章列表 | 樣式 02

 【兩欄式】文章列表 |  樣式 02
【兩欄式】文章列表 | 樣式 02

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

【兩欄式】文章列表 | 樣式 03

 【兩欄式】文章列表 |  樣式 03
【兩欄式】文章列表 | 樣式 03

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

【兩欄式】文章列表 | 樣式 04

 【兩欄式】文章列表 |  樣式 04
【兩欄式】文章列表 | 樣式 04

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

【三欄式】文章列表 | 樣式 05 (不推薦)

 【三欄式】文章列表 |  樣式 05
【三欄式】文章列表 | 樣式 05

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

【兩欄式】文章列表 | 樣式 06

 【兩欄式】文章列表 |  樣式 06
【兩欄式】文章列表 | 樣式 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」的文章列表

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

這張警告圖很重要,暫時來說我們認為這個 UI / UX 設計真不太好,當你切換至「格狀檢視 Grid view」的文章列表。在沒有「任何提示信息」之下,新手可能會認為這個介面是文章列表的最終效果。但剛剛相反,這個介面是「選擇」文章列表的外觀畫面,千萬不要點擊圖片的文章外觀,然後又會帶你到另一些設定介面,但完全沒有任何提醒資訊,只能靠猜的,不太滿意這種設計。

步驟一:

點擊「格狀檢視 Grid view」的文章列表,接著先放慢腳步,先閱讀下方解說再作進一步行動。

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

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

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

步驟一:

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

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

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

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

步驟一:

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

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

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

大部分部落格網站都推薦使用「寬幅寬度」,就是網站的兩側不會無盡地延伸,一般固定在一定的數值之內,例如 1,400 像素寬度等等。反之形象網站有時候會使用大膽的背景和圖片輪播等等,就比較適合「全幅寬度」,不過實際情況因人而異。

寬幅寬度:

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

全幅寬度:

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

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

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

兩種都是主流的文章列表格式,沒有對與錯,不過可以從網站文章的方產速度去發想,如果您網站只有一位作者 (站長),每個月只能生產或創作微量文章,那使用「清單檢視 List View」可能比較合適,也不會讓人覺得網站沒什麼內容和很空洞。反之如果你網站是多作者或已經累積了大量文章數目,那使用「格狀檢視 Grid view」就能呈現給訪客內容豐富的感覺,加上「分類」的應用,可以化身成為一間小型的媒體公司。

清單檢視 List View:

經典的由上而下排序,看似沒有特色,不過實用度非常足夠,有足夠的空間放置精選圖片和文章摘要。

格狀檢視 Grid view:

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

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

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

當設計完「文章範本」之後,我們進入設定「查詢迴圈」的階段,你可以在這裡設計文章列出的文章出現篇數。關於第二點「略過 Offset」是可以讓文章分配得比較平均,例如你有 10 篇關於日本旅遊的文章,設為「1」的話,文章列表會顯示雙數的篇幅,像第 2、4、6、8 和 10 篇的文章。最後的顯示數量上限就是文章列表的總數,預設是 0 代表「無上限」。

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

每頁顯示項目數量:

同一個頁面,顯示多少個「文章 Post」?例如你想製作兩行,而每行顯示 3 篇文章,你就設定 ( 3 x 2 ) = 6 篇。

需要略過的文章數量:

像上方說明一樣,如果文章少的話,就設定 0,反之文章多的話,可以設定 2 或 4 也可以。

頁面顯示數量上限:

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

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

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

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

步驟一:

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

查詢迴圈 | 區塊設定 01

查詢迴圈 | 區塊設定 01
查詢迴圈 | 區塊設定 01

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

步驟一:調整文字色彩

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

步驟二:調整背景色彩

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

步驟三:繼承範本查詢內容

啟用這項設定後,便能使用目前範本所設定全域查詢內容。停用以個別自訂設定。

步驟四:內容類型

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

步驟五:排序方式

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

步驟六:置頂文章

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

查詢迴圈 | 區塊設定 02

查詢迴圈 | 區塊設定 02
查詢迴圈 | 區塊設定 02

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

步驟一:分類

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

步驟二:標籤

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

步驟三:作者

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

步驟四:關鍵字

利用「關鍵字 Keywords」作為文章列表的依據,適用特別的頁面和情況。

步驟五:HTML 元素

HTML 元素保留預設值即可,這給予進階技術的站長調整。

步驟六:附加的 CSS 類別

這個針對懂得 CSS 語法的站長,可以調整文章列表的更多樣式變化。

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

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

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

步驟一:

點擊「清單檢視 List View」 icon。

步驟二:

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

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

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

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

步驟一:文章標題

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

步驟二:文章精選圖片

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

步驟三:文章內容摘要

這邊有個特別的設定,允許加入「在新行顯示連結」,白話文一點說就是「Call to action 行動呼籲按鈕」。

步驟四:分隔符號

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

步驟五:文章發佈日期

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

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

這次教學上半部分是設計一份「文章範本」,然後交給「查詢迴圈」功能執行。
這次教學上半部分是設計一份「文章範本」,然後交給「查詢迴圈」功能執行。
「查詢迴圈」的角色是重複執行「文章範本」,而重複次數取決於文章總數
「查詢迴圈」的角色是重複執行「文章範本」,而重複次數取決於文章總數

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

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

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


常見問題 FAQ

這個文章列表 (Post Grid) 可否取代佈景主題的功能?

按照 WordPress 的發展路線,建議站長們應該需要開始準備習慣 全站編輯 (Full Site Editing) 會變成我們使用 WordPress 的日常操作,暫時佈景主題還是必須的

如何開啟 WordPress 查詢迴圈區塊 (Query Loop Block)?

這個功能並不需要安裝任何 WordPress 外掛或設置,這是「區塊編輯器」的專屬功能,在 WordPress 5.8 版本之係納入核心系統。

參考資料和引用文獻:

學員人數:5,500+ 人(持續增加之中)

中文語系的 WordPress - Facebook 社團列表

發表您的留言

加入我們的 Facebook 學習社團免費的教學資源、交流和解決問題!

是否覺得孤軍作戰和學習很無趣味?
何不加入學習社團和其他
熱愛網站設計的朋友交流?
分享您建站的喜與樂
學習最新的知識和技術