WordPress教學：Gutenberg區塊編輯器新手操作與傳統編輯器差異

WordPress Gutenberg 編輯器是什麼？為什麼現在後台都用區塊？

WordPress Gutenberg 編輯器是 WordPress 目前預設的內容編輯器，主要用來編輯文章與頁面。它把文字、圖片、按鈕、表格等內容拆成一個個「區塊」，讓新手可以用組合方式排內容，不必先學程式或版型設計。

從 WordPress 5.0 之後，Gutenberg 成為預設編輯體驗。很多人第一次打開後台會覺得不習慣，原因不是它變難，而是操作邏輯從「一個大文字框」變成「一段內容一個區塊」。這個轉換對新手有門檻，但對長期維護網站反而更清楚。

• Gutenberg 是 WordPress 內建編輯器，不是另外安裝的外掛。
• 它主要處理文章、頁面內容，不等於完整架站工具。
• 每個段落、標題、圖片、按鈕都可以獨立移動與設定。
• 如果只是寫文章、更新服務頁，多數情況已經夠用。

Gutenberg 和 Elementor 是同一種東西嗎？

Gutenberg 和 Elementor 常被新手混在一起，但兩者用途不同。Gutenberg 是 WordPress 預設內容編輯器，適合文章、部落格、公告、簡單服務頁；Elementor 則比較像頁面建置器，常用在首頁、銷售頁或高度客製化版面。

我的判斷是：如果只是把內容寫清楚、圖片放好、按鈕連到指定頁面，先學 Gutenberg 比較務實；如果要做複雜視覺設計，再看 Elementor 教學 會更有效率。

什麼是「區塊」？

區塊就是 Gutenberg 的基本操作單位。一段文字是一個段落區塊，一張圖片是一個圖片區塊，一個小標題是一個標題區塊，一個按鈕也是一個按鈕區塊。

這種做法的好處是內容比較不會全部糊在一起。你可以單獨移動圖片、複製某段內容、把段落改成清單，也可以只調整某個按鈕的連結與樣式。

Gutenberg 基本介面怎麼看？先認識 5 個常用區域

第一次打開 Gutenberg，不需要先研究所有按鈕，只要先認識標題、內容編輯區、區塊工具列、右側設定欄、預覽與發佈區。這 5 個地方掌握後，就能完成大部分 WordPress 後台編輯工作。

新手常見問題不是找不到功能，而是不知道現在自己選到的是「整篇文章」還是「某一個區塊」。右側設定欄會依照你目前點選的位置變化，這點先搞懂，後面操作會順很多。

介面區域	用途	新手要注意什麼
標題欄	輸入文章或頁面的主標題	通常會影響前台 H1 與文章列表顯示
內容編輯區	新增段落、圖片、標題、表格等區塊	按 Enter 通常會產生新的段落區塊
區塊工具列	調整目前選取區塊的格式、對齊、連結	工具列會跟著不同區塊改變
右側設定欄	設定文章狀態、分類、特色圖片或區塊細節	要分清楚「文章設定」與「區塊設定」
預覽與發佈	檢查前台效果、儲存草稿、排程或正式發佈	發佈前一定要預覽桌機與手機效果

標題與內容編輯區

標題欄通常是文章最重要的名稱，會出現在文章頁、文章列表，也可能被佈景主題拿來當頁面主標題。內容編輯區則是你真正放文章內容的地方。

建議新手先用標題區塊把文章架構排出來，再補段落。不要一開始就一直調顏色、大小與對齊，內容順序比視覺細節更早影響閱讀體驗。

區塊工具列與右側設定欄

區塊工具列會出現在你點選的區塊附近，常用來設定粗體、連結、對齊、移動或轉換區塊。右側設定欄則會顯示更完整的文章設定與區塊設定。

如果你點到空白處，右側可能顯示文章設定；如果你點到圖片，右側就會變成圖片設定。這種「跟著選取內容變化」的設計，是 Gutenberg 新手最需要先適應的地方。

預覽、草稿、排程與發佈

草稿代表內容還沒公開，預覽可以在發佈前檢查前台效果，排程則可以指定未來時間自動發佈。正式發佈前，至少要檢查一次手機版，因為後台看到的寬度不一定等於讀者看到的畫面。

