fbpx
首頁 » WordPress » WordPress 外掛 » 【WordPress教學】免費的目錄外掛,5分鐘輕鬆搞定你的WordPress目錄

【WordPress教學】免費的目錄外掛,5分鐘輕鬆搞定你的WordPress目錄

最後更新日期:2019 年 11 月 24 日

本篇文章要教你如何使用 Easy Table of Contents ,自動產生你的WordPress目錄,讓大家在觀看你的文章時,可以迅速的了解整篇文章的架構,也可以迅速跳到自己喜歡的章節觀看。

想要知道WordPress有哪些好用的主題或是外掛,可以關注我這篇文章:2019年WordPress推薦主題與外掛,最新優惠持續更新中!

【WordPress教學】免費的目錄外掛,5分鐘輕鬆搞定你的WordPress目錄
【WordPress教學】免費的目錄外掛,5分鐘輕鬆搞定你的WordPress目錄

目錄介紹

為什麼要使用目錄 ?

根據Google SEO的說明,文章的結構化也是SEO排行的一大重點。

什麼是文章的結構化呢? 就是文章內有正確的使用大標題、小標題、內文,也就是 H1、H2、H3、H4 等等,如下圖所示:

html heading
html heading

尤其是在長篇文章內,更需要有這樣子的結構,不僅是為了SEO,更是為了讓讀者能夠輕鬆閱讀內容。

目錄正是提醒作者文章結構化的一個好工具,因為一個不好的結構,會做出一個很醜的目錄,同時也能夠快速觀看自己想要看的章節。

使用目錄的優缺點

♥ 優點:

  • 簡潔明瞭、快速達到章節
  • 提醒作者文章的結構化
  • 長篇文章必備,否則要滑非常久

♠ 缺點:

  • 設定麻煩
  • 在不同裝置的版面,有機會破圖
  • 操作不好,可能會降低網站的效率,或是達到錯誤的位置造成反效果。

為什麼要使用 Easy Table of Contents ?

因為上述的缺點,所以有人為了解決不便利性,做出了這個 WordPress 外掛。

使用 Easy Table of Contents 可以在文章發布的時候,自動產生出目錄,也可以設定自己要產生哪些內容。

接下來的章節,我會教你如何使用 Easy Table of Contents。

 

如何使用 Easy Table of Contents ?

如何安裝

在 WordPress 的後台,點選安裝外掛,並且搜尋 Easy Table of Contents 。

安裝 Easy Table of Contents
安裝 Easy Table of Contents

設定教學

step 1

安裝完成後,選擇啟用,並且到設定的地方,將 Enable Support 的文章以及頁面打勾,然後到下面按 Save Changes ,這樣設定就完成了。

將文章及頁面打勾
將文章及頁面打勾

step 2

後面的設定基本上是預設就好,但有些人可能會有自己的需求,我還是會稍微介紹一下。

Appearance 可以設定目錄的大小、排版、顏色,如果想快速改變看看樣子,可以改 Theme 的顏色,有官方配置好的搭配。

Appearance 可以設定目錄的樣式
Appearance 可以設定目錄的樣式

step 3

Advanced 可以設定目錄的大小寫、哪些Heading要顯示在目錄、要排除哪些關鍵字不要出現在目錄等等。

Advanced 可以設定要使用哪些 Heading
Advanced 可以設定要使用哪些 Heading

使用方式

點選編輯文章或是新增文章,拉到下面,就會看到 Table of Contents 的欄位。

首先勾選 Insert table of contents ,啟用這篇文章的目錄。

以我這篇文章為例,我使用的 Heading 有 h2、h3,所以我將 h2、h3 打勾,其他的不要勾,避免不必要的 Heading。

在編輯文章的地方,勾選插入Table。

設定完成後,發佈文章或是儲存草稿瀏覽,就可以看見目錄了。

 

本篇文章目錄
本篇文章目錄

使用 Easy Table of Contents 的優缺點

優點:

  1. 快速建立,不用一個一個設定錨點。
  2. 可以很快的選取要使用哪些Heading。
  3. 免費! 很多目錄外掛都是付費的。

