4款好用的 WordPress 目錄外掛推薦,下載安裝、外掛設定介紹

4款好用的 WordPress 目錄外掛推薦,下載安裝、外掛設定介紹

你在找好用的 WordPress 目錄外掛嗎?為什麼文章插入目錄如此重要?此篇會推薦給你4款好用的 Worpress 目錄外掛!

建立目錄除了幫助讀者在閱讀長文章時,能夠快速跳到他們真正感興趣的內容,對於 SEO 排名也有加分作用。

好用的Wordpress目錄外掛推薦

索引

看案例了解目錄對 SEO 搜尋引擎優化的影響

在開始介紹目錄外掛前,

你必須知道,在每篇文章中創建目錄為什麼這麼重要?

因為搜尋引擎很聰明的會抓取你文中有價值的內容

至「搜尋頁的第一個」當作重點摘要,大大的提升曝光度!

我們來看實際案例

這篇文章是吹風機推薦文,作者把吹風機的品牌、型號、價格都列在標題上,並製作成目錄,如以下:

wordpress目錄
資料來源:Shopback

這時候,google 使用者再透過 google 搜尋引擎,打上「吹風機推薦」關鍵字,

就會出現條列式的吹風機品牌、型號、價格,

是 google 自己整理出來的嗎? 當然不是!

wordpress目錄

Google 會抓取你文中「有價值的條列式內容」,不管是目錄、條列式內文,都有機會被 google 搜尋引擎選中!

把你的文章內容擷取放在搜尋頁的第一頁,大幅度的替你增加曝光度!

而目錄通常是整篇文章中的「重點條列式」,搜尋引擎就會抓取有價值的重點,把它放在搜尋頁的第一個,提供給使用者最直接與快速的回應。

已經有其他文章被 google 擷取,我還有機會在同個關鍵字競爭嗎?

有!

Google 搜尋引擎會「定期」派爬蟲搜索所有有價值的內容,

只要你一直產出文章,為每篇文章插入目錄、盡量條列式整理重點,並做好 SEO 優化,

而且內容比其他競爭對手的文章更豐富完整,那麼,你絕對有機會!

你想要的是「固定式目錄」或「進度目錄」?

目錄分為兩種類型:固定式目錄、浮動式進度目錄

大部分網站使用的都是第一種,在第一個標題前插入目錄,

而使用第二種類型的浮動式進度目錄大有人在,適合長篇文章類型的網站。

A. 固定式目錄

一般常見的目錄是在文章標題前,會插入固定式目錄外掛,例如:

Wordpress目錄外掛

B. 浮動式進度目錄

隨著瀏覽到哪裡,側邊欄目錄便會隨著閱讀進度去變更,而且自動展開細部標題,

這樣的好處是,讀者會清楚知道自己瀏覽到哪個章節,或是可以直接點選側邊欄的浮動目錄,觀看有興趣的主題,例如:

浮動式進度目錄Fixed Toc
圖片來源:Fixed TOC

此篇為了展示給大家看,安布用 Elementor Pro 的目錄工具,製作了浮動式進度目錄,讓大家更了解進度目錄是怎麼回事。

撰寫文章上,盡量「條列式敘述」,只有內容夠豐富完整,就有機會被 google 搜尋引擎抓取到重點節錄!

3款最多人使用的「固定式」目錄外掛推薦

我們會透過 WordPress 的外掛插件,在大標題的前面插入固定式目錄,最常見也最多人使用的免費目錄外掛是:Easy Table of Contents 

1 ⧸

Easy Table of Contents 

Easy Table of Contents 
以下是 Easy Table of Contents 的展示,
可以根據喜好更改外觀樣式

預設

自訂外觀2 

自訂外觀1

你可以透過使用 Easy Table of Contents 外掛,在WordPress 的文章中插入目錄。

文章的每個標題都可以透過點擊目錄的連結,直接快速跳到相對應內容。

優點

  • 免費外掛
  • 快速自動建立目錄
  • 被最多人使用

它是一款「免費」的目錄外掛,可以快速「自動」建立目錄,因為很多外掛都是需要付費的,所以它被最多人使用,也很多人推薦使用它。

缺點

  • 外觀上較陽春
  • 有時會出現不相關的字,需要手動排除

誰適合使用

由於在外觀設計上沒有太多選擇,如果你只是普通的部落格,或對外觀沒有太多要求,那麼很適合使用 Easy Table of Contents 。

相反的,如果你是喜歡美觀的設計,那麼這款可能不能符合你的期待,除非,你懂得使用 CSS 去做自訂修改!

若你不懂的如何用 CSS 去自訂外觀,那麼安布非常推薦你使用下一個會介紹的 Elementor Pro 內建目錄工具。

如何安裝及外掛設定

STEP 1 :安裝外掛
  • 在 WordPress 後台,點擊【外掛】 ➜ 【安裝外掛】
  • 在搜尋框中輸入【 Easy Table of Contents 】
  • 點擊【立即安裝】➜【啟用】
Wordpress外掛安裝
STEP 2 :外掛設定
  • 到「已安裝的外掛」頁面上,點擊 Easy Table of Contents 的【設定】
