【教學】WordPress 建立文章目錄 Table of Content Plus 設定教學

Table of Content Plus,一個強大且方便使用的文章目錄自動產生工具。如果你和我一樣,對網頁程式碼一竅不通,又希望可以有簡單、快速的方式建立文章目錄,那 Table of Content Plus 你就不能不知道 ! 它可以快速的幫你建立出美觀而且實用的文章目錄 ! 只需要簡單的幾個步驟,就可以達成 !

Table of Content Plus | 取得方式

你可以有 2 種方式進行這個外掛的安裝。

  1. 下載 Table of Content Plus 外掛程式,至 WordPress 外掛 → 安裝外掛 → 上傳外掛 → 選取檔案安裝
  2. 直接至 WordPress 外掛 → 安裝外掛 → 關鍵字輸入 ” Table of Content Plus ” 直接進行安裝

如下圖所示:

【教學】WordPress 建立文章目錄 Table of Content Plus 設定教學 wordpress, 外掛推薦, 文章目錄, 網站架設, 設定教學

圖中標示為 ② 的,就是 Table of Content Plus 外掛,點擊【立即安裝】並【啟用】即可完成。有同樣功能的像是旁邊看到的 Easy Table of Contents 也是有同樣的功能。

【教學】WordPress 建立文章目錄 Table of Content Plus 設定教學 wordpress, 外掛推薦, 文章目錄, 網站架設, 設定教學

安裝好 Table of Content Plus 後,即會在 WordPress 後台的設定看到 TOC+ 這個功能,即可開始進行相關的設定。

Table of Content Plus | 設定教學

在 Table of Content Plus 設定的畫面中,共分 3 個頁籤。

  1. 主要選項:所有有關 Table of Content Plus 的設定,都是在這個頁面裡。
  2. Sitemap :Table of Content Plus 有提供 Sitemap 建立的功能。個人是推薦使用 RankMath,這個 SEO 外掛,你可以參考這篇文章的教學 ( RankMath 功能強大的 SEO 外掛功能 ! RankMath 使用教學 ! )
  3. 使用說明:這裡會跳轉到 Table of Content Plus 外掛的官方教學說明 ! 有需要的話可以參考。

顯示位置

【教學】WordPress 建立文章目錄 Table of Content Plus 設定教學 wordpress, 外掛推薦, 文章目錄, 網站架設, 設定教學

這裡是指你希望文章目錄是出現在哪裡 ? 預設值是 ” 內文第一個標題前 “,共有 4 個選項,你可以依照自己喜歡的位置來進行設定。

【教學】WordPress 建立文章目錄 Table of Content Plus 設定教學 wordpress, 外掛推薦, 文章目錄, 網站架設, 設定教學

上圖就是採取預設值,在第一個標題之前的樣式。個人是推薦維持預設值就好。

顯示條件

【教學】WordPress 建立文章目錄 Table of Content Plus 設定教學 wordpress, 外掛推薦, 文章目錄, 網站架設, 設定教學

這個設定的意思在進行之前,先要給你一個基本網頁文章架構的概念。

通常一篇文章之中,只有會一個標註為 H1 的標題,就是指文章的標題。而其他標註為 H2 開始的,都稱之為次標題,一直可以標示到 H6 為止。

而顯示條件的部分,就是會自動去偵測,在你的文章內文之中,除了 H1 以外,還有哪些被標註為 H2 ~ H6 的部分。而以 Table of Content Plus 外掛的預設值是 4,就是指,偵測到有 4 個 ( 含 ) 以上的標題,就會建立文章目錄。

【教學】WordPress 建立文章目錄 Table of Content Plus 設定教學 wordpress, 外掛推薦, 文章目錄, 網站架設, 設定教學

以這篇文章來看,我在內容中,已經使用到了 2 個 H2、2 個 H3,而在文章目錄上的呈現,就會如上圖所呈現的樣子。

個人建議這個數字設定為 3 就好了。

為以下內容類型自動插入目錄

【教學】WordPress 建立文章目錄 Table of Content Plus 設定教學 wordpress, 外掛推薦, 文章目錄, 網站架設, 設定教學

這個設定是指,你要將 Table of Content Plus 外掛,在哪些地方插入文章目錄 ? 預設值為「Page」,因為我們只希望他出現在文章上,所以勾選「Post」就好了。

目錄標題文字

【教學】WordPress 建立文章目錄 Table of Content Plus 設定教學 wordpress, 外掛推薦, 文章目錄, 網站架設, 設定教學

這是用來設定文章目錄上,你希望出現的文字方式。預設是 Contents,我個人是設定成:內容快速索引;另外切換的部分,個人是使用顯示和隱藏。提供給你參考看看。

