驅動數位行銷
協助中小企業提升網站在搜尋結果頁上的能見度，以便獲取更多流量進而增加成交機率。
加入 WordPress 學習交流社團
為什麼要加入本社團？好處如下：
- 問題解答
- 免費教學
- 好用工具推薦
- 最新資訊
- 秘訣分享
- 100+參考指引
WordPress 區塊編輯器介紹，文章排版的最佳拍檔！(完整教學)
自從 WordPress 5.0 發佈之後，傳統的編輯器已不復存在，取而代之的是區塊編輯器。如果你曾經使用 Medium 撰寫文章，對於新的編輯器應該會感到特別親切。
不論你喜不喜歡以「區塊」的方式來編輯內容，只要你是使用 WordPress 這套內容管理系統 (CMS) 遲早都要習慣。
透過本篇文章的教學你會了解什麼是區塊編輯器、常見的區塊操作手法以及發佈一篇文章的完整流程。
什麼是 WordPress 區塊編輯器？
區塊編輯器的英文名稱為 Block Editor，是 WordPress 5.0 或更高版本內建的編輯器，與傳統編輯器不同的地方在於，是以「區塊」為最小編輯單位，使用者可以透過類似堆積木的方式來新增內容，非常直覺與便利。
※區塊編輯器源自於 Gutenberg 開放原始碼專案，這項專案總共有四個階段，分別是內容編輯、客製化、協同作業及多語內容。如果你有興趣了解後續的發展，可以追蹤 Make WordPress Core 官方部落格以便獲得最新消息。
WordPress 區塊介紹
WordPress 預設的編輯器提供許多實用的區塊，以下介紹幾種我經常使用的區塊，主要用於內容的撰寫上面。
嵌入內容區塊
嵌入內容是我最喜歡的區塊之一，我常用在介紹 WordPress 外掛、引用 Twitter 推文及嵌入 YouTube 影片。
與未經修飾的連結相比漂亮許多，除了能夠抓住讀者的目光外，也可以讓內容看起來更加豐富。
不過嵌入內容區塊也有一些缺點，像是無法自行設定連結目標的開啟方式、載入速度比較慢等等，但大體來說還算可以接受，瑕不掩瑜。
標題區塊
標題是每篇內容必定會出現的區塊，除了能讓讀者快速瀏覽文章的重點外，也可以建立具有層次的內容架構。
一般來說，文章的標題是 H1 標籤，內文若想使用標題，則是從 H2 標籤開始，通常不會超過 H3 標籤。
另外，如果你有使用內容目錄外掛，在內容中務必新增標題區塊以便讓其抓取。
段落區塊
段落是撰寫內容必備的區塊之一，同時也是編輯內容時預設的區塊。
為了讓讀者更好閱讀你的文章，每個段落建議控制在 3 行以內，過長的段落會讓人失去耐心。
至於樣式要到哪裡調整，我個人建議先沿用佈景主題的設定，若有特別需求才會在段落區塊內的色彩及尺寸進行調整，這種做法會比較有效率。
按鈕組區塊
如果你想在文章中暗示讀者採取指定的行動，那麼新增按鈕是不錯的選擇，因為預設連結的外觀並沒有很明顯。
在某些情境中，你可能需要新增多組按鈕，內建的按鈕組區塊可以實現，這部分倒不用擔心。
表格區塊
不論是彙整資訊、比較產品還是展示方案，表格都很適合處理這類工作。
內建的表格區塊有「一般」與「條紋」兩種類型可選，我個人偏好條紋，因為看起來比較有變化。
當然，預設的表格區塊設定有限，如果你的需求相對複雜，可以透過 Ninja Tables 外掛擴充或者使用 HTML Table Generator 線上工具製作。
圖片區塊
圖片算是每篇文章必備的元素之一，因為文章如果只有文字，整體的畫面會看起來很單調。
如果你想讓使用者看清楚圖片中的內容，可以啟用燈箱效果。由於 WordPress 已內建這項功能，所以就不需要安裝相關的外掛。
另外，為了提升圖片 SEO 分數，你還需要設定替代文字，以便讓搜尋引擎了解圖片背後的意思。
圖庫區塊
如果你想一次展示多張圖片，那麼圖庫區塊會可以解決你的問題。
與圖片相同，圖庫也可以啟用燈箱效果。此外，你也能決定是否要裁切圖庫中的圖片，以便讓每張圖片對齊，畫面會好看許多。
附帶一提，我個人蠻喜歡圖庫下方說明文字與陰影的搭配，感覺很有質感。
程式碼區塊
如果你想在文章中展示程式碼，那麼內建的程式碼區塊能派上用場。
雖說預設的程式碼區塊最初的設計目的是讓你撰寫程式碼，但你也可以當成重點提示的功能。
區塊編輯器操作技巧
善用一些區塊編輯器的操作技巧能讓你的工作效率大幅提升。
技巧 #1：新增區塊
點選左上角「+」圖示以選擇你想要新增的區塊，或者直接在段落區塊輸入斜線+區塊名稱也行。常見的寫作區塊有標題、段落、圖片等等。
當你想要新增下一個區塊時，可以直接按「Enter」鍵就會從下一行開始。如果想要在任一地方新增區塊，只需將滑鼠游標移到你想要插入的區塊之間即可看到「新增」按鈕。
技巧 #2：複製與再製區塊
「複製區塊」與「再製區塊」的差別在於前者是將區塊複製到剪貼簿，你可以稍後貼到想要出現的位置；後者則是再製一個區塊，會直接出現在下一行。
複製區塊的方式：選擇你想要複製的區塊之後，前往工具列的「設定」並點選「複製」。
再製區塊的方式：選擇你想要再製的區塊之後，前往工具列的「設定」並點選「再製」。
「再製」與「複製」比較
| 說明 | |
| 再製 | 將原有的區塊重新再製作一個 |
| 複製 | 複製區塊的樣式 |
技巧 #3：移動區塊
如果你想要移動區塊，可以透過「拖曳」、「上下移動」與「移至」3 種方式達成。小範圍的移動可以使用「上下移動」，大範圍的移動可以使用「拖曳」或者「移至」。
小技巧
如果你想要移動的區塊數量不只一個，可以先將這些區塊組成群組再移動。
技巧 #4：移除區塊
移除區塊的方式很簡單，選擇你想要移除的區塊，接著前往工具列的「設定」並點選「移除區塊」即可。
技巧 #5：重複使用區塊
如果你想重複使用已設定好的區塊，那麼可以將其建立區塊版面配置以便未來有需要時能反覆利用，設定步驟如下：
步驟
建立區塊版面配置
選取你想要重複使用的區塊後，點選工具列上的 [設定] 並按下 [建立區塊版面配置]。
步驟
設定區塊版面配置
接著，輸入名稱及選擇分類，以便未來能快速找到先前所儲存的區塊。視情況你還能啟用 [完全同步]，當你開啟這項功能後，只要修改其中一個區塊的內容，就會同時套用在其它完全同步的區塊上，非常方便。
步驟
使用可重複區塊
在編輯器的左上角開啟區塊插入器後，點選 [區塊版面配置]，接著找到當初建立的類別並選擇你想要使用的區塊。
可重複使用區塊 (Reusable Block) 已更名為區塊版面配置 (Patterns)。
技巧 #6：換行
如果你想在區塊編輯器中換行，按下Shift + Enter鍵即可；如果你想換段落，只需按下Enter鍵。
| 換行 | 換段落 | |
|---|---|---|
| 方法 | Shift + Enter | Enter |
| 行距 | 不會產生 | 會產生 |
| 產生新區塊 | 不會 | 會 |
技巧 #7：匯入/匯出區塊
技巧 #8：畫重點
新增超連結
選取你要的文字後，在工具列找到連結圖示，輸入網址並按下右側的 [傳送] 按紐圖示即可。你可以選擇是否要開新頁及新增屬性。更多連結屬性的介紹可參考下方文章。
區塊版面配置目錄
如果你想使用現成的區塊範本，可以前往官方的區塊版面配置目錄尋找，總共包含精選、文章、文字內容、圖庫、行動號召、橫幅、頁首、頁尾、線框等 9 大類別。找到你想使用的區塊版面配置後，可以一鍵複製並貼在文章中，非常方便。
除了複製貼上外，你也可以將喜歡的區塊版面配置加入最愛，以便未來有需用時能快速找到；或者貢獻自己所設計的區塊版面配置。附帶一提，上述功能需要先建立 WordPress.org 平台帳號才能使用。
WordPress 文章發佈流程
一篇文章從撰寫到發表需要 8 個步驟，如下：
步驟
儲存草稿
在開始說明如何使用區塊編輯器發佈一篇文章前，你需要先了解儲存草稿的方法，以免碰到各種突發狀況導致文章沒有儲存，浪費許多時間！
儲存草稿的方法很簡單，只需在編輯器上方點選「儲存草稿」即可，建議養成經常儲存草稿的習慣。
步驟
新增文章標題
在「新增標題」的欄位輸入你的文章標題，預設的文章標題是 H1 標籤。
步驟
新增文章內容
每篇文章是由數個區塊所堆疊而成，當你新增一種區塊後，在編輯器左側 [設定]→[區塊] 就會顯示該區塊的設定。
步驟
編輯永久連結
當你在 WordPress 新增文章時，永久連結會根據你輸入的標題自動產生。你可以在編輯器左側的 [文章]→[永久連結] 更改永久連結。
步驟
新增分類與標籤
你可以透過分類與標籤將文章分門別類，讓讀者自行選擇想要查看的類別。新增分類與標籤的方法有兩種：第一種是在編輯畫面的右側新增；第二種是前往以下路徑新增：
- 分類：[文章]→[分類]
- 標籤：[文章]→[標籤]
分類與標籤的區別是什麼？WordPress 架站必知！
分類與標籤都屬於 WordPress 文章預設的「分類法」，算是另一種提供使用者查找網站資料的方式。本篇文章將 […]
步驟
新增精選圖片
在編輯器右側前往 [文章]→[精選圖片] 並新增一張代表文章的圖片，尺寸建議使用 1200 x 630 px。
雖然每一種佈景主題對於精選圖片尺寸的規範都不相同，但是考量到文章最常分享到 Facebook 以及未來可能會更換佈景主題，套用 Facebook 的貼文尺寸是最安全的作法。
你可以使用 Adobe Photoshop Express、Canva、Photopea 這類的圖片裁切工具調整精選圖片的尺寸。
如果你在編輯區域的右側沒有看到「精選圖片」的設定選項，可以點選右上方的三個小點，然後前往 [偏好設定]→[一般]，將「精選圖片」啟用即可。
步驟
預覽文章
當你完成一篇文章完成之後，可以透過預覽的方式確認文章在網站前台呈現的版面配置，以確認是否符合心目中的樣子。
步驟
發佈文章
確認沒有問題之後點選「發佈」即可讓文章上線，讀者就會看到你的文章囉！
WordPress 區塊編輯器與 Elementor 比較
區塊編輯器是 WordPress 原生的編輯器，Elementor 則是市佔率最高的編輯器，那麼兩者間的區別是什麼？你可以參考以下比較表格。
| 區塊編輯器 | Elementor | |
| 最小編輯單位 | 區塊 | 元素 |
| 是否需要另外安裝外掛？ | 否 | 是 |
| 費用 | 完全免費 | 免費版/付費版 |
常見問題
列舉一些區塊編輯器 (Block Editor) 的常見問題。
Gutenberg 是區塊編輯器嗎？
不是。區塊編輯器是 WordPress 預設的編輯器，不需要安裝外掛就能使用；Gutenberg 是一款外掛，內含許多實驗性質的功能，部分功能有機會出現在區塊編輯器上，兩者相關但仍有不同之處。
區塊編輯器預設的區塊是什麼？
段落區塊。
某些區塊離下方的區塊太近，要如何解決這個問題？
如果區塊本身沒有調整邊框間距 (Padding) 或邊界 (Margin) 的設定，你就只能透過空白間隔區塊或寫 CSS 讓區塊間保持適當的距離。
如何讓區塊動起來，以抓住網站訪客的目光？
你可以安裝 Blocks Animation 外掛實現。
可以使用 Elementor 寫文章嗎？
如何將區塊編輯器轉換成傳統編輯器？
你可以安裝 Classic Editor 外掛實現，啟用即設定完成。
如何將區塊小工具還原成傳統小工具？
你可以安裝 Classic Widgets 外掛實現，啟用即設定完成。
結論
透過本篇文章你學會了新的 WordPress 編輯器的操作方式，這將有助於日後可以更順暢地新增內容。另外，可以追蹤本篇文章，我會陸續新增與更新內容。
如果你想要請人幫你上架文章，可以參考 WordPress 文章排版服務，我們有豐富的經驗可以幫你處理上架文章與簡易排版，讓你專注在事業的發展上！
參考資料
瀏覽次數： 1,410
