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

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

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

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

什麼是 WordPress 區塊編輯器？

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

WordPress 區塊介紹

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

嵌入內容區塊

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

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

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

標題區塊

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

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

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

段落區塊

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

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

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

清單區塊

清單分為有序清單與無序清單兩種，前者的樣式為數字，用於列出重要程度相近的項目；後者則是小點，適合按步驟說明的項目。

如果你覺得預設的樣式太單調，可以調整list-style-type屬性值，細節請參考 W3Schools 教學。

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

按鈕組區塊

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

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

延伸學習：CTA 是什麼？6 種常見類型及 8 個設計重點

表格區塊

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

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

當然，預設的表格區塊設定有限，如果你的需求相對複雜，可以透過 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 設定文章到期日期？

WordPress 區塊編輯器與 Elementor 比較

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

常見問題

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