Wordpress外掛

在預設的情況下,目錄只會顯示在「頁面」上,可以更改預設的「啟用內容目錄的類型」,並在「文章」中自動插入目錄

  • 需要啟用內容目錄的內容類型:將「文章」打勾
  • 需要自動插入內容目錄的內容類型:將「文章」打勾
Wordpress目錄外掛
  • 顯示位置:維持預設
  • 顯示條件:建議改成「3」個
  • 標題標籤:改成「目錄」或「索引」
Wordpress目錄外掛
  • 可以自行調整邊框、背景、字體顏色
Wordpress目錄外掛
  • 外觀樣式:如果有更改以上外觀,要改成「自訂」才會顯示
Wordpress目錄外掛

2 ⧸

LuckyWP Table of Contents

LuckyWP Table of Contents目錄外掛

它也是一款免費目錄外掛,LuckyWp 比起 Easy Table of Contents 更注重 SEO,也有更多的自定義功能、滑動起來也比較流暢

以下是 LuckyWP Table of Contents 的展示,
可以根據喜好更改外觀樣式

預設

Wordpress目錄外掛

和 Easy Table of Contents 有點類似的免費目錄外掛,

有什麼優缺點?

優點

  • SEO 友善:能將在 Google 搜尋結果頁面中,顯示摘錄。
  • 支援 WordPress 內建的古騰堡編輯器
  • 可自動和手動插入目錄
  • 能自定義外觀及 CSS

缺點

  • 能調整的外觀樣式有限

如何安裝及外掛設定

STEP 1 :安裝外掛
  • 在 WordPress 後台,點擊【外掛】 ➜ 【安裝外掛】
  • 在搜尋框中輸入【 LuckyWP Table of Contents 】
  • 點擊【立即安裝】➜【啟用】
LuckyWP Table of Contents WordPress目錄外掛
STEP 2 :外掛設定
  • 到「已安裝的外掛」頁面上,點擊 LuckyWP Table of Contents 的【設定】
Wordpress目錄外掛
  • 標題數量:預設為 2,產生目錄的條件為2個標題
  • 標題階層深度:預設為 6,可以調整到3-4,層級數才不會太複雜
  • 目錄標題:預設為「內容目錄」
Wordpress目錄外掛
  • 支援 WordPress 內建的古騰堡 (Gutenberg) 編輯器
  • 可以手動單篇插入目錄,直接修改目錄樣式
Wordpress目錄外掛
  • 在文中插入目錄,點擊編輯可以自訂目錄內容,相當方便!
Wordpress目錄外掛
  • 也能更改外觀樣式
  • 浮動顯示:可以選擇,靠左浮動、靠右浮動、置中
Wordpress目錄外掛
可點擊放大查看

3 ⧸

Table of Contents by Elementor Pro

如果你使用 Elementor 專業版,在左側工具欄就有目錄工具,

不用再另外下載目錄外掛,非常方便,而且功能比免費版外掛多很多!

除了「固定式目錄」,同時也能製作「浮動式進度目錄」,如此篇展示的目錄,此篇目錄設定透過「電腦」瀏覽才會顯示,若你是透過手機或平板瀏覽,只會顯示固定目錄。

另外,在外觀的設計上可以高度的自定義調整。

先來看看用 Elementor Pro 製作的目錄長什麼樣子!

以下是安布製作的 Elementor Pro 目錄工具 展示,
可以根據喜好更改外觀樣式

Easy Table 的免費目錄外掛

Elementor Pro 目錄外掛1

Elementor Pro 目錄外掛2

優點

  • 可以高度自定義更改外觀
  • 不需修改CSS,就能設定成進度目錄,方便長篇文章閱讀
  • 可以更改背景圖片,並自行調整背景要呈現的圖片部位(XY軸)
  • 可以更換標題層級圖示,有超多圖示選擇
  • 頂部可以調整背景色
  • 需要修改 CSS 的機會極少

與一般的免費目錄外掛相比,Elementor 的目錄工具不需修改 CSS ,就能做出高變化的目錄樣式,

而一般免費目錄外掛,想要做出有質感的目錄,就需要從修改 CSS 下手。

缺點

  • 需購買 Elementor Pro 頁面編輯器,才能享有目錄功能
  • 個人一年1個站點為 49 美金
  • 但同時也能擁有50款工具、300多個模板

安布很推薦大家使用 Elementotr 做頁面的編輯,

不僅製作首頁及 Menu 都有模板可以套用,簡單編輯就能有美觀漂亮的網站,平常使用它編輯文章也能快速套用已經設計好的版型,加速文章的產出!

如果你還沒下載安裝 WordPress 頁面編輯器 Elementor 的免費外掛,或是還不知道 Elementor 是什麼,可以參考:

目錄外掛比較:Easy Table VS. LuckyWP VS. Elementor Pro

看完這三種固定式目錄外掛介紹,是不是有點頭緒了呢?

 Easy TableLuckyWPElementor Pro
