最後更新時間： 2024 年 03 月 21 日
有些經營網站的朋友會問我：「該如何像你一樣，把文章目錄固定在側邊欄呢？感覺這樣讀者體驗蠻不錯的！」，今天就來簡單教大家最簡單、免費在 WordPress 網站上將側邊欄目錄固定的方法！
只要使用目錄外掛 Easy Table of Contents、側邊欄小工具固定外掛 Q2W3 Fixed Widget 、小工具顯示設定外掛 Widget Options ，以及簡單的程式語法（寫在 Code Snippets 外掛中），就能將側邊欄目錄固定，並且還可以在首頁/一般頁面/手機版畫面中隱藏，還能有滑鼠滾動效果唷！
如果你有興趣，就繼續看下去吧！
文章目錄
為什麼要將文章目錄放在側邊欄固定？
其實可以固定在側邊欄的內容有很多種。
如果想要讓讀者更認識自己，將自我介紹固定在側邊欄，這樣大家讀你的文章時隨時右邊都可以看到站長的資訊。
而如果是想要獲取更多收益，則是可以把廣告或者聯盟行銷的圖片固定在側邊欄，不管讀者讀到哪一篇文章，都可以讓廣告宣傳隨時跟著讀者。
而我自己是想要提升使用者體驗，讓大家更容易閱讀我的長文。
因此我選擇將文章目錄釘選在側邊，大家看到長文時不只可以在文章一開頭去點擊目錄跳轉，也可以在閱讀過程中持續點擊右邊的目錄進行章節跳轉（就像電子書一樣！）
因此，首先要思考你想要達成的目的是什麼，再來研究你該如何運用側邊固定那少少的欄位，達成你的目標！
接下來就進入正文的側邊欄文章目錄固定教學囉～如果你跟我一樣很常也很愛寫長文，擔心讀者不好閱讀或者讀到一半恍神不知道自己在哪一章節的話，你可以繼續看下去！
側邊欄文章目錄固定教學
接下來我們將一步步帶著你一起操作，讓你可以成功將文章目錄固定釘選到側邊欄，並且也會順便帶著你解決一些我有遇到的問題。
如果你操作過程中有遇到問題，也歡迎直接在底下留言你的狀況，我會盡快回覆你唷！
安裝外掛
首先我們要將目錄固定在側邊欄的話，有幾個前提條件：
- WordPress 使用的佈景主題，要開啟文章側邊欄功能（廢話！）
- 安裝目錄外掛
- 安裝固定側邊欄小工具的外掛
而後續在安裝側邊欄後，其實還會發生兩個小問題（我自己有遇到的），一個是首頁也跑出了目錄，第二個就是目錄如果太長，會超出固定範圍。
因此我們還需要做以下兩件事：
- 安裝小工具顯示設定外掛，設定只有在文章頁面、電腦檢視才顯示側邊目錄小工具
- 安裝程式碼片段外掛，寫一小段程式碼讓目錄固定高度、可捲動瀏覽（程式碼我後面會給大家）
以下整理需要大家到 WordPress 安裝的外掛，大家可以直接看這個清單去你的 WordPress 後台安裝唷！：
- 免費文章目錄外掛：Easy Table of Contents
- 固定小工具外掛：Q2W3 Fixed Widget
- 小工具顯示設定外掛：Widget Options
- 程式碼片段外掛：Code Snippets
上述的外掛安裝完成，我們的前置作業就算完成了。接下來我們要先開啟文章目錄，之後才能將目錄釘選在右側。
開啟文章目錄功能
要將目錄釘選到右側，首先我們先得在文章中開啟文章目錄功能（如果沒開啟的話，是沒辦法顯示在右邊的唷！）
step 1
到 WordPress 外掛區開啟 Easy Table of Contents 的設定step 2
勾選圖中兩個紅框標示的文章選項，讓目錄自動在文章畫面中顯示step 3
下滑並設定標題標籤為「文章目錄」或其他你想要的的標題文字step 4
滑動到最下方，點擊儲存設定step 5
到文章中就可以看到目錄成功顯示囉！（預設是文章標題+子標題要>4個，才會顯示）設定目錄釘選
在成功開啟文章目錄功能後，接下來我們就要把文章目錄小工具設定到側邊欄，並且將其固定
step 1
點 外觀>小工具，到小工具的設定畫面
step 2
找到內容目錄小工具，拖曳到右邊主側邊欄區塊step 3
勾選固定小工具，並且點擊儲存
step 4
為了方便大家檢視，我將側邊欄小工具弄到剩一個step 5
如果你有很多個小工具，內容目錄要放在最後一個，不然你固定目錄後會蓋到其他的小工具哦！step 6
設定完成後，側邊目錄就會成功顯示啦！step 7
如果想新增目錄標題，一樣在小工具設定
step 8
成功顯示側邊目錄標題調整目錄高度、增加滑鼠滾動功能
其實到這一步釘選目錄就成功完成了，但是還有一些小問題要解決。
當我們的文章目錄標題不多時，側邊目錄的顯示會是正常的（如下圖）
但當目錄標題太多，可能會超出畫面高度，也不能滾動目錄，造成超出範圍的目錄就點擊不到了
因此接下來就要帶大家來用程式碼片段，設定目錄的最大高度以防超出範圍，並且在這個高度內我們會開啟捲動功能，讓讀者可以捲動目錄進行瀏覽
step 1
點擊後台程式碼片段，解決超過畫面高度的問題
step 2
複製一份CSS程式碼的範例step 3
找到複製的程式碼片段，點擊編輯step 4
在畫面紅框處輸入下方程式碼，並點擊儲存設定（其他設定可參考下圖） #ezw_tco-2{ overflow-y: scroll; max-height: 85vh; }step 5
刷新文章，就可以看到右邊側邊欄已經可以滾動囉step 6
當我們往下滑時，側邊欄也不會再超出範圍了調整目錄釘選位置（上下緣邊界）
接下來就是目錄的樣式微調了，我們固定目錄的外掛（Fix Widget）可以設定上下邊界的距離。
如果我們想要讓目錄不要貼緊上緣，就要去設定上邊界，下圖是預設上邊界貼緊上緣的狀況：
上邊界的距離多寡可以自己設定，設定後可以長得像這樣：
下緣也可以設定，否則有些底部導覽列特別高（比如圖中我放了IG圖文嵌入）的狀況，整個固定目錄會被埋進去
比較理想的狀況是，當閱讀文章到結尾後，側邊目錄也不需要繼續釘選（因為讀者也讀完了）
那接下來我就帶你來一起調整側邊釘選目錄的上下緣設定囉！
普通調整上下緣的方式：設定距離像素
step 1
點擊後台 Fix Widget 外掛
step 2
一進去就會看到上下邊界的設定，我們先設定上邊界為30px上邊界=距離頁面最上方有多少像素（頂部導覽條不算在內）
下邊界=距離頁面最下方有多少像素（底部導覽條不算在內）
step 3
上邊界設定30px 後的效果如圖step 4
而下邊界指的是畫面滑動到最下方之後，與下方的距離（可以看到圖中都被蓋住了）step 5
手動設定下邊界800px
step 6
成功讓側邊釘選目錄不被超高的底部導覽列給蓋住進階調整下緣的方式：碰到某個 HTML 元素後停止釘選
更理想狀態是當讀者滑動到一定的位置（文章已經讀完），側邊目錄就直接不釘選。
這邊我們會尋找文章尾巴其中一個我們每篇文章都會有的元素，來作為位置的標準。
（我是用相關文章的區塊，如果你沒有的話可以往下看，照我的教學使用留言區的區塊元素唷！）
step 1
找到一個文章尾部的區塊step 2
使用瀏覽器開發者工具，找到該區塊的idstep 3
將 id 設定到 Fix Widget的設定中step 4
當目錄與該元素平行時，就會停止釘選step 5
留言區是比較常見的區塊元素，可以以留言區為主step 6
到 Fix Widget 設定留言區的 id，下邊界記得要設定為0step 7
當目錄滑動到留言區，就會停止釘選設定只有文章才顯示固定目錄
當固定了目錄後，我們會發現在首頁、頁面上右邊也會顯示了側邊的固定目錄。
為了讓這些目錄只顯示在文章類型的頁面上，因此我們要做以下的設定：
step 1
到外觀>小工具準備調整顯示設定
step 2
照圖中設定，讓側邊目錄只顯示在文章類型的頁面中
step 3
到一般的頁面，就不會顯示目錄了設定手機版瀏覽不顯示固定目錄
而因為側邊欄在手機版版面會是在最下方，所以會整個跑版。因此我們要設定當讀者是用手機瀏覽我們網站文章時，直接讓側邊目錄消失。
下圖就是跑版的狀況：
step 1
一樣到外觀>小工具，照圖中設定在平板與手機不顯示此小工具
step 2
手機的側邊釘選目錄就消失囉！
以上就是在 WordPress 部落格網站文章的右邊釘選目錄的教學啦！希望大家把目錄釘選後，可以大大提升使用者的好體驗，也能幫大家增加讀者在網站的停留時間與停留率唷！
那就這樣囉！如果操作過程有遇到任何問題，歡迎到底下留言詢問我唷～
想學習更多好用數位工具、一起提升生產力、增加工作效率？
填寫下方表單，限時免費領取《數位工具應用地圖電子書》，內有超完整數位工具應用情境與攻略，一次帶走所有好用工具與使用攻略！
Ps. 領取後，我們還會每週二準時發送給你一封《領先數位週報》電子信，持續跟你分享最新研究的推薦數位工具，以及一個提升生產力的小技巧！