fbpx
Elementor 編輯器:60% 優惠

WordPress 區塊編輯器 (Block Editor) 是什麼?【完整教學系列】

隨著在 2022 年 1 月 25 日來臨,新版的 WordPress 5.9 正式發布,會為我們帶來一系列的新變革和創新的操作習慣,包含 全站編輯 (Full Site Editing / FSE)區塊佈景主題 (Block Themes)WordPress 區塊版面配置目錄 (Patterns)WordPress 官方圖庫 | Openverse 等等的重大創新改革,距離完全開放及發展成熟仍有一段時間距離,但我們可以觀望 WordPress 程式的核心工程師正一步步帶我們走向全新的世界。

這是時代交替必然發生的結果,在 WordPress 5.0 版本更新之後,經典的舊版編輯器已替換為全新的 Block Editor (區塊編輯器),並持續快速地改良和完善功能,差不多每個小版本的改動,其核心都是圍繞著【區塊 Block】,但新手們對這個轉變的基礎認知又有多少?也許有人說毋須了解這類基礎知識,也可以愉快地使用 WordPress 撰寫文章,但觀念的底子和基礎不穩,會為往後選擇各種方向時,做出錯誤決策的機率提高。最後,希望新手們養成喜歡閱讀技術文件和說明的重要性,祝大家閱讀愉快。

關於 Block Editor (區塊編輯器) 的各類延伸有很多,我們這篇文章盡量保持簡單,但您可以從這篇文章了解 WordPress 開發核心的脈絡和路線圖。沒有任何東西是突然變出來的,新的編輯器在不停改良的過程中,也是會遇上失敗和不如人意的地方,也許讓我們持續觀察下去。

Youtube 教學影片:

影片長度:12 分鐘
語言:國語
字幕:繁體中文

Block Editor (區塊編輯器) 無須要安裝

如果您使用 WordPress 5.0 版本或之後較新的版本,這是內建和預設的編輯器,它不是以【外掛】的形式存在,所以您在網站的外掛清單是找不到它蹤影,區塊編輯器被歸類在 Core files (核心文件) 裡,這個隨著官方 WordPress 版本的更動而改變,一般被 WordPress 官方認為非常重要的功能和服務,就會被納入核心文件之內,而非讓使用者自由決定是否安裝外掛。所以新手請不要再查問「如何安裝區塊編輯器」?因為不需要獨立安裝喔。

字詞相似 / 同義字 / 翻譯品質和文化差異

由於中文使用的地區出現大量不同的翻譯,不過其實是指向相同的 (Block Editor)區塊編輯器,可能因應圖片、影片和媒介會出現不同的翻譯名稱,下方盡量整理一份清單,但無法盡錄,但應該已經足夠論述本篇文章的需要。

(Block Editor)英文(區塊)中文
Block Editor區塊編輯器
(推薦使用這個稱呼)
Gutenberg EditorGutenberg 編輯器
(推薦使用這個稱呼)
古騰堡編輯器
(直接翻譯的繁體中文譯文)
古腾堡编辑器
(直接翻譯的簡體中文譯文)
Classic Editor傳統編輯器
(推薦使用這個稱呼)
舊版編輯器
WordPress Editor文章編輯器
文字編輯器
TinyMCE 編輯器
(泛指舊版編輯器)
WordPress 編輯器的統稱
WordPress 視覺化編輯器

關聯文章推薦:什麼是 Classic Editor (傳統編輯器)?

解決 WordPress 5.0 之前的舊版兼容性問題

Classic Editor (傳統編輯器) 是一款由 WordPress 團隊維護的官方外掛,這個外掛能將 WordPress 的編輯器及編輯內容的畫面還原為舊版。使用這個外掛還能擴充舊式編輯文章畫面、加入舊式中繼資料區塊,或其他需要舊版編輯器的功能。

Classic Editor (傳統編輯器) 是一款 WordPress 官方外掛,官方會提供的完整技術支援及維護直至 2022 年,或視需要延長/縮短期限。

學習曲線變短,如果您從未接觸過【傳統編輯器】

