【WordPress 小技巧】如何將文章目錄固定在側邊，並且加入滾動、調整寬度？完整教學一步步帶你實現！

最後更新時間： 2024 年 09 月 25 日

有些經營網站的朋友會問我：「該如何像你一樣，把文章目錄固定在側邊欄呢？感覺這樣讀者體驗蠻不錯的！」，今天就來簡單教大家最簡單、免費在 WordPress 網站上將側邊欄目錄固定的方法！

只要使用目錄外掛 Easy Table of Contents、側邊欄小工具固定外掛 Q2W3 Fixed Widget 、小工具顯示設定外掛 Widget Options ，以及簡單的程式語法（寫在 Code Snippets 外掛中），就能將側邊欄目錄固定，並且還可以在首頁/一般頁面/手機版畫面中隱藏，還能有滑鼠滾動效果唷！

如果你有興趣，就繼續看下去吧！

【🆓 免費資源】從零開始，打造自媒體被動流量與收入 🚀

如果你想學會如何：

• 更有策略的經營自媒體，不被流量與粉絲數綁架。
• 打造穩定長青的被動流量，就算放假也有流量。
• 從零打造自媒體商業模式，將自身經驗轉換變現。

歡迎點擊下方按鈕，報名免費課程。我們還會送你一套《自媒體被動流量變現地圖》電子書哦 🎁！

立即報名免費課程，領取電子書！

—— 站長老K：雖然是免費課程，但內容絕對不馬虎，推薦你找時間好好看完！

為什麼要將文章目錄放在側邊欄固定？

其實可以固定在側邊欄的內容有很多種。

如果想要讓讀者更認識自己，將自我介紹固定在側邊欄，這樣大家讀你的文章時隨時右邊都可以看到站長的資訊。

而如果是想要獲取更多收益，則是可以把廣告或者聯盟行銷的圖片固定在側邊欄，不管讀者讀到哪一篇文章，都可以讓廣告宣傳隨時跟著讀者。

而我自己是想要提升使用者體驗，讓大家更容易閱讀我的長文。

因此我選擇將文章目錄釘選在側邊，大家看到長文時不只可以在文章一開頭去點擊目錄跳轉，也可以在閱讀過程中持續點擊右邊的目錄進行章節跳轉（就像電子書一樣！）

因此，首先要思考你想要達成的目的是什麼，再來研究你該如何運用側邊固定那少少的欄位，達成你的目標！

接下來就進入正文的側邊欄文章目錄固定教學囉～如果你跟我一樣很常也很愛寫長文，擔心讀者不好閱讀或者讀到一半恍神不知道自己在哪一章節的話，你可以繼續看下去！

側邊欄文章目錄固定教學

接下來我們將一步步帶著你一起操作，讓你可以成功將文章目錄固定釘選到側邊欄，並且也會順便帶著你解決一些我有遇到的問題。

如果你操作過程中有遇到問題，也歡迎直接在底下留言你的狀況，我會盡快回覆你唷！

安裝外掛

首先我們要將目錄固定在側邊欄的話，有幾個前提條件：

1. WordPress 使用的佈景主題，要開啟文章側邊欄功能（廢話！）
2. 安裝目錄外掛
3. 安裝固定側邊欄小工具的外掛

而後續在安裝側邊欄後，其實還會發生兩個小問題（我自己有遇到的），一個是首頁也跑出了目錄，第二個就是目錄如果太長，會超出固定範圍。

因此我們還需要做以下兩件事：

1. 安裝小工具顯示設定外掛，設定只有在文章頁面、電腦檢視才顯示側邊目錄小工具
2. 安裝程式碼片段外掛，寫一小段程式碼讓目錄固定高度、可捲動瀏覽（程式碼我後面會給大家）

以下整理需要大家到 WordPress 安裝的外掛，大家可以直接看這個清單去你的 WordPress 後台安裝唷！：

1. 免費文章目錄外掛：Easy Table of Contents
2. 固定小工具外掛：Q2W3 Fixed Widget
3. 小工具顯示設定外掛：Widget Options
4. 程式碼片段外掛：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程式碼的範例，或直接自己新增一個

add_action( 'wp_head', function () { ?>
	<style>

		/* 在這裡撰寫網站專屬 CSS 程式碼 */

	</style>
<?php } );

step 3

找到複製的程式碼片段，點擊編輯

step 4

到網站文章的頁面，開啟開發者工具（按 F12，或在網頁上點右鍵選擇「檢查」）

step 5

選擇右邊程式碼區塊左上方的選取器，要來尋找文章側邊目錄的程式碼 ID，修改樣式會用上

step 6

開啟選取器之後，將滑鼠指向側邊目錄，找到最外層。並將內容目錄的 ID 記錄下來（以這邊來說是 #ezw_tco-2）

step 7

在畫面紅框處輸入下方程式碼，並點擊儲存設定（其他設定可參考下圖）

	#ezw_tco-2{
		overflow-y: scroll;
		max-height: 85vh;
	}

step 8

刷新文章，就可以看到右邊側邊欄已經可以滾動囉

step 9

當我們往下滑時，側邊欄也不會再超出範圍了

調整目錄釘選位置（上下緣邊界）

接下來就是目錄的樣式微調了，我們固定目錄的外掛（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

使用瀏覽器開發者工具，找到該區塊的 id

step 3

將 id 設定到 Fix Widget的設定中

step 4

當目錄與該元素平行時，就會停止釘選

step 5

留言區是比較常見的區塊元素，可以以留言區為主

step 6

到 Fix Widget 設定留言區的 id，下邊界記得要設定為0

step 7

當目錄滑動到留言區，就會停止釘選

設定只有文章才顯示固定目錄

當固定了目錄後，我們會發現在首頁、頁面上右邊也會顯示了側邊的固定目錄。

為了讓這些目錄只顯示在文章類型的頁面上，因此我們要做以下的設定：

step 1

到外觀>小工具準備調整顯示設定

step 2

照圖中設定，讓側邊目錄只顯示在文章類型的頁面中

step 3

到一般的頁面，就不會顯示目錄了

設定手機版瀏覽不顯示固定目錄

而因為側邊欄在手機版版面會是在最下方，所以會整個跑版。因此我們要設定當讀者是用手機瀏覽我們網站文章時，直接讓側邊目錄消失。

下圖就是跑版的狀況：

step 1

一樣到外觀>小工具，照圖中設定在平板與手機不顯示此小工具

step 2

手機的側邊釘選目錄就消失囉！

以上就是在 WordPress 部落格網站文章的右邊釘選目錄的教學啦！

希望大家把目錄釘選後，可以大大提升使用者的好體驗，也能幫大家增加讀者在網站的停留時間與停留率唷！

那就這樣囉！如果操作過程有遇到任何問題，歡迎到底下留言詢問我唷～

想學習更多好用數位工具？