最後更新日期:2019 年 11 月 24 日
本篇文章要教你如何使用 Easy Table of Contents ,自動產生你的WordPress目錄,讓大家在觀看你的文章時,可以迅速的了解整篇文章的架構,也可以迅速跳到自己喜歡的章節觀看。
想要知道WordPress有哪些好用的主題或是外掛,可以關注我這篇文章:2019年WordPress推薦主題與外掛,最新優惠持續更新中!

目錄介紹
為什麼要使用目錄 ?
根據Google SEO的說明,文章的結構化也是SEO排行的一大重點。
什麼是文章的結構化呢? 就是文章內有正確的使用大標題、小標題、內文,也就是 H1、H2、H3、H4 等等,如下圖所示:

尤其是在長篇文章內,更需要有這樣子的結構,不僅是為了SEO,更是為了讓讀者能夠輕鬆閱讀內容。
目錄正是提醒作者文章結構化的一個好工具,因為一個不好的結構,會做出一個很醜的目錄,同時也能夠快速觀看自己想要看的章節。
使用目錄的優缺點
♥ 優點:
- 簡潔明瞭、快速達到章節
- 提醒作者文章的結構化
- 長篇文章必備,否則要滑非常久
♠ 缺點:
- 設定麻煩
- 在不同裝置的版面,有機會破圖
- 操作不好,可能會降低網站的效率,或是達到錯誤的位置造成反效果。
為什麼要使用 Easy Table of Contents ?
因為上述的缺點,所以有人為了解決不便利性,做出了這個 WordPress 外掛。
使用 Easy Table of Contents 可以在文章發布的時候,自動產生出目錄,也可以設定自己要產生哪些內容。
接下來的章節,我會教你如何使用 Easy Table of Contents。
如何使用 Easy Table of Contents ?
如何安裝
在 WordPress 的後台,點選安裝外掛,並且搜尋 Easy Table of Contents 。

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

step 2
後面的設定基本上是預設就好,但有些人可能會有自己的需求,我還是會稍微介紹一下。
Appearance 可以設定目錄的大小、排版、顏色,如果想快速改變看看樣子,可以改 Theme 的顏色,有官方配置好的搭配。

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

使用方式
點選編輯文章或是新增文章,拉到下面,就會看到 Table of Contents 的欄位。
首先勾選 Insert table of contents ,啟用這篇文章的目錄。
以我這篇文章為例,我使用的 Heading 有 h2、h3,所以我將 h2、h3 打勾,其他的不要勾,避免不必要的 Heading。
設定完成後,發佈文章或是儲存草稿瀏覽,就可以看見目錄了。

使用 Easy Table of Contents 的優缺點
優點:
- 快速建立,不用一個一個設定錨點。
- 可以很快的選取要使用哪些Heading。
- 免費! 很多目錄外掛都是付費的。
缺點:
- 偶爾會跑出不相關的字,像是我會跑出 “相關” 的欄位,所以才會額外排出這個字
- 版型沒有太多選擇,但可以自己改 CSS。
總結
我認為 Easy Table of Contents 對我來說是必裝的,因為可以自動產生,我不是一個太勤勞的人,透過它我只要打勾就可以產生目錄了。
如果還有任何針對這個外掛的問題,歡迎在下面留言讓我知道。
如果還不知道 WordPress 怎麼建立的 , 可以參考 【架站教學】新手快速架站教學,使用Cloudways架設WordPress網站!
補充一些提問的回答
1. 為什麼目錄沒有生成?
⇒ 依照我的設定方式,至少需要H2、H3加起來有4個以上,才會產生目錄,或是在文章底下沒有勾選 insertion of the table of contents 的選項。
2. 可以在已發布的文章中加目錄?
⇒ 可以,你有兩種設定方式。
- 在設定的地方,把 Auto Insert 欄位的文章以及頁面勾選起來,讓文章自動添加。
- 編輯之前的文章,把 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 線上課程,如果有興趣的人,歡迎點擊下方連結。
從 0 開始建立部落格
站長之路手把手教你如何透過部落格開始賺錢,內容包含 WordPress、部落格經營、網路行銷,帶你成為一個成功的部落格站長!
WordPress 架站推薦
新手架站:【架站教學】專門為WordPress打造的主機?WPWebHost 完整教學!高流量網站:【架站教學】新手快速架站教學,使用Cloudways架設WordPress網站!
新手必看: WordPress 必裝主題與外掛推薦、學習管道、最新優惠統整!
學習更多:查看我是如何透過 WordPress 架設部落格,賺取人生第一桶金!
WordPress 學習書籍推薦
WordPress 無敵架站手冊:架站新手都想擁有:教你打造個人專屬網站