傳統編輯器只提供很簡單的文章編輯功能,這做就【頁面編輯器】如 Elementor 等的大流行,但現在新版的編輯器,就大量的功能和服務集於一身,新手不用再學習數套不同的編輯器,就能同時編輯 (文章 Post) 和 (頁面 Page),更加吸收不同的外掛廠方加入開發列隊。結論是我們可以減少學習工具的數量,並投入更多時間去創作部有價值的內容裡。

新編輯器仍有很多改進空間,但漸入佳景

當然,用家可能有時會發現區塊編輯器有不少臭蟲 (Bug) 和 錯誤 (Error),但這實屬正常,因為它仍然是新近研發中的項目,但現在看來已經非常成熟,能夠進入商業應用的階段,看著 WordPress 的路線圖來說,大家可以期盼更強大的功能出現。

舊的編輯器介面

學習曲線變短,如果您從未接觸過【傳統編輯器】

舊版的編輯器,提供技術支援和協助是知名的 TINY 開發團隊,在 WordPress 5.0 之前,很多站長還會額外安裝 TinyMCE 編輯器擴充外掛,還有其他同類型的編輯器外掛,來補完原生簡陋的預設編輯器,所以您可以在很多開源工具看到相似的介面,因為從前發展開源的編輯器開發團隊沒有太多。

由於新版的 WordPress 是直接停用這個編輯器,可能瞭解或看過這個編輯器的朋友會變少,尤其是 2019 年之後加入 WordPress 這個大家庭的新進,這個產品也許會成為老一輩的集體回憶。

延伸閱讀:

新的編輯器介面

新編輯器仍有很多改進空間,但漸入佳景

在 WordPress 5.0 之後,官方預設會【強制】您使用這個新版的編輯器,透過推疊不同的區塊內容,組成一篇完整的文章和頁面,這種撰寫內容的方法,符合現代主流的編寫方式,也更容易維護和增修內容,達到更方便管理網站的目的。加上愈來愈多的區塊開發商加入,市場上已經找到超過 100 個區塊外掛,當中發展成熟約有 20 多個以上,往後我們會盡量逐一介紹。

如何新增文章?

如何新增文章?

新手不妨試試新增一篇文章,不用害怕失敗,努力寫文章下去就正確了。您可以從上圖標記的 3 個地方新增一篇新文章,選一個對您最舒服的方式即可,我個人比較推薦【方法 3】,因為可以從任何頁面都新增文章,不需要一定返回網站後台,但前題是您需要保持登入的狀態。

關聯文章推薦:如何使用 WordPress 建立一篇文章(Post)

WordPress 裡的文章(Post)是什麼?

如果您希望經營一個部落格,理論上這是您網站最重要的核心組成部分,相當於 Facebook 的 Post 貼文,也是您最經常會處理的工作之一。當網站的外觀和頁面建構完成,剩下的就是新增和更新文章,您可能分配很多不同的媒體插入進文章之中,例如文字、圖片、表格和版面原素等。


3 個主要編輯區域

3 個主要編輯區域

區塊編輯器的介面很清爽易懂,多用數次就是發現很順手,但 (區塊 1) 的位置有時會改動,現在固定在左則是從 WordPress 5.6 版本開始,從前都是以不固定的方式出現,視乎您的內容寫到那,就在那出現。

區域 1:新增區塊區

這裡會提供很多不同的【區塊 Block】功能,預設就有大量可供使用,但沒有上限,隨著您安裝更多外掛和區塊擴充,這區域會不斷長大,所以要好好控制數量,安裝足夠就好了。

區域 2:文章內容區

文章區域和從前的舊版相似,也是【所見即所得】的形式存在,您可以在這裡不停累積【區塊 Block】內容,也可以插入表格、圖片、影片、欄位和短碼。

區域 3:文章設定區

設定區比較特別,除了文章的基礎結構調整,您點選不同的區塊,設定區也會隨著改變。常見可以調整版形、字形、大小、顏色、對齊、圖片、影片和 CSS 外觀設定等等。

發佈文章的最低要求

發佈文章的最低要求

條件 1:最少有一個【標題 Title】

標題為您文章的重點和中心思想,簡短和扼要地描述您的重點,包含 SEO 裡的關鍵字和產品名稱、描述等等,好的文章命名對您網站排名和傳播有極大的影響,值得慢慢深思熟慮。

