Elementor Pro 文章列表客製化教學：打造高質感的 WordPress 部落格
Elementor Pro 的主題建構器（Theme Builder）讓你用 Posts Widget 完全接管 WordPress 預設的文章列表與單篇文章版面，不必動到任何主題…
Elementor Pro 文章列表客製化是什麼、為什麼值得做
Elementor Pro 的主題建構器（Theme Builder）讓你用 Posts Widget 完全接管 WordPress 預設的文章列表與單篇文章版面，不必動到任何主題檔案、不必寫一行 PHP。WordPress 內建的文章列表是由佈景主題直接輸出的，樣式固定、無法拖曳調整；根據 Elementor 官方網站公布的安裝數，Elementor 目前被超過五百萬個網站使用，而能把部落格質感真正拉開差距的關鍵，在於你能否脫離主題預設、用 Theme Builder 覆寫 Archive 與 Single Template，換主題本身只是換另一組預設值。
很多教學把「換個漂亮主題」當成部落格變美的解方，但換主題其實只是換另一組預設值。只要沒有用 Theme Builder 覆寫文章列表與單篇模板，你的版面會跟幾十萬個用同一主題的網站長得幾乎一模一樣。質感主要靠客製化列表卡片撐出來的，主題選擇的影響反而有限。如果你對 Elementor 的整體能力還不熟，建議先從 Elementor 完整教學從入門到精通 建立觀念，再回頭專攻文章列表這一塊；想直接了解 Pro 與免費版差異的人，則可以先看 Elementor Pro 完整購買與功能指南。
| 層級 | 工具 | 能改什麼 | 套用範圍 |
|---|---|---|---|
| 頁面編輯器 | Elementor（免費版即可） | 改單一頁面內的區塊排版 | 僅該頁面 |
| 主題建構器 Theme Builder | Elementor Pro 專屬 | 覆寫全站範本：Archive、Single、Header、Footer | 全站所有對應頁面 |
| 佈景主題預設 | 主題本身的 PHP 模板 | 不更動，作為被覆寫的底層 | 未被範本覆寫時生效 |
這裡要把觀念講得更細一點。頁面編輯器跟主題建構器是兩件事，分不清楚的人會把整個網站做歪。頁面編輯器處理的是「某一頁長怎樣」，你可以在首頁拉一個 Posts Widget 排文章，但它只存在於那一頁；主題建構器處理的是「某一類頁面長怎樣」，你建立一個 Archive 範本，全站所有分類頁、標籤頁、作者頁、日期彙整頁都會套用同一套版面。換句話說，一個範本能覆蓋幾十個、幾百個頁面，這也是 Theme Builder 區別於頁面編輯器的地方。相關的版面設計觀念可以搭配 網頁版面設計排版觀念 與 網頁排版設計範例 一起看。
Posts Widget 本身能顯示的欄位相當完整：文章標題、特色圖片、發佈日期、作者、摘要、分類、標籤、閱讀更多按鈕都能開關與排序（依 Elementor 官方文件對 Posts Widget 的說明）。這意味著你不需要寫程式，就能把列表卡片組合成任何想要的資訊層次。會猶豫的人通常是怕「改壞網站」，但 Theme Builder 的範本是疊加在主題之上的，停用範本就會退回主題預設，隨時能還原，這點讓改壞的風險降到很低。
免費版與 Pro 的功能界線
免費版可以在單一頁面用 Posts Widget 排文章，但 Theme Builder 是 Pro 專屬功能。想讓每個分類頁、每篇文章都用同一套自訂版面，就必須升級 Pro；只在首頁做一個文章區塊的人，免費版就夠用。關鍵差異落在「這個版面能不能套用到全站」，Posts Widget 本身兩個版本都能拉這個元件，並不是分界點。
判斷要不要升級 Pro，其實只看一個問題：你要不要經營完整的部落格？答案肯定，就沒有不上 Pro 的理由。Pro 解鎖的 Theme Builder、動態標籤、自訂皮膚、進階查詢條件、Loop Grid，每一個都是把文章列表與單篇版面做到精緻的必要拼圖。費用方面，Elementor Pro 採授權制，首年與續約價格不同，確切金額請以官網定價為準，不寫死數字以免過時。
| 能力 | Elementor 免費版 | Elementor Pro |
|---|---|---|
| 單頁面用 Posts Widget 排文章 | 可以 | 可以 |
| Theme Builder（覆寫 Archive／Single） | 不行 | 專屬功能 |
| 動態標籤（綁定文章標題、作者、日期等） | 受限 | 完整支援 |
| 自訂皮膚（Custom Skin，控制卡片 HTML 結構） | 不行 | 支援 |
| 進階查詢條件（多重篩選、自訂欄位排序） | 受限 | 完整支援 |
| Loop Grid（新版迴圈網格） | 部分 | 完整支援 |
| 表單、彈跳視窗、頁首頁尾設計 | 不行 | 支援 |
「先用免費版做做看，等網站做起來再升級」這個想法聽起來穩，實際上會讓你在中途重做一次版面。免費版做的文章區塊綁在單一頁面，等你決定改用 Theme Builder，那個舊的頁面區塊就變成要拆掉重組的負債。一開始就打定主意要好好經營部落格的人，直接上 Pro 反而省事，省下的是日後遷移與重排的時間；只是想先試水溫、確定自己會持續寫文章的人，免費版先跑也合理，但要預期後面會有一段重整期。除了文章列表，Pro 在頁首頁尾與彈窗的進階設計也值得一看，可以參考 Elementor Pro 頁首頁尾設計教學 與 Elementor Pro 彈跳視窗教學；表單、作品集、滿版輪播這類行銷導向的元件同樣是 Pro 專屬。
前置準備：安裝 Elementor Pro、啟用相容主題
開始客製化文章列表前，要確認三件事：Elementor Pro 已安裝並啟用、授權碼已激活、使用的是與 Elementor 相容的佈景主題。這三項任何一項沒到位，Theme Builder 都會叫不出來或功能受限。先確認文章已經有特色圖片與分類，否則 Posts Widget 拉出來會是空的。到 Elementor 官網購買 Pro 授權、下載安裝包、在 WordPress 後台上傳啟用後，再到「Elementor → 授權」貼上授權碼完成激活，Pro 功能才會解鎖，步驟可對照 Elementor 官方安裝文件。最後在「設定 → 閱讀」確認文章頁與每頁顯示文章數，這會影響列表的分頁行為，並至少先建幾篇測試文章，每篇都設特色圖片與分類。
主題的選擇會直接影響載入速度與相容性，這點比你想的重要。Elementor 官方推出的 Hello Elementor 是專門為 Elementor 優化的極簡主題，程式碼量極少，載入快；Astra 則是通用性最高、市占率極高的選項，搭配 Astra 主題免費版教學 可以快速上手。無論選哪個，原則是「主題越輕、越相容越好」，不要為了功能多而裝一個肥大的多功能主題，那會拖垮整個網站的 網站速度優化 表現。
啟用主題後，到「Elementor → 設定」裡開啟幾個關鍵選項：全站寬度（Full Width）讓內容能跑滿版面、元素隱藏設定讓你在不同裝置切換顯示、以及確認 Elementor 與你的主題相容性檢查通過。這些前置動作看起來瑣碎，但少做一步，後面 Posts Widget 的版面就會莫名跑位。
用 Theme Builder 建立文章列表的 Archive 範本
用 Theme Builder 自訂分類頁與文章列表的完整流程是：後台左側選「範本 → 主題建構器」進入總覽頁，點「新增範本」、類型選 Archive，挑一個預設版型或從空白開始；接著在元件區找到 Posts Widget 拖入版面，點開「查詢」分頁把來源設為 Post，並依分類、標籤、作者、排序方式篩選；再切到「版面配置」分頁設定欄數、卡片間距、圖片比例，到「內容」分頁勾選要顯示的欄位（標題、摘要、分類、閱讀更多）。按「發佈」時系統會跳出顯示條件對話框，選「All Archives」就會套用到全部分類頁，或指定單一分類；儲存後開啟任一分類頁（例如 /category/your-slug）即可檢查套用結果。
Posts Widget 的查詢條件是整個列表的靈魂，這裡講細一點。來源（Source）選 Post 就是抓文章；如果你想抓自訂文章類型（Custom Post Type），例如作品集或商品，這裡也能選。篩選條件可以疊加多重規則：指定分類、指定標籤、指定作者、排除特定文章，甚至用日期區間過濾。排序方式預設是依發佈日期由新到舊，但你也能改成依標題、依修改日期、或依自訂欄位排序（這需要 Pro 的進階查詢）。把查詢條件想成「這個列表要顯示哪些文章」，把卡片設計想成「這些文章要長怎樣」，這兩層分開設定，調整時才不會亂。
| 顯示條件設定 | 套用範圍 | 適用情境 |
|---|---|---|
| All Archives | 全站所有彙整頁（分類、標籤、作者、日期） | 想要統一風格的部落格 |
| Category Archives | 所有分類頁 | 只想統一分類頁、保留其他彙整頁預設 |
| 指定單一分類 | 某一個分類頁 | 特定分類需要獨特版面（例如精選專欄） |
| Search Results | 搜尋結果頁 | 連站內搜尋頁也用自訂列表 |
進階玩家會用自訂皮膚（Custom Skin）或 Loop Grid 完全控制每張卡片的 HTML 結構。預設的 Posts Widget 提供「Classic」「Cards」「Skin」幾種內建皮膚，但每張卡片的 HTML 結構是固定的；自訂皮膚讓你像組積木一樣自己排卡片的每一個元素，標題放哪、圖片放哪、分類標籤放哪，完全自由。Loop Grid 則是 Elementor 較新的元件，操作更直覺，適合喜歡視覺化拖曳的人。如果你對迴圈與網格排版有興趣，Bento Grid 網頁排版設計 與 排版設計字體與層次技巧 能提供更多版面靈感。
第一次建立 Archive 範本時，最常卡住的不是功能本身，而是「分類頁的網址到底是什麼」。WordPress 預設分類頁網址是 /category/分類名稱，如果你改過永久連結結構，路徑可能不同。建議直接從後台「文章 → 分類」找到某個分類，點「檢視」就能拿到正確的網址，再用那個網址去預覽範本是否套用成功。關於永久連結的 SEO 設定，可以參考 WordPress 永久連結 SEO 設定。
文章卡片的排版細節
文章列表的質感來自統一的圖片比例、克制的欄位數量、足夠的留白與一致的間距，單純堆砌資訊反而會拖垮精緻度。正確的做法是固定特色圖片比例（建議 16:9 或 3:2，避免不同文章的圖片參差不齊）、把摘要控制在 20 到 40 字（太長會讓卡片變高、破壞欄的整齊）、用字級與字重建立層次（標題最大、分類標籤次之、摘要最小），並把分類標籤做成彩色 badge、顏色對應分類來提升辨識度。實際操作時，把欄位砍掉一半、間距放大一點，列表看起來反而更專業。
留白是新手最容易忽略的事。很多人直覺覺得「畫面空空的很浪費」，於是把每張卡片塞滿資訊、把間距縮到最小，結果整個列表變得擁擠、廉價、難閱讀。質感網站的共同特徵其實是「敢留白」：卡片之間有足夠呼吸空間、圖片與文字之間有間距、欄與欄之間不會黏在一起。把 Posts Widget 的卡片間距調大、把圖片下方的文字內距留出來，整個列表的精緻度會立刻提升一個檔次。響應式段落則不能只調桌面版：卡片間距與欄數要依桌面、平板、手機分別設定，滑鼠 hover 也可以加微互動（圖片微放大、陰影浮起）拉高點擊意願，相關視覺原理可以看 響應式網頁設計 RWD 與 Elementor 響應式網頁設計。
響應式設定要特別分開調，這點很多人會漏。Elementor 編輯器下方有桌面、平板、手機三個圖示，點哪個就改哪個版面。桌面版可能排 3 欄，平板改成 2 欄，手機改成 1 欄；桌面版的標題字級可能是 24px，手機版要降到 18px 才不會撐破卡片。如果你只調桌面版就發佈，手機使用者看到的就是被擠壓變形的列表，質感全毀。根據 Google 在 Core Web Vitals 與 Think with Google 行動體驗研究中提出的指標，行動裝置載入時間每多一秒，跳出率會顯著上升，這也是為什麼響應式不能只做一半。深入了解指標可以看 Core Web Vitals SEO 指標。
而手機流量早就不是配角了。根據 Statista 的統計，2026 年第一季行動裝置（不含平板）佔全球網站流量的 52.27% [來源：Statista〈Share of mobile web traffic worldwide quarterly 2015-2026〉 https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/ 2026-04-28]，也就是超過一半的訪客是從手機進來的。文章列表如果在手機上跑掉、欄數沒降、字級沒縮，等於直接把過半的讀者推走，響應式從來不是加分題，而是基本盤。
| 裝置 | 建議欄數 | 標題字級 | 卡片間距 |
|---|---|---|---|
| 桌面（≥1024px） | 3 欄 | 22-26px | 24-32px |
| 平板（768-1023px） | 2 欄 | 20-22px | 16-24px |
| 手機（≤767px） | 1 欄 | 18-20px | 12-16px |
卡片層次可以再往深一層看。一張文章卡片其實是四個資訊單元的組合：圖、標題、後設資料（作者日期分類）、導引動作（閱讀更多或摘要）。這四個單元在卡片裡的擺放順序，會直接改變讀者的視線動線。多數主題預設的順序是圖在左、文字在右的橫向卡片，這種排法在桌面版很省空間，卻會讓手機版出現大量空白；改成圖在上、文字在下的直向卡片，跨裝置一致性會好很多，也更容易做到圖片比例統一。判斷要用哪種排法的依據是你的圖片品質：圖片質感夠好、能成為點擊誘因，就用圖在上讓它當視覺主體；圖片只是配角，就用橫向卡片壓縮版面。
後設資料要不要全部顯示，是新手常見的過度配置。一張卡片同時秀出作者、發佈日期、修改日期、分類、標籤、閱讀時間、留言數，看似資訊完整，實則讓卡片變成一團灰色小字，讀者根本不會讀。實用的判斷方式是問一個問題：這個欄位會不會影響點擊意願？分類標籤能幫讀者快速判斷主題相關性，值得留；發佈日期對即時性強的內容（新聞、優惠）重要，對長青教學幫助有限；作者在有個人品牌的部落格有價值，在多人共筆或匿名網站則可有可無。把後設資料砍到剩下兩到三個最關鍵的，卡片的呼吸空間與專業度會同步上升。
| 卡片欄位 | 點擊影響 | 顯示建議 |
|---|---|---|
| 特色圖片 | 高，視覺第一焦點 | 必顯示，統一比例 |
| 文章標題 | 極高，決定是否點擊 | 必顯示，控制兩行內 |
| 分類標籤 | 中，幫助主題判斷 | 建議顯示，做彩色 badge |
| 摘要 | 中，補充標題資訊 | 建議顯示，限制 20 到 40 字 |
| 發佈日期 | 低到中，視內容時效 | 時效性內容顯示，長青內容可隱藏 |
| 作者 | 低，除非有個人品牌 | 有作者品牌才顯示 |
| 標籤 | 低，容易造成雜訊 | 列表通常隱藏，留給內頁 |
| 閱讀更多按鈕 | 中，引導行動 | 整張卡片可點擊時可省略 |
自訂單篇文章（Single Post）範本
自訂單篇文章版面的方式是：在主題建構器新增一個 Single Post 範本，用動態標籤（Dynamic Tags）把文章標題、特色圖片、作者、發佈日期、正文內容綁定進版面，發佈後所有文章都會套用這套單篇版面。具體來說，先放 Heading 元件、點動態標籤圖示綁定 Post Title，再放 Image 元件綁定 Featured Image，正文用 Text Editor 或 Theme Post Content 元件綁定 Post Content；接著視需求加入 Author、Date、Comments 等動態標籤，並補上麵包屑、上一篇／下一篇、相關文章區塊來強化導覽與 SEO；最後把顯示條件設為 All Single Posts，全站所有文章就會套用這套單篇版面。列表頁與內頁風格一致，整個部落格才會有統一的視覺系統，而不是列表做得漂亮、點進去卻是陽春的預設文章頁。
動態標籤是 Single 範本能運作的核心，觀念要弄懂。一般元件放的內容是「寫死的」，例如你在 Heading 裡打「我的文章」，每篇文章都會顯示「我的文章」；動態標籤則是「綁定資料來源」，例如把 Heading 綁定 Post Title，它會自動抓取當下那篇文章的標題顯示出來。這就是為什麼一個 Single 範本能套用到全站所有文章：每篇文章用的範本結構一樣，但內容會依各自的文章資料自動填入。動態標籤是 Pro 專屬功能（依 Elementor 官方 Dynamic Tags 文件的說明），這也是單篇版面客製化非得 Pro 不可的原因。
Single 範本有兩個常被忽略卻影響很大的細節：閱讀動線的留白控制，以及內文最大寬度。內文如果佔滿整個螢幕寬度，每行字數會過多，讀者眼球追蹤換行時容易跳行、讀不下去；研究與實務經驗都指向一行約 45 到 75 個中文字元最適合長文閱讀。在 Elementor 裡，把 Theme Post Content 元件包進一個固定最大寬度的容器（例如 720px 到 800px），並置中對齊，就能強制內文維持在舒適的閱讀寬度，這個動作對停留時間的幫助比任何特效都直接。Backlinko 分析一千一百多萬筆 Google 搜尋結果發現，首頁結果的平均網站停留時間約為 2.5 分鐘 [來源：Backlinko〈Search Engine Ranking: We Analyzed 11.8 Million Google Search Results〉〈https://backlinko.com/search-engine-ranking〉〈2025-04-14〉]，而停留時間與排名之間存在正相關，把內頁閱讀體驗做好，等於是從使用者行為端反過來支撐排名。
進階查詢條件與卡片排序策略
文章列表不只是把文章排出來，還要排得有策略。Posts Widget 的查詢條件決定哪些文章會出現，排序方式則決定它們出現的先後。預設依發佈日期由新到舊，適合以時效為主的部落格，但對教學型、知識型網站未必最好。一篇被大量閱讀的舊教學，排在十幾篇新文章之後，等於被埋沒。這時可以改用依修改日期排序，讓你最近更新過的長青內容浮上來；或依自訂欄位排序，手動給文章一個「精選權重」，把最重要的內容釘在前排。
| 排序方式 | 適用情境 | 注意事項 |
|---|---|---|
| 發佈日期（新到舊） | 新聞、優惠、時效性內容 | 長青內容會被壓到後面 |
| 修改日期 | 常更新教學的知識型網站 | 小幅修改也會浮上來，需節制 |
| 標題（字母／筆畫） | 字典、詞彙表、產品目錄 | 內容網站少用 |
| 隨機 | 讓舊文有曝光機會 | 破壞穩定動線，謹慎使用 |
| 自訂欄位（手動權重） | 想釘選精選文章在前排 | 需 Pro 進階查詢與自訂欄位 |
| 依評論數／瀏覽數 | 凸顯熱門內容 | 需配合統計外掛寫入欄位 |
多重篩選是進階查詢真正強大的地方。你可以把規則疊加：先限定分類為「教學」，再排除標籤為「草稿預告」的文章，最後只顯示最近 30 天內修改過的內容。這種組合讓一個 Archive 範本能服務完全不同的內容子集，省去為每種情境各建一個範本的重複工作。實務上，用得到多重篩選的典型場景包括：在首頁用一個 Posts Widget 顯示「精選」分類的最新三篇、在側欄用另一個顯示「同分類且最多瀏覽」的五篇、在文章末端顯示「同標籤排除自己」的相關文章。這三個列表用的都是 Posts Widget，差別只在查詢條件，這也是為什麼熟練查詢設定的人，能用一個元件拼出整個網站的內容導覽。
設定查詢的思考順序值得固定下來：先決定這個列表要回答什麼問題（最新？最熱門？同主題？精選？），再把答案翻譯成查詢條件（來源、分類、標籤、排除、日期區間），接著選對應的排序方式讓最該被看到的文章排在最前面。顯示數量要限制，寧可少而精，也不要一次倒出幾十篇；最後套用顯示條件，確認這組查詢只出現在該出現的頁面，整個設定才算閉環。
排序策略要怎麼挑，用一類常見的內容站情境來看會具體得多。以一個累積約 80 到 150 篇文章、混時效與長青教學的內容站為例，這類站常見的狀況是：時效性內容（新聞、優惠）約只佔總篇幅的一到兩成，其餘七八成是教學與知識型長青文，而真正能持續帶進自然搜尋流量的，往往集中在少數幾篇舊教學。依這類站的典型表現幅度，前 10% 到 20% 的文章通常貢獻了約六到八成的總瀏覽量，也就是少數幾篇舊文才是流量主力。如果列表只依發佈日期新到舊排序，這些主力文章會被擠到第二、第三頁，等於把已經在搜尋排名上有表現的內容埋掉；這時把排序改成依修改日期，並節制地只更新真正值得重排的長青文，讓它們浮回前排，是相對務實的做法。但這個策略有一個誠實的限制：修改日期排序很容易被濫用，只要編輯隨手改個錯字、調個標點，文章就會跳到最前面，幾輪累積下來，列表會變成「最近被碰過的文章」而非「最近值得讀的文章」，排序意義反而被稀釋。決策角度因此很明確：先用發佈日期排序觀察哪幾篇是穩定的流量主力，再只對那幾篇做有計畫的更新並啟用修改日期排序，範圍限定在分類層級而非全站，才能兼顧長青內容的曝光與排序的穩定。
有一個進階技巧值得單獨說：排除當前文章。在單篇文章末端的相關文章區塊，如果查詢條件沒有排除當前文章，讀者點進文章 A，末端推薦的第一篇常常就是文章 A 自己，這會讓「相關文章」變成「同一篇文章」。Elementor Pro 的查詢條件支援「Exclude Current Post」選項，勾選後就能確保推薦清單不會包含讀者正在看的那篇，這個小設定對降低重複曝光、引導讀者往下讀下一篇有直接的幫助。
什麼情況不建議自己用 Theme Builder 客製化
客製化不是萬靈丹，有些情境硬上 Theme Builder 反而會拖累網站。判斷的關鍵在於你的網站階段與內容產出節奏。完全沒有文章的網站，先把力氣花在寫內容，列表範本做得再漂亮也沒有東西可排；文章只有三五篇、且不打算規律更新的網站，主題預設的列表就夠用，花時間客製化的投資回報很低；已經用某個深度整合的主題（例如專門的報章雜誌主題）且對預設版面完全滿意的人，硬用 Elementor 接管反而可能在更新後出現相容性問題。
| 情境 | 建議 | 理由 |
|---|---|---|
| 網站剛起步、文章少 | 先產內容，暫緩客製化 | 列表沒內容可排，投入產出不成比例 |
| 只用現成報章主題且滿意 | 沿用主題預設 | 深度整合的主題自行接管可能破壞排版邏輯 |
| 不會維護、不想碰設定 | 用主題預設或委外 | Theme Builder 範本需要定期檢視與更新 |
| 已有大量文章、想統一風格 | 強烈建議客製化 | 一個範本覆蓋全站，投資回報最高 |
| 多種內容類型需不同版面 | 建議客製化 | 能為不同分類、不同類型設計專屬列表 |
| 重視載入速度的極簡站 | 輕量客製化 | 避免過多動態元件，控制範本複雜度 |
另一個常被高估的需求是「動態篩選介面」。有些站長想在分類頁上做即時的標籤勾選、價格區間滑桿這類前端篩選器，這在技術上可行，但實作成本與維護難度遠高於靜態的 Posts Widget 列表。如果你的網站還沒有到需要 faceted search（多維度篩選）的內容規模，先把靜態列表做到精緻，效益會比追求花俏的動態篩選高得多。判斷標準很實際：讀者有沒有明確反映過「找不到想要的內容」？如果沒有，你不需要動態篩選；如果有，再評估要用外掛還是委外開發。
單篇範本的設計要把讀者體驗與 SEO 同時考量。標題要用 H1 標籤、正文維持清楚的語意結構（H2、H3 分層）；文章末端加上相關文章區塊，可以用 Posts Widget 查詢同分類文章來實作，這能降低跳出率、增加頁面停留時間；麵包屑導覽則幫助搜尋引擎理解網站結構，搭配 WordPress SEO 優化全攻略 的結構化資料設定效果更好。把單篇範本跟前面做好的 Archive 範本搭配，整個部落格從列表到內頁就是一套一致的視覺系統。想了解單篇文章本身的寫作與發佈流程，可以看 WordPress 文章發佈與 SEO 寫作流程。
把文章分類放進選單、調整順序
把文章分類放進選單的做法是：在 WordPress 後台「外觀 → 選單」（沒有選單就先新增一個），從左側「分類」面板勾選要加入的分類、按「加入選單」，再拖拉調整順序、或拖到上一層下方做成下拉子選單；儲存後到「管理位置」把它設為主選單，分類頁會自動套用你前面做好的 Archive 範本，這樣從選單點進去就是自訂的列表，形成完整的文章導覽動線。若要自訂排序，可裝 Post Types Order 或 Simple Category Ordering 這類外掛直接拖曳排列。
分類的排序與命名會影響使用者能不能快速找到內容，也影響 SEO。分類頁的網址結構建議保持簡潔，例如 /category/教學，不要塞太多層級；分類名稱要用讀者看得懂、又包含關鍵字的詞，這對分類頁本身在搜尋結果的排名有幫助。如果你想進一步用 Mega Menu 做分類下拉，Elementor Pro 的 Nav Menu 元件支援 Mega Menu，可以把整個分類結構攤開顯示，適合分類很多的內容網站。詳細的選單操作可以看 WordPress 選單設定教學 與 WordPress 分類排序教學；想了解分類與標籤的差異，WordPress 文章和頁面的差異 也有延伸說明。
常見問題排查與 SEO 效能注意事項
Posts Widget 顯示不出文章，多半是查詢條件設錯或該分類根本沒有文章；讀取變慢，多半出在未壓縮的特色圖片與過多查詢。先確認查詢設定、壓縮圖片、啟用快取與延遲載入，質感與速度才能兼得。改文章列表本身不會破壞 SEO，反而是結構化標記做得好會加分。
| 症狀 | 常見原因 | 排查方向 |
|---|---|---|
| Posts Widget 完全不顯示文章 | 查詢來源設錯、分類為空、文章是草稿 | 確認來源選 Post、該分類有已發佈文章、文章非草稿狀態 |
| 特色圖片不出現 | 文章沒設特色圖片 | 回到文章編輯設定特色圖片 |
| 範本套用不到分類頁 | 顯示條件沒設對 | 回到 Theme Builder 確認 Archive 顯示條件涵蓋該分類 |
| 列表載入很慢 | 圖片太大、未壓縮、查詢太多文章 | 壓縮圖片、限制每頁文章數、開啟快取與 Lazy Loading |
| 手機版排版跑掉 | 只調了桌面版 | 切到手機視圖重新設定欄數與字級 |
效能是文章列表最容易翻車的地方，值得多講幾句。一個分類頁如果一次載入 20 篇文章、每篇都帶一張未壓縮的特色圖片，那個頁面會非常重，載入時間一拉長，Core Web Vitals 的 LCP 指標就會變差，直接影響搜尋排名與使用者體驗。優化方向有幾個：把每頁顯示文章數控制在合理範圍（建議 6 到 12 篇），超過就用分頁或「載入更多」按鈕；特色圖片上傳前先用工具壓縮（WordPress 圖片壓縮教學 與 圖片壓縮工具推薦 有詳細做法）；裝一個快取外掛（參考 WordPress 快取外掛推薦）；並開啟 Lazy Loading 讓圖片捲到才載入（看 Lazy Loading 延遲載入指南）。根據 Google web.dev 對 Core Web Vitals 的標準，LCP 應在 2.5 秒內完成。
速度不只是 SEO 指標，更直接折現成營收。Google web.dev 整理的案例顯示，Vodafone 把 LCP 改善 31% 後，銷售提升了 8% [來源：web.dev (Google)〈Why does speed matter?〉 https://web.dev/articles/why-speed-matters 2026]，這組數字說明分類頁那張未壓縮的特色圖片拖慢的 LCP，省下來的是實實在在的成交機會。文章列表調快一點，背後牽動的正是這條從體驗到轉換的鏈結。
SEO 方面，改文章列表不會傷排名，反而會幫忙，前提是你把語意結構顧好。列表卡片的文章標題要用正確的 H 標籤（通常是 H2 或 H3，視版面層級而定），不要為了樣式把標題做成一般 div；分類頁本身要有獨立的標題與 meta 描述，不要讓搜尋引擎看到空白；文章與文章之間的連結結構要清楚，讓爬蟲能順著列表把所有文章都抓到。想系統性了解 SEO，WordPress SEO 優化全攻略是完整的起點。至於整體網站成本與外掛選擇，WordPress 自架網站費用解析 與 WordPress 必裝外掛清單 可以幫你抓預算。
文章列表的客製化其實是整個部落格視覺系統的起點，後續的單篇範本與分類選單都會沿用這裡建立的設計語言。列表卡片、單篇範本、分類選單這三塊各自獨立調整，串起來之後，網站從首頁點到分類頁、再點進單篇文章，才會走在一套統一的設計語言上。主題換得再勤，沒有動 Theme Builder，版面還是會停在主題作者的預設值。想把版面設計再推進一步，CTA 按鈕設計指南 提供更多設計細節；對 Elementor 生態有興趣的，Elementor 外掛推薦清單 也值得收藏。
延伸需求會在經營過程中反覆出現。連整個網站架設流程都還沒走過的人，WordPress 部落格架站教學 是完整起點；想挑一個適合部落格的主題，WordPress 佈景主題推薦 與 WordPress 免費部落格主題推薦 都有實測；還在選平台的人則適合 部落格平台完整比較。這些資源加上 Theme Builder 的客製化流程，從主題選擇、平台決策、到文章列表設計，剛好能串成一條完整的部落格建置路徑；內容經營面的 內容行銷策略全攻略，則是另一個遲早會用到的方向。
常見問題 FAQ
Elementor Theme Builder 跟頁面編輯器差在哪？
頁面編輯器處理的是「某一頁長怎樣」，例如在首頁拉一個 Posts Widget，它只存在於那一頁；Theme Builder 處理的是「某一類頁面長怎樣」，一個 Archive 範本能覆蓋全站所有分類頁、標籤頁、作者頁、日期彙整頁。分不清兩者，是初學者把網站做歪最常見的原因。
Archive Template 和 Single Template 各自負責什麼？
Archive Template 覆寫的是列表型頁面（分類頁、標籤頁、作者頁、搜尋結果），顯示多篇文章的列表卡片；Single Template 覆寫的是單篇文章的內頁版面。前者管列表，後者管內頁，兩個範本要分別建立、分別設定顯示條件。
相關文章一直推薦到同一篇，怎麼排除？
在相關文章區塊的 Posts Widget 查詢條件裡勾選 Exclude Current Post（排除當前文章），推薦清單就不會包含讀者正在瀏覽的那篇。這個選項藏在 Pro 的進階查詢分頁，是 Single 範本相關文章區塊幾乎必開、卻最常被漏掉的設定。
改文章列表會影響 SEO 嗎？
不會破壞 SEO，做對了反而加分。除了標題用正確的 H 標籤、維持清楚的語意結構外，分類頁要記得補上獨立的標題與 meta 描述，不要讓搜尋引擎看到空白頁；結構化標記做好還會提升被 AI 與搜尋結果引用的機會。
文章列表的排序策略怎麼選？
排序沒有公認最好的選項，重點在順序：先用發佈日期排序觀察哪幾篇是穩定的流量主力，再只對那幾篇做有計畫的更新、啟用修改日期排序，並把範圍限定在分類層級，不要套到全站。全站一律改用修改日期排序，列表會變成「最近被碰過的文章」，而讀者真正想看的「最近值得讀的文章」反而會被擠下去。