書籍介紹
這本書教你從零開始建立起一個全功能的WordPress網站,從下載與安裝WordPress主軟體開始到連結、媒體、選單、圖像、展示區、管理、用家建檔等等。 甚至還有教你如何開發主題、外掛、小工具,從入門到進階的教學都很完整。推薦原因
這本書原作者是波蘭人,原文是英文,後來經由免費資源網路社群的作者 Pseric 翻譯成中文書。 WordPress 目前的中文書可說是少之又少,這本不僅是中文書,內容又非常完整,絕對是學習WordPress的首選書籍!購買 WordPress 無敵架站手冊
WordPress Plugins百大外掛精選(火力加強版)

書籍介紹
這本書教你從基礎架站、備份保存到各式各樣的外掛主題,讓你想裝什麼就裝什麼,建置專屬自己獨一無二的多功能發佈平台。 作者特別精選了各類型的外掛做介紹,只要你想的到的功能幾乎都在裡面,匯集了讀者們一直喜愛的外掛程式介紹,並且添加了最新的外掛程式,更貼近現在的讀者需求。推薦原因
這本書作者是免費資源網路社群的作者 Pseric,他的網站知名度非常的高,也是透過 WordPress 架設而成,因此對於外掛的理解,絕對是數一數二。購買 WordPress Plugins 百大外掛精選(火力加強版)
支持阿璋的新書《打開網路就有錢》,裡面分享許多自媒體以及投資理財的知識,非常適合網路創業者以及想要增加額外收入的上班族閱讀。
如果你對幣圈資訊有興趣,可以訂閱此電子報:幣圈最新資訊
我目前有成立一個亞洲最大的幣圈自媒體 Discord 社群:Crypto Mind 加密腦
推坑阿璋超愛的商品,歡迎加入團購群:阿璋好物團購 LINE 社群
12篇文章手把手教你如何透過部落格開始賺錢:站長之路
更多相關社群連結:工具王阿璋社群列表
本站有部分連結與商家有合作關係,透過我的連結購買,我會獲得少數佣金,讓我可以持續營運網站,但並不會影響您的任何權益,詳情查看免責聲明。
如果我的文章對你有幫助,歡迎贊助我一杯咖啡!
本站所有內容皆為阿璋個人經驗分享,如有涉及投資請謹慎評估,阿璋不做任何投資建議。
文章引用請來信索取授權,否則將保留法律追訴權。
by Johntool-工具王阿璋
剛好也需要使用,謝謝分享
有幫助到你就好~
解釋得好清楚喔!正好煩惱著該選哪個plugin,真的非常謝謝您的介紹和說明!
接下來我也會介紹其它很好用的plugin,也可以多多關注!!
這篇很讚,講得很清楚,我也是用這個外掛,不過 CSS 總是調不好,乾脆只用預設XD
我也是沒有美感XD 所以乾脆就用預設的,別人設計師總不是做假的
你的教學,淺而易懂,剛好要寫文章立馬派上用場,超級感謝,期待你更多教學~
謝謝你耐心的觀看,有幫助到大家是最好的
謝謝你,剛好需要這個功能,介紹的非常詳細,非常的實用
不會,有提供幫助我就很開心了~
非常實用和淺顯易懂,幫助了我架設文章目錄,感謝分享!
謝謝你的觀看
非常实用, 正在烦恼怎么把文章排班的精致一些, 正好看到你的文章, 来的真及时!! 感恩分享????
目錄真的是一個讓文章排版精緻的好工具!
很細心的說明
也很實用
謝謝你提供很棒的專業
希望還能多跟你學東西
歡迎之後繼續看我的教學
感謝版主的分享
非常淺顯易懂又清楚!
已架設好囉~
之後遇到問題再來問版主! 哈哈
沒有問題,有遇到任何狀況都可以跟我說,我會盡我所能幫大家解決。
哇!網站上有目錄方便多了!感謝分享~
目錄真的很方便!
這樣讓網頁看起來更方便閱讀了好棒!
謝謝提供~~~
真的很方便
感謝教學~~~
長篇文章真的好需要
有了目錄閱讀章節更有效率!!!
可以為使用者體驗加分!!
不會~ 喜歡的話可以幫忙分享或是按讚,也可以訂閱我的部落格
真是方便的外掛,目前也還在研究Wordprss,覺得有趣。
很方便,照著我說的做就好
非常好的分享 ,真的是5分钟就弄得好了 ! 哈哈 我这种新手就抱着试一试的心态,没想到就成功了,让我的文章瞬间变得更整齐了 ~感谢你~期待你更多的分享
真的! 試試看就對了,沒有試都不知道,可以右邊訂閱我的部落格多多關注,謝謝!
這篇文章真的是很實用,而且淺顯易懂,太適合我們這些懶人了,多了目錄網站真的清楚很多!
懶人就是要用好外掛~
阿璋我又有問題了~
我某篇文章的目錄非常長,能不能把它分段切成兩行呢?
這個外掛目前沒有什麼自動的空間,未來若有研究出來我會再補充,如果要切斷的話,我建議用錨點手動加上去吧!
你寫的好清楚,我照著做就完成了目錄~
可以再請教其他問題嗎?
希望你也可以寫一篇幫助電腦白痴的我> <謝謝你!!!!
可以,請問是什麼問題呢
更新文章后还是没看到目录
你要確認你文章下面有打勾,而且確定有標題在H2、H3、H4等等有沒有對應到
感謝你的分享,簡單好操作!
謝謝你的觀看
真的好實用喔~~太感謝了~~
覺得實用的話,麻煩再幫我多分享,謝謝!
非常感謝你 沒想到同是社團的成員 真的很好用QQ
覺得好用就太好了!!
非常感謝介紹,這我很需要~
可以另外請教網頁上的”回到頂端”
這個功能要怎麼做呢?
我是透過Scroll Top的外掛 , 另外也有很多主題本身就有
设定好后 如果没有需要用到的话 是不是无视它呢 还是要去到设定做更改?
無視就好,照我的設定預設是沒開啟的
感謝介紹!
我在操作時,遇到一些困難,煩請幫忙。
請問:
1) 可以在已發布的文章中加目錄?
2) 如果目錄有7個大項,是否建立不了目錄?
3) 是不是標題前寫 1., 1.1., 1.2. … ,再勾它就會自動生成目錄,不需要另外在段落中再寫遍呢?
謝謝
1. 你如果設定預設開啟,已發布文章就會直接有,如果預設沒開啟,就要個別去打開
2. h1~h6都可以建立,只要對應到就好
3. 預設就會產生1.1,1.2,標題不需要特別標註
成功建立目錄了!謝謝你!
再請教標題框內的顏色、文字大小,是可以變更的嗎?
如果不會寫程式語法的話,建議改設定內看的到的顏色跟大小就好
了解,謝謝你。
阿璋 感謝 這篇幫助很大,正需要他呢!!
不會,有幫助就好~
謝謝阿璋!超詳細的一篇文章!操作變得好簡單!感謝分享!
謝謝你~ 麻煩再幫我多分享
你好~ 我想請問一下 用這個外掛生成的目錄,有辦法指定目錄的位置嗎?
硬要說算是有,自己改CSS語法,或是小工具也可以拉過去
謝謝阿璋!非常簡易實用的教學,讓我的網頁文章看起來更清楚有架構了!
不客氣!
你好 , 第一次做目錄 很没概念 雖然你講很清楚 但幾個很初淺的問題不懂想請教 1. 為何我的 (目錄) 這2字前面會有數字 不是應該內容前面才有標數字 ? 2. h1 h2這些是指內容有幾個就要勾幾個是嗎? 3. 目錄上的字能改大一點溤? 謝謝你
1. 數字是這個外掛自動產生,所以你的標題不用再加上數字。
2. 看你的內容有哪些標題種類,h1~h6都是標題,取決於你文章怎麼使用,但是加起來要有4個以上再使用目錄。
3. 設定裡面的Appearance 裡面有一個是Font Size ,改變這個大小就可以了!
你好 , 第一次做目錄 很没概念 想請教 1. 為何我的目錄這2個字前面有數字 不是應該內容前面才有嗎?2. h1 h2..等是有幾個內容就要點選幾個是嗎? 3. 目錄的文字能改大一點嗎 ? 謝謝你
1. 數字是這個外掛自動產生,所以你的標題不用再加上數字。
2. 看你的內容有哪些標題種類,h1~h6都是標題,取決於你文章怎麼使用,但是加起來要有4個以上再使用目錄。
3. 設定裡面的Appearance 裡面有一個是Font Size ,改變這個大小就可以了!
社團有你這麼懂系統又肯無私幫忙同學是我們的福氣,非常感謝你的回覆!
能幫助大家,我就很開心了!
還是沒有目錄出現….請問替代空格那裏要輸入嗎
麻煩你把網址給我看看 你確定你有四個標題以上嗎
還是沒有目錄…..
請問解決了嗎? 可以看一下其他人留言的回覆哦! 還有問題可以問我~
你有幾張圖片我看不到,麻煩修復step 1, step 2, step 3以及使用方式的圖片,謝謝。
謝謝你,我已經修改好了
想問大大側邊攔的訂閱欄是怎麼做的呢? 不同的樣式都可以做出來嗎
這是 Jetpack 做出來的,詳細方式可以參考 【WordPress教學】強大的官方推薦外掛,Jetpack完整設定教學! https://www.johntool.com/wordpress-jetpack-setting/
請問 訂閱那欄跟回到最上小按鈕怎麼做呢
訂閱我是用Jetpack的訂閱功能,再稍微改一點點CSS。
回到最上我是用Scroll Top
想問左邊欄的訂閱和回到最上層的小按鈕怎麼做的?
訂閱我是用Jetpack的訂閱功能,再稍微改一點點CSS。
回到最上我是用Scroll Top
是小工具裡面的功能嗎
要安裝外掛,看我回復你的
https://shanghaifreetravel.com/2019-shanghai-attractions/#1
您好 有目錄了
但是我想問一下 為何會有後面1.1 2.2 3.3這樣
想要直接1 2 3 這樣就好 不要有.後面的數字
把設定裡面的 Show as Hierarchy 打勾取消掉
你好,我還是不懂h1.2.3.4.5.6是表示哪幾個標題?
是在打標題時設的H2、H3、H4嗎?還是自己算自己文章中的標題順序?感覺是前者
我剛試了把我要的標題設在H3然後打勾也打在H3 insert那個也勾了但預覽還是沒看到是哪裡錯了嗎?
你在編輯文章時,會有選項是標題,標題有分6種,就是H1~H6。
使用我的設定方式,基本上就是勾選H2、H3,然後總數要超過四個,就會看的到目錄了。
我想做的是只有一個標題且我把那個標題設為H3但裡面有8點是不是這樣的跑不出來啊?
因為我試過只點H3但他卻沒東西跑出來
可以做到,到設定裡面,有一個欄位叫做 Show when ,預設是4,把它改為1就可以。
但我不太推薦這樣做,這樣讓你的文章結構性不好,你可以改用1個H2跟8個H3。
https://shanghaifreetravel.com/shanghai-bar/
我有勾選掉了 可是還是有…
可以幫我看一下嗎~
什麼意思
不好意思想請問 ,我的目錄不是寫中文的[目錄 ]是寫英文[table of contents],怎樣才能改為中文呢?
你到設定裡面的 Header Label , 去改它的內容就是了。
非常實用和淺顯易懂!!
感謝! 可以的話幫忙多分享
“目錄”在主頁沒看到阿?
你的主頁是指?
你必須一篇文章超過4個h2、h3標題才有
要怎麼用標題?不是就一個標題嗎?
你編輯器最上方的是H1標題,標題總共有分為H1~H6,編輯器內可以更改
再試試看
加油! 有問題可以截圖到粉絲團,比較好幫你處理
謝謝阿璋,讓我第一篇最新產出的文章就可以有一目了然的目錄,這個外掛真的超好用,真的是功德無量。
不客氣~ 記得幫我多分享!
請問我不小心把他刪掉之後想要在安裝卻顯示安裝失敗,已在資料夾中xxx的怎麼辦
去檔案管理員,到 wp-content/plugins,把 easy-table-of-contents 資料夾刪掉。
感謝阿璋,剛剛要查怎麼建立目錄在你這邊馬上就有解答了!!謝謝你~~
不客氣,記得幫我分享哦!
請問為什麼安裝後目錄的確有顯示,但是點擊目錄並不會跳到指定的H2,H2都有正確顯示,但就是目錄點擊後沒反應,感謝版主協助~~
麻煩提供網址給我參考哦
https://freepeoplelife.com/workinchina/
感謝~
不客氣!
今天elementor推出目錄功能了,目前先改用那個,如果每篇文章都用elementor編,是不是很占資源?會造成網站較緩慢?
文章不要用 Elementor 來做,未來萬一 Elementor 不盛行,你會改到瘋掉。
拿來製作少數精美頁面就好~
你的留言板回覆到某個階程就無法在留言的右下角按"reply了,感謝建議喔~
這是為了讓寬度不會太大的機制,不客氣~
请问阿璋,这个片段代码:[ending]里的外部链接,如免责声明的外部链接是如何加入进去的?
要用 html 代碼加進去哦
请问阿璋,如何设置每篇文章结尾处中加入图片和图片链接呢?不可能每天都重新导入图片吧?
一樣要額外再用 html 語法
好的,谢谢你的回复,看来需要了解一点html代码……期待你的教程哦
如果要客製化,就稍微去學一下吧!
确实需要客制化,所以还是要去学习一下……谢谢提醒哦
是不是可以参考文章内的一些图片html语法呢……就怕不会设置导致死机……
建議你可以用 Gutenberg 編輯器的可重複區塊,這可以達到一樣的效果,也不用寫語法。
好的,谢谢阿璋提供方法……
教學簡單易懂,讓我快速地建立目錄了!=)
不客氣,記得幫我多分享~
您好John,請問 Show as Hierarchy 是在哪裡設定?
版面是中文版,請問是哪一個選項打勾? 謝謝您
顯示內容目錄層級
很實用,更重要的是淺顯易懂,謝謝版主帶給我高價值的文章~~~超棒的!
不客氣哦! 記得幫我多分享~
想請問那兩本wordpress的書籍,適合wordpress新手看嗎,會不會有程式語言或是相關太專業而看不懂的內容?
不會哦,都是給新手看的基本觀念
想請問阿璋, Easy Table of Contents 設定最底下可以自己設定小工具釘選選擇器,要怎麼知道「想放的位置」要打什麼進去呢?比如說我想放在右側欄位的第一個位置,我該輸入什麼?
那個比較複雜,你要學會開發者工具,看你要的欄位的 id
不好意思,想要請教您,放上去文章標題下面會出現
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
重新安裝看看,這我不清楚欸
想請問自動生成出來的目錄有錨點嗎?
想要再下方設置按鈕 點擊後能夠自動跳回目錄 不知道該怎麼做~
如果要這樣要自己手動設定錨點哦
安裝完成後,選擇啟用,並且到設定的地方,將 Enable Support 的文章以及頁面打勾,然後到下面按 Save Changes
這部分在我的網站設定都找不到,可以再講解更詳細嗎?謝謝!
麻煩自己摸索哦,我相信你未來會遇到更多比這個更困難的問題
整理的好詳細!謝謝分享~想請教一下,我安裝之後,好像跟這個外掛有衝突“Schema – All In One Schema Rich Snippets”,請問如果同時使用真的會遺失SEO排名嗎?謝謝你~
這點我不能保證哦!
請問,不想要以前的文章出現『目錄』也可以?它自動只會從安裝外掛之後的文章才出現目錄嗎?或者可以選擇這篇要目錄跟不要目錄嗎?非常感謝~
不要勾選自動目錄,一率手動勾選
想詢問一下使用這個外掛後,我該篇文章的麵包屑會自動複製一個,也就是文章呈現兩個麵包屑,但其他沒使用這個外掛就不會有這個問題,再想是否有以上情況呢?
我目前沒有遇到此狀況,有可能與佈景主題有關,或是把其中一個麵包屑關閉
沒有float,如何讓目錄直接展開
我不太懂你的意思哦
目錄要點一下才能看到全部,可以調整成直接展開嗎?
我看上面是寫選float的選項,但我沒這個選項可以按
不要勾選「預設隱藏內容目錄」,文章比較舊一點,外掛有更新。
你好!
想詢問目錄要怎麼讓他置左?我目前的設定是「內容目錄對齊方式」
勾選無(預設),目錄會出現在版面置中未置;
勾選靠左,他會把下一排的標題吃上來。
想詢問要怎麼置左右不會把標題吃上來呢?(像這篇文章這樣)
我這設定方式跟教學是一樣的,有可能是你的主題影響
请问怎样添加h7 在目录
沒有 h7
阿璋你好
想問一下你的目錄外掛好像可以點擊直接跳到那個目標
但我的它會往下滑一下才會到目的地。
怎麼做可以取消這個「滑行」的動作?
關閉平滑捲動的選項