條件 2:內容字數沒有限制

文章可以只有一句說話、字句或段落,如果您不考慮 SEO 排名等因素,文章可以很簡短扼要,隨要附上適量圖片和超連結就可以。

如何新增【區塊 Block】?

如何新增【區塊 Block】?

在【區塊編輯器】的介面,任何您可以有出現【+】號的地方,都可以新增區塊,隨著版本的變更,【+】號位置可能會出現變動,隨著【Template 範本】的出現,組合和群組型的區塊已經出現,它們由一系列的區塊組成,達到獨特的目的為主導,但由於超出這篇的範圍,我們在往後的章節再深入探討。


WordPress 官方【區塊】外掛目錄

WordPress 官方【區塊】外掛目錄

一般傳統的【外掛】開發團隊,如果當中的功能可以透過【區塊 Block】的形式置入到內容裡,在 WordPress 官方目錄有特別的專區,標明是【瀏覽:適用於區塊編輯器,提供區塊以供區塊編輯器使用的外掛】,為什麼要特別聲明和區隔出來,這樣我們可以看到官方未來 5 至 10 年的發展重心,將會傾向區塊,大家也可以從不同的發佈消息從了解到這一趨勢愈來愈明顯。

Gutenberg 計劃包含 4 個階段

  • 2019 – 整個 2019 年,Gutenberg 項目 負責人探索了全站點編輯的必要交互和潛在技術實施。
  • 2020 年 – 2020 年初,技術負責人 (Matias 等人) 根據 2019 年的經驗公開致力於全站編輯。
  • 2020 – 在整個 2020 年,核心開發人員構建並改進了全站點編輯工具和交互。
  • 2021
    2021 年 1 月 – Josepha 發布了合併到 Core 的擬議時間表。
    2021 年 3 月 – WordPress 5.7 發布和後續迭代
    2021 年 4 月 – 去/不去日期 (2027 年 4 月 13 日)
    –> 如果順利時 – 2021 年 7 月 WordPress 5.8 中的全站編輯
    –> 如果不順利時 – 2021 年 12 月 WordPress 5.9 中的全站編輯
  • 2021 年 4 月/5 月 (盡快) —— 確定 WordPress 5.8 的團隊
  • 2021 年 7 月 – WordPress 5.8 發布和後續迭代
  • 2022 年 1 月 25 日 – WordPress 5.9 發布

什麼是 WordPress 全站編輯 (Full Site Editing)?

由於這個是 Gutenberg 計劃 的重心之一,但直至目前為止尚在開發和測試 (Beta) 階段,目的是將所有的網站重要區塊集中在一起,例如常見的 [選單 Menu] 、 [頁首 Header] 、 [頁尾 Footer] 和 [資訊欄/側邊欄 Sidebar] 等的網頁區域,整合在一個區塊裡,並透過《WordPress 區塊編輯器》整合在一起處理,不像現在各個功能分散在各處,我們往後會有完整的相關單元介紹。

什麼是 WordPress 區塊版面配置目錄 (Patterns)?

什麼是 WordPress 區塊版面配置目錄 (Patterns)?
什麼是 WordPress 區塊版面配置目錄 (Patterns)?

世界上每天都有成千上萬人透過 WordPress 建立的網站,但暫時沒有一套機制,讓所有的使用者可以輕鬆 [保存 Saved]、[重用 Reused] 和 [共享 Shared] 網站製作的元件,例如版面配置、欄位規劃、圖片組合方式、複雜結構的表格和行動呼籲區塊等等。建基於這是複雜和巨大的工作,WordPress 官方決定推出這個專案,名為「WordPress 區塊版面配置目錄 (Block Patterns)」的全球性項目應運而生。

關聯文章推薦:區塊組合套件效能比較?

測試堆疊 5 個 WordPress 區塊組合套件外掛對主機效能的影響?

但由於「區塊」的應用不像 頁面編輯器 是一個巨大的第三方外掛般存在,WordPress 區塊可以由單一的小功能存在,但也可以是由數十個功能組成的區塊套件組合外掛。所以引發這次的實驗性的簡單測試報告,讓我們一起探討如果大量「區塊」外掛交織在一個網站,對網站效能的影響?

