編輯器大戰終局？WordPress Classic vs. Gutenberg 深度對決，資深工程師帶你選對戰場！

哈囉，各位 WordPress 的戰友們！我是浪花科技的資深工程師 Eric。今天不聊什麼高深的 API 串接或資料庫優化，我們來聊一個可能每天都在用，卻又時常引發「聖戰」的主題：WordPress 編輯器。沒錯，就是那場打了好幾年的 WordPress 編輯器自訂：Classic vs Gutenberg 之戰。

身為一個從 WordPress 2.x 時代就開始打滾的工程師，我看著 TinyMCE（也就是我們熟知的傳統編輯器 Classic Editor）從一個陽春的文字框，演變成功能強大的內容編輯器。然後，在 2018 年，WordPress 5.0 橫空出世，帶來了一個顛覆性的改變——Gutenberg 區塊編輯器。當時社群上哀鴻遍野，各種「還我傳統編輯器」的聲浪此起彼落。坦白說，一開始我也超級不習慣，心裡嘀咕著：「搞這麼複雜幹嘛？我只是想好好寫篇文章啊！」

但幾年過去了，Gutenberg 經歷了無數次的迭代優化，早已不是當初那個吳下阿蒙。而 Classic Editor 依然堅守著它的崗位，擁有大批的死忠用戶。那麼，問題來了：在 2025 年的今天，我們到底該選擇哪一個？這篇文章，我將以一個資深開發者的角度，帶你深入剖析這兩大編輯器的優劣、客製化潛力，以及最重要的——你該如何為你的專案，做出最明智的選擇。

懷舊的溫度：傳統編輯器 (Classic Editor / TinyMCE) 的魅力與枷鎖

啊，傳統編輯器，那個我們閉著眼睛都能操作的介面，就像 Microsoft Word 一樣熟悉。它的核心是 TinyMCE，一個開源的所見即所得（WYSIWYG）編輯器。對於純文字創作者、部落客來說，它簡直是天堂。

傳統編輯器的優點

• 學習曲線趨近於零： 如果你會用 Word，你就會用它。直觀、簡單，不需要花時間去理解什麼是「區塊」。
• 專注寫作的沉浸感： 沒有太多花俏的介面干擾，你可以心無旁鶩地專注在文字內容本身。對於長篇文章的撰寫，那個流暢感是無可取代的。
• 生態系成熟穩定： 畢竟稱霸了十幾年，有成千上萬的外掛是圍繞著傳統編輯器開發的，例如早期版本的 ACF (Advanced Custom Fields) 就是最佳拍檔。

傳統編輯器的缺點（工程師的囉嗦時間）

雖然它很美好，但身為工程師，我必須殘酷地點出它的問題。傳統編輯器最大的罩門在於「排版」。

• 所見非所得 (WYSI-NOT-WYG)： 你在後台看到的排版，跟前台顯示的樣子，十之八九會有落差。這讓很多使用者感到困惑，需要不斷預覽、修改。
• 短代碼地獄 (Shortcode Hell)： 為了實現複雜的排版，例如分欄、按鈕、TABS，我們被迫使用大量的短代碼，像這樣：[column size="one-half"]...[/column][column size="one-half" last="true"]...[/column]。整個編輯器看起來就像一堆亂碼，維護性極差，客戶常常改一個字就搞垮整個版面。這是我最不能忍受的一點，簡直是工程師的惡夢。
• 缺乏結構化資料： 所有的內容都混在一個巨大的 HTML 團塊裡，不利於未來的資料重用或 API 提取。

如何客製化傳統編輯器？

即便如此，我們還是能對它動點手腳。例如，在 functions.php 加入一些程式碼，就可以幫客戶在工具列上新增自訂按鈕，方便他們插入特定的樣式或短代碼。

舉個例子，我們可以新增一個按鈕來快速插入一個提示框：

// 在 functions.php 中加入以下程式碼

// 步驟一：註冊按鈕到工具列
function register_custom_tinymce_button( $buttons ) {
   array_push( $buttons, 'custom_alert_button' );
   return $buttons;
}
add_filter( 'mce_buttons', 'register_custom_tinymce_button' );

// 步驟二：告訴 TinyMCE 這個按鈕要用的 JavaScript 檔案在哪
function add_custom_tinymce_plugin( $plugin_array ) {
   $plugin_array['custom_alert_plugin'] = get_template_directory_uri() . '/js/tinymce-custom.js';
   return $plugin_array;
}
add_filter( 'mce_external_plugins', 'add_custom_tinymce_plugin' );

然後你還需要寫一支 tinymce-custom.js 來定義按鈕的行為。是不是有點麻煩？沒錯，這就是傳統編輯器的客製化方式，有效，但有點老派。

未來的模樣：區塊編輯器 (Gutenberg) 的革命與挑戰

Gutenberg 的出現，徹底改變了 WordPress 的內容創建哲學。它不再把內容視為一大塊 HTML，而是將所有元素——段落、標題、圖片、引言、甚至是自訂的功能模組——都變成一個個獨立的「區塊 (Block)」。

區塊編輯器的優點

• 真正的所見即所得： 編輯器內的排版非常接近前台的最終樣貌，大幅減少了來回預覽的時間，使用者體驗直線上升。
• 強大的排版能力： 內建的欄、群組、堆疊等區塊，讓使用者可以像玩樂高一樣，輕鬆拖拉組合出複雜的頁面佈局，告別短代碼地獄！
• 內容結構化： 每個區塊都是一個帶有屬性的獨立物件，儲存在資料庫中的格式也更清晰（以 HTML comments 標記）。這對於 Headless CMS 應用或 API 串接來說是一大福音。
• 可重用區塊與區塊版型： 你可以將常用的區塊組合儲存起來，一鍵插入到任何頁面，大幅提升內容製作效率。對於企業網站需要重複使用的「關於我們」、「聯絡資訊」等模組，這功能簡直是神器。

