fbpx

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

How to pin the article directory to the side

最後更新時間: 2022 年 10 月 31 日

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

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

如果你有興趣,就繼續看下去吧!

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

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

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

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

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

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

側邊欄固定目錄 示意圖
側邊欄固定目錄 示意圖

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

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

側邊欄文章目錄固定教學

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

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

安裝外掛

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

  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 的設定

到 WordPress 外掛區開啟 Easy Table of Contents 的設定
到 WordPress 外掛區開啟 Easy Table of Contents 的設定

step 2

勾選圖中兩個紅框標示的文章選項,讓目錄自動在文章畫面中顯示

勾選圖中兩個紅框標示,讓目錄自動在文章畫面中顯示
勾選圖中兩個紅框標示的文章選項,讓目錄自動在文章畫面中顯示

step 3

下滑並設定標題標籤為「文章目錄」或其他你想要的的標題文字

下滑並設定標題標籤為「文章目錄」或其他喜歡的標題文字
下滑並設定標題標籤為「文章目錄」或其他你想要的的標題文字

step 4

滑動到最下方,點擊儲存設定

滑動到最下方,點擊儲存設定
滑動到最下方,點擊儲存設定

step 5

到文章中就可以看到目錄成功顯示囉!(預設是文章標題+子標題要>4個,才會顯示)

到文章中就可以看到目錄成功顯示囉!(預設是文章標題+子標題要>4個,才會顯示)
到文章中就可以看到目錄成功顯示囉!(預設是文章標題+子標題要>4個,才會顯示)

設定目錄釘選

在成功開啟文章目錄功能後,接下來我們就要把文章目錄小工具設定到側邊欄,並且將其固定

step 1

點 外觀>小工具,到小工具的設定畫面

點 外觀>小工具,到小工具的設定畫面
點 外觀>小工具,到小工具的設定畫面

step 2

找到內容目錄小工具,拖曳到右邊主側邊欄區塊

找到內容目錄小工具,拖曳到右邊主側邊欄區塊
找到內容目錄小工具,拖曳到右邊主側邊欄區塊

step 3

勾選固定小工具,並且點擊儲存

勾選固定小工具,並且點擊儲存
勾選固定小工具,並且點擊儲存

step 4

為了方便大家檢視,我將側邊欄小工具弄到剩一個

為了方便大家檢視,我將側邊欄小工具弄到剩一個
為了方便大家檢視,我將側邊欄小工具弄到剩一個

step 5

如果你有很多個小工具,內容目錄要放在最後一個,不然你固定目錄後會蓋到其他的小工具哦!

如果你有很多個小工具,內容目錄要放在最後一個哦!
如果你有很多個小工具,內容目錄要放在最後一個哦!

step 6

設定完成後,側邊目錄就會成功顯示啦!

設定完成後,側邊目錄就會成功顯示啦!
設定完成後,側邊目錄就會成功顯示啦!

step 7

如果想新增目錄標題,一樣在小工具設定

如果想新增目錄標題,一樣在小工具設定
如果想新增目錄標題,一樣在小工具設定

step 8

成功顯示側邊目錄標題

成功顯示側邊目錄標題
成功顯示側邊目錄標題

調整目錄高度、增加滑鼠滾動功能

其實到這一步釘選目錄就成功完成了,但是還有一些小問題要解決。

當我們的文章目錄標題不多時,側邊目錄的顯示會是正常的(如下圖)

當目錄標題不多時顯示會是正常的
當目錄標題不多時顯示會是正常的

但當目錄標題太多,可能會超出畫面高度,也不能滾動目錄,造成超出範圍的目錄就點擊不到了

但當目錄標題太多,可能會超出畫面高度
但當目錄標題太多,可能會超出畫面高度

因此接下來就要帶大家來用程式碼片段,設定目錄的最大高度以防超出範圍,並且在這個高度內我們會開啟捲動功能,讓讀者可以捲動目錄進行瀏覽

step 1

點擊後台程式碼片段,解決超過畫面高度的問題

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

step 2

複製一份CSS程式碼的範例

複製一份CSS程式碼的範例
複製一份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 外掛

點擊後台 Fix Widget 外掛
點擊後台 Fix Widget 外掛

step 2

一進去就會看到上下邊界的設定,我們先設定上邊界為30px

