第6篇共7篇－在WordPress.com的文章設定「延伸閱讀」實際操作（6/7）
第6篇共7篇－在WordPress.com的文章設定「延伸閱讀」實際操作（6/7）
文章簡介
本篇是「在 WordPress.com 的文章設定『延伸閱讀』實際操作」7篇系列文章的第6篇，主要記錄「相關文章」功能完成設定後的實際成果。當我們在「文章內容」下方利用「＋」新增「相關文章」區塊，並完成「📖 延伸閱讀」標題設定後，WordPress.com 便會自動建立推薦文章的位置。實際查看已發布文章，可以看到下方出現左、中、右3個文章卡片，讓讀者閱讀完目前文章後，可以直接點選其他推薦內容繼續閱讀。這項功能最大的便利之處，就是不需要管理者逐篇手動增加文章，只要單篇文章範本設定完成，之後發布的文章便能沿用相同的版面。透過本篇實際操作，也能進一步了解「延伸閱讀」從設定、顯示到自動推薦的完整過程。
編輯日期：2026/08/22
文章目錄
壹、從「文章內容」點選「＋」新增區塊：搜尋並加入「相關文章」功能
貳、完成「📖 延伸閱讀」標題設定：新增延伸閱讀區塊並顯示文章卡片
參、「相關文章」功能設定成功：WordPress.com
自動產生3個推薦文章位置
內容摘要
壹、從「文章內容」點選「＋」新增區塊：搜尋並加入「相關文章」功能
在單篇文章範本中找到「文章內容」區塊後，就可以開始加入延伸閱讀功能。首先在內容區塊下方點選「＋」，畫面會出現「新增區塊」的功能，接著在搜尋欄輸入「相關文章」，即可找到 WordPress.com 提供的「相關文章」區塊。這個步驟的重點，是要確認新增位置位於文章正文結束之後，而不是插入文章內容中間。找到正確的區塊後直接點選加入，就能繼續進行「延伸閱讀」的設定。
貳、完成「📖 延伸閱讀」標題設定：新增延伸閱讀區塊並顯示文章卡片
加入「相關文章」區塊後，可以進一步設定顯示在讀者面前的標題，例如「📖 延伸閱讀」。標題設定完成後，下方會出現相關文章的推薦區域，並顯示文章卡片的位置。實際操作時可能會看到系統提示文章標題將在網站正常顯示，這表示編輯器中的預覽不一定能完整呈現實際推薦內容。只要確認「延伸閱讀」位於文章正文後方，並且文章卡片區塊已經建立，就可以進入下一步。這種設定完成後，日後不需要逐篇文章重新建立相同的版面。
參、「相關文章」功能設定成功：WordPress.com
自動產生3個推薦文章位置
當「相關文章」區塊設定完成並儲存後，到網站實際開啟一篇已發布的文章，就可以檢查最下方是否出現「📖 延伸閱讀」。這次實際操作可以看到，WordPress.com 已經自動建立左、中、右3個推薦文章位置，每個位置都會呈現一篇推薦文章。也就是說，網站管理者不需要再人工建立3張文章卡片，也不必逐篇指定文章，只要完成一次單篇文章範本的設定，之後便可以由系統自動產生推薦內容。對於文章數量逐漸增加的部落格而言，這項功能能讓讀者閱讀完一篇文章後，繼續探索網站中的其他內容。
完整文章
壹、從「文章內容」點選「＋」新增區塊：搜尋並加入「相關文章」功能
在「文章內容」區塊的下面出現一個新的區塊插入位置／「＋」，點＋出現新增區塊，找到「相關文章」區塊。
👍 現在最關鍵的一步已經完成，而且操作得很正確。
接下來只做一個動作：
① 點剛剛出現的「＋」
點下去後，應該會出現「新增區塊」的選單或搜尋框。
② 在搜尋框輸入：
Related Posts
如果介面是中文，也可以試：
相關文章
③ 找到這個區塊
請找名稱類似：
Related Posts（相關文章）
⚠️ 請不要選：
- 部落格文章
- 最新文章
- 文章清單
- Query Loop（查詢迴圈）
現在要的是 WordPress 專門提供的 Related Posts／相關文章區塊。
🛑 找到後先不要按其他設定
如果看到「Related Posts／相關文章」，先不要按儲存，也不要繼續修改設定。
👍 現在已經找到正確的「相關文章」區塊了。
現在做下一步
👉 直接點「相關文章」。
點下去之後，WordPress 應該會把「相關文章」區塊插入到：
內容（Content）
↓
相關文章
↓
後面的範本內容
這正是想要的位置。
點進去之後先不要急著調整
插入後，可能會看到「相關文章」的預覽畫面，右側也可能出現設定選項。
先不要按「儲存」。
只要觀察一下畫面：
「相關文章已經出現」
接下來會設定成：
標題：📖 延伸閱讀
顯示：3篇文章
縮圖：開啟
而且會確認它確實位於文章內容的下方，不會影響原本的文章版面。
現在只需要：
點「相關文章」→ 等它插入
→ 告訴結果。
貳、完成「📖 延伸閱讀」標題設定：新增延伸閱讀區塊並顯示文章卡片
點「相關文章」，左方出現新增標題，右方出現+
這個畫面代表「相關文章」區塊已經成功插入了。👍
現在看到：
- 左方：「新增標題」
- 右方：「＋」
這正是正常的下一個步驟。
現在先做左邊這一項
請點：
「新增標題」
輸入：
📖 延伸閱讀
這樣讀者將來看到的標題就會是：
📖 延伸閱讀
而不是英文的「Related Posts」。
接著先不要按右邊的「＋」
輸入完成後，先不要按儲存，也不要再做其他設定。
若「延伸閱讀已經輸入完成」
接下來帶處理右邊的「＋」，以及確認相關文章要顯示
3篇。
現在已經非常接近完成了。😊
👍 現在「📖 延伸閱讀」標題已經。
接下來處理右邊的 「＋」。
第一步：請點右邊的「＋」
這個「＋」是用來在「相關文章」區塊中加入內容的。
點下去後，應該會出現區塊選單。
第二步：請先不要選任何東西
只要看看出現的選單中有哪些項目。
特別留意是否有：
相關文章
或其他類似：
文章
部落格文章
Query Loop
之類的選項。
不要按「儲存」，也不要刪除目前的「延伸閱讀」。
按「＋」後，出現哪些選項？
就可以繼續下一步。這樣最安全。
WordPress.com
官方說明也是由 Related Posts 區塊自動尋找相關文章。
現在請這樣做
然後看看「📖 延伸閱讀」下面是否已經出現：
相關文章的預覽／文章卡片
如果已經出現文章卡片，就代表成功。
如果「延伸閱讀」下面是空白的
這也不代表失敗。
因為 WordPress.com 的相關文章功能必須先找到足夠的相關文章；官方目前說明，系統至少要找到 3篇適合的相關文章，才會顯示推薦內容。
⚠️ 現在最重要
不要：
- 刪除「延伸閱讀」
- 再加入「部落格文章」
- 再加入「最新文章」
- 按「儲存」
目前已經完成：
內容（Content）
↓
相關文章
↓
標題：📖 延伸閱讀
這部分已經走對了。
參、「相關文章」功能設定成功：WordPress.com 自動產生3個推薦文章位置
延伸閱讀下面有看到
左中右各3行
|
無法在網站編輯器中預覽。貼文標題將在網站正常顯示。 2025年8月3日 |
無法在網站編輯器中預覽。貼文標題將在網站正常顯示。 2025年8月3日 |
無法在網站編輯器中預覽。貼文標題將在網站正常顯示。 2025年8月3日 |
🎉 這表示「相關文章」功能已經成功加入，而且 WordPress 已經自動產生了3 個推薦文章的位置。
目前看到：
- 左邊：推薦文章 1 篇
- 中間：推薦文章 1 篇
- 右邊：推薦文章 1 篇
- 每篇都有「文章標題」及「2025年8月3日」
這其實是非常好的現象。
為什麼現在顯示「無法在網站編輯器中預覽」？
這不是錯誤。
因為現在是在網站編輯器的「單篇文章」範本裡，而
Related Posts 是根據「實際正在閱讀的文章」來自動尋找相關文章。
所以編輯器無法知道將來訪客正在看哪一篇文章，因此顯示：
無法在網站編輯器中預覽。
而且它已經明確告訴：
文章標題將在網站正常顯示。
因此，這正是希望看到的結果。
現在先不要再修改
目前已經完成：
內容（Content）
↓
📖 延伸閱讀
↓
自動相關文章
這個結構完全正確。
接下來只需要做一件事：
👉 按右上角「儲存」
但是在按之前，建議先確認一件事情：
如果畫面上的「相關文章」確實位於內容區塊的後面，也就是文章結束後才出現，那麼就可以放心儲存。
儲存後會發生什麼？
它不是只修改現在這一篇文章。
因為修改的是：
「單篇文章」範本
所以這個「📖 延伸閱讀」會套用到使用 Infield 這個單篇文章範本的文章。
也就是說，以後讀者閱讀其他文章時，WordPress 就會自動根據文章內容、分類與標籤尋找相關文章。官方也說明，Related
Posts 是依據這些資訊自動產生推薦。
✅ 所以現在可以按「儲存」
如果確認「📖 延伸閱讀」確實位於內容區塊後面：
請按右上角「儲存」。
儲存後，先不要再修改任何東西。
接著下一步要做的是：
到網站實際的一篇文章
把頁面拉到最下面，看看是否真的出現：
📖 延伸閱讀
以及真正的文章標題、日期和縮圖。
這才是最後的驗證。
今天已經成功把 WordPress 自動「延伸閱讀」功能加進網站範本了。 👍
留言
張貼留言