Table of Content Plus，一個強大且方便使用的文章目錄自動產生工具。如果你和我一樣，對網頁程式碼一竅不通，又希望可以有簡單、快速的方式建立文章目錄，那 Table of Content Plus 你就不能不知道 ! 它可以快速的幫你建立出美觀而且實用的文章目錄 ! 只需要簡單的幾個步驟，就可以達成 !
內容快速索引
Table of Content Plus | 取得方式
你可以有 2 種方式進行這個外掛的安裝。
- 下載 Table of Content Plus 外掛程式，至 WordPress 外掛 → 安裝外掛 → 上傳外掛 → 選取檔案安裝
- 直接至 WordPress 外掛 → 安裝外掛 → 關鍵字輸入 ” Table of Content Plus ” 直接進行安裝
如下圖所示：
圖中標示為 ② 的，就是 Table of Content Plus 外掛，點擊【立即安裝】並【啟用】即可完成。有同樣功能的像是旁邊看到的 Easy Table of Contents 也是有同樣的功能。
安裝好 Table of Content Plus 後，即會在 WordPress 後台的設定看到 TOC+ 這個功能，即可開始進行相關的設定。
Table of Content Plus | 設定教學
在 Table of Content Plus 設定的畫面中，共分 3 個頁籤。
- 主要選項：所有有關 Table of Content Plus 的設定，都是在這個頁面裡。
- Sitemap ：Table of Content Plus 有提供 Sitemap 建立的功能。個人是推薦使用 RankMath，這個 SEO 外掛，你可以參考這篇文章的教學 ( RankMath 功能強大的 SEO 外掛功能 ! RankMath 使用教學 ! )
- 使用說明：這裡會跳轉到 Table of Content Plus 外掛的官方教學說明 ! 有需要的話可以參考。
顯示位置
這裡是指你希望文章目錄是出現在哪裡 ? 預設值是 ” 內文第一個標題前 “，共有 4 個選項，你可以依照自己喜歡的位置來進行設定。
上圖就是採取預設值，在第一個標題之前的樣式。個人是推薦維持預設值就好。
顯示條件
這個設定的意思在進行之前，先要給你一個基本網頁文章架構的概念。
通常一篇文章之中，只有會一個標註為 H1 的標題，就是指文章的標題。而其他標註為 H2 開始的，都稱之為次標題，一直可以標示到 H6 為止。
而顯示條件的部分，就是會自動去偵測，在你的文章內文之中，除了 H1 以外，還有哪些被標註為 H2 ~ H6 的部分。而以 Table of Content Plus 外掛的預設值是 4，就是指，偵測到有 4 個 ( 含 ) 以上的標題，就會建立文章目錄。
以這篇文章來看，我在內容中，已經使用到了 2 個 H2、2 個 H3，而在文章目錄上的呈現，就會如上圖所呈現的樣子。
個人建議這個數字設定為 3 就好了。
為以下內容類型自動插入目錄
這個設定是指，你要將 Table of Content Plus 外掛，在哪些地方插入文章目錄 ? 預設值為「Page」，因為我們只希望他出現在文章上，所以勾選「Post」就好了。
目錄標題文字
這是用來設定文章目錄上，你希望出現的文字方式。預設是 Contents，我個人是設定成：內容快速索引；另外切換的部分，個人是使用顯示和隱藏。提供給你參考看看。
顯示目錄層級 / 編號
預設值都是打勾開啟。
如果都不勾，是在文章目錄上，看不出層級的差別 ( 如上圖 )。
開啟目錄編號後，就會自動進行編碼。如上圖所示。我個人是只有把層級打開，編號的部分不勾，因為如果在子層級裡，我想加入編號時，我會手動在標題的前頭加上編號。
啟用平滑捲動效果
這個預設值是不勾的，我個人是會勾選起來，這樣用戶在點擊文章想進快速索引的時後，是會進行平滑的捲動。建議勾選。
其他設定
寬度上的設定，可以選擇「固定寬度」、「相對寬度」、「自訂寬度」等 3 種。我個人是採預設值，如果你有因為整體性畫面上的考量，可以嘗試其他的設定值。
目錄對齊內文的方式我也是採用預設值，設定上可選擇「靠左」、「靠右」等 2 種選擇。
字型大小這裡我是採用百分比 % 來說定。即指出現文章目錄上的字體，是與標題設定的字體大小的多少百分比。你也可以使用固定大小，來依個人的需求進行其他調整。
目錄呈現方式
我個人比較懶，都是採預設值。如果原本 Table of Content Plus 中沒有適合你目前佈景主題的部分，可以選擇使用自訂。去客製屬於自己文章目錄的呈現色彩。
Table of Content Plus | 進階設定
在最下方還有個「進階設定」。這裡有 3 個地方的設定建議。
- 小寫：這個選項可打勾，將於自動帶入錨點都是小寫為主。
- 標題層級：預設是 H1 ~ H6，我個人是只勾選 H2、3、4 ，即指只有在內文出現的 H2、3、4 才會列入文章目錄的外掛之中。這個部分可以依你實際使用的狀況來進行調整。
- 排除的標題：這裡是用來排除，如果你的文章內文，有加入其他「模版」有些模版亦會設置 H 標題的文章標註。但可能你不希望出現在文章目錄之中的，這時就可以在這裡進行排除的的動作。
以上是 Table of Content Plus 的設定教學，有任何其他的問題，歡迎在下方留言的地方留下你的問題，我將會盡快回覆你喔 ! 或是透過私訊我，來與 Joyy 聯絡，希望你使用上非常順利。
▲ 讓你擁有一個能帶來現金流的網路賺錢基地，建立網路收入之路，實踐打造網路賺錢基地的策略與技巧 !
其他 WordPress 網站架設 相關文章推薦
- 【教學】Analytics Insight 外掛使用教學分享 ! JetPack 流量統計替代外掛 !Analytics Insight 是一款結合 Google Analytics 的免費外掛工具。可以有幫助地… 閱讀全文: 【教學】Analytics Insight 外掛使用教學分享 ! JetPack 流量統計替代外掛 !
- 【教學】免費收發域名郵件教學 Cloudflare 郵件轉址與使用 Gmail 郵件收發域名信件 !這篇文章將教你如何免費使用你自己的域名郵件。通常，使用自己的域名來發送和接收郵件需要支付費用，但透過 Cloudflare 和 Gmai l，就可以免費實現這一目標。這不僅節省了費用，還提供了一個方便快速的解決方案。
- 【教學】Rank Math 功能強大的 SEO 外掛功能 ! Rank Math 使用教學 !Rank Math SEO 是目前使用上最好的 WordPress SEO 外掛，在這外掛程式中結合了許多 SEO 工具的功能，可幫助我們在寫作時，網站建立時，去貼近 SEO 規則，增加流量。
- 【教學】WordPress 防止垃圾留言 Akismet Anti-Spam 設定教學數以百萬的使用者採用 Akismet，它是保護網站遠離垃圾留言的絕佳方式。Akismet 是 WordPress 使用者幾乎都會安排的一套防止垃圾留言的外掛工具。而且免費的功能，幾乎就已經可以完完全全協助防止 99.99% 的垃圾留言 ! 功能如此強大，怎麼可以不使用在自己的網站呢 ?
- 【教學】WordPress 建立文章目錄 Table of Content Plus 設定教學Table of Content Plus，一個強大且方便使用的文章目錄自動產生工具。如果你和我一樣，對網頁程式碼一竅不通，又希望可以有簡單、快速的方式建立文章目錄，那 Table of Content Plus 你就不能不知道 !
- 【教學】Cloudways Staging Site 使用方式介紹 ! 讓你更新網站內容更方便 !許多主機服務商都會有提供一個叫 Staging Site 的功能，也稱之為臨時網站。這功能可以幫助你在想更新網站時，幫你複製出一個完全相同的臨時網享，讓你在更新網站內容時，不必怕更動到網站目前的現況，就算是大幅度的更新，也不用怛心。在這篇內容中，將會和你快速分享有關 Cloudways Staging Site 功能的使用詳細流程，幫助你無痛更新你的網站內容。
- 【教學】Post SMTP 使用方式 ! 讓建製的 WordPress 網站可以進行郵件寄送 !使用 Post SMTP 這個外掛，可以幫助你的網站進行郵件的發送，Post SMTP 是一套非常簡單使用，功能又特別強大的一個寄件外掛，讓你的 WordPress 網站，可以讓訪客在網站上完成某些動作時，即進行郵件的推播與發送，進而維持好與訪客之間的互動。Post SMTP 的設定方式很簡單，接下來就帶你來一步步完成吧 !
- 【教學】Cloudways 如何設定域名信箱 Domain MailboxCloudways 是我目前使用最穩定的網站主機，價格、服務、性價比 … 等等，在比較之下，真的都沒話說。而長期使用之下，你一定會需要建置一個 域名信箱，在使用 Cloudways 的情況下，如何快速的為自己建立出 域名信箱，在這篇教學中，將會完整和你分享 Cloudways 如何設定域名信箱，讓你從無到有一次完成 !
- 【Divi教學】Divi主題 SEO 基礎設定說明，簡易SEO功能介紹Divi主題之中，針對SEO的功能有著其基礎設定。在這次divi教學裡，將會教會你如何將divi主題裡的SEO功能進行基礎設定，這在divi教學中可則是非常基礎的一課。了解基礎設定後，後續若要使用其他SEO外掛，也就更能明白為什麼需要如此設定。你也可以選擇直接使用SEO外掛，在divi主題中，可以直接與外掛相支援。
- 【Divi教學】Divi主題 Navigation 導航選項設定Divi主題之下，可以透過原本的divi主題設定，來決定導航列(Navigation)所能夠呈現的功能。在這篇文章中，將詳細和你說明在Divi主題下的設定中，導航列的所有相關設定方式。
- 【Divi教學】Divi主題Options基本設置選項教學在divi主題中，由於沒有中文版本，有中文的版本在使用上常遇到更新就變的無法使用。 在這整理divi主題的使用細節，來幫助更多喜好使用divi主題的人，可以有一個正常參考的地方。 文章在一樓喔
- 【分享】如何進行網址域名移轉？NameCheap移轉至Gandi實際操作經驗分享網站域名服務商很多，你是不是曾經有過，早知道選xxx家就好了的心情呢？其實如果已經在某家買好域名，是可以進行移轉的，今天這篇內容，就是和分享，域名移轉時，你需要注意的事項。