企業網站負責人尤其要注意權限與狀態。如果只是改服務內容，先儲存草稿再請同事或主管確認，通常比直接更新已發佈頁面更穩。

WordPress 區塊怎麼用？新增、移動、複製、刪除一次看懂

WordPress 區塊的基本操作就是新增、移動、複製、刪除與轉換。只要會這幾個動作，就能用 Gutenberg 完成一篇基礎文章，不必懂程式，也不必碰到佈景主題設定。

把每個區塊想成可拆開的內容零件會比較好上手。文章不是一整坨文字，而是標題區塊、段落區塊、圖片區塊、清單區塊依序組合起來。

如何新增一個區塊

1. 進入 WordPress 後台，開啟文章或頁面編輯畫面。
2. 在內容編輯區點一下空白處。
3. 按下加號按鈕，或直接輸入斜線呼叫區塊選單。
4. 選擇需要的區塊，例如段落、標題、圖片、清單、按鈕。
5. 輸入內容或從媒體庫選擇圖片。

如果你只是要繼續寫文字，直接按 Enter 就會產生新的段落區塊。這個動作很像一般打字，但背後其實已經建立了新的區塊。

如何調整區塊順序

調整區塊順序有兩種常見方式。第一種是使用區塊工具列上的上下箭頭，適合小幅度移動；第二種是拖曳區塊，適合把圖片或整段內容搬到另一個位置。

1. 點選要移動的區塊。
2. 在工具列找到上下移動按鈕。
3. 按上移或下移調整位置。
4. 如果內容較長，可開啟清單檢視，從左側拖曳區塊順序。

清單檢視很適合處理長文章。當文章有很多小標、圖片與按鈕時，直接在編輯區拖曳可能不準，從清單檢視移動會更穩。

如何複製、刪除或轉換區塊

點選區塊後，工具列通常會有更多選項。你可以複製區塊、建立副本、刪除區塊，也可以把段落轉成標題、把段落轉成清單，或把圖片改成封面區塊。

1. 點選目標區塊。
2. 打開工具列上的更多選項。
3. 選擇複製、建立副本、移除或轉換。
4. 操作後立刻預覽內容是否符合預期。

不要把「轉換區塊」當成萬能修復工具。有些複雜內容轉換後會遺失格式，例如表格、嵌入內容或外掛產生的特殊區塊。重要頁面操作前先複製一份草稿，比事後補救省時間。

新手最常誤刪內容時怎麼復原

誤刪區塊時，先不要急著重新輸入。你可以用鍵盤復原快捷鍵，或在編輯器上方尋找復原按鈕。若內容已經儲存過，也可以檢查 WordPress 的文章版本紀錄。

新手最容易犯的錯，是刪除後又做了很多其他操作，才回頭找內容。發現不對時先停下來復原，成功率會高很多。

寫文章最常用的 Gutenberg 區塊有哪些？

寫文章最常用的 Gutenberg 區塊通常是段落、標題、圖片、清單、引用、按鈕、表格與嵌入。新手不需要記住所有區塊，只要先知道「內容類型要用哪個區塊」即可。

多數企業部落格其實用不到太多花俏區塊。段落負責說明，標題負責架構，圖片負責輔助理解，按鈕負責引導下一步。內容清楚，比區塊用得多更重要。

內容需求	建議區塊	適合情境	操作提醒
一般文字	段落	文章內文、說明文字	一段只講一個重點，手機閱讀較舒服
內容分層	標題	H2、H3 小節標題	不要只為了字變大就亂用標題
步驟或項目	清單	操作步驟、檢查清單	有順序用編號，無順序用項目符號
圖片說明	圖片	截圖、產品圖、案例圖	上傳前先壓縮，避免拖慢網站
多張圖片	圖庫	作品集、活動紀錄	圖片尺寸盡量一致，版面較穩
重點引言	引用	客戶回饋、重點句	不要把普通段落全部做成引用
行動引導	按鈕	下載、聯絡、查看服務	按鈕文字要明確，不要只寫「點我」
資料比較	表格	價格、規格、差異比較	欄位不要太多，手機版容易擠壓
外部內容	嵌入	影片、社群貼文、地圖	嵌入內容可能受外部平台影響