關聯文章推薦:什麼是區塊小工具 (Widget)?

我的 WordPress 小工具不見了?如何解決?

由於 WordPress 5.8 版本強制更新和使用「新版的小工具」,如果你的「外掛」或「佈景主題」仍未準備好這些準備工作,你的小工具可能無法運作。所以這次介紹的 Classic Widgets (傳統小工具) 就能解決相容「舊版的小工具」的問題。

關聯文章推薦:什麼是 Stackable 區塊組合套件? | 完整圖文教學

Stackable 是功能齊全的區塊編輯器支援和擴充功能工具包

Stackable 區塊組合套件 是從 2018 年最早投入《區塊編輯器》生態圈的開發廠方,直至 2022 年左右,已經正式推出第三代 V3 版本,暫時在 WordPress 的 (區塊 Block) 領域 裡屬于發展非常成熟的專業外掛,那怕你用於客戶或接案項目也不太會出現嚴重問題。而且提供 (免費 Free) 版本給予所有 WordPress 愛好者使用。免費版就有高達 33 個功能強大的自訂區塊,足夠大部分網站的基礎需求

關聯文章推薦:什麼是 Qubely?強化區塊編輯器的功能

Qubely 是功能齊全的區塊編輯器支援和擴充功能工具包

預計在 2021 年至 2025 年之間,新型的 WordPress 區塊編輯器(Block Editor)的支援和擴充功能的工具包將會大放異彩,從之前推出 Gutenberg Editor 或俗稱的【古騰堡編輯器】發展至今,已經有大量開發廠商加入研究更強更快的區塊(Block)。當中我們找到非常亮眼的代表【Qubely】,還有很多後起之秀正睦續冒起當中,在可見的將來,大家可能會進入【完全不需要使用和依賴像 Elementor 等的第三方頁面編輯器】的工具,也可以制作快速和令人驚歎的網站作品。

常見問題 FAQ

什麼是 WordPress 區塊編輯器?

WordPress 區塊編輯器 允許你在網站的頁面新增「區塊 Block」來豐富網站的內容,透過有系統和規律的堆疊區塊的功能元素,形式不同的版面區域,最後將不不同的版面配置組合成一個完整的網站頁面。這個編輯器協助你更簡單和低技術地完成不同的工作,也讓不懂技術的人們可以掌握網站製作的技巧。

隨著在 2022 年 1 月 25 日來臨,新版的 WordPress 5.9 正式發布,會為我們帶來一系列的新變革和創新的操作習慣,包含 全站編輯 (Full Site Editing / FSE)、區塊佈景主題 (Block Themes)、WordPress 區塊版面配置目錄 (Patterns)、WordPress 官方圖庫 | Openverse 等等的重大創新改革,距離完全開放及發展成熟仍有一段時間距離,但我們可以觀望 WordPress 程式的核心工程師正一步步帶我們走向全新的世界。

我可否一直沿用 WordPress 傳統編輯器?

WordPress 官方承諾 會繼續維護《傳統編輯器》數年,但現在都是每年重新檢討一次是否終止這個項目的計劃,但請不要有「永久支援或維護」的錯覺。所以為了未雨綢繆,大部分資深站長都積極推薦使用 WordPress 區塊編輯器作為網站內容創作的預設選項。

參考資料和引用文獻

我們提供市場上最新的網站架設新聞、教學和相關知識,我們不會向用戶發送垃圾和推廣內容,而你可以隨時「取消訂閱」。

學員人數:6,600+ 人(持續增加之中)

中文語系的 WordPress - Facebook 社團列表

在〈WordPress 區塊編輯器 (Block Editor) 是什麼?【完整教學系列】〉中有 6 則留言

    • 您好,感謝您的欣賞,在側邊欄的【相關區塊文章】裡可以找到更多 WordPress「區塊 Block」相關的應用,不過實在更新進不上變化,我們盡量撰寫更多區塊編輯器相關的題材,感謝。

      回覆

發表您的留言

Elementor 編輯器:60% 優惠全年最優惠活動!

Elementor 頁面編輯器
是最受歡迎的工具之一
讓您製作網頁更輕鬆
而且能用於多個網站