缺點:

  1. 偶爾會跑出不相關的字,像是我會跑出 “相關” 的欄位,所以才會額外排出這個字
  2. 版型沒有太多選擇,但可以自己改 CSS。

 

總結

我認為 Easy Table of Contents 對我來說是必裝的,因為可以自動產生,我不是一個太勤勞的人,透過它我只要打勾就可以產生目錄了。

如果還有任何針對這個外掛的問題,歡迎在下面留言讓我知道。

如果還不知道 WordPress 怎麼建立的 , 可以參考 【架站教學】新手快速架站教學,使用Cloudways架設WordPress網站!

補充一些提問的回答

1. 為什麼目錄沒有生成?

⇒ 依照我的設定方式,至少需要H2、H3加起來有4個以上,才會產生目錄,或是在文章底下沒有勾選 insertion of the table of contents 的選項。

 

2. 可以在已發布的文章中加目錄?

⇒ 可以,你有兩種設定方式。

  1. 在設定的地方,把 Auto Insert 欄位的文章以及頁面勾選起來,讓文章自動添加。
  2. 編輯之前的文章,把 insertion of the table of contents 勾選起來。

 

3. 為何我的目錄前面會有數字?

⇒ 這是外掛自動產生的,所以建議在文章內的標題就不需要添加數字了!

 

4. 目錄的文字能改大一點嗎 ? 

⇒ 設定裡面的Appearance 裡面有一個是Font Size ,改變這個大小就可以了!

 

5. 為何會有後面1.1 2.2 3.3這樣? 想要直接1 2 3 這樣就好? 不要有.後面的數字。

⇒ 把設定裡面的 Show as Hierarchy 打勾取消掉。

 

6. 我還是不懂h1.2.3.4.5.6是表示哪幾個標題?

⇒ 你在編輯文章時,會有選項是標題,標題有分6種,就是H1~H6。

想要了解更多HTML語法,可以參考這本書:學好跨平台網頁設計:HTML5、CSS3、JavaScript、jQuery與Bootstrap 4超完美特訓班(第二版)

 

7. 我的標題數量不超過4個,一樣可以顯示出目錄嗎?

⇒ 可以做到,到設定裡面,有一個欄位叫做 Show when ,預設是4,把它改為1就可以。
但我不太推薦這樣做,這樣讓你的文章結構性不好,盡量多使用一點H2跟H3。



WordPress 線上課程推薦

阿璋正在籌備 WordPress 線上課程,如果有興趣的人,歡迎點擊下方連結。

WP 全方位架站攻略

從 0 開始建立部落格

站長之路手把手教你如何透過部落格開始賺錢,內容包含 WordPress、部落格經營、網路行銷,帶你成為一個成功的部落格站長!

查看站長之路

WordPress 架站推薦

新手架站:【架站教學】專門為WordPress打造的主機?WPWebHost 完整教學!

高流量網站:【架站教學】新手快速架站教學,使用Cloudways架設WordPress網站!

新手必看: WordPress 必裝主題與外掛推薦、學習管道、最新優惠統整!

學習更多:查看我是如何透過 WordPress 架設部落格,賺取人生第一桶金!



WordPress 學習書籍推薦

WordPress 無敵架站手冊:架站新手都想擁有:教你打造個人專屬網站

WordPress 無敵架站手冊
WordPress 無敵架站手冊

書籍介紹

這本書教你從零開始建立起一個全功能的WordPress網站,從下載與安裝WordPress主軟體開始到連結、媒體、選單、圖像、展示區、管理、用家建檔等等。 甚至還有教你如何開發主題、外掛、小工具,從入門到進階的教學都很完整。

推薦原因

這本書原作者是波蘭人,原文是英文,後來經由免費資源網路社群的作者 Pseric 翻譯成中文書。 WordPress 目前的中文書可說是少之又少,這本不僅是中文書,內容又非常完整,絕對是學習WordPress的首選書籍!

購買 WordPress 無敵架站手冊

