每月僅需 600 元起便能享有快速、安全及穩定的主機空間

區塊編輯器完整攻略

WordPress 區塊編輯器完整攻略 (持續更新)

/ 閱讀時間 16 分鐘 

最後更新時間 : 2023 年 9 月 12 日

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

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

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

什麼是區塊編輯器?

Gutenberg

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

※區塊編輯器源自於 Gutenberg 開放原始碼專案,這項專案總共分成四個階段,分別是內容編輯、客製化、協同作業及多語內容。如果你有興趣了解後續的發展,可以追蹤 Make WordPress Core 官方部落格以便獲得最新的資訊。

常見區塊介紹

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

嵌入內容區塊

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

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

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

標題區塊

標題區塊

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

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

另外,如果你有使用內容目錄相關的外掛,在內容中務必要新增標題區塊,以方便其抓取。

段落區塊

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

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

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

清單區塊

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

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

按鈕組區塊

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

圖片區塊

圖庫區塊

表格區塊

空白間格區塊

短代碼區塊

文章發佈流程

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

儲存草稿

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

Gutenberg 儲存為草稿

新增文章標題

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

新增文章內容

你可以透過區塊來新增文章內容,每當你新增一種區塊時,在編輯器左方的「設定」»「區塊」就會顯示該區塊相對應的設定。以下是幾種區塊常見的操作方法:

新增區塊

點選左上角的「+」圖示,接著選擇你想要新增的區塊,常見的寫作區塊有標題、段落、圖片…等等。

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

複製與再製區塊

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

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

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

移動區塊

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

※小技巧:如果你想要移動的區塊數量不只一個,可以先將這些區塊組成群組再移動。

移除區塊

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

重複區塊

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

延伸閱讀:如何在 WordPress 匯入與匯出區塊?(2 種方法)

針對某段文字畫重點

編輯網址代稱

當你在 WordPress 新增文章時,網址代稱會根據你輸入的標題自動產生。你可以在編輯器左側的 [文章]→[永久連結] 更改網址代稱。

※小技巧:網址代稱建議使用英文,原因是當你在分享內容時,如果使用中文的網址代稱,會呈現類似亂碼的網址,進而影響到點閱率。

設定文章的分類與標籤

你可以透過分類與標籤將文章分組,讓讀者可以根據他們的需求或喜好選擇想要查看的內容。以下是 WordPress 分類與標籤的說明:

  • 文章一定會有分類,如果沒有選擇分類,則會指派成 WordPress 預設的文章分類
  • 文章不一定要有標籤

新增精選圖片

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

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

你可以使用免費的圖片裁切工具,像是 Adobe Photoshop ExpressCanvaPhotopea 調整精選圖片的尺寸。

預覽文章

當你完成一篇文章完成之後,可以透過預覽的方式確認文章在網站前台呈現的版面配置,以確認是否符合心目中的樣子。

發佈文章

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

雖然上述是介紹發佈一篇文章的完整流程,但是頁面或其他自訂內容內類型的操作手法也都大同小異,只要你是使用區塊編輯器處理內容都可以參考一下。

區塊編輯器與 Elementor 比較

區塊編輯器是 WordPress 原生的編輯器,Elementor 則是市佔率最高的編輯器,那麼兩者間的區別是什麼?

區塊編輯器Elementor
最小編輯單位區塊元素
是否需要另外安裝外掛?
費用完全免費免費版/付費版

常見問題

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

結論

透過本篇文章你學會了新的 WordPress 編輯器的操作方式,這將有助於日後可以更順暢地新增內容。另外,可以追蹤本篇文章,我會陸續新增與更新內容。

如果你想要請人幫你上架文章,可以參考我們的 WordPress 服務。我們有豐富的經驗可以幫你處理上架文章與簡易排版,讓你專注在事業的發展上!

這篇文章對您是否有幫助?

0 / 5

Your page rank:

不滿意現有網站的速度嗎?😥

我們提供的 WordPress 網站代管服務能讓你的網站快如閃電,進而提升使用者體驗與 SEO 排名。

全方位學 WordPress – 從架站到整合行銷 2.0

這是一門 WordPress 架站與 SEO 行銷課程,學完後便能擁有更全面的架站技能並且透過課程所教的行銷操作手法與資源,讓你的網站獲得更多曝光的機會,進而帶來收益。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *


購物車

聯絡我們

請填寫以下表單,我們將盡速與您聯繫

聯絡資訊
需求確認


驅動

關於我們

驅動數位行銷成立於 2019 年,提供個人或企業在網路上的各種行銷解決方案,主要的服務項目包含:網頁設計、網站代管以及搜尋引擎最佳化。與其他網頁設計公司不同之處在於,我們是以獲得更多流量、名單、銷售與轉介紹為導向。

PRO 360 專家檔案