啟用安裝數100,000+30,000+4,000,000+★
手動插入
自動插入
支援古騰堡有 ★
使用 Elementor 頁面編輯器
自定義外觀有限度有限度高度自定義★
支援進度目錄有★
推薦推薦

安布因為寫這篇文章,分別下載了這兩款免費的目錄外掛,兩款用起來的感覺,比較喜歡 LuckyWP,

因為它可以透過古騰堡編輯器做調整,也能手動插入目錄,在外觀上也比較現代感,

比較不會像 Easy Table of Contents 有較復古傳統的感覺,而且 Lucky WP的官方特別強調對 SEO 的友善支援,對於 Google 搜尋摘要的擷取,直接取得系統的支援!

不知道你比較喜歡哪一款呢?

可以在底下留言給我!

2 種方式製作出「浮動側邊欄」即時目錄索引

1 ⧸

Fixed Toc

Fixed TOC 是一款功能強大的付費目錄外掛,能夠自動創建目錄,可以固定目錄,也可以將目錄浮動在側邊欄,很適合長文章網站使用。

滾動時的滑鼠指標指示

標題鏈接指示器

自定義編輯外觀

自定義實時預覽

手機友善設計

不會有目錄檔在右邊不好預覽的問題!

在手機上使用友好

優點

  • 自動產生目錄
  • 支援電腦、平板、手機設備螢幕尺寸
  • 動態指示正在觀看的標。
  • 提供展開或隱藏的按鈕
  • 自定義位置、大小、字體、顏色⋯等等
  • 編輯時可即時預覽
  • 有多種動畫效果可以選擇
  • 支持大部分的頁面編輯器,例如 Elementor、Divi、Visual Composer、Thrive Architect⋯等等

缺點

  • 為付費外掛
  • 半年 20 美元,一年 25.63 美元 (約470台幣左右)

誰適合使用

➜ 教學網站、喜歡寫長文的使用者

教學文通常都特別長,尤其「長篇文章」對於 SEO 優化有幫助,所以越來越多網站喜歡寫長篇文章,

但如果文章沒有妥善安排,會導致文章看起來很紊亂,讀者閱讀起來也容易分心、找不到有興趣的主題,

使用 Fixed TOC 能提升讀者的閱讀耐心。

點擊了解更多:Fixed TOC

2 ⧸

Elmentor Pro 的目錄工具

應該很多 Elementor 的使用者不知道,Elementor 內建的目錄工具,還能做到「浮動式進度目錄」,方便讀者即時瀏覽標題!

如果你原本就有購買 Elementor Pro 頁面編輯器,不用再花錢購買 Fixed TOC 了!

四步驟教你如何設定!

STEP 1:編輯佈局

  • 進入 Elementor Pro 編輯文章
  • 點選預備要插入目錄的區塊
  • 佈局:拉伸段【打開】
  • 內容寬度:改成【全寬】
  • Vertical Align:改成【中央】(視情況調整)
Elementor進度目錄

STEP 2:編輯區塊

  • 增加欄位(如下圖)
  • 調整左右寬度:6%、60%、34%(請依照你頁面本來的寬度做調整)
  • 將目錄插入最右邊欄位
Elementor進度目錄

STEP 3:目錄設定

點選「佈局」➜ 其他選項
  • Minimize Box (縮小框):若打開,提供讀者縮小目錄的選項,若希望手機或平板裝置上是顯示完整目錄的,就把 Minimized On 改成「無」
  • 分層視圖:依標題層級分層排列
  • Collapse Subitems (折疊):打開,即時檢視時就會有折疊關上的動畫
點選「進階」➜ Motion Effects
  • 黏貼:改成【上】
  • 黏在:把「行動裝置」及「平板電腦」都刪掉(浮動進度目錄就不會在手機及平版上顯示,會直接變成固定目錄,避免擋到頁面)
  • 停留在欄裡:改成【否】(就會固定在頁面上)
Elementor進度目錄
Elementor進度目錄

STEP 4:檢查手機響應

  • 檢查距離是否都好,若想單獨修改手機響應也是可以的,將外距的連結關掉,再打開,就會恢復原來的樣子
Elementor進度目錄
Elementor進度目錄

結語

看完以上介紹,是不是心中已經選擇好哪一款 WordPress 目錄外掛了呢?

或是已經下載安裝好了?

不論是哪一種目錄外掛,都只是輔助文章,讓文章整體更加分!

最重要的還是內容的撰寫,好的內容,就不用擔心網站跳出率高,或是網站排名差。

如果還想知道哪一款目錄外掛,或希望安布實測給你看,都歡迎在底下留言唷!

目錄外掛連結

這個網站是用 Elementor Pro 打造的,如果你跟安布一樣,是自己架設並經營網站,對於改善網站外觀、風格營造、排版優化有興趣,可以先試用 WordPress 免費的 Elementor 頁面編輯器外掛,可以幫助你在文章排版和網站外觀上,有更多的突破!

網站使用工具

沒有任何程式語言背景,還好遇到了可以自己架網站的 WordPress 與實用的頁面編輯器 Elementor,實現了自己做網站的願望!

Anbu Course
我是 Anbu
分享網站經營經驗

發佈留言