文字內容：段落、標題、清單、引用

段落是最基本的文字區塊，適合放一般內文。標題區塊用來建立內容層級，例如 H2 是大段落，H3 是大段落底下的小節。

清單適合放步驟、條件、檢查項目。引用則適合放需要被特別看見的句子。我的經驗是，新手只要能正確使用標題和清單，文章可讀性就會明顯提升。

視覺內容：圖片、圖庫、封面

圖片區塊用來插入單張圖片，圖庫適合一次呈現多張圖片，封面區塊則可在圖片上疊文字。一般文章建議先用圖片區塊，不要一開始就大量使用封面，避免前台樣式被佈景主題影響。

上傳圖片前，建議先確認尺寸與檔案大小。Gutenberg 可以放圖片，但圖片太大仍會影響網站速度，這不是編輯器能完全解決的問題。

行動內容：按鈕、表格、嵌入

按鈕適合放在讀者完成一段理解後，例如查看服務、下載檔案或前往聯絡頁。表格適合比較資訊，但欄位不要過多。嵌入區塊則能放影片或外部內容。

如果你的文章同時牽涉費用、安全或完整架站流程，可以在適合的位置放內部連結，例如 網站架設費用、網站安全完整防護、網站架設教學。超出 Gutenberg 的問題，用連結承接，不要硬塞在同一篇文章裡。

用 Gutenberg 編輯一篇文章：從草稿到發佈的實作流程

用 Gutenberg 發佈文章，可以照著「建立標題與架構、補內容、加入圖片與連結、設定分類標籤、放特色圖片、預覽、發佈」的順序完成。這是新手最小可行的文章發佈流程。

很多網站內容出問題，不是因為不會寫，而是發佈前漏掉分類、特色圖片、永久連結或手機預覽。把流程固定下來，會比每次憑感覺操作可靠。

建立標題與文章架構

1. 先輸入文章標題，確認讀者一看就知道內容主題。
2. 用標題區塊排出 H2 與 H3 架構。
3. 每個小節下方先寫一兩句重點，再補充細節。
4. 檢查標題順序，不要從 H2 跳到 H4。

文章架構先出來，後面才不會寫散。尤其是教學文，讀者要的是按順序完成任務，不是看一堆後台功能名詞。

加入圖片、連結與按鈕

圖片適合用來輔助說明操作畫面、成果範例或比較差異。加入圖片時，可以從媒體庫選擇既有圖片，也可以上傳新圖片。連結則可放在文字、圖片或按鈕上。

按鈕不要過度使用。一篇文章中真正需要讀者採取行動的位置通常不多。如果是企業網站，按鈕文字建議寫清楚目的，例如「查看服務內容」、「下載規格表」、「前往聯絡頁」。

設定分類、標籤與特色圖片

分類是文章的主要歸類，標籤是補充描述，特色圖片則常出現在文章列表、社群分享或頁面頂部。這三個欄位都在文章設定中，不在單一區塊設定裡。

• 分類：用來整理網站內容架構，例如 WordPress 教學、網站維護、SEO 基礎。
• 標籤：用來補充細項，不建議建立太多近義標籤。
• 特色圖片：選擇能代表文章主題的圖片，避免與內文第一張圖片重複造成混亂。
• 永久連結：發佈前檢查網址是否清楚，避免事後修改影響連結。

預覽後再發佈

發佈前先按預覽，檢查桌機與手機效果。後台排得好看，不代表前台一定正常，因為前台樣式會受到佈景主題、外掛與網站 CSS 影響。

發佈前檢查項目	為什麼要檢查
標題是否清楚	影響讀者點擊與文章理解
分類是否正確	影響網站內容整理與導覽
特色圖片是否設定	影響文章列表與分享畫面
內文連結是否可點	避免讀者點到錯誤頁面
手機版是否正常	避免表格、圖片、按鈕在小螢幕跑版
狀態是否為草稿、排程或發佈	避免未完成內容提前公開

Gutenberg 和傳統編輯器差在哪？新手該用哪一個？

