上個週末，我們針對墨菲莫非網站做了幾個較大的調整，其中一個就是變更文章目錄的版式。
我們原先使用的目錄外掛程式是為”Easy Table of Contents”，不過在瀏覽其他部落格排版之後，決定轉為使用 “Rich Table of Contents”。
所以今天要來跟大家分享，幾個 Rich Table of Contents 好用的地方，以及手把手教大家如何安裝&使用。
為什麼選擇 Rich Table of Contents
介面簡潔、好看
現在大家所看到本篇文章的目錄欄，正是使用 Rich Table of Contents 外掛程式所做的設定。
我們之所以從原先的 Easy of Table Contents 轉為 Rich Table of Contents，最大的因素無非是後者的外觀比較好看！（不過審美還是見仁見智啦）
Rich Table of Content s走的是日式小清新風格，介面簡潔不浮誇。而目錄欄對於部落格文章而言是一個相當重要的要素，畢竟凡是點開文章的讀者們，一定都會先瀏覽目錄欄才開始閱讀文章的內容。
因此，我們希望在目錄欄就先吸引讀者的目光。
客製化設計
除了介面好看之外，在後面的手把手教學中，你也會發現 Rich Table of Contents 這個外掛程式，盡可能地讓你能夠進行客製化的設計。
包含目錄欄的外框、標題的樣式、字體顏色等等，你都能夠有選擇的空間，讓你能搭配個人部落格的風格進行調整。
輕鬆安裝、免費使用
最後，來到大家最關心的部份—這個外掛程式到底需不需要額外花錢? 目前 Rich Table of Contents 是提供大家免費使用，而且可以直接從 WordPress 中下載安裝。
下面就讓我們帶大家手把手教學，看看怎麼安裝吧！
Rich Table of Contents 哪裡下載
首先，需要先登入 WordPress 後台，接下來按照以下步驟執行：
- 點選左側「外掛」>「安裝外掛」
- 到關鍵字處輸入：Rich of Table Contents
- 找到此外掛程式後點選右上角「立即安裝」（由於 M 作者已經安裝過，所以右上角會顯示已啟用）
- 安裝完成後按下「啟用」，右上角就會顯示為已啟用
Rich Table of Contents 設定教學
安裝好之後點選左側 “RTOC settings”，便可以開始進行設定囉！
基本設定 (Basic Settings)
首先，讓我們先來看看基礎設定：
- Table of contents title：目錄欄的名稱，這裡我們命名為「文章總覽」。
- The page to display the table of content：是否要在所有文章 (post)/頁面 (page)顯示。
- Heading to be display：目錄顯示到標題的層級。這裡是對應部落格內文中的標題層級。
- Display conditions：少於多少標題不要顯示。
- Fonts：字體。
另外想特別提醒大家，在 Heading to be display 中，它只能從 H2 標題開始顯示。換句話說，若是你的部落格內文中有 H1 標題，就不會在目錄欄裡出現。（我們為此改了快一個下午的標題 QQ）
風格設定(Design settings)
接下來的風格設定，主要是針對標題排版、H2＆H3 標題樣式進行設定。
同時右側也有提供預覽，讓你能檢視選擇的樣式在前台呈現的樣子。
Frame design 主要可以調整外框的設計，你可以選擇自己喜歡的類型。（目前大家看到被選擇的，是墨菲莫非網站所使用的樣式）。
後面的 Display animation & Smooth scroll out 基本上我們沒有更動，是按照原先的設定。
色彩設定 (Preset Color)
在這個設定環節，你可以自由選擇想呈現的目錄色彩，同時也能從右側預覽中看到選擇的樣式。這邊我們選擇的是 Dark 的設定。
Color Settings（For Advanced User）
如果你認為上面提供的顏色十分受限，那麼可以按照自己的喜好在 Color settings 中進行顏色設定。
M 作者的目錄顏色，就是從這裡進行客製化設定的。
進階設定 (Advanced Settings)
完成以上步驟之後，基本上設定已經完成囉！接著會來到進階設定的部份。
- Back to Contents button: 「返回目錄」按鈕。這裡因為我們的部落格內已經有相似的按鈕，所以我們將它關掉。
- Display Back to Table of Contents button on the PC: 回到目錄按鈕在 PC 端出現。
- Back to Table of Contents button text: 「返回目錄」按鈕的名稱，這邊默認是 TOC。
最後完成設定，別忘了點選右下角的「儲存設定」，這樣才算全部完成喔！
Shortcode 設定
一旦完成以上設定後，目錄在前台文章的顯示位置為第一個 H2 標題上方。若是你想調整目錄欄的顯示位置，就需要使用 Shortcode 的功能。
首先你需要點選左側的 RTOC settings，接著點選 Shortcode 的地方。
複製 Table of contents shortcode 下方黑框中的程式碼，再到文章內文中插入「自訂HTML」並貼上。然後修改對應的 code 就可以囉！（關於修改 code 參數，是如何影響前台顯示介面，可以參考Shortcode explanation）
💡 小提醒：如果你只複製黑框中的程式碼，沒有做任何修改，那就會跟初始的設定一樣，也會等同於你在 Setting 部分所做的設定
那麼，以上是本篇文章對於 WordPress 部落格目錄外掛程式的分享（真的是熱騰騰的文章），如果你有其他好用的外掛程式也歡迎分享給我們！
