Fixed TOC (Tocer) 設定教學：製作超美的 WordPress 文章目錄

最後更新時間：2025-11-20，由 Dean 更新

常常有一些客戶跟我反應，他們覺得自己的文章目錄樣式很醜，想詢問我有沒有比較好看的目錄外掛？

於是我花了一點時間測試，發現 Fixed TOC (現稱 Tocer) 是目前看起來做有質感的一款 WordPress 文章目錄。不過，這款設定相對複雜些，所以整理了一下，寫這篇教學文與你分享。

WordPress 最美目錄外掛：Fixed TOC (Tocer)

Fixed TOC 是一款 WordPress 付費目錄外掛，因為能調整的外觀樣式很多元且細緻，動畫特效也很多元，很多設計師會拿它來做網頁設計，擁有「最美目錄」之稱。

之所以叫 “Fixed TOC”，意思就是除了能將目錄放入內文外，也能「釘選」在側邊欄，讓使用者瀏覽文章時，隨時都能夠查看目錄，大幅提升使用者體驗。(雖然大多目錄搭配 Q2W3 也能做到，但就需多安裝一個外掛)

這邊要特別說明，當你從平台上購買後，下載的壓縮檔中，會發現包含了 Fixed TOC 與 Tocer 的檔案，簡單來說：

• Fixed TOC：舊版，適用於非區塊編輯器，目前不再更新。
• Tocer：新版，適用於區塊編輯器，功能持續更新中。

你可以將它視為同一款外掛，基本上只差在能不能在區塊編輯器上編輯而已。大多人在溝通時，也是習慣以 Fixed TOC 來稱呼它。而本篇，我會以舊版的「Fixed TOC」來做示範，想體驗新版可直接到 DEMO 站玩。

Fixed TOC (Tocer) 基本設定

安裝完 Tocer (Fixed TOC) 後 (安裝方式請見本文常見問題)，首先要先做全站目錄的基本設定。

WordPress 後台左側選單點「設定」>「Fixed TOC」，你會看到 General 設定，有幾個是必設定的：

• Enable Fixed TOC：一定要開啟，目錄才會出現。
• Post types：詢問你要出現目錄的內容類型，至少勾選「文章」，在文章才會自動插入目錄。
• Headings：勾選你想在目錄上顯示的標題層級有哪些。這邊勾的是預設的，單篇文章都可再獨立設定。
• Display TOC when：要你設定幾個標題以上才顯示目錄，我建議設定 2，2 個以下的標題就不顯示。
• Exclude Headings：如果你有些標題上的文字不想要出現在目錄，可在這邊輸入排除。(每一行一個字詞)
• Convert Heading Into ID：這個功能簡單來說，就是在你點擊目錄後，跳到該段落時，你會發現你的網址後面多了一串由 # 字號開頭的文字，這就是段落標題的錨文字。而這個功能，會自動幫你在原先的標題前面，加上你自訂的字詞，當作是錨文字。但因為這功能目前不支援中文字，可以不用理它。
• Display In Widget：在「WordPress 小工具」顯示 Fixed TOC 設定。想讓目錄出現在側邊欄，記得勾選。
• Smooth crolling：這個功能在點選目錄跳轉的時候會稍微「滑動」，讓你更有跳轉的互動感，建議勾選。
• Scroll Offset：使用者點目錄跳轉段落時，預設會讓該段落「標題貼合頁面頂部」，但通常網站都會設定 Header (就是最上面放置選單的那塊)，標題就會被擋住。這個設定就是讓你能把這個距離拉開，建議數值至少超過 Header 高度。

Fixed TOC (Tocer) 外觀設定

Tocer (Fixed TOC) 外觀設定的地方需要到「外觀」>「自訂」中，找到「Fixed TOC Plugin」。(每個佈景主題位置可能不同，下圖為 Blocksy 的介面)

點入後，你會發現很多設定：

• Location：目錄在文章中位置的設定。
• Trigger Button：目錄左上角會有小圖示，在這能設定樣式。
• Contents：目錄主要設定。
• Contents Header：目錄最上方的標題欄位設定，包含文字、功能等。
• Contents List：目錄內的清單形式設定。
• Effects：在滾動文章時，出現在標題上的提示樣式，都在這設定。
• Color Scheme：目錄顏色設定。
• Customize CSS：如果想用 CSS 自訂目錄外觀，可寫在這。

其中，「Contents」是主要的設定，可以調整目錄本身的寬高、出現的位置、嵌入文章時的樣貌、預設開啟或關閉等，在設定時要特別進入調整一下。

單篇文章設定 Fixed TOC (Tocer)

除了全站設定，針對每一篇文章，Tocer (Fixed TOC) 也都可以做獨立的設定。

最主流的形式有兩個：讓目錄嵌入在內文中、讓目錄出現在側邊欄，以下詳細分享。

模式一：讓目錄嵌入內文中

如果你想要將目錄嵌入內文，你需要先進入到文章編輯中，將頁面往下拉，會看到有「Fixed TOC」的設定區。

最上面有一個大大的「Disable/Enable」按鈕，你需要先切到藍色狀態開啟。

這時候，如果還是沒看到目錄出現在內文，代表在全站設定時，你設定讓目錄出現在側邊欄。那麼，你會需要到下方「General」設定中，找到「Display In Widget」選項，並將勾勾取消。

比較特別的是，這邊的設定都會自動帶入全站預設，如果你要修改，必須點選最前面的鉛筆圖示，才能夠進行編輯。(我第一次就是看它顯示灰色，以為它沒辦法更改全站預設)

設定完成後，你就能在你文章內文中，看到你嵌入的目錄了。一樣，顏色樣式那些，都能再調整。

至於，如果你想要讓目錄顯示在文章中特定的位置，也可以在編輯區中找到

模式二：讓目錄出現在側邊欄

如果你想讓目錄出現在側邊欄，你需要到「外觀」>「小工具」。(全站設定的「Display In Widget」記得要先勾選)

你會在小工具中找到「Fixed TOC」，將它拖曳到你的側邊欄區域。(每個佈景的側邊欄區域不同，Blocksy 叫「主要資訊欄」)

拖曳進去後，右方三角形打開，裡面就有非常多的設定能調整，像是釘選功能、外觀設定、標題設定、字型設定、顏色設定等。非常建議你開一個有側邊欄的文章，對照著調整。

如果你不知道怎麼調整，可以照著上圖下方的設定 (除了顏色你要設定自己的品牌色)，你就會得到下圖的樣式。個人是認為比起其他款目錄，這款真的相對有質感許多。

設定中，也非常建議將「Fixed The Widget」勾選起來，這樣你在閱讀文章時，就會發現側邊欄的目錄會一直釘選著，想隨時切換都可以，十分友善使用者體驗。

Fixed TOC (Tocer) 常見問題