Gutenberg 和傳統編輯器最大的差異在操作邏輯。傳統編輯器像一個大型文字框，Gutenberg 則用區塊組合內容；新網站建議直接學 Gutenberg，舊網站則要看文章格式、外掛相容性與維護成本。

如果你只是懷念舊介面，未必需要一直停留在 Classic Editor；但如果舊網站有大量短代碼、舊版頁面編輯器內容或客製格式，也不應該貿然全面轉換。

比較項目	Gutenberg 區塊編輯器	傳統編輯器 Classic Editor
操作模式	文字、圖片、按鈕各自成為區塊	主要在單一文字編輯框中操作
版面調整	可移動、複製、轉換單一區塊	較像文書編輯器，版面控制較有限
新手門檻	初期需要適應區塊概念	打字直覺較接近舊習慣
長期維護	符合 WordPress 目前發展方向	適合維持舊內容，但長期可能增加相容性壓力
適合情境	新文章、內容頁、簡單版面	舊網站維護、特殊格式尚未轉換

操作邏輯差異

傳統編輯器的操作像 Word 文件，內容集中在一個編輯框裡。Gutenberg 則把每段內容拆成區塊，點選哪個區塊，就調整哪個區塊。

這對新手一開始會有點卡，但學會後反而更好整理長文章。你不必整段剪下貼上，只要移動區塊即可。

版面控制差異

Gutenberg 的版面控制比傳統編輯器細，尤其是圖片、按鈕、欄位、封面、表格等內容。傳統編輯器也能插入圖片與表格，但調整彈性比較受限。

不過 Gutenberg 的版面仍會受到佈景主題影響。它能讓內容排得更清楚，但不代表所有品牌視覺、首頁設計、互動版面都能靠它完成。

舊文章維護與相容性差異

舊文章如果原本用傳統編輯器寫成，打開後可能會以經典區塊呈現。經典區塊可以保留舊格式，讓你先小幅修改，不必立刻全部轉成 Gutenberg 區塊。

我的建議偏保守：舊文章沒有問題，就不要為了形式一次全部轉換；要改版、補圖、重整架構時，再逐篇處理比較合理。

什麼情況還適合用 Classic Editor？

如果網站有大量舊短代碼、特殊表格、舊外掛產生的內容，或團隊完全依賴傳統編輯器流程，短期內可以繼續用 Classic Editor。重點是知道自己為什麼保留，而不是因為不想學新介面。

情境	建議
新網站或新文章	直接使用 Gutenberg
舊文章格式穩定，暫時只做小修	可先保留 Classic Editor 或經典區塊
準備重整內容架構	逐篇轉 Gutenberg，並逐篇預覽
團隊多人維護網站	建立共同編輯規則，避免有人用舊流程、有人用新流程

Gutenberg 適合做頁面嗎？它和頁面編輯器的界線在哪？

Gutenberg 可以用來編輯頁面，適合服務介紹、關於我們、活動公告、常見問題這類內容型頁面。但它不等於完整頁面建置器，遇到高度客製化首頁、複雜互動或特殊視覺版面時，仍建議交給設計師或工程師處理。

中小企業網站最實際的分工是：日常文字、圖片、按鈕自己改；牽涉版型、動線、速度、程式與跨頁設計，就不要在後台硬調。

頁面需求	適合用 Gutenberg 嗎	原因
修改服務頁文字	適合	主要是內容更新，風險較低
更換頁面圖片	多數適合	只要圖片尺寸與比例正確即可
新增活動公告頁	適合	可用標題、段落、圖片、按鈕完成
重做首頁視覺	通常不適合只靠 Gutenberg	牽涉品牌視覺、響應式版面與設計系統
複雜銷售頁	視情況評估	可能需要 Elementor 或客製設計

適合自己用 Gutenberg 改的內容

適合自己改的內容通常有共同特徵：範圍小、結構單純、改壞後容易復原。例如更新服務說明、替換活動日期、加入一段 FAQ、補一張圖片、修改按鈕連結。

如果你只是要讓網站資訊不要過期，Gutenberg 很夠用。這也是企業內部學 WordPress 區塊編輯器教學最有價值的地方。

建議交給設計師或工程師處理的內容

如果修改會影響整頁版面、手機顯示、網站速度、表單流程、SEO 架構或品牌視覺，就不建議自己硬改。後台能點到某個設定，不代表改了就一定合理。

