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