自從 WordPress 5.0 發佈之後,傳統的編輯器已不復存在,取而代之的是區塊編輯器。如果你曾經使用 Medium 撰寫文章,對於新的編輯器應該會感到特別親切。
不論你喜不喜歡以「區塊」的方式來編輯內容,只要你是使用 WordPress 這套內容管理系統 (CMS) 遲早都要習慣。
透過本篇文章的教學你會了解什麼是區塊編輯器、常見的操作手法以及發佈一篇文章的完整流程。
什麼是區塊編輯器?

區塊編輯器是 WordPress 5.0 或更高版本內建的編輯器,與傳統編輯器不同的地方在於,是以「區塊」為最小編輯單位,使用者可以透過類似堆積木的方式來新增內容,非常直覺與便利。
※區塊編輯器源自於 Gutenberg 開放原始碼專案,這項專案總共分成四個階段,分別是內容編輯、客製化、協同作業及多語內容。如果你有興趣了解後續的發展,可以追蹤 Make WordPress Core 官方部落格以便獲得最新的資訊。
常見區塊介紹
WordPress 預設的編輯器提供許多實用的區塊,以下介紹幾種我經常使用的區塊,主要用於內容的撰寫上面。
嵌入內容區塊
嵌入內容是我最喜歡的區塊之一,我常用在介紹 WordPress 外掛、引用 Twitter 推文及嵌入 YouTube 影片。
與未經修飾的連結相比漂亮許多,除了能抓住讀者的目光,也可以讓內容看起來更加豐富。
不過嵌入內容區塊也有一些缺點,像是無法自行設定連結目標的開啟方式、載入速度比較慢…等等,但大體來說還算可以接受,瑕不掩瑜。
標題區塊
標題是每篇內容必定會出現的區塊,除了能讓使用者快速瀏覽文章的重點外,也可以建立具有層次的內容架構。
一般來說,文章的標題是 H1 標籤,內文若想使用標題,則是從 H2 標籤開始,通常不會超過 H3 標籤。
另外,如果你有使用內容目錄相關的外掛,在內容中務必要新增標題區塊,以方便其抓取。
段落區塊
段落是撰寫內容必備的區塊之一,同時也是編輯內容時預設的區塊。
為了讓讀者更好閱讀你的文章,每個段落建議控制在 3 行以內,過長的段落會讓人失去耐心。
至於樣式要到哪裡調整,我個人建議先沿用佈景主題的設定,若有特別需求才會在段落區塊內的色彩及尺寸進行調整。
清單區塊
清單分為有序清單與無序清單兩種,主要用於條列文章的重點資訊,方便讀者迅速抓住重點。
有序清單預設的樣式為數字,無序清單則是小點。若你覺得太單調,可以使用list-style-type
屬性進行修改,細節請參考 W3Schools 教學。
圖片區塊
圖庫區塊
表格區塊
空白間格區塊
短代碼區塊
文章發佈流程
在開始說明如何使用區塊編輯器發佈一篇文章前,你需要先了解儲存草稿的方法,以免碰到各種突發狀況導致文章沒有儲存,浪費許多時間!
儲存草稿
儲存草稿的方法很簡單,只需在編輯器上方點選「儲存草稿」即可,建議養成經常儲存草稿的習慣。

新增文章標題
在「新增標題」的欄位輸入你的文章標題,預設的文章標題是 H1 標籤。

新增文章內容
你可以透過區塊來新增文章內容,每當你新增一種區塊時,在編輯器左方的「設定」»「區塊」就會顯示該區塊相對應的設定。以下是幾種區塊常見的操作方法:
新增區塊
點選左上角的「+」圖示,接著選擇你想要新增的區塊,常見的寫作區塊有標題、段落、圖片…等等。

當你想要新增下一個區塊時,可以直接按「Enter」鍵就會從下一行開始。如果想要在任一地方新增區塊,只需將滑鼠游標移到你想要插入的區塊之間即可看到「新增」按鈕。
複製與再製區塊
「複製區塊」與「再製區塊」的差別在於前者是將區塊複製到剪貼簿,你可以稍後貼到想要出現的位置;後者則是再製一個區塊,會直接出現在下一行。

複製區塊的方式:選擇你想要複製的區塊之後,前往功能列的「設定」並點選「複製」。

再製區塊的方式:選擇你想要再製的區塊之後,前往功能列的「設定」並點選「再製」。
移動區塊
如果你想要移動區塊,可以透過「拖曳」、「上下移動」與「移至」這三種方式達成。小範圍的移動可以使用「上下移動」,大範圍的移動可以使用「拖曳」或者是「移至」。

※小技巧:如果你想要移動的區塊數量不只一個,可以先將這些區塊組成群組再移動。
移除區塊
移除區塊的方式很簡單,選擇你想要移除的區塊,接著前往工具列的「設定」並點選「移除區塊」即可。

重複區塊
如果你經常使用某一種區塊,可以將其儲存為可重複使用區塊,以便之後需要時可以立即套用,節省許多時間。

延伸閱讀:如何在 WordPress 匯入與匯出區塊?(2 種方法)
針對某段文字畫重點
編輯網址代稱
當你在 WordPress 新增文章時,網址代稱會根據你輸入的標題自動產生。你可以在編輯器左側的 [文章]→[永久連結] 更改網址代稱。

※小技巧:網址代稱建議使用英文,原因是當你在分享內容時,如果使用中文的網址代稱,會呈現類似亂碼的網址,進而影響到點閱率。
設定文章的分類與標籤
你可以透過分類與標籤將文章分組,讓讀者可以根據他們的需求或喜好選擇想要查看的內容。以下是 WordPress 分類與標籤的說明:
- 文章一定會有分類,如果沒有選擇分類,則會指派成 WordPress 預設的文章分類
- 文章不一定要有標籤

新增精選圖片
你可以在編輯器右方的「文章」»「精選圖片」新增一張代表文章的圖片,尺寸建議使用 1200 x 628 px。

雖然每一種佈景主題對於精選圖片尺寸的規範都不相同,但是考量到文章最常分享到 Facebook 以及未來可能會更換佈景主題,套用 Facebook 的貼文尺寸是最安全的作法。
你可以使用免費的圖片裁切工具,像是 Adobe Photoshop Express、Canva、Photopea 調整精選圖片的尺寸。
預覽文章
當你完成一篇文章完成之後,可以透過預覽的方式確認文章在網站前台呈現的版面配置,以確認是否符合心目中的樣子。

發佈文章
確認沒有問題之後點選「發佈」即可讓文章上線,讀者就會看到你的文章囉!

雖然上述是介紹發佈一篇文章的完整流程,但是頁面或其他自訂內容內類型的操作手法也都大同小異,只要你是使用區塊編輯器處理內容都可以參考一下。
區塊編輯器與 Elementor 比較
區塊編輯器是 WordPress 原生的編輯器,Elementor 則是市佔率最高的編輯器,那麼兩者間的區別是什麼?
區塊編輯器 | Elementor | |
最小編輯單位 | 區塊 | 元素 |
是否需要另外安裝外掛? | 否 | 是 |
費用 | 完全免費 | 免費版/付費版 |
常見問題
列舉一些關於區塊編輯器 (Block Editor) 的常見問題。
結論
透過本篇文章你學會了新的 WordPress 編輯器的操作方式,這將有助於日後可以更順暢地新增內容。另外,可以追蹤本篇文章,我會陸續新增與更新內容。
如果你想要請人幫你上架文章,可以參考我們的 WordPress 服務。我們有豐富的經驗可以幫你處理上架文章與簡易排版,讓你專注在事業的發展上!