WordPress 區塊編輯器介紹，文章排版的最佳拍檔！(完整教學)

自從 WordPress 5.0 發佈之後，傳統的編輯器已不復存在，取而代之的是區塊編輯器。如果你曾經使用 Medium 撰寫文章，對於新的編輯器應該會感到特別親切。

不論你喜不喜歡以「區塊」的方式來編輯內容，只要你是使用 WordPress 這套內容管理系統 (CMS) 遲早都要習慣。

透過本篇文章的教學你會了解什麼是區塊編輯器、常見的區塊操作手法以及發佈一篇文章的完整流程。

什麼是 WordPress 區塊編輯器？

區塊編輯器的英文名稱為 Block Editor，是 WordPress 5.0 或更高版本內建的編輯器，與傳統編輯器不同的地方在於，是以「區塊」為最小編輯單位，使用者可以透過類似堆積木的方式來新增內容，非常直覺與便利。

附帶一提，如果你想測試區塊編輯器，可以前往 WordPress.org 官方提供的網站進行測試。

WordPress 區塊介紹

WordPress 預設的編輯器提供許多實用的區塊，以下介紹幾種我經常使用的區塊，主要用於內容的撰寫上面。

嵌入內容區塊

嵌入內容是我最喜歡的區塊之一，我常用在介紹 WordPress 外掛、引用 Twitter 推文及嵌入 YouTube 影片。

與未經修飾的連結相比漂亮許多，除了能夠抓住讀者的目光外，也可以讓內容看起來更加豐富。

不過嵌入內容區塊也有一些缺點，像是無法自行設定連結目標的開啟方式、載入速度比較慢等等，但大體來說還算可以接受，瑕不掩瑜。

標題區塊

標題是每篇內容必定會出現的區塊，除了能讓讀者快速瀏覽文章的重點外，也可以建立具有層次的內容架構。

一般來說，文章的標題是 H1 標籤，內文若想使用標題，則是從 H2 標籤開始，通常不會超過 H3 標籤。

另外，如果你有使用內容目錄外掛，在內容中務必新增標題區塊以便讓其抓取。

段落區塊

段落是撰寫內容必備的區塊之一，同時也是編輯內容時預設的區塊。

為了讓讀者更好閱讀你的文章，每個段落建議控制在 3 行以內，過長的段落會讓人失去耐心。

至於樣式要到哪裡調整，我個人建議先沿用佈景主題的設定，若有特別需求才會在段落區塊內的色彩及尺寸進行調整，這種做法會比較有效率。

清單區塊

清單分為有序清單與無序清單兩種，主要用於條列文章的重點資訊，方便讀者迅速抓住重點。

有序清單預設的樣式為數字，無序清單則是小點。若你覺得太單調，可以調整list-style-type屬性值，細節請參考 W3Schools 教學。

當然，你也可以自訂清單圖示，不過內建並沒有提供這項功能，你可以安裝 Stackable 這類擴充外掛加強。

按鈕組區塊

如果你想在文章中暗示讀者採取指定的行動，那麼新增按鈕是不錯的選擇，因為預設連結的外觀並沒有很明顯。

在某些情境中，你可能需要新增多組按鈕，內建的按鈕組區塊可以實現，這部分倒不用擔心。

表格區塊

不論是彙整資訊、比較產品還是展示方案，表格都很適合處理這類工作。

內建的表格區塊有「一般」與「條紋」兩種樣式可選，我個人偏好條紋，因為看起來比較有變化。

當然，預設的表格區塊設定有限，如果你的需求相對複雜，可以透過 Ninja Tables 外掛擴充或者使用 HTML Table Generator 線上工具製作。

圖片區塊

圖片算是每篇文章必備的元素之一，因為文章如果只有文字，整體的畫面會看起來很單調。

如果你想讓使用者看清楚圖片中的內容，可以啟用燈箱效果。由於 WordPress 已內建這項功能，所以就不需要安裝相關的外掛。

另外，為了提升圖片 SEO 分數，你還需要設定替代文字，以便讓搜尋引擎了解圖片背後的意思。

圖庫區塊

如果你想一次展示多張圖片，那麼圖庫區塊會可以解決你的問題。

與圖片相同，圖庫也可以啟用燈箱效果。此外，你也能決定是否要裁切圖庫中的圖片，以便讓每張圖片對齊，畫面會好看許多。

附帶一提，我個人蠻喜歡圖庫下方說明文字與陰影的搭配，感覺很有質感。

程式碼區塊

如果你想在文章中展示程式碼，那麼內建的程式碼區塊能派上用場。

雖說預設的程式碼區塊最初的設計目的是讓你撰寫程式碼，但你也可以當成重點提示的功能。

如果你覺得預設的程式碼區塊太單調，可以考慮安裝 Highlighting Code Block 外掛加強。

區塊編輯器操作技巧

善用一些區塊編輯器的操作技巧能讓你的工作效率大幅提升。

技巧 #1：新增區塊

點選左上角「+」圖示以選擇你想要新增的區塊，或者直接在段落區塊輸入斜線+區塊名稱也行。常見的寫作區塊有標題、段落、圖片等等。

當你想要新增下一個區塊時，可以直接按「Enter」鍵就會從下一行開始。如果想要在任一地方新增區塊，只需將滑鼠游標移到你想要插入的區塊之間即可看到「新增」按鈕。

技巧 #2：複製與再製區塊

