這幾年幫主機客戶架站，金城老師最常被問的問題之一就是：WordPress 目錄外掛要用哪個？答案長期都是 Easy Table of Contents 或 Rich Table of Contents，但兩套用久了都有一些小問題讓人不太滿意。後來索性自己寫了一個，取名叫 Mr.TOC 文章目錄小幫手。這篇教學會一次講完為什麼做、怎麼設定、怎麼搭配 SEO 與 AI 搜尋，以及目前如何提供給金城事務所的全代管客戶使用。
為什麼要另外做一個文章目錄外掛？
寫文章的人對目錄外掛大概分兩種陣營。一種重視美觀，希望目錄在文章裡是一個賞心悅目的區塊、排版乾淨、配色有品味。另一種重視功能，只要能產出目錄、帶錨點、支援 SEO 就好，外觀好看與否是其次。
Easy Table of Contents 是功能派的代表，穩定又免費，把結構化資料、巢狀階層、關鍵字排除都做好，唯一的問題就是預設樣式實在太樸素，沒有設計底子的人調起來很吃力。
Rich Table of Contents 則是視覺派的代表，由日本 Croover.inc 團隊開發，預設就有六個日系配色可以挑，字體大小、邊框線條都已經細調過，但它的結構化資料寫得不完整、偶爾會遇到 bug 與當機、作者更新速度也不快。
以前幫客戶架站，金城老師通常得寫額外的 CSS 把 Easy Table of Contents 修得好看，或是幫 Rich Table of Contents 補上 JSON-LD 腳本，花的時間不算少。後來想一想，民之所欲、藏在我心，乾脆把兩個陣營的訴求都放進一個外掛裡，Mr.TOC 文章目錄小幫手因此誕生。
基本設定：裝置與顯示策略
Mr.TOC 第一個要決定的不是顏色也不是字體，而是「這個目錄要在什麼裝置上出現、用什麼形式出現」。這一區是整個外掛的靈魂，設定邏輯一次拆成四點。
第一、顯示位置可以選擇文內目錄、浮動側邊欄，或兩者同時存在。文內目錄走傳統插入第一個 H2 之前或文章開頭的形式；浮動側邊欄則是貼齊瀏覽器邊緣的 position:fixed 面板，會跟著捲動一起動。
第二、手機強制走文內目錄。手機螢幕太窄，浮動側邊欄會擋到閱讀，所以不管電腦版選什麼，手機一律回到文內目錄。
第三、電腦版三選一：只開文內、只開側邊欄，或兩者同時開。兩者同時開適合高資訊量的教學文章，讀者可以一邊捲文章、一邊用側邊欄跳到任意段落。
第四、小螢幕（平板直向）自動優化。當瀏覽器寬度介於手機與桌面之間，側邊欄會自動收窄寬度、縮小字體，避免擠壓到正文。
這四點決定之後，再往下走外觀與配色。
外觀設定：列表樣式與框線設計
外觀設定主要控制三件事：目錄標題的對齊方式、H2 與 H3 的列表樣式、以及整體框線設計。
標題對齊可以選靠左或置中，對齊方式會影響整個目錄的視覺重心。H2 與 H3 可以各自選圓點、單位數、雙位數或無符號列表，甚至可以做成「01 ｜段落標題」這種章節式的排版。
框線設計提供簡約邊框、透明粗框、上下邊框、頂部粗線、線條交錯、無框線六種，對應不同風格的部落格主題。如果是走極簡路線的部落格，選透明粗框或無框線搭配自訂配色即可；如果是走日系美感，簡約邊框配日系配色會是一個穩妥的組合。
目錄寬度預設 100%，但可以依主題欄寬調整。大部分部落格主題正文區介於 640px 到 720px 之間，目錄拉滿剛好。
配色設定：八個日系配色與自訂色
配色是 Mr.TOC 跟其他免費外掛差最多的地方。內建八個日系配色組合：紅、橙、黃、綠、藍、紫，每一組都是參考 Croover.inc 同款的色票邏輯，主色、輔色、文字色已經調整到互相不打架，不需要使用者自己配色。
八色之外，也可以自訂每一個角色的顏色：背景色、邊框色、標題色、連結文字色、H2 指示色、H3 與 H4 指示色。這些欄位都可以直接填 HEX 色碼，預覽區會即時反映調整結果，不用反覆存檔再看前台。
比較常用的搭法有兩種。第一種是直接選日系配色，完全不再動。第二種是先選日系配色當底，再只調整一個關鍵色（通常是指示色）讓它跟網站品牌色一致，這種做法的產出通常比自己硬配好看很多。
浮動側邊欄：部落格最常缺的那一塊
浮動側邊欄是 Mr.TOC 跟 Easy Table of Contents、Rich Table of Contents 最大的差異點。這兩套外掛原生都沒有浮動側邊欄功能，要自己另外裝外掛或寫 CSS 才做得到。
Mr.TOC 的浮動側邊欄獨立一個卡片區塊控制，包含啟用開關、側邊欄位置（左或右）、貼齊方式（內容邊緣或瀏覽器邊緣）、長標題處理（超出顯示省略號或換行）。配色與主目錄完全獨立，可以選同色也可以刻意選不同色拉出區隔感。
有一個細節值得特別說一下：側邊欄有目前閱讀位置圓點。當讀者捲動到哪一段，側邊欄對應的項目會亮起圓點並滾動居中，這在長文章裡讀者特別有感，也會拉高停留時間。
前台實際呈現
前台實際跑起來是這樣：電腦版在主內容區左側看到浮動側邊欄，讀者往下捲，側邊欄會跟著滾並標示目前讀到哪一段；主內容區裡面也可以同時出現文內目錄區塊，兩者並存不衝突。手機版則自動隱藏側邊欄，只保留文內目錄，確保閱讀區不被擠壓。
結構化資料：SEO 加上 AI 搜尋的雙重加分
這是整個外掛最花時間處理、也最能帶實質流量的一塊。Mr.TOC 在文章目錄輸出的同時，會自動注入 JSON-LD 的 ItemList 結構化資料到頁面，並且每一項錨點都帶上 url 與 position。
Google 端吃這份資料可以換到的東西：SERP 上的 Sitelinks 錨點（讓搜尋結果多出幾條副連結）、Featured Snippet 的目錄段落摘要，以及 Discover 卡片上偶爾出現的錨點跳段。這些都是免費但不主動送就吃不到的搜尋紅利。
AI 搜尋端更不能忽略。ChatGPT 的 Web Search、Perplexity、Google AI Overview，在引用網頁時都會優先解析 JSON-LD 抓出主題清單。有完整結構化資料的文章，在 AI 回答裡被引用的機率明顯高於純文字文章，AI 時代的 SEO 寫作觀念這篇裡金城老師有完整解釋過為什麼結構化資料對 GEO（Generative Engine Optimization）這麼重要。
Mr.TOC 跟 Easy Table、Rich Table 怎麼選？
還是那句話：沒有最好的工具，只有最適合自己的工具。如果是部落格剛起步、不想花錢也不想花時間設計，Easy Table of Contents 是最保險的選擇，功能齊全而且更新穩定。如果是已經有品牌風格、希望目錄跟文章視覺一致的日系部落格，Rich Table of Contents 直接選一個配色就可以用了，前提是你能接受結構化資料不完整。
Mr.TOC 的定位是兩者兼顧：功能派要的 SEO 結構化資料、巢狀階層、自動抓取都有；視覺派要的六個日系配色、浮動側邊欄、完整自訂色也都有。代價是這個外掛沒有上架 WordPress.org 公開倉庫，目前只提供給金城事務所的全代管客戶使用，由金城老師負責安裝、維護、更新、除錯。
如何取得 Mr.TOC 文章目錄小幫手
Mr.TOC 文章目錄小幫手不走公開下載的模式。一方面這個外掛還在持續迭代，設定邏輯偶爾會調整；另一方面部落格外掛的相容性測試量級頗大，公開散佈之後如果客戶環境出問題，不容易即時處理。
目前的提供方式是跟著金城事務所的全代管主機服務一起出，客戶開站時會由金城老師手動安裝、設定到跟主題一致的配色，後續更新也由金城事務所同步推送，使用者完全不用管外掛更新或相容性。有興趣的朋友可以直接聯絡金城老師談主機搬家或新站架設。事務所同樣思路做的還有 Mr.Adsense 廣告管理小幫手，全代管客戶都會一併裝好。
金城老師觀點
寫部落格這些年，金城老師觀察到一件事：大部分的外掛設計者只想得到「功能齊全」或「版面好看」其中一個方向，很少有人同時處理兩件事，更少人會把結構化資料當成預設必須項目。Mr.TOC 做這件事的成本並不低，但這是部落客真正缺的那一塊。懶人包、教學文這種資訊密集的文章，目錄做好，讀者跳段跟 SEO 兩件事就一起搞定了。
延伸閱讀
參考資料
常見問題
Mr.TOC 跟 Easy Table of Contents、Rich Table of Contents 最大的差異是什麼？
Mr.TOC 同時具備 Easy Table of Contents 的結構化資料完整度，以及 Rich Table of Contents 的日系美感配色，再加上獨立的浮動側邊欄控制，三件事一次到位。
Mr.TOC 結構化資料做了哪些？
文章載入時會自動注入 JSON-LD 的 ItemList 資料到 head 區，包含每一個標題的錨點、位置、名稱，讓 Google SERP 與 AI 搜尋引擎都能正確解析文章結構。
為什麼 AI 搜尋也要管結構化資料？
ChatGPT、Perplexity、Google AI Overview 引用網頁時會優先解析 JSON-LD 抓主題清單，有結構化資料的文章在 AI 回答中被引用的機率明顯較高。
Mr.TOC 可以自己下載安裝嗎？
目前不公開下載。只提供給金城事務所全代管主機客戶使用，由我們統一安裝、設定、維護與更新。
手機版也會看到浮動側邊欄嗎？
不會。為了避免擋到閱讀，手機版會自動隱藏浮動側邊欄，只保留文內目錄。