例如首頁首屏、服務頁轉換區、複雜表單、跨頁共用模板，這些都不只是內容編輯。若需求已經超出內容維護，可以回到 網站架設教學 或 網站需求規劃 重新確認範圍。

舊文章從傳統編輯器轉到 Gutenberg，要注意什麼？

舊文章轉 Gutenberg 前，先備份，再單篇測試，最後才逐步轉換。最需要檢查的是經典區塊、短代碼、表格、圖片對齊、外掛相容性與發佈後前台版面。

舊內容轉換不該追求一次完成。很多老網站的文章牽涉舊外掛、舊版面或手動 HTML，批次轉換很容易把原本沒壞的內容弄壞。

先備份，再轉換

轉換前至少要有可還原的備份。備份可以是主機備份、網站備份外掛產生的檔案，或測試站上的複製內容。重點是出問題時能回到轉換前狀態。

1. 先挑一篇不太重要的舊文章測試。
2. 打開文章後確認是否以經典區塊呈現。
3. 複製成草稿或在測試站操作。
4. 轉換為區塊後檢查前台顯示。
5. 確認沒有跑版，再處理下一篇。

檢查短代碼、表格與圖片

短代碼是用方括號呈現的特殊內容，常由外掛產生，例如表單、圖庫、按鈕或特殊版面。轉換 Gutenberg 後，短代碼不一定壞掉，但顯示結果要逐一確認。

表格與圖片也要特別檢查。舊文章常見問題包含表格在手機版太寬、圖片對齊失效、說明文字位置跑掉、舊 HTML 被拆成奇怪的區塊。這些不一定是 Gutenberg 錯，而是舊內容原本就依賴當時的編輯方式。

不要一次批次轉換所有舊文章

不建議把所有舊文章一次轉成 Gutenberg。比較穩的方式是先分級：流量高、轉換價值高、內容需要更新的文章優先；冷門且顯示正常的文章，先保留經典區塊也可以。

如果舊文章牽涉網站安全、外掛衝突或長期維護，建議先看 網站安全完整防護，確認備份與還原機制，再開始大量整理內容。

Gutenberg 新手常見錯誤與排除方法

Gutenberg 新手最常遇到的問題包含工具列不見、右側設定欄找不到、圖片對齊怪、預覽正常但發佈後跑版、編輯器變慢或無法儲存。多數問題可以從選取狀態、佈景主題、外掛衝突與瀏覽器快取開始排查。

排除問題時不要一次改太多地方。每次只調整一個可能原因，才知道真正造成問題的是哪一項。

問題	可能原因	處理方式
區塊工具列不見	沒有正確選到區塊，或畫面被全螢幕模式影響	重新點選區塊，檢查編輯器顯示模式
右側設定欄找不到	設定欄被收合	點選右上角設定圖示，切換文章設定或區塊設定
圖片對齊怪	圖片尺寸、佈景主題樣式或對齊設定不一致	重新設定圖片寬度與對齊，並檢查手機版
預覽正常，發佈後版面不同	快取、佈景主題樣式或前台 CSS 影響	清除快取，使用無痕視窗檢查前台
編輯器變慢	圖片太大、區塊套件過多、外掛衝突	壓縮圖片，停用非必要區塊外掛測試
無法儲存	登入逾時、外掛衝突、主機限制或網路問題	先複製內容保留，再重新整理或請工程師檢查錯誤紀錄

區塊工具列或設定欄不見

工具列不見時，先確認你有點到正確區塊。Gutenberg 的工具列會依照選取區塊出現，不是永遠固定在同一個位置。

右側設定欄不見時，通常是被收合，或目前顯示的不是你想看的設定。注意上方可能有文章設定與區塊設定兩種切換。

預覽正常，發佈後版面不同

預覽正常但前台跑版，常見原因是快取、佈景主題樣式或外掛影響。後台編輯器看到的是編輯環境，讀者看到的是前台環境，兩者不一定完全一致。

先清除網站快取與瀏覽器快取，再用無痕視窗檢查。如果只有某個區塊出問題，優先檢查該區塊的設定與相關外掛。

編輯器變慢或無法儲存