WordPress Plugins百大外掛精選(火力加強版)

WordPress Plugins百大外掛精選(火力加強版)
WordPress Plugins百大外掛精選(火力加強版)

書籍介紹

這本書教你從基礎架站、備份保存到各式各樣的外掛主題,讓你想裝什麼就裝什麼,建置專屬自己獨一無二的多功能發佈平台。 作者特別精選了各類型的外掛做介紹,只要你想的到的功能幾乎都在裡面,匯集了讀者們一直喜愛的外掛程式介紹,並且添加了最新的外掛程式,更貼近現在的讀者需求。

推薦原因

這本書作者是免費資源網路社群的作者 Pseric,他的網站知名度非常的高,也是透過 WordPress 架設而成,因此對於外掛的理解,絕對是數一數二。

購買 WordPress Plugins 百大外掛精選(火力加強版)

支持阿璋的新書《打開網路就有錢》,裡面分享許多自媒體以及投資理財的知識,非常適合網路創業者以及想要增加額外收入的上班族閱讀。

打開網路就有錢 呂明璋(工具王阿璋)


如果你對幣圈資訊有興趣,可以訂閱此電子報:幣圈最新資訊

我目前有成立一個亞洲最大的幣圈自媒體 Discord 社群:Crypto Mind 加密腦

推坑阿璋超愛的商品,歡迎加入團購群:阿璋好物團購 LINE 社群

12篇文章手把手教你如何透過部落格開始賺錢:站長之路

更多相關社群連結:工具王阿璋社群列表

本站有部分連結與商家有合作關係,透過我的連結購買,我會獲得少數佣金,讓我可以持續營運網站,但並不會影響您的任何權益,詳情查看免責聲明

如果我的文章對你有幫助,歡迎贊助我一杯咖啡!

本站所有內容皆為阿璋個人經驗分享,如有涉及投資請謹慎評估,阿璋不做任何投資建議。

贊助我一杯咖啡

文章引用請來信索取授權,否則將保留法律追訴權。

by Johntool-工具王阿璋

