TinyMCE Advanced 教學 – WordPress 編輯器外掛，附加更多選項與功能！

內容目錄

Toggle

TinyMCE Advanced 是一個剛開始以 WordPress 架站時必裝的外掛之一，尤其是對網站架設技術沒有初步概念的新手站長們，TinyMCE Advanced 非常適合用來建立網頁內容。之所以會這樣描述 TinyMCE Advanced，是因為其具有將編輯網頁時的一些功能轉換為可視化操作，而不需要輸入繁雜的程式語言，如果你現在正看著 WordPress 陽春到極點的內建編輯器茫然而不知從何下手，那麼筆者建議一定要安裝 TinyMCE Advanced ，並且搭配本篇教學一起學習，相信一定會有所幫助！
在不久的將來當 WordPress 5.0 改版後，原本舊的內建編輯器將會產生變化，最大的改變就在於可以使用所見即所得的方式來做網頁編輯與排版，使用程式語言的機會將大幅減少，屆時被命名為 Gutenberg （古騰堡）的全新編輯器如果功能不夠完善或者操作上有難度，還是可以使用 TinyMCE Advanced 搭配舊式的內建編輯器來使用，無論是作為過渡期的替代方案，或者是直接捨棄 Gutenberg 編輯器，都是進退得宜的網頁內容編輯方法。TinyMCE Advanced 具有許多特色，在介面上都是以繁體中文顯示所有設定選項與操作，可自定義要顯示哪些功能在內建編輯器上，另外在可支援的情況下，如果使用一些付費主題的內建編輯器或者附加編輯器外掛，TinyMCE Advanced 也能夠在這些附加編輯器中的文字小工具上同步顯示所提供的功能，可以說非常方便。
這一次教學因為 TinyMCE Advanced 已經是繁體中文化得緣故，且大部分的操作與一般文書處理軟體大同小異，因此僅針對重點部分說明，其餘的功能就留給各位朋友們自行試驗，有問題的話也歡迎在文章下方留言！

TinyMCE Advanced 下載點
https://tw.wordpress.org/plugins/tinymce-advanced/
TinyMCE Advanced 常見問題與技術支援
https://wordpress.org/support/plugin/tinymce-advanced

TinyMCE Advanced 安裝與設定教學

第一步：按照一般外掛安裝程序，在安裝外掛介面搜尋 TinyMCE Advanced ，點選立即安裝，如下圖所示，詳細安裝流程請參考：WordPress 教學基礎介紹六（外掛）。

第二步：進入 TinyMCE Advanced 設定有兩種方式，第一種是進入已安裝外掛，找到 TinyMCE Advanced 後在標題下方有設定的按鈕 ; 另外就是點選 Setting 後在子選單中可以找到 TinyMCE Advanced 的選項。

第三步：TinyMCE Advanced 的設定中可以自行加入想要使用的功能按鈕，在下圖中標示的未使用的按鈕可以透過拖曳的方式加入到上方原始編輯器欄位中。

如何拖曳請看下方影片示意

第四步：在一般設定中的四個選項筆者建議可以全部勾選，在第二小節中將會解說這些項目勾選後的實際效果，因為都是繁體中文的內容，因此就不多做說明。

第五步：進階設定中的項目以下做簡略說明：

建立 CSS 類別選單：在項目說明文字中提到 ” 載入 editor-style.css 中的 CSS 類別，並取代 [格式] 選單中的項目” ，意思是說可以在格式項目中加入自定義的 CSS 類別，並且在編輯器中快速套用此 CSS 類別所定義的樣式，但就網站架設的實務經驗上，是不建議使用太多的 CSS 樣式表讓網站去 Loding ，主要原因有二，其一，過多的 CSS 樣式表讓 Sever 需要從多方來源去抓取以正確顯示網頁樣式，容易造成伺服器負擔拖慢網站仔入速度 ; 其二，網站維護上不易，當需要除錯或修改 CSS 樣式表時，同時有多處具有 CSS 代碼，會造成管理上的麻煩。另外在下方也有說明如果網站的佈景主題不支援 editor-style.css ，必須手動加入 CSSˇ 樣式表檔案，對於新手而言這不是一件容易的事，而對於老手來說又完全是多此一舉，因此筆者說了那麼多，結論就是這一項可以不用勾選。
保留段落標籤：簡單來說就是當勾選此項，內建編輯器切換到文字頁籤時，HTML 中的 <p> (段落) 以及 <br/> (跳行) 將會顯示，對於初學網頁設計的朋友而言能正確辨識文字所下達的屬性為何，是比較有幫助的，建議可以勾選。
啟用直接貼上圖片來源：重點在於只有 Firefox 及 Safari 這兩個瀏覽器時有效，而圖片來源是以 Base64 編碼文字呈現，並不是來自於 WordPress 媒體庫中，優點是可以不必上傳圖片佔用主機儲存空間，缺點是當來源被移除時網頁上的圖片也會同步失效，是否要勾選就看個人需求，如果是新手筆者同樣建議不要勾選。