區塊編輯器的缺點

革命總是伴隨著陣痛，Gutenberg 也不例外。

• 學習曲線較陡： 對於習慣了傳統編輯器的使用者來說，需要時間去適應「萬物皆區塊」的思維模式。
• 操作干擾： 對於只想寫一篇純文字文章的人來說，不斷跳出的區塊工具列有時反而會打斷思緒。
• 效能議題： 當一個頁面使用了數十個甚至上百個複雜的區塊時，編輯器的反應速度可能會下降，這也是官方團隊持續在優化的重點。

開發者的遊樂場：客製化 Gutenberg

對開發者來說，Gutenberg 是一個全新的、更廣闊的遊樂場。雖然入門門檻比傳統編輯器高（需要具備 JavaScript，特別是 React 的基礎知識），但能做到的事情也強大得多。

不過，就算不寫 React，我們還是可以用 PHP 做到一些簡單的客製化。例如，為內建的段落區塊新增一個「高亮」的樣式：

// 在 functions.php 中加入以下程式碼

function register_custom_block_styles() {
    // 檢查函式是否存在，確保相容性
    if ( function_exists( 'register_block_style' ) ) {
        // 為「核心/段落」這個區塊註冊一個新的樣式
        register_block_style(
            'core/paragraph',
            array(
                'name'         => 'highlight-text',
                'label'        => __( '高亮文字', 'your-text-domain' ),
                'inline_style' => '.is-style-highlight-text { background-color: #fffbe6; border-left: 4px solid #ffc107; padding: 10px 20px; }',
            )
        );
    }
}
add_action( 'init', 'register_custom_block_styles' );

只要加上這段程式碼，使用者在編輯段落時，右邊的樣式面板就會出現一個「高亮文字」的選項可以點選，非常方便。這只是冰山一角，要打造完全自訂的 Gutenberg 區塊，那又是另一個更深的故事了。

終極對決：Classic vs. Gutenberg，我該怎麼選？

好了，說了這麼多，我知道你最關心的問題是：「Eric，你別囉嗦了，快告訴我到底該用哪個？」

我的建議是：看情境，但請擁抱未來。

• 如果你是個人部落客，內容以純文字為主： 說實話，繼續使用Classic Editor 外掛也無傷大雅。它的單純能讓你更專注。但請記住，這款外掛官方只支援到 2024 年底（雖然很可能會再延長），你終究要面對轉換的一天。
• 如果你在經營企業官網、作品集或電商網站： 請務必使用 Gutenberg！ 它的排版彈性、元件化的能力，能讓你打造出更具現代感與行銷力的頁面。傳統編輯器在這方面已經完全不是對手了。
• 如果你是網站開發者或網頁設計公司： 別猶豫了，立刻全面轉向 Gutenberg！ 這是 WordPress 的未來，所有的核心開發資源都集中在這裡。為客戶打造客製化區塊、區塊版型，不僅能提供更好的後台體驗，也是你專業價值的體現。還在用短代碼幫客戶做網站？那就像在 2025 年還在用撥接上網一樣，該升級了！

身為一個有點代碼潔癖的工程師，我看到 Gutenberg 輸出的乾淨 HTML 結構，對比過去的短代碼地獄，那種舒爽感是難以言喻的。從長遠的網站維護性、擴充性與效能來看，Gutenberg 都是更優越的選擇。

結論：這不是一場戰爭，而是一次進化

Classic vs Gutenberg 的討論，與其說是一場編輯器大戰，不如看作是 WordPress 的一次自我進化。傳統編輯器承載了過去十幾年的輝煌，它簡單、可靠，完成了它的歷史使命。而 Gutenberg 則代表了 WordPress 的未來——一個更視覺化、更模組化、更強大的內容管理系統。

我知道改變需要勇氣，也需要時間適應。但相信我，當你跨過那道坎，開始享受區塊編輯器帶來的便利與彈性時，你可能就再也回不去了。就像我們從手排車換到自排車，一開始可能會不習慣左腳沒事做，但很快你就會愛上那份輕鬆愜意。

無論你現在的選擇是什麼，都希望這篇文章能幫助你更深入地理解這兩款編輯器的核心差異與潛力。在浪花科技，我們早已全面擁抱 Gutenberg，並為客戶打造了許多高效、易用的客製化區塊，讓他們能像堆樂高一樣，輕鬆管理自己的網站內容。

—

延伸閱讀

• 告別短代碼地獄！資深工程師手把手教你打造 Gutenberg 自訂區塊，釋放 WordPress 編輯器的真正潛力
• 別再被版型綁架！ACF 終極指南：用客製化欄位打造 WordPress 夢幻後台
• 解鎖 WordPress 的隱藏力量：functions.php 終極實戰指南，讓你的網站秒變客製化神器！

如果你對於如何將舊網站的內容順利轉移到 Gutenberg，或是想為你的企業打造專屬的客製化區塊，提升內容編輯效率與品牌形象，卻不知從何下手？

別擔心，這正是浪花科技的專業所在。我們有豐富的經驗，能協助你無痛升級，並打造出最符合你需求的後台編輯體驗。歡迎點擊這裡填寫表單，與我們的技術顧問聊聊，讓我們一起釋放你 WordPress 網站的真正潛力！