目錄

為長篇內容建立可點擊的標題目錄,並控制顯示位置、外觀與個別文章的使用方式。

概覽

目錄 會從你的內容中建立可點擊的標題清單。它特別適合長篇文章、教學、指南與文件頁面,讓讀者能快速跳到需要的段落。

後台路徑:Airygen SEO -> 設定 -> 目錄

此模組支援自動插入、手動放置、單篇文章控制、樣式預設與預覽區,可讓你在發佈前先檢查整體效果。

設定

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

設定 分頁

這個分頁用來控制輸出方式、套用範圍、結構、互動行為與錨點規則。

手動輸出

  • 啟用手動目錄輸出 可讓你透過範本函式、簡碼或區塊放置目錄。
  • 當你希望把目錄放入主題模板時,範本函式 會很實用。
  • 當你希望把目錄放入內容區或簡碼區塊時,簡碼 會很實用。
  • 當你希望在區塊編輯器中以可視方式放置目錄時,區塊 會很實用。

範本函式:

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

簡碼:

[airygen_toc]

區塊:

<!-- wp:airygen/toc /-->

自動插入

  • 啟用自動目錄插入 會把目錄自動插入符合條件的文章。
  • 插入位置 支援 內容前 與 第一段之後。

區塊標題

  • 標題 可決定目錄是否顯示可見標題。
  • 標題文字欄位可更改清單上方顯示的文案。
  • 標題層級欄位可更改該標題使用的 HTML 標題層級。

範圍

  • 要包含的文章類型 用來決定哪些內容類型符合目錄輸出資格。

結構

  • 最少標題數 會在文章標題數量不足時隱藏目錄。
  • 標題層級 可讓你決定目錄要包含 H2、H3 與 H4。

行為

  • 平滑捲動 會在讀者點擊目錄連結時加入平滑捲動效果。
  • 加入編號 會把清單改成編號式大綱。
  • 載入時收合 會讓目錄在初始載入時維持收合狀態。

錨點

  • 錨點前綴 會為產生的標題 ID 加上前綴,避免與頁面其他錨點衝突。
  • 排除標題 可讓你用逗號分隔輸入要跳過的標題文字。

版面配置 分頁

這個分頁用來調整目錄的視覺樣式。

主題

  • 雪白石板 會套用中性的白色與石板灰風格。
  • 蜂蜜紙 會帶來溫暖的紙張風格。
  • 天空微風 會帶來淺藍色外觀。
  • 薄荷寧靜 會帶來柔和的綠色外觀。
  • 玫瑰腮紅 會帶來偏柔和的粉色外觀。
  • 薰衣草霧 會帶來淡紫色外觀。

樣式

  • 標頭 控制項可調整標題容器的邊框寬度、邊框樣式、圓角、邊框顏色、內距、外距、背景色、標題顏色、標題字級與標題字體樣式。
  • 主體 控制項可調整目錄容器的邊框寬度、邊框樣式、圓角、邊框顏色、內距、外距與背景色。
  • 連結 控制項可調整目錄連結顏色、字級,以及粗體、斜體或底線樣式。
  • 清單 控制項可調整目錄清單使用的內部縮排。

預覽 分頁

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

  • 預覽刻意保持簡潔。
  • 啟用中的主題仍可能影響最終前台輸出。
  • 畫面也會顯示產生的 HTML 與 CSS 範例。

編輯器面板

在區塊編輯器中,目錄 面板可讓你只為單篇文章控制這個功能,而不必改動全站預設值。

  • 目錄顯示模式 支援 自動、手動 與 停用。
  • 當模式為 手動 時,面板會顯示 插入目錄 按鈕,讓你插入 區塊 或 簡碼。

如何使用

  1. 開啟 Airygen SEO -> 設定 -> 目錄。
  2. 在 設定 分頁中,決定要使用 啟用手動目錄輸出、啟用自動目錄插入,或只保留其中一種方式。
  3. 如果你要手動放置目錄,請開啟手動輸出,並複製符合工作流程的 範本函式、簡碼 或 區塊 片段。
  4. 如果你要自動放置目錄,請開啟自動插入,並選擇 內容前 或 第一段之後 作為 插入位置。
  5. 如果你希望目錄有可見標題,請開啟標題顯示,並設定標題文字與標題層級。
  6. 在 範圍 中,選擇哪些文章類型可以顯示目錄。
  7. 在 結構 中,設定 最少標題數,並選擇要納入的標題層級。
  8. 在 行為 中,決定是否啟用平滑捲動、編號與預設收合模式。
  9. 在 錨點 中,設定 錨點前綴,並列出要排除的標題。
  10. 開啟 版面配置,選擇一組預設主題,並細調標題區、內容容器、連結與清單間距。
  11. 如有需要,請開啟特定文章的編輯器,使用 目錄顯示模式 將該文章切換為 自動、手動 或 停用。
  12. 儲存設定、檢查 預覽 分頁,然後再開啟一篇有足夠標題的正式文章確認最終結果。

儲存後請確認以下項目:

  • 只有符合最少標題數的文章才會顯示目錄。
  • 點擊目錄連結後,讀者會被帶到正確段落。
  • 單篇文章的 目錄顯示模式 與你為該篇文章選擇的方法一致。
  • 套用主題 CSS 後,正式頁面外觀仍然正確。

SEO 效益

好的目錄能讓長篇內容更容易掃讀,也更容易導覽。這能幫助讀者更快到達需要的段落,並讓長文頁面呈現更清楚的結構。

使用情境

長篇教學文章

調整前:安裝指南有很多段落,但讀者必須一路往下捲動,才能找到需要的步驟。

調整後:目錄 把標題轉成可點擊大綱,讓讀者可以直接跳到安裝、範例或疑難排解段落。

文件與知識庫頁面

調整前:支援文件已經有清楚標題,但第一次閱讀的使用者仍會覺得頁面資訊量很重。

調整後:目錄 會立即把頁面結構顯示出來,讓讀者在深入閱讀前就能先掌握頁面全貌。

常見問題

為什麼有些文章沒有顯示目錄?

請檢查 最少標題數、所選的 標題層級、允許的 文章類型,以及單篇文章的 目錄顯示模式。

我該用自動插入還是手動放置?

如果你希望大量文章都自動加入目錄,請用自動插入。若你需要精準控制顯示位置,請使用手動放置。

為什麼預覽與正式頁面不同?

預覽是簡化版參考畫面。你的主題與真實文章內容仍會影響前台最終結果,因此一定要檢查正式頁面。