區塊編輯器完整攻略

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

/ 閱讀時間 7 分鐘 

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

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

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

什麼是區塊編輯器?

Gutenberg

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

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

文章發佈流程

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

儲存草稿

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

Gutenberg 儲存為草稿

新增文章標題

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

輸入文章標題

新增文章內容

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

新增區塊

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

新增區塊 1

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

複製與再製區塊

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

複製區塊

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

再製區塊

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

移動區塊

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

移動區塊

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

移除區塊

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

移除區塊

重複區塊

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

重複區塊

編輯網址代稱

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

編輯網址代稱

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

設定文章的分類與標籤

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

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

新增精選圖片

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

新增精選圖片

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

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

預覽文章

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

預覽文章

發佈文章

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

發佈文章 1

雖然上述是介紹發佈一篇文章的完整流程,但是頁面或其他自訂內容內類型的操作手法也都大同小異,可以參考一下。

結論

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

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

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

0 / 5

Your page rank:

加入「全方位學 WordPress - 從架站到整合行銷」2.0 課程等候名單

我正在改版「全方位學 WordPress - 從架站到整合行銷 2.0」這門課程,適合那些想學習更進階的 WordPress 技術與 SEO 文案寫作技巧的人。歡迎加入課程等候名單,等改版完成後會發送通知。

留言

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

Scroll to Top