還在用懷舊編輯器？Gutenberg 開發者終極指南：從自訂區塊到效能優化，徹底解放 WordPress 潛力！

Hey 大家好，我是浪花科技的 Eric。今天來聊個有點「情懷」但又很現實的話題：WordPress 編輯器。我知道，我知道，很多人對傳統編輯器（Classic Editor）有著深厚的感情，那種所見即所得、類似 Word 的操作介面，簡單直觀。但身為一個每天在程式碼裡打滾的工程師，我得老實說，當我看到 2025 年的新專案還打算用它時，我的眉頭真的會忍不住皺起來。這不是喜新厭舊，而是關乎網站的未來性、擴展性，以及最重要的——開發效率。

這場 WordPress 編輯器自訂：Classic vs Gutenberg 的戰爭，其實早就分出勝負了。但問題不是誰贏了，而是你——網站的開發者或管理者——是否真的理解了新世代工具的威力，並懂得如何駕馭它。今天，我不只做個簡單比較，我會帶你從開發者的視角，深入剖析兩者的核心差異，特別是在「客製化」與「效能」這兩個關鍵點上，讓你徹底明白為什麼擁抱 Gutenberg 才是明智之舉。

回不去的舊時光：傳統編輯器 (Classic Editor) 的榮耀與枷鎖

首先，讓我們向傳統編輯器致敬。它基於 TinyMCE 專案，在 WordPress 稱霸內容網站的年代，立下了汗馬功勞。它的優點非常明確：

• 學習曲線平緩： 對於習慣了文書處理軟體的使用者來說，幾乎是無痛上手。
• 介面單純： 沒有太多花俏的功能，專注於文字內容的撰寫，對於純部落格或新聞網站來說，非常高效。
• 輕量快速： 因為功能單純，載入速度快，對伺服器資源要求較低。

聽起來很美好，對吧？但身為工程師，我們看到的卻是它背後的枷鎖。當客戶的需求開始超越「一篇文章配幾張圖」時，惡夢就開始了。

開發者的痛點：Shortcode 地獄與失去的彈性

傳統編輯器的最大罩門，就是它缺乏原生的排版與結構化能力。為了解決這個問題，我們被迫大量使用「短代碼 (Shortcodes)」。想加個兩欄式排版？用短代碼。想嵌入一個精美的按鈕？用短代碼。想做個產品卡片？還是用短代碼。

結果就是，編輯器裡充滿了像 [row][col-6]...[/col-6][col-6]...[/col-6][/row] 這樣的「天書」。對使用者來說，這根本無法預覽最終效果；對開發者來說，維護和除錯這些由外掛產生的短代碼，簡直是一場災難。我們等於是把網站的結構，用一堆零散的字串綁架了。

當然，我們還是可以對傳統編輯器做些客製化，例如透過 functions.php 加入一些自訂按鈕。這算是工程師的小小掙扎吧，比如說，加個水平線或上下標按鈕：

<?php
/**
 * 為傳統編輯器 (TinyMCE) 新增自訂按鈕
 * Eric 的小囉嗦：這招現在只能算是在老舊專案上應急用了
 */
function roamer_tech_add_custom_tinymce_buttons($buttons) {
    array_push($buttons, 'hr', 'sub', 'sup');
    return $buttons;
}
add_filter('mce_buttons_2', 'roamer_tech_add_custom_tinymce_buttons');
?>

這段程式碼可以幫你在工具列第二排加上水平線、下標和上標按鈕。但也就僅此而已了。它無法解決根本性的結構問題。

未來已來：Gutenberg (區塊編輯器) 的革命性思維

2018 年 WordPress 5.0 的發布，Gutenberg 的登場，可以說是 WordPress 史上最大的一次變革。很多人一開始非常不習慣，甚至厭惡。但如果你靜下心來理解它的核心理念，你會發現一個全新的世界。

從「一整篇文章」到「一堆區塊」

Gutenberg 的核心是「區塊 (Block)」。你的文章不再是一大塊 HTML，而是由許多獨立、可重複使用的區塊堆疊而成。段落是區塊、標題是區塊、圖片是區塊、按鈕也是區塊。這個看似簡單的轉變，帶來了幾個殺手級的優勢：

• 結構化內容： 每個區塊都是一個獨立的實體，擁有自己的屬性（例如顏色、大小、對齊方式）。資料庫儲存的不再只是混亂的 HTML，而是帶有結構化標記的內容，這對於未來的資料遷移、API 應用都極為有利。
• 直觀的排版能力： 內建的「欄」區塊、「群組」區塊，讓使用者可以像玩樂高一樣，輕鬆拖拉出複雜的頁面佈局，完全告別 Shortcode 地獄。
• 可重複使用區塊 (Reusable Blocks) 與樣板 (Patterns)： 你可以將一組設計好的區塊儲存起來，在任何頁面重複使用。這對於維持全站設計一致性、提升編輯效率，簡直是神器。

開發者的遊樂場：打造你的專屬區塊

對我們工程師來說，Gutenberg 真正令人興奮的地方在於它的可擴展性。我們不再只是微調一個舊的編輯器，而是在一個基於 React 的現代化框架上，打造全新的編輯體驗。

客製化 Gutenberg 主要有兩種路線：

1. 使用 ACF Blocks： 對於不熟悉 React 的 PHP 開發者來說，這是一條捷徑。你可以透過 Advanced Custom Fields (ACF) Pro，用你熟悉的 PHP 和 Twig 來定義區塊的欄位和前端渲染邏輯，ACF 會幫你處理好跟 React 溝通的髒活。
2. 原生區塊開發 (React)： 這是最徹底、最彈性的作法。你可以使用 JavaScript (ESNext) 和 React 來打造功能完整的自訂區塊，從編輯器介面到前端顯示，所有細節都能一手掌握。你可以創建一個可以即時預覽的輪播圖區塊，或是一個直接串接外部 API 的資料卡片區塊，可能性無窮。

老實說，學習原生區塊開發的曲線確實比較陡峭，但它所帶來的回報是傳統編輯器完全無法比擬的。你正在為 WordPress 的未來進行投資。

終極對決：Classic vs. Gutenberg 開發者視角大 PK

好了，說了這麼多，我們來一張表格，直接對決，讓你一目了然。

H3: 編輯體驗與彈性

Classic Editor： 體驗單一，所見即所得（WYSIWYG）僅限於基本文字格式。複雜排版需靠 Shortcode 腦補，對非技術人員極不友善。
Gutenberg： 所見即所得更上一層樓，直接在後台預覽真實排版。區塊化的操作邏輯清晰，賦予使用者極大的排版自由度。
結論：Gutenberg 壓倒性勝利。

H3: 效能考量

Classic Editor： 產出的 HTML 相對乾淨，資料庫儲存的就是一大塊 HTML。對於純文字網站，效能表現優異。
Gutenberg： 每個區塊都會有 HTML 註解標記 “，且複雜的排版（尤其是用了太多群組、欄）會產生層層包裹的 `