編輯器變慢常和圖片太大、區塊太多、外掛衝突有關。無法儲存則可能是登入逾時、REST API 被阻擋、主機資源不足或安全外掛設定過嚴。

新手要先保護內容。遇到無法儲存時，先把正在編輯的文字複製到本機文件，再做重新整理、停用外掛測試或請工程師協助。

Gutenberg 學會到什麼程度，就算可以自己維護網站？

能自己維護網站，不代表要會設計版型或寫程式。只要能新增區塊、更新文章、修改頁面文字、更換圖片、設定特色圖片、預覽手機版、復原誤刪內容，就已經能處理多數日常網站維護。

真正的分界在風險。內容更新可以自己來，牽涉版型、功能、速度、安全與整站 SEO 策略時，就該找專業人員處理。

可以自己處理的工作

能力	達成標準
新增區塊	能加入段落、標題、圖片、清單、按鈕
調整內容順序	能移動、複製、刪除區塊
設定文章資料	能設定分類、標籤、特色圖片與永久連結
發佈前檢查	能預覽桌機與手機版，確認連結可用
錯誤復原	能使用復原、版本紀錄或草稿備份找回內容

學到這個程度，對中小企業網站來說已經很有用。網站不會因為一個活動日期、一段服務說明或一張圖片要更新，就每次都卡在工程排程。

不建議自己硬改的工作

• 修改佈景主題檔案或網站程式碼。
• 大幅調整首頁、服務頁或轉換頁版型。
• 處理網站被入侵、惡意程式或大量錯誤訊息。
• 重建分類架構、網址架構或整站 SEO 策略。
• 停用不熟悉的外掛，尤其是表單、安全、快取與多語系外掛。

本文由 makewebsites 陳建宏整理，適合台灣中小企業、自架站新手與網站維護者作為 Gutenberg 入門操作參考。

WordPress Gutenberg 是什麼？

Gutenberg 是 WordPress 目前預設的區塊編輯器，主要用來編輯文章與頁面內容。它把段落、標題、圖片、按鈕等內容拆成可獨立操作的區塊。

Gutenberg 和傳統編輯器差在哪？

傳統編輯器像一個大型文字框，Gutenberg 則把文字、圖片、按鈕、表格都拆成可獨立調整的區塊。Gutenberg 比較適合長期內容維護，傳統編輯器則常用於舊網站過渡。

WordPress 要寫程式嗎？

一般使用 Gutenberg 寫文章、更新頁面不需要寫程式。只有客製版型、功能開發、自訂區塊或修改佈景主題時，才會碰到程式。

我可以繼續用 Classic Editor 嗎？

可以，尤其是舊網站有大量短代碼、特殊格式或團隊尚未轉換流程時。不過網站若要長期維護，建議至少學會 Gutenberg 基本操作，降低未來相容性成本。

舊文章轉 Gutenberg 會不會跑版？

有可能，尤其是表格、短代碼、舊版頁面編輯器內容或手動 HTML。建議先備份，單篇測試後再逐步轉換，不要一次批次處理全部舊文章。

Gutenberg 可以取代 Elementor 嗎？

簡單文章、服務頁與基本版面可以用 Gutenberg 完成；高度客製化首頁、銷售頁或互動版面，通常仍是 Elementor 或客製設計比較適合。

WordPress 可以免費使用嗎？

WordPress 軟體本身可以免費使用，但正式經營網站通常仍會有網域、主機、付費外掛或維護成本。費用細節可參考 網站架設費用。

Gutenberg 編輯器變慢怎麼辦？

先檢查圖片大小、外掛衝突、瀏覽器快取與主機效能。如果只有編輯畫面慢，常見原因是區塊套件過多、外掛載入太重或單篇內容太複雜。

文章用 Gutenberg 發佈前要檢查什麼？

發佈前要檢查標題、分類、標籤、特色圖片、永久連結、內文連結、手機預覽與發佈狀態。重要文章建議先儲存草稿，再預覽確認。

學 Gutenberg 要多久？

只要會新增文字、圖片、標題、清單與按鈕，大約 1 到 2 小時可完成基本上手。若要熟練頁面版面、舊文章轉換與錯誤排除，還需要更多實作。