顯示目錄層級 / 編號

【教學】WordPress 建立文章目錄 Table of Content Plus 設定教學 wordpress, 外掛推薦, 文章目錄, 網站架設, 設定教學

預設值都是打勾開啟。

【教學】WordPress 建立文章目錄 Table of Content Plus 設定教學 wordpress, 外掛推薦, 文章目錄, 網站架設, 設定教學

如果都不勾,是在文章目錄上,看不出層級的差別 ( 如上圖 )。

【教學】WordPress 建立文章目錄 Table of Content Plus 設定教學 wordpress, 外掛推薦, 文章目錄, 網站架設, 設定教學

開啟目錄編號後,就會自動進行編碼。如上圖所示。我個人是只有把層級打開,編號的部分不勾,因為如果在子層級裡,我想加入編號時,我會手動在標題的前頭加上編號。

啟用平滑捲動效果

【教學】WordPress 建立文章目錄 Table of Content Plus 設定教學 wordpress, 外掛推薦, 文章目錄, 網站架設, 設定教學

這個預設值是不勾的,我個人是會勾選起來,這樣用戶在點擊文章想進快速索引的時後,是會進行平滑的捲動。建議勾選。

其他設定

【教學】WordPress 建立文章目錄 Table of Content Plus 設定教學 wordpress, 外掛推薦, 文章目錄, 網站架設, 設定教學

寬度上的設定,可以選擇「固定寬度」、「相對寬度」、「自訂寬度」等 3 種。我個人是採預設值,如果你有因為整體性畫面上的考量,可以嘗試其他的設定值。

目錄對齊內文的方式我也是採用預設值,設定上可選擇「靠左」、「靠右」等 2 種選擇。

字型大小這裡我是採用百分比 % 來說定。即指出現文章目錄上的字體,是與標題設定的字體大小的多少百分比。你也可以使用固定大小,來依個人的需求進行其他調整。

目錄呈現方式

【教學】WordPress 建立文章目錄 Table of Content Plus 設定教學 wordpress, 外掛推薦, 文章目錄, 網站架設, 設定教學

我個人比較懶,都是採預設值。如果原本 Table of Content Plus 中沒有適合你目前佈景主題的部分,可以選擇使用自訂。去客製屬於自己文章目錄的呈現色彩。

Table of Content Plus | 進階設定

【教學】WordPress 建立文章目錄 Table of Content Plus 設定教學 wordpress, 外掛推薦, 文章目錄, 網站架設, 設定教學

在最下方還有個「進階設定」。這裡有 3 個地方的設定建議。

  1. 小寫:這個選項可打勾,將於自動帶入錨點都是小寫為主。
  2. 標題層級:預設是 H1 ~ H6,我個人是只勾選 H2、3、4 ,即指只有在內文出現的 H2、3、4 才會列入文章目錄的外掛之中。這個部分可以依你實際使用的狀況來進行調整。
  3. 排除的標題:這裡是用來排除,如果你的文章內文,有加入其他「模版」有些模版亦會設置 H 標題的文章標註。但可能你不希望出現在文章目錄之中的,這時就可以在這裡進行排除的的動作。

以上是 Table of Content Plus 的設定教學,有任何其他的問題,歡迎在下方留言的地方留下你的問題,我將會盡快回覆你喔 ! 或是透過私訊我,來與 Joyy 聯絡,希望你使用上非常順利。

打造網路賺錢基地 實戰課程

▲ 讓你擁有一個能帶來現金流的網路賺錢基地,建立網路收入之路,實踐打造網路賺錢基地的策略與技巧 !

其他 WordPress 網站架設 相關文章推薦

  • 【教學】免費收發域名郵件教學 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 Mailbox
    Cloudways 是我目前使用最穩定的網站主機,價格、服務、性價比 … 等等,在比較之下,真的都沒話說。而長期使用之下,你一定會需要建置一個 域名信箱,在使用 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家就好了的心情呢?其實如果已經在某家買好域名,是可以進行移轉的,今天這篇內容,就是和分享,域名移轉時,你需要注意的事項。
  • 【教學】WP Table Builder好用的Table表格外掛推薦
    近期在協助客戶架設網站時,因為需要表格來整理資訊。查到這一款Table外掛WP Table Builder,很好使用,呈現的效果很不錯。簡單整理使用方式,提供給有需要的你。

About Joyy

網路行銷玩家
現任職於顧問公司擔任行銷。分享許多網路行銷與網路賺錢相關知識 ! 期待透過更多免費的分享,讓更多人學到如何有效的從網路上建立屬於你自己的收入來源。

粉絲專頁

最新文章

Udemy 線上課程

留下您的問題: