什麼是 WordPress 區塊編輯器？
WordPress 區塊編輯器，通常稱為 Gutenberg，是 WordPress 的預設內容編輯器。它於 WordPress 5.0 中推出，取代了經典編輯器，採用模組化的區塊系統，每一段內容——段落、圖片、標題或嵌入——都是一個獨立的區塊，您可以獨立排列、自定義和重新排列。
到 2026 年，Gutenberg 的功能已經遠超過簡單的內容編輯器。隨著全站編輯（FSE）的推出，它現在控制整個網站的佈局，包括標頭、頁腳、模板和模板部分。本指南將帶您了解所有您需要知道的內容，從基本的區塊編輯到高級的網站構建技術。
核心區塊概述
WordPress 附帶超過 90 個核心區塊，並按類別組織。以下是您最常使用的區塊：
| 類別 | 主要區塊 | 使用案例 |
|---|---|---|
| 文字 | 段落、標題、列表、引用、詳情 | 標準內容創建 |
| 媒體 | 圖片、畫廊、視頻、音頻、封面 | 視覺和多媒體內容 |
| 設計 | 列、群組、行、堆疊、間隔 | 頁面佈局和結構 |
| 小工具 | 搜尋、導航、社交圖標、標籤雲 | 互動和動態元素 |
| 主題 | 網站標題、標誌、導航、查詢循環 | 全站編輯組件 |
| 嵌入 | YouTube、Twitter、Spotify、Vimeo | 第三方內容嵌入 |
使用區塊創建內容
添加區塊
有幾種方法可以將區塊添加到您的內容中：
- 加號按鈕 (+)： 點擊工具欄中的加號圖標或區塊之間的加號以打開區塊插入器
- 斜線命令： 輸入
/後跟區塊名稱（例如，/image、/heading）以快速插入 - 命令面板： 按
Ctrl+K（Windows）或Cmd+K（Mac）搜索任何區塊或操作 - 拖放： 從插入面板直接將區塊拖到畫布上
配置區塊
每個區塊有兩個配置區域：
- 工具欄： 在選定的區塊上方顯示，提供常見操作（對齊、粗體、斜體、鏈接）
- 側邊欄面板： 提供詳細設置，包括顏色、字體、間距和高級選項
組織區塊
通過使用區塊工具欄中的箭頭將區塊向上或向下移動，或將它們拖到新位置來排列您的內容。您還可以使用列表視圖面板（Shift+Alt+O）查看整個文檔結構並在樹狀結構中拖動區塊。
可重用區塊（同步模式）
可重用區塊——在 2026 年更名為同步模式——允許您創建一次區塊或區塊組，並在多個文章和頁面中插入它們。當您更新同步模式時，每個實例會自動更新。
同步模式的常見用途：
- 出現在多個頁面上的行動呼籲部分
- 在部落格文章中使用的作者簡介框
- 標準化的免責聲明或聯盟披露通知
- 電子報訂閱表單
- 聯絡信息區塊
要創建同步模式：選擇區塊，點擊三點菜單，選擇“創建模式”，命名並開啟“同步”選項。要稍後插入它，請在區塊插入器的模式選項卡中找到它。
區塊模式
區塊模式是預設的區塊排列，您可以插入並自定義。與同步模式不同，它們並不相連——編輯一個模式實例不會影響其他用法。
內建模式
WordPress 包含常見佈局的模式：主題部分、功能網格、推薦佈局、定價表等。您的主題可能會註冊針對其設計系統優化的其他模式。
WordPress.org 模式目錄
WordPress.org 模式目錄提供數千個社區貢獻的模式。您可以直接從插入器或模式目錄網站瀏覽、預覽和複製模式。
創建自定義模式
通過排列區塊、選擇所有區塊並從區塊菜單創建模式來構建自己的模式。自定義模式會出現在插入器的“我的模式”部分，使其可以在您的網站上重複使用。
全站編輯基礎
全站編輯（FSE）將區塊編輯擴展到整個網站結構，而不僅僅是文章和頁面內容。使用區塊主題，您可以編輯：
- 模板： 控制特定頁面類型的佈局（單篇文章、存檔、404、搜尋結果）
- 模板部分： 編輯可重用的部分，如標頭和頁腳
- 全局樣式： 設定全站的顏色、字體
- 導航：可視化構建和管理菜單
訪問網站編輯器
在您的 WordPress 儀表板中導航至 外觀 → 編輯器。這將打開網站編輯器，您可以在此瀏覽模板、編輯模板部分並調整全局樣式。請注意，FSE 需要一個區塊主題 — 傳統主題則使用傳統的自定義器。
模板與模板部分
概念 控制內容 示例 模板 內容類型的完整頁面佈局 單篇文章、頁面、存檔、404 模板部分 模板內可重用的部分 頁首、頁尾、側邊欄 使用 theme.json 自定義區塊
theme.json文件是區塊主題的配置中心。它控制：- 編輯器中可用的顏色調色板和漸變
- 排版預設（字體系列、大小、行高）
- 間距比例和佈局寬度
- 啟用或禁用的區塊功能
- 特定區塊的默認樣式
主題開發人員使用
theme.json來創建一致的設計系統。作為網站擁有者，您可以通過網站編輯器中的全局樣式界面修改這些設置，而無需直接編輯文件。鍵盤快捷鍵
學習鍵盤快捷鍵可以顯著加快您的編輯工作流程：
動作 Windows / Linux Mac 新增區塊 / (斜線) / (斜線) 命令面板 Ctrl + K Cmd + K 複製區塊 Ctrl + Shift + D Cmd + Shift + D 刪除區塊 Shift + Alt + Z Ctrl + Option + Z 打開列表視圖 Shift + Alt + O Ctrl + Option + O 切換區塊插入器 Ctrl + Shift + , Cmd + Shift + , 保存草稿 / 更新 Ctrl + S Cmd + S 撤銷 Ctrl + Z Cmd + Z 插入鏈接 Ctrl + K Cmd + K Gutenberg 與 Classic Editor
一些 WordPress 用戶仍然偏好 Classic Editor 插件。以下是兩者的比較：
新開發的下降方面 Gutenberg Classic Editor 編輯方式 基於區塊的模組化 單一文本區域（TinyMCE） 佈局能力 列、網格、全寬區域 僅線性內容 媒體處理 內嵌畫廊、封面圖片、媒體+文本 基本媒體插入 未來兼容性 積極開發，支持 FSE 僅維護模式 插件/主題支持 不斷增長的區塊生態系統 維護中 Classic Editor 插件仍在維護中，但 WordPress 開發已完全致力於區塊編輯器。新功能、主題和插件越來越多地優先考慮 Gutenberg。
擴展 Gutenberg 的區塊插件
雖然核心區塊涵蓋了大多數需求，但這些插件增加了專門的功能：
- Flavor Plugin: 添加高級區塊，如標籤、手風琴、定價表和文章輪播
- Flavor Plugin: 提供以內容為中心的區塊，以改善寫作體驗 — 進度條、點擊推文、警報
- Flavor Plugin: 提供設計導向的區塊，具有動畫和高級樣式選項
- Flavor Plugin: 使用專為 FSE 主題設計的區塊擴展 Gutenberg
- Flavor Plugin: 添加查詢和過濾區塊以動態顯示內容
在選擇區塊插件時，選擇遵循 WordPress 編碼標準並生成乾淨標記的插件。避免加載重型 JavaScript 框架的插件，因為它們會抵消 Gutenberg 的性能優勢。
高效區塊編輯的實用技巧
使用列表視圖
對於複雜頁面，列表視圖 (
Shift+Alt+O) 是必不可少的。它顯示整個文檔結構作為樹狀圖，使選擇嵌套區塊、重新排序部分和理解頁面層次結構變得簡單。將區塊分組以進行批量操作
選擇多個區塊（點擊第一個，Shift+點擊最後一個）並將它們分組。分組的區塊可以一起樣式化、作為單位移動，並轉換為模式。這對於創建一致的部分特別有用。
鎖定區塊以防止意外更改
鎖定重要區塊以防止意外移動或刪除。右鍵單擊區塊並選擇“鎖定”以限制修改。這對於模板或由多個編輯者管理的內容很有幫助。
積極使用鍵盤快捷鍵
高效與緩慢的區塊編輯之間的差異通常取決於鍵盤快捷鍵。首先學習五個最常用的快捷鍵（斜線命令、複製、刪除、保存、撤消），然後隨著熟悉度的提高擴展你的快捷鍵庫。
有關 Elementor 和其他頁面構建器的比較，請參閱我們的 Elementor 與 Gutenberg 比較 以及我們更廣泛的 頁面構建器比較指南。如果您正在選擇與 Gutenberg 配合良好的主題，請閱讀我們的 主題選擇指南。
常見問題
我還可以使用 Classic Editor 嗎？
可以。Classic Editor 插件仍然可用，並由 WordPress 團隊維護。然而，它僅接收維護更新 — 不會有新功能。WordPress 建議遷移到區塊編輯器以獲取現代功能和持續開發。
Gutenberg 是否與所有 WordPress 主題兼容？
Gutenberg 與經典主題和區塊主題均可使用。經典主題支持在文章和頁面內容中進行區塊編輯。區塊主題還支持全站編輯，用於標頭、頁腳、模板和全局樣式。要獲得完整的 FSE 體驗，您需要一個區塊主題。
我如何將 Classic Editor 內容轉換為區塊？
當您在 Gutenberg 中打開 Classic Editor 文章時，WordPress 會將內容包裝在一個 Classic 區塊中。您可以單擊“轉換為區塊”將內容轉換為單獨的區塊。轉換後請檢查，因為複雜的佈局可能需要手動調整。
Gutenberg 頁面是否比 Classic Editor 頁面慢？
不。Gutenberg 生成的乾淨 HTML 與 Classic Editor 輸出相當或更精簡。區塊編輯器不會增加顯著的前端開銷。編輯器界面本身（在管理端）使用的資源比 Classic Editor 多，但這不會影響訪客的體驗。
我可以在不編碼的情況下創建自定義區塊嗎？
可以，在一定程度上。您可以通過排列現有區塊來創建自定義區塊模式。對於具有獨特功能的真正自定義區塊，您需要 JavaScript（React）開發。一些插件提供無代碼區塊構建器，但與編碼解決方案相比，它們有一定的限制。
什麼是同步模式，它們與常規模式有何不同？
同步模式（前稱可重用區塊）在所有實例之間是鏈接的。編輯一個會更新所有的。常規模式是模板 — 插入一個會創建一個獨立的副本，您可以修改而不影響其他用法。對於應該在各處保持一致的內容（CTA、免責聲明），使用同步模式。對於您希望作為起點的佈局，使用常規模式。
我如何排除區塊編輯器問題？
常見解決方案包括：清除瀏覽器緩存、逐個停用插件以識別衝突、暫時切換到默認主題，以及檢查瀏覽器的開發者控制台以查找 JavaScript 錯誤。大多數區塊編輯器問題源於插件衝突，而不是核心問題。
全站編輯是否準備好用於生產？
截至 2026 年，全站編輯已穩定並準備好用於生產。隨著每次 WordPress 發布，功能集已顯著成熟。然而，區塊主題和模式的生態系統仍在增長。如果您需要大量預製模板，您可能會發現選擇比經典主題選項更有限。
