【WordPress】文章內頁側邊欄固定文章目錄

最後更新於 2021 年 6 月 4 日

  為了這個功能我真的嘗試安裝過很多插件,也改過挺多次CSS,目前的效果也達到我預期的90%了(吧),所以就寫個文章記錄一下我的改法,如果有興趣的小夥伴們可以學起來。

效果

同本站右側目錄效果,目錄是固定的。

image 40 【WordPress】文章內頁側邊欄固定文章目錄

安裝文章目錄插件

其實也可以自己寫代碼實現目錄效果,但是我們就不費這個功夫了,有現成的目錄插件可以直接使用。

目前最熱門的就是下方這兩款:

Table of Contents Plus

我的文章內頁使用的是這款文章目錄插件—Table of Contents Plus

安裝啟用後設定將 post 內容類型自動插入目錄,若不勾選 post 就不會顯示文章目錄了。

image 13 【WordPress】文章內頁側邊欄固定文章目錄

文章中的預覽效果

image 14 【WordPress】文章內頁側邊欄固定文章目錄

LuckyWP Table of Contents

我的側邊目錄就是使用這一個插件—LuckyWP Table of Contents

screenshot 5 【WordPress】文章內頁側邊欄固定文章目錄

如果想要讓目錄在文章內頁出現,記得將自動插入內容目錄打勾,並且選擇內容類型「文章」。

image 15 【WordPress】文章內頁側邊欄固定文章目錄

那麼文章目錄插件安裝完畢之後,現在就來說說如何把它放到側邊欄並且固定。

將文章目錄固定在側邊欄

  首先我們需要再下載另一款插件—Q2W3 Fixed Widget。這個插件可以讓你的小工具固定在頁面上,如果你設置文章目錄固定,當你捲軸往下文章目錄就會跟著往下。

效果類似於:

screenshot 1 【WordPress】文章內頁側邊欄固定文章目錄

插件啟用後,將文章目錄小工具(第一款插件小工具:TOC+;第二款插件小工具:內容目錄)拖移到右邊側欄中,並將「固定這個小工具」打勾。

image 16 【WordPress】文章內頁側邊欄固定文章目錄

但是當你回到文章頁面預覽的時候會發現…

image 17 【WordPress】文章內頁側邊欄固定文章目錄

沒錯,因為將文章目錄固定的關係,所以跟其他欄位重疊了…

我思考了一下有兩種解決辦法:

1. 將其它小工具也都設定成固定
2. 將其他小工具拔掉

第一種方法我沒試過,因為我覺得有些小工具在文章內頁中顯得雞肋,且如果將其他的小工具都固定住也沒法完整顯示,那乾脆採第二種解決辦法。

那麼第二種應該如何實施呢?

設置文章內頁側邊欄只有文章目錄

這時候又要再下載一個插件了。Easy Custom Sidebars—一個可以單獨設置各個頁面側欄工具的插件。

啟用後新增一個sidebar,將 「All 文章」 打勾後新增到這個 sidebar 當中,在 sidebar to Replace 處選擇「右邊側欄」(視你主題自訂的側欄名稱而定),隨便替這個sidebar命個名保存。

image 21 【WordPress】文章內頁側邊欄固定文章目錄
image 19 【WordPress】文章內頁側邊欄固定文章目錄

回到小工具設定頁面,將文章目錄重新拉到剛剛新增的sidebar裡。

image 20 【WordPress】文章內頁側邊欄固定文章目錄

大功告成! ( 當然,你可以用CSS DIY一下你的側邊文章目錄… 我搗鼓了挺久 )

image 22 【WordPress】文章內頁側邊欄固定文章目錄

PS.若你的文章內頁側欄還是有除了目錄以外的工具,請務必將目錄放在最下面,不然一樣是會堆疊在一起,這個插件主要是讓你在文章內頁可以減少一些沒必要出現的工具,如果還是放很多的話就顯得沒有必要了。

0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論