「複製區塊」與「再製區塊」的差別在於前者是將區塊複製到剪貼簿，你可以稍後貼到想要出現的位置；後者則是再製一個區塊，會直接出現在下一行。

複製區塊的方式：選擇你想要複製的區塊之後，前往工具列的「設定」並點選「複製」。

再製區塊的方式：選擇你想要再製的區塊之後，前往工具列的「設定」並點選「再製」。

「再製」與「複製」比較

技巧 #3：移動區塊

如果你想要移動區塊，可以透過「拖曳」、「上下移動」與「移至」3 種方式達成。小範圍的移動可以使用「上下移動」，大範圍的移動可以使用「拖曳」或者「移至」。

技巧 #4：移除區塊

移除區塊的方式很簡單，選擇你想要移除的區塊，接著前往工具列的「設定」並點選「移除區塊」即可。

技巧 #5：重複使用區塊

如果你想重複使用已設定好的區塊，那麼可以將其建立區塊版面配置以便未來有需要時能反覆利用，設定步驟如下：

步驟

建立區塊版面配置

選取你想要重複使用的區塊後，點選工具列上的 [設定] 並按下 [建立區塊版面配置]。

步驟

設定區塊版面配置

接著，輸入名稱及選擇分類，以便未來能快速找到先前所儲存的區塊。視情況你還能啟用 [完全同步]，當你開啟這項功能後，只要修改其中一個區塊的內容，就會同時套用在其它完全同步的區塊上，非常方便。

步驟

使用可重複區塊

在編輯器的左上角開啟區塊插入器後，點選 [區塊版面配置]，接著找到當初建立的類別並選擇你想要使用的區塊。

技巧 #6：換行

如果你想在區塊編輯器中換行，按下Shift + Enter鍵即可；如果你想換段落，只需按下Enter鍵。

技巧 #7：匯入/匯出區塊

技巧 #8：畫重點

技巧 #9：善用清單檢視功能

當你使用區塊編輯器設計相對複雜的版面配置時，可能會分不清楚區塊間的上下層關係。因此，你可以使用清單檢視功能以了解整體的輪廓，進而提升工作效率。

區塊版面配置目錄

如果你想使用現成的區塊範本，可以前往官方的區塊版面配置目錄尋找，總共包含精選、文章、文字內容、圖庫、行動號召、橫幅、頁首、頁尾、線框等 9 大類別。找到你想使用的區塊版面配置後，可以一鍵複製並貼在文章中，非常方便。

除了複製貼上外，你也可以將喜歡的區塊版面配置加入最愛，以便未來有需用時能快速找到；或者貢獻自己所設計的區塊版面配置。附帶一提，上述功能需要先建立 WordPress.org 平台帳號才能使用。

WordPress 文章發佈流程

一篇文章從「撰寫」到「發佈」至少需要 8 個步驟，如下：

步驟

儲存草稿

在開始說明如何使用區塊編輯器發佈一篇文章前，你需要先了解儲存草稿的方法，以免碰到各種突發狀況導致文章消失，進而浪費許多時間！

儲存草稿的方法很簡單，只需在編輯器上方點選「儲存草稿」即可，建議養成經常儲存草稿的習慣。

步驟

新增文章標題

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

Error: https://wpelectrinc.com/what-is-title-tag-in-seo/

步驟

新增文章內容

每篇文章是由數個區塊所堆疊而成，當你新增一種區塊後，在編輯器右側 [設定]→[區塊] 就會顯示該區塊的設定。

步驟

編輯文章連結

文章連結是自訂網址的最後部分，會按照你輸入的「標題」自動產生。建議使用「英文」，以免將文章分享到社群上時，出現類似亂碼的網址。

Error: https://wpelectrinc.com/what-is-permalink-in-wordpress/

步驟

新增分類與標籤

你可以透過分類與標籤將文章分門別類，讓讀者自行選擇想要查看的類別。新增分類與標籤的方法有兩種：第一種是在編輯畫面的右側新增；第二種是前往以下路徑新增：

1. 分類：[文章]→[分類]
2. 標籤：[文章]→[標籤]

Error: https://wpelectrinc.com/wordpress-categories-vs-tags/

步驟

新增精選圖片

精選圖片是代表文章的圖片，尺寸建議為「1200×630」像素，你可以使用 MyEdit 這類線上工具裁切圖片。

雖然每一種佈景主題對於精選圖片尺寸的規範都不相同，但是考量到文章最常分享到 Facebook 以及未來可能會更換佈景主題，套用 Facebook 的貼文尺寸是最安全的做法。

Error: https://wpelectrinc.com/set-default-wordpress-feature-image/

如果你在編輯區域的右側沒有看到「精選圖片」的設定選項，可以點選右上方的三個小點，然後前往 [偏好設定]→[一般]，將「精選圖片」啟用即可。

步驟

預覽文章

當你寫完一篇文章後，可以透過「預覽」功能查看文章在網站前端呈現的樣貌，以確認是否符合心中的期待。

延伸閱讀：Public Post Preview 介紹，業配必備的校稿工具 (WordPress 外掛)

步驟

發佈文章

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

WordPress 區塊編輯器與 Elementor 比較

區塊編輯器是 WordPress 原生的編輯器，Elementor 則是市佔率最高的編輯器，那麼兩者間的區別是什麼？你可以參考以下比較表格。

常見問題

列舉一些區塊編輯器 (Block Editor) 的常見問題。