在〈【WordPress教學】免費的目錄外掛,5分鐘輕鬆搞定你的WordPress目錄〉中有 156 則留言

  1. 非常好的分享 ,真的是5分钟就弄得好了 ! 哈哈 我这种新手就抱着试一试的心态,没想到就成功了,让我的文章瞬间变得更整齐了 ~感谢你~期待你更多的分享

  2. 你寫的好清楚,我照著做就完成了目錄~
    可以再請教其他問題嗎?
    希望你也可以寫一篇幫助電腦白痴的我> <謝謝你!!!!

  3. 感謝介紹!
    我在操作時,遇到一些困難,煩請幫忙。
    請問:
    1) 可以在已發布的文章中加目錄?
    2) 如果目錄有7個大項,是否建立不了目錄?
    3) 是不是標題前寫 1., 1.1., 1.2. … ,再勾它就會自動生成目錄,不需要另外在段落中再寫遍呢?
    謝謝

    1. 1. 你如果設定預設開啟,已發布文章就會直接有,如果預設沒開啟,就要個別去打開
      2. h1~h6都可以建立,只要對應到就好
      3. 預設就會產生1.1,1.2,標題不需要特別標註

  4. 你好 , 第一次做目錄 很没概念 雖然你講很清楚 但幾個很初淺的問題不懂想請教 1. 為何我的 (目錄) 這2字前面會有數字 不是應該內容前面才有標數字 ? 2. h1 h2這些是指內容有幾個就要勾幾個是嗎? 3. 目錄上的字能改大一點溤? 謝謝你

    1. 1. 數字是這個外掛自動產生,所以你的標題不用再加上數字。
      2. 看你的內容有哪些標題種類,h1~h6都是標題,取決於你文章怎麼使用,但是加起來要有4個以上再使用目錄。
      3. 設定裡面的Appearance 裡面有一個是Font Size ,改變這個大小就可以了!

  5. 你好 , 第一次做目錄 很没概念 想請教 1. 為何我的目錄這2個字前面有數字 不是應該內容前面才有嗎?2. h1 h2..等是有幾個內容就要點選幾個是嗎? 3. 目錄的文字能改大一點嗎 ? 謝謝你

    1. 1. 數字是這個外掛自動產生,所以你的標題不用再加上數字。
      2. 看你的內容有哪些標題種類,h1~h6都是標題,取決於你文章怎麼使用,但是加起來要有4個以上再使用目錄。
      3. 設定裡面的Appearance 裡面有一個是Font Size ,改變這個大小就可以了!

  6. 你好,我還是不懂h1.2.3.4.5.6是表示哪幾個標題?
    是在打標題時設的H2、H3、H4嗎?還是自己算自己文章中的標題順序?感覺是前者
    我剛試了把我要的標題設在H3然後打勾也打在H3 insert那個也勾了但預覽還是沒看到是哪裡錯了嗎?

    1. 你在編輯文章時,會有選項是標題,標題有分6種,就是H1~H6。
      使用我的設定方式,基本上就是勾選H2、H3,然後總數要超過四個,就會看的到目錄了。

  7. 我想做的是只有一個標題且我把那個標題設為H3但裡面有8點是不是這樣的跑不出來啊?
    因為我試過只點H3但他卻沒東西跑出來

    1. 可以做到,到設定裡面,有一個欄位叫做 Show when ,預設是4,把它改為1就可以。
      但我不太推薦這樣做,這樣讓你的文章結構性不好,你可以改用1個H2跟8個H3。

  8. 請問為什麼安裝後目錄的確有顯示,但是點擊目錄並不會跳到指定的H2,H2都有正確顯示,但就是目錄點擊後沒反應,感謝版主協助~~

  9. 想請問阿璋, Easy Table of Contents 設定最底下可以自己設定小工具釘選選擇器,要怎麼知道「想放的位置」要打什麼進去呢?比如說我想放在右側欄位的第一個位置,我該輸入什麼?

  10. 不好意思,想要請教您,放上去文章標題下面會出現
    Warning: strpos(): Empty needle in /home/customer/www/rita168168.com/public_html/wp-content/plugins/easy-table-of-contents/includes/class.post.php on line 450

  11. 安裝完成後,選擇啟用,並且到設定的地方,將 Enable Support 的文章以及頁面打勾,然後到下面按 Save Changes

    這部分在我的網站設定都找不到,可以再講解更詳細嗎?謝謝!

  12. 整理的好詳細!謝謝分享~想請教一下,我安裝之後,好像跟這個外掛有衝突“Schema – All In One Schema Rich Snippets”,請問如果同時使用真的會遺失SEO排名嗎?謝謝你~

  13. 請問,不想要以前的文章出現『目錄』也可以?它自動只會從安裝外掛之後的文章才出現目錄嗎?或者可以選擇這篇要目錄跟不要目錄嗎?非常感謝~

  14. 想詢問一下使用這個外掛後,我該篇文章的麵包屑會自動複製一個,也就是文章呈現兩個麵包屑,但其他沒使用這個外掛就不會有這個問題,再想是否有以上情況呢?

      1. 目錄要點一下才能看到全部,可以調整成直接展開嗎?
        我看上面是寫選float的選項,但我沒這個選項可以按

  15. 你好!
    想詢問目錄要怎麼讓他置左?我目前的設定是「內容目錄對齊方式」
    勾選無(預設),目錄會出現在版面置中未置;
    勾選靠左,他會把下一排的標題吃上來。
    想詢問要怎麼置左右不會把標題吃上來呢?(像這篇文章這樣)

  16. 阿璋你好

    想問一下你的目錄外掛好像可以點擊直接跳到那個目標
    但我的它會往下滑一下才會到目的地。

    怎麼做可以取消這個「滑行」的動作?

  17. 請問安裝後目錄的確有顯示,但是點擊目錄並不會跳到指定的H2標題,都亂跳,感謝版主協助~~
    網址https://dorismaworld.com/taiwan-museum/

發表迴響

返回頂端