想要增加SEO的分數,那麼在文章上加入目錄,就是一個不能少的動作,目錄可以讓訪客更快了解這篇文章的重點,也可以讓搜尋知道架構,而這篇文章我們就針對目錄推薦 Fixed TOC 這個外掛來解說。
Fixed TOC的特色
不只置頂上方,側邊也可同步
一般來說目錄都是置頂在文章最上方,雖然一開始滑的時候可以透過目錄知道整篇文章的概要,並且點擊到想閱讀的段落,但往下滑到段落時,如果還想要再看看其他段落內容,就需要在往上再回到目錄。
不過 Fixed TOC 當你一進到網頁時,目錄就在上方,當你往下滑的時候,目錄會移動側邊,你不用看完一段就往上再看一下目錄點擊,而是可以在畫面旁邊隨時看到
即時動態
Fixed TOC 除了當你往下滑移動到側邊之外,更重要的是跟著你滑動的段落,提示現在的位置,讓訪客可以很清楚知道閱讀的內容,這對於長文章來說可說是非常方便。
Fixed TOC外掛下載
那這麼好用的目錄外掛,我們就來了解如何設定
Fixed TOC官方下載:Fixed TOC
Fixed TOC設定
第一步:後台設定
完成 Fixed TOC 的安裝之後,我們進入外掛設定
- Enabe Fixed TOC:勾選
- Post types:文章(指要顯示的位置,我們這邊主要是文章)
- Headings:選擇要做成目錄的 Heading,我勾選H2、H3、H4
- Display TOC when:這邊設定至少3個以上標題,感覺這樣才比較需要目錄

第二步:自訂修改樣式
接著我們要來修改目錄的樣式,進入「外觀」->「自訂」->「Fixed TOC Plugin」

第三步:位置設定
我們一個個微調,第一個是Location,這主要是調整目錄的位置,這邊可以用預設的Middle Right,然後離文章內容寬度約20px

第四步:外觀調整
再來,調整按鈕的樣式
- Icon:指顯示在按鈕上的符號
- Size:調整大小
- Shape:按鈕要方型、圓角方型、圓型
- Border:框線粗細

第五步:展開樣式設定
再來就是展開時的目錄內容樣式,同樣可以選擇外觀、框線粗細、寬度、高度以及位置
這邊可以留意一下Height高度設定,如果有希望特別的高度才需要設,如果沒有就讓它空白,系統會自動抓取

第六步:頂端目錄調整
頂端的目錄,這邊我們也可以微調一下「名稱」,同實可以調整標題字體大小

第七步:目錄內調整設定
標題調整完之後,還可以調整目錄文字的尺寸

第八步:目錄動畫設定
然後再回到目錄展開的動畫調整,以及滑動時,設定它要如何即時顯示的動畫

第九步:目錄顏色調整
接著就是顏色調整,目錄的顏色預設都是灰色的,這邊可以調整成想要的顏色

第十步:調整目錄位置
最後,我們來調整一下Fixed TOC的版面位置,全部設定完之後會發現,它遮住了導航列的外置,這邊我們在自訂上調整不了,所以需要透過CSS微調一下。
那我們先到前台,尋找這個版面的id,確認後,我們複製起來
然後到Customize CSS這邊,寫一段小小的CSS,讓版面可以往下移動

這樣 Fixed TOC 就設定完成囉