第六步：在外掛管理的部分可以快速匯出設定數據到另一個網站的 TinyMCE Advanced 做使用，或者做為設定備份，在下方的增強功能就是筆者在文章開頭所敘述的，可以在一些主題附加編輯器或編輯器外掛的文字小工具中同樣加入 TinyMCE Advanced 功能，因此可以全部勾選。

TinyMCE Advanced 功能說明與介紹

第一步：筆者以文章編輯為範例，進入後可以看到新增的功能都會逐一顯示在編輯器的功能列上。

第二步：下方圖一與圖二就是在一般設定中勾選清單樣式設定後會在建立列表時有更多的樣式可以選擇，預設的只有圓點 ( • ) 以及阿拉伯數字 ( 1. 2. 3. )。

第三步：在一般設定中勾選第二項操作功能表，在編輯器中使用滑鼠右鍵時就會出現如下圖選單，可快速建立連結、圖片、表格。

第四步：一般設定勾選第三項變更 [插入/編輯連結] 按鈕功能，在加入連結時會有更詳細的連結設定選項。

在此說明插入連結中的填寫項目：

連結網址：包含 http:// 的目標網址。
顯示文字：連結所顯示的文字內容，也稱為錨點文字（ Anchor Text ）。
標題：當滑鼠游標停留在連結上時所顯示的文字。
Rel：向搜尋引擎宣告此連結與網站的關係，選擇 nofollow 代表此連結不需追蹤，也就是與自家網站的並無關係（牽涉到 SEO 網站權重問題，在其他教學文章會說明）
視窗開啟目標：在同一視窗載入或另開新頁。

第五步：預設的字型大小單位是 pt ，在一般設定中勾選字型大小後單位會轉換成 px ，並且可以更精細的選擇文字大小。

第六步：下圖就是在進階設定中勾選保留段落標籤時，切換到文字頁籤 <p> 、 <br/>都會完整顯示。

第七步：接下來介紹 TinyMCE Advanced 比較特殊的功能項目，分頁標籤可以快速插入頁面結尾的標記，告知使用者繼續閱讀必須跳轉到下一頁。

第八步：尋找與取代，當有大量的文字內容需要修改時，就可以使用此項功能。

第九步：插入/編輯媒體，如果你正苦惱於如何在內建編輯器中加入 Youtube 影片，可以使用此項功能，點選後在來源的欄位貼上影片網址，設定寬高比例後，就能正常顯示 Youtube 影片。

第十步：快速加入網站時間，可作為網站發表內容的識別，也可以為所有同一分類文章或頁面使用同樣的時間戳記，並以統一樣式呈現。

第十一步：專注寫作模式，將所有容易影響思緒的側邊工具都隱藏起來，更好的專注在內容本身，對於創作者而言是不錯的輔助。

結語：

TinyMCE Advanced 所具備的功能當然不只教學中所介紹的而已，當操作錯誤時可以點選恢復上一步驟、剪下複製貼上所選文字媒體、為頁面增加標注、上標或下標數字等，當使用的越久就會發現更多有趣的組合應用方式。就網站架設目的而言，TinyMCE Advanced 對於一般部落格網站做內容編輯是非常足夠的，但如果是要架設一個比較有質感，具有特色的網頁，那麼建議還是學習一些功能更加完善的網站建構器，除非願意花時間學習程式語言，不然就網頁設計的面向而言，TinyMCE Advanced 還是適合寫寫文章就好。

今天的教學到這裡告一段落，不要忘記在右邊訂閱鵠學苑電子報，以確保能收到最新 WordPress 網頁設計教學相關資訊，想學習超詳細的 WordPress 攻略嗎？？來鵠學院就對了！我們下次的教學見～