上邊界=距離頁面最上方有多少像素(頂部導覽條不算在內)
下邊界=距離頁面最下方有多少像素(底部導覽條不算在內)

一進去就會看到上下邊界的設定,我們先設定上邊界為30px
一進去就會看到上下邊界的設定,我們先設定上邊界為30px

step 3

上邊界設定30px 後的效果如圖

上邊界設定30px 後的效果如圖
上邊界設定30px 後的效果如圖

step 4

而下邊界指的是畫面滑動到最下方之後,與下方的距離(可以看到圖中都被蓋住了)

而下邊界指的是畫面滑動到最下方之後,與下方的距離(可以看到圖中都被蓋住了)
而下邊界指的是畫面滑動到最下方之後,與下方的距離(可以看到圖中都被蓋住了)

step 5

手動設定下邊界800px

手動設定下邊界800px
手動設定下邊界800px

step 6

成功讓側邊釘選目錄不被超高的底部導覽列給蓋住

成功讓側邊釘選目錄不被超高的底部導覽列給蓋住
成功讓側邊釘選目錄不被超高的底部導覽列給蓋住

進階調整下緣的方式:碰到某個 HTML 元素後停止釘選

更理想狀態是當讀者滑動到一定的位置(文章已經讀完),側邊目錄就直接不釘選。

這邊我們會尋找文章尾巴其中一個我們每篇文章都會有的元素,來作為位置的標準。

(我是用相關文章的區塊,如果你沒有的話可以往下看,照我的教學使用留言區的區塊元素唷!)

step 1

找到一個文章尾部的區塊

找到一個文章尾部的區塊
找到一個文章尾部的區塊

step 2

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

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

step 3

將 id 設定到 Fix Widget的設定中

將 id 設定到 Fix Widget的設定中
將 id 設定到 Fix Widget的設定中

step 4

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

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

step 5

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

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

step 6

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

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

step 7

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

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

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

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

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

step 1

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

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

step 2

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

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

step 3

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

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

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

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

下圖就是跑版的狀況:

手機跑版 示意圖
手機跑版 示意圖

step 1

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

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

step 2

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

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

以上就是在 WordPress 部落格網站文章的右邊釘選目錄的教學啦!希望大家把目錄釘選後,可以大大提升使用者的好體驗,也能幫大家增加讀者在網站的停留時間與停留率唷!

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

想學習更多好用數位工具、一起提升生產力、增加工作效率?

填寫下方表單,限時免費領取《數位工具應用地圖電子書》,內有超完整數位工具應用情境與攻略,一次帶走所有好用工具與使用攻略!

Ps. 領取後,我們還會每週二準時發送給你一封《領先數位週報》電子信,持續跟你分享最新研究的推薦數位工具,以及一個提升生產力的小技巧!

“【WordPress小技巧】如何將文章目錄固定在側邊,並且加入滾動、調整寬度?完整教學一步步帶你實現!” 有 6 則留言

  1. HI, 感謝老k的這個文,如圖老k的第二張圖,把標示的改掉,我的可滾動menu就出來了。感謝。

  2. 謝謝老K分享的文章,但有些問題想請教:
    1、該怎麼更改固定在側邊欄目錄中的文字顏色呢?
    2、該怎麼設定才能做到當閱讀到該章節,背景會變色,且文字也會跟著變色呢?

    還請老K解惑,謝謝🙏

    1. 1. 文字顏色需要撰寫一些 css 語法,供參考:https://bit.ly/3zZpeWG
      2. 閱讀該章節背景會變色目前我這邊使用本文的方式是自動做到的,基本上這個沒辦法靠我們寫語法做到哦!

  3. 老K您好,很謝謝撰寫如此有用的教學文章,我目前確實遇到側邊目錄太長、需要加入滾動功能的問題,唯按照教學,仍無法順利出現,例如我的這篇文章https://www.wensgoodlife.com/tt/,就碰上目錄太長的問題,要文章捲動到後面,目錄才會跟著下去,語法設定截圖如https://drive.google.com/file/d/13SdacPZhNK21VRsUe7omwDShR0jToaBq/view?usp=sharing

    儲存也啟用了,仍無法順利出現,還請能協助解惑,感謝。

請留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

返回頂端