相關文章

在文章中顯示具樣式的相關內容清單，並控制輸出方式、卡片版面與視覺設計。

概覽

相關文章 會根據已建立的內容索引與分類法關係顯示相關文章，目的是在讀者看完目前頁面後，繼續引導他們探索網站其他內容。

後台路徑：Airygen SEO -> 設定 -> 相關文章

這個模組依賴 連結建議，因為它會使用該模組的內容索引，並且文章類型範圍也會與那邊同步。

輸出方式

相關文章 同時支援手動放置與自動插入。

手動輸出

當你希望自行決定顯示位置時，請使用手動輸出。

  • 當你希望把相關文章放進主題模板時，範本函式 最適合。
  • 當你希望把相關文章放進內容區時，簡碼 最適合。
  • 當你希望在編輯器中可視化插入時，區塊 會提供簡碼區塊包裝方式。

範本函式：

<?php if ( function_exists( 'airygen_the_related_posts' ) ) { airygen_the_related_posts(); } ?>

簡碼：

[airygen_related_posts]

區塊：

<!-- wp:shortcode -->
[airygen_related_posts]
<!-- /wp:shortcode -->

自動插入

當你希望符合條件的內容自動出現相關文章時，請使用自動插入。

  • 自動插入切換會把相關文章自動放進符合條件的內容。
  • 插入位置 支援 內容前 與 內容後。

如果你同時使用手動輸出與自動插入，請在正式頁面確認相關文章沒有重複出現。

設定

此頁面分為 設定、版面配置 與 預覽。

設定 分頁

這個分頁用來決定相關文章如何顯示，以及允許在哪些內容中輸出。

手動輸出

  • 手動輸出切換可啟用簡碼、區塊與範本函式的相關文章輸出。
  • 範本函式 最適合放進主題模板。
  • 簡碼 最適合放進內容區。
  • 區塊 提供可插入編輯器的簡碼區塊包裝方式。

自動插入

  • 自動插入切換會自動把相關文章放進符合條件的內容。
  • 插入位置 支援 內容前 與 內容後。

區塊標題

  • 區塊標題控制可讓你開啟標題、設定標題文字，以及選擇標題層級。

範圍

  • 要包含的文章類型 會從 連結建議 同步。
  • 這個範圍在此頁僅供參考，無法直接在 相關文章 畫面中編輯。

版面配置 分頁

這個分頁用來控制卡片結構與樣式。

網格與卡片排列

  • 2 x 2、3 x 2、4 x 2、4 x 1 與 1 x 4 可設定網格密度。
  • 文章卡片範本 可讓你選擇 範本 1 或 範本 2。
  • 可見區塊可在 標頭、主體、左側邊欄 與 頁尾 區域之間拖曳。
  • 頁尾欄數 支援 1 欄、2 欄 與 3 欄。
  • 隱藏區塊 用來存放目前不顯示的區塊。
  • 可用區塊包含 精選圖片、標題、摘要、作者 與 日期。

主題與樣式

  • 主題預設包含 雪白石板、蜂蜜紙、天空微風、薄荷寧靜、玫瑰腮紅 與 薰衣草霧。
  • 網格樣式控制可調整邊框寬度、邊框樣式、圓角、邊框顏色、背景色、內距與間距。
  • 文章容器樣式控制可調整邊框寬度、邊框樣式、圓角、邊框顏色、背景色、內距與間距。
  • 精選圖片 設定包含 圖片尺寸 與 圖片圓角。
  • 標題 設定包含字級、字色，以及粗體或斜體樣式。
  • 摘要 設定包含字級、字色、最大字數、淡出遮罩、遮罩顏色 與 遮罩高度。
  • 作者與日期 設定包含字級、字色，以及粗體或斜體樣式。
  • 標頭 標題控制可讓你把區塊標題樣式與卡片本身分開設定。

預覽 分頁

這個分頁可讓你在 筆記型電腦、平板電腦 與 手機 預覽中檢查模組結果。

  • 預覽會使用範例卡片與你目前的版面設定。
  • 畫面也會顯示產生的 HTML 與 CSS 範例供參考。

預覽與正式輸出

預覽 會顯示範例卡片與你目前的配置，適合先檢查版面與樣式方向。

  • 預覽可讓你快速比較不同裝置上的卡片密度與文字可讀性。
  • 預覽反映的是目前版面、卡片模板與樣式設定。
  • 預覽中的卡片不是你的真實文章，也不代表實際前台一定會找到完全相同的相關內容。

正式網站仍可能與預覽不同。

  • 真實輸出取決於目前文章是否有足夠的相關內容可供顯示。
  • 最終外觀仍會受到啟用中的主題、頁面 CSS 與周邊版面影響。
  • 如果同時啟用手動輸出與自動插入，正式頁面可能會重複顯示相關文章。

儲存後請實際檢查正式文章頁面，確認顯示位置、卡片數量、內容關聯性與樣式都符合預期。

如何使用

  1. 先確認 連結建議 已啟用，因為 相關文章 依賴這個模組。
  2. 開啟 Airygen SEO -> 設定 -> 相關文章。
  3. 在 設定 分頁中，決定要使用手動輸出、自動插入，或只保留其中一種方式。
  4. 如果你要手動放置，請複製符合工作流程的 範本函式、簡碼 或 區塊 片段。
  5. 如果你要自動放置，請開啟自動插入並選擇 插入位置。
  6. 如果你希望相關文章清單上方有可見標題，請開啟區塊標題，並設定文字與標題層級。
  7. 開啟 版面配置，選擇一組網格預設與 文章卡片範本。
  8. 在可見區塊間拖曳 精選圖片、標題、摘要、作者 與 日期，並把不需要的項目移到 隱藏區塊。
  9. 設定 頁尾欄數，再調整主題、容器樣式與各卡片元素文字樣式。
  10. 開啟 預覽，切換不同裝置，確認版面在小螢幕上仍然清楚易讀。
  11. 儲存模組後，檢查一篇真實文章，確認最終位置與樣式。

儲存後請確認以下項目：

  • 連結建議 已啟用，且目前文章類型在範圍內。
  • 正式頁面上的相關文章只出現一次。
  • 卡片版型符合你想要的內容密度與設計。
  • 真實相關內容在主題 CSS 載入後仍呈現正確。

SEO 效益

相關文章連結能幫助訪客持續探索網站，也能為搜尋引擎建立更多語意相關頁面之間的內部路徑。這會讓重要內容更容易被發現，也更容易留在同一主題旅程中。

使用情境

想加強內容回流的出版網站

調整前：讀者看完一篇文章後就離開，因為頁面中沒有清楚的下一步可點。

調整後：相關文章 會加入看起來像經過整理的相關文章組合，讓讀者更容易繼續探索網站內容。

擁有大量 evergreen 文章的大型部落格

調整前：舊文章除非編輯手動逐篇加連結，否則很容易被埋沒。

調整後：相關文章 會利用已建立的內容關係資料，在每篇文章開頭或結尾顯示有價值的下一步連結。

常見問題

為什麼我的頁面沒有顯示 相關文章？

請檢查 連結建議 是否已啟用、目前文章類型是否在範圍內，以及你是否已選擇手動輸出或自動插入其中之一。

我可以控制每張卡片元素顯示在哪裡嗎？

可以。版面配置 分頁可讓你把 精選圖片、標題、摘要、作者 與 日期 拖曳到不同區域。

為什麼預覽和正式頁面可能不同？

預覽使用的是範例卡片與目前版面設定，但真實頁面仍會受主題樣式，以及該文章實際找到的相關內容影響。