WordPress 教學,TinyMCE Advanced 輕鬆製作你的文章目錄

還記的學生時期要寫作文時,遇到不會寫的字,就必須要查字典,可是字典這麼厚一本,要從何找起?於是在學習如何查字典之前,必須先學會看字典目錄。索引 Index,是書籍中重要的組成部分,它把書中重要名詞羅列出來,並給予它們相應的頁碼,只為了方便讀者快速找尋該名詞所需的資訊,因此可以說目錄的用意就在於索引

一本厚厚的書籍,如果有目錄快速瀏覽,這樣閱讀起來會方便許多

目錄對文章的重要性

既然目錄對於書籍有著重要的方便性,那麼目錄對於文章呢?其實也是一樣的。在撰寫 WordPress 文章當中,有了目錄,就容易了解文章結構,如果恰巧文章是屬於長篇大論,沒有了目錄,那麼要花多少時間去找尋你要的資訊呢?

現今社會忙碌於生活中,步調氛圍非常緊湊,網路資訊琳瑯滿目,願意花時間仔細去找尋的讀者已經不多了,所以目錄對於書籍固然重要,相對的,在文章中,目錄也絕對不可缺少

有一種大家都耳熟能詳的外掛,就可以來製作 WordPress 文章目錄,答案就是 TinyMCE Advanced,本文當中,筆者就教大家如何利用這外掛製作文章目錄

TinyMCE Advanced 安裝

TinyMCE Advanced 這外掛好用之處不再詳細說明,本文著重製作文章目錄

TinyMCE Advanced 目錄教學

Step1.進入設定 TinyMCE Advanced

Step2.將錨點放置工具列裡

Step3.錨點放置完成

Step4.將 H2 標題點擊轉換成傳統段落

如果本身都是用 TinyMCE Advanced 撰寫文章,那麼可跳過這個步驟

Step5.點擊錨點圖示

Step6.建立錨點 ID 代號

筆者溫馨提醒,建立錨點 ID 代號時,以小寫英文為主,不要中文或其他

Step7.選擇清單項目並點擊超連結

Step8.輸入錨點 ID 做超連結

錨點 ID 超連結方式為,#小寫英文代號。如:#a

Step9.完成清單目錄連結

TinyMCE Advanced 與 Easy Table of Contents 製作方式差異

除了本文介紹的 TinyMCE Advanced 製作文章目錄的方式外,還有一個專門針對產生文章目錄的外掛 Easy Table of Contents,曾經在外掛彙整文章中也特別推薦,兩著還是有所差異的

 TinyMCE AdvancedEasy Table of Contents
優點1.若有TinyMCE Advanced,不須另外安裝外掛
2.不會有圖片延遲問題
1.外觀比較美化
2.操作步驟簡單
缺點1.外觀比較陽春
2.步驟比較繁瑣
1.若有TinyMCE Advanced,還須另外安裝外掛
2.會有圖片延遲問題

結論

教到這裡,基本上你應該學會製作文章目錄了,主要目的在於幫助讀者索引,能夠快速瀏覽想要的文章訊息,這才是文章目錄的重要性。無論使用哪種方式,任何外掛其實都有優缺點,還是老話一句,沒有強與不強的外掛,只有最適合自己的外掛!

Q&A

1.手動製作文章目錄的好處

圖片延遲載入是減緩網站載入圖片的負擔,讓開啟網頁更加順暢。當文章圖片還未載入完全時,點選 Easy Table of Contents 其中的連結項目,可能會發生無法立即跳到連結段落,針對這個問題,才會有手動製作文章目錄的教學,因此主要的好處有:減少使用外掛、減少圖片延遲問題

2.如何製作目錄外框背景顏色

經筆者一個早上的實驗,可採用 TinyMCE Advanced 內建表格方式及 HTML 語法,無論哪種方式,操作步驟比較繁瑣,假使不追求美觀的話,其實真的不建議做

3.如何製作 H3 的目錄連結

只要利用 TinyMCE Advanced 增加縮排,就可產生出 H3 的連結項目

Previous Post

【WordPress 媒體庫】分類管理,你絕對需要的 Media Library 外掛

Next Post

2019 WPWebHost 評價,每月只要 100 元就能擁有 WordPress 網站

21 comments

  1. Dave表示:

    這真是一篇好文章
    我兩個外掛都有~
    在思考要不要只用TINY一個外掛就好
    畢竟他又有製作目錄的功能!
    感謝分享 受益良多!

  2. Buzz表示:

    感謝版主有用的分享~
    我可以來用看看這個功能了!

  3. Roy表示:

    感謝版主提供的資訊,對於新手來說真的非常受用呢!

  4. 民樂電腦表示:

    不客氣唷,能幫助到你,是我的榮幸

  5. 民樂電腦表示:

    不客氣唷,能幫助到你,是我的榮幸

  6. 民樂電腦表示:

    感謝您的肯定

  7. 潔西卡表示:

    感謝版主教學!!
    圖片延遲問題真的有點困擾,不過一個一個設置錨點也有點麻煩
    我要再好好考慮一下

  8. 民樂電腦表示:

    不過最近有發現到可解決圖片延遲問題,而且還可以繼續用Easy Table of Contents

  9. Joseph表示:

    感謝站長的實驗和測試!讓想從Easy Table of Contents改用TinyMCE Advanced的人可以清楚了解到兩者間不同的差異

  10. 民樂電腦表示:

    感謝你的肯定,主要讓讀者可以挑選兩者之間的利弊,才容易做出選擇

  11. Daniel Li表示:

    感謝版主的教學文,這真的很適用於個人部落格、網站的,受益良多。

  12. 民樂電腦表示:

    感謝你的肯定,能幫助到大家,是我的榮幸

  13. Jane表示:

    我都不知道我一直在使用的tinymce可以用來製作目錄XDDD 有種發現新世界的感覺! 感謝版大分享~

  14. 民樂電腦表示:

    是ㄚ,現在才知道 Tinymce 這麼多功能,能幫助到你,是我的榮幸

  15. Jasper表示:

    感謝版主的教學!
    最近才在研究要如何加進目錄呢

  16. Mia Liao表示:

    好文章!改天來試試看該怎麼使用!

  17. 民樂電腦表示:

    不客氣喲,近期筆者休假,不好意思這麼晚才回,能幫助到你,是我的榮幸

  18. 民樂電腦表示:

    不客氣喲,能幫助到你,是我的榮幸

  19. Jason表示:

    為什麼我的文章目錄沒有出現 有按照網站方式做了

  20. 民樂電腦表示:

    請問是哪個環節出了問題?

Scroll to top