Gutenberg 研究所WordPress教學網站製作

Gutenberg 古騰堡編輯器終極懶人包

WordCamp Taipei 2018: Gutenberg 帶來了什麼改變?

這次帶路姬很榮幸,能在 WordCamp Taipei 2018 中,與大家分享「Gutenberg 編輯器帶來了什麼改變?」。我就利用這篇文章,把我所蒐集到的資訊,一次統整給大家。

正式進入詳細介紹之前,要提醒大家,2018/12/6 WordPress 5.0 已經正式發佈了,Gutenberg 編輯器也正式預設在新的 WordPress 裡囉!如果你的佈景主題與外掛還沒有和 WordPress 5.0 相容,請不要隨便更新你的 WordPress 版本喔!

要更新到 WordPress 5.0 之前,請切記一定要先備份好你的網站!如果不小心升級後,網站壞掉了,至少可以輕鬆還原!

帶路姬推薦的 Siteground 主機,GrowBig 方案有自動備份30天輕鬆還原的介面,對於不懂如何備份的新手來說,真的是一個很方便的選擇!

接下來,我們就快來看看, Gutenberg 編輯器,到底會對我們的網站,帶來什麼改變呢?

WordPress 5.0 預設搭載 Gutenberg 編輯器

WordPress 5.0 已經在 12/6 正式發布,這次最大的改變之一,就是將淘汰原有的「傳統編輯器」,換成新的「Gutenberg」編輯器。

在 WordPress 5.0 發布之前,Gutenberg 已經先以「外掛」的方式與大家見面,帶路姬因此也在 9/27 確認我的主題已經和 Gutenberg 相容後,先升級了 Jannah 主題到 3.0 的版本,再安裝啟用「Gutenberg」這個外掛。

你們目前所閱讀的文章,就是帶路姬用 Gutenberg 編輯器來打的喔!我越用越上手,越來越喜歡。❤️

WordPress 5.0 即將推出 Gutenberg 編輯器
Gutenberg 編輯器的介面非常乾淨簡潔

Gutenberg 編輯器的快速展示影片

在大家對 Gutenberg 還一無所知的時候,帶路姬幫大家在網路上找了一個才一分鐘的影片,帶你快速看看 Gutenberg 可以做些什麼事,雖然影片中有一點點英文字,不過看不懂沒關係,只要看看他的操作就可以了。

由於版權問題,請大家到 WP Engine 的頁面,在他們的頁面中找到像下面這個影片,在那邊觀看就可以了。

WordPress 很好用啊,為什麼要換編輯器?

雖然大家覺得我們目前的 WordPress 已經很棒了啊!傳統編輯器野蠻視覺化了啊… 可是,你們有沒有想過,我們的編輯已經用多久了?還有沒有什麼進步的空間呢?帶路姬統整了兩個最大的原因:

原因一:為了達到真正的「所見即所得 WYSIWYG」

傳統編輯器的前後台比較
左邊是傳統編輯器 (後台);右邊是前台的樣子

大家看看上面的圖片,比較一下左右兩邊,有沒有覺得差異好大?尤其對新手來說,第一次看到這個後台時,更是不知道從哪開始。為什麼前台有右邊那一整排?為什麼前台的標題下面也有圖片?… 標題在哪裡打啊?(要找一下才對應的到)…

Gutenberg 古騰堡編輯器的前後台比較
左邊是 Gutenberg 編輯器 (後台) ;右邊是前台的樣子

接下來看這張圖片,有沒有覺得左右兩邊終於接近多了?雖然還是有一點些微的差距,因為佈景主題會給文字額外的 CSS 樣式,但是,整體來說,至少一下就找到在哪裡改標題了!

因此,Gutenberg 編輯器的目的之一,就是要讓大家在寫作時,不用「想像」文章在前台會變成什麼樣子,你所見的到、正在編輯的,就是你會得到的樣子。(WYSIWYG: What You See Is What You Get)

原因二:為了「統一插入各種內容的方式」

其實,早在 2008 年的時候,在推出 WordPress 2.5 的時候,就已經搭載了類似我們目前使用的傳統編輯器,可以讓使用者切換「預覽 / 文字」的編輯模式。

一轉眼,十年過去了,這十年間網路上出現了很多變化,YouTube、Flickr、Facebook、Instagram 等等,各式各樣的多媒體與社群媒體一一出現,加上網路速度更快了,網頁的內容也變得更加豐富,我們越來越需要可以崁入不同種類的資訊,但是,傳統編輯器無法做到,因此大家開始透過「外掛」的方始來崁入,被迫學習如何使用各種外掛、甚至是被迫學習使用各種 Shortcode (短代碼),才能成功做一個內容豐富的網頁。

WordPress 的開發團隊發現了大家的問題,也發現有些人開始把傳統編輯器丟一邊,改用他牌的編輯器,像是知名的 Elementor、WPBakery Page Builder (前 Visual Composer)、Divi Builder、Beaver Builder 等等,每家編輯器的使用方式都不一樣,也造成了各家編輯器與各種外掛不一定能相容的情況… 

Gutenberg 古騰堡可以讓你插入區塊
從左手邊點「+」,就可以快速插入任何內容區塊

因此,Gutenberg 的出現,就是希望大家能夠「統一插入各種內容」的方式、「統一新手們入門學習的方式」,至於要怎麼統一呢?真的不用透過外掛或短代碼了嗎?

Gutenberg 的精髓:區塊的概念 (Block)

為了統一大家插入內容的方式,Gutenberg 編輯器帶來全新的「區塊」的概念,不論你想寫什麼內容,所有的內容都是一個個的「區塊」,每個區塊都同等的重要,插入的方式都一模一樣。

Gutenberg 古騰堡第一步是插入區塊
從左手邊點「+」,就可以快速插入任何內容區塊

Gutenberg 可以插入什麼區塊呢?

Gutenberg 可以插入總共 63 種區塊,包含 28 種是內容的區塊、還可以崁入 35 種第三方的多媒體或社群資訊區塊。

只要透過「+」,就可以增加下面圖片中所有的區塊喔!帶路姬做了一個測試區塊的頁面,列出一些區塊的成果,給大家參考喔!

其中我最喜歡的區塊,像是:按鈕、音訊、檔案、YouTube、Facebook、Flickr、Meetup 等等,都比以前方便太多了!

Gutenberg 的三大特色

特色一:隨著情境而出現的設定區

當你選擇內容中的某個區塊時,右手邊會出現該區塊的相關設定喔!

這麼做有一個非常大的好處,當你在專心寫作時,可以點選右上角的「齒輪」按鈕,把設定欄整個隱藏起來,就可以讓畫面非常乾淨,讓你專注在寫作上,不會其他東西影響而分心。

這樣的設計也讓使用者體驗比較直覺、與有一致性。在我的研究中發現,像大家常用的 Yoast SEO 的外掛,就會朝向 Gutenberg 的新設計來做介面的調整,未來,大家在點選標題時,右手邊會出現標題的相關設定,以及 Yoast SEO 給你的「針對這個標題的建議」。就不會像以前一樣,一堆建議列在下面,找不到在說哪裡…

Gutenberg 古騰堡有隨著情境而出現的設定
點選區塊,右手邊會出現與該區塊相關的設定

特色二:可以增加「重複使用的區塊」

另外一個很大的亮點,Gutenberg 可以讓我們增加想要「重複使用的區塊」喔!我們在文章中,常常會需要增加同一個「Call to Action 呼籲行動」的內容,來鼓勵訪客「購買、按讚、加入會員」等等。

以後就可以透過這個功能,做一個「重複使用的區塊」,就可以加到任何頁面囉!

Gutenberg 古騰堡可新增可重複使用區塊
使用方法非常簡單:
  1. 點選你所建立的區塊
  2. 點一下「…」的地方,在下拉選單中選「新增至可重複使用的區塊」
  3. 幫這個區塊取個名字,並且按「儲存」
  4. 之後就可以在「+」新增區塊的時候,看到你儲存的區塊囉!

特色三:手機上也可以使用喔!

現在的人人手一機,走到哪、寫到哪,我自己也不例外,經過我的測試發現,Gutenberg 在手機上的呈現非常棒喔!

他和電腦版的體驗很接近,一樣可以到處點「+」來新增區塊,或者直接點選現有的區塊來編輯,唯一不同的是,因為手機上的螢幕畫面比較小,右邊的「設定區」預設就是隱藏的。

所以我的建議會是,可以用 Gutenberg 來寫草稿,等到需要編輯樣式時(像是顏色、字體大小、對齊等等),再到電腦上處理。

比較簡短的文章,其實完全在手機上直接寫作與設計,都是沒有問題的!

Gutenberg 古騰堡手機上也可以使用
手機上也可以使用 Gutenberg

Gutenberg 與其他編輯器相容嗎?

目前有很多人正在使用其他的頁面編輯器,像是 Elementor、WPBakery Page Builder (Visual Composer)、Divi Builder 和 Beaver Builder等等。

就我目前的發現來看,所有的編輯器都聲稱會與 Gutenberg 相容。差別在於,他們的更新是讓使用者「二選一」還是「以Gutenberg」為主。怎麼說呢?

Elementor 與 Gutenberg 是 1+1=2 的合作拍檔

就在10/23,Elementor 發布了最新的消息,他們推出了新的「Elementor 區塊」,讓使用者可以選擇使用 Gutenberg 編輯器,但是偶爾插入「Elementor 區塊」,來插入 Elementor 所建立與儲存的樣板,如此一來,大大了延伸 Gutenberg 的能力,Gutenberg 所沒有的,使用者可以利用 Elementor 來製作「客製化區塊」,非常強大呢!

WPBakery Page Builder 與 Gutenberg 是二選一的競爭抉擇

如果你是用習慣 WPBakery Page Builder的人,可以繼續使用它,並且利用他們新的「Gutenberg 元素」,來增加 Gutenberg 的內容。他們的做法和 Elementor 是相反的,他們希望大家繼續用他們的編輯器,不用另外學習 Gutenberg。

Divi BuilderAvada 的 Fusion BuilderBeaver Builder 

其他的編輯器,目前還沒有明確表示,未來會不會有更進一步的整合方式。最基本的相容方式,就如下圖所示,可以在新增頁面時,選擇要以哪一種編輯器來編輯新的頁面。或者,可以在編輯頁面時,選擇切換到該編輯器。也就是和現在的方式其實是差不多的。

如果有更多各大編輯器與 Gutenberg 的相容性的更新,帶路機會再來這裡做更新喔! 

Gutenberg 古騰堡與其他編輯器的相容性
各大編輯器都聲稱可以與 Gutenberg 相容

市場上會有什麼變化呢?

  • WordPress 5.0 發布後,所有的主題和外掛,勢必得跟著更新,沒有及時更新的,就有可能被陸續淘汰。
  • Gutenberg 帶來很多新功能,即將取代過去的外掛,例如像是:崁入YouTube、Shortcode Ultimate 或 Content Blocks 這類的外掛。
  • 有越來越多的「區塊套件 Block Packages」的外掛會出現。如下圖所示,已經有很多的區塊套件的外掛出現了,用來延伸 Gutenberg 不包含的區塊內容,例如像是:價目表、頁籤、使用者見證等等。
  • 一旦 WordPress 5.0 發布後,可能會出現一群網站因為升級而壞掉的人,到時候會需要找專業的服務…
各式各樣的 Block Packages 出現了

升級到 WordPress 5.0 後,原本的文章會變成怎樣?

升級前,我的文章是用傳統編輯器寫的,如下圖的左邊。

升級後,很有可能會像我的右圖,他會把原本的內容,整個包在一個「傳統編輯器」的「區塊」裡。

  • 如果你還不習慣用 Gutenberg,你只需要學會新增「傳統編輯器」的區塊,就可以保持和過去差不多的編輯方式。
  • 一旦成功升級後,舊的文章不會壞掉。
  • 一旦成功升級後,新的文章可以考慮用新的編輯方式 (利用增加很多區塊)。
升級到 WordPress 5.0 之後
舊文章升級到 WordPress 5.0 後,會被包在「傳統編輯器」的區塊裡

一定要使用 Gutenberg 編輯器嗎?

雖然 WordPress 5.0 預設 Gutenberg 編輯器,但是有些使用者可能還不能馬上適應。如果真的想使用舊的傳統編輯器,可以透過下列方式:

可考慮安裝官方的 Classic Editor 傳統編輯器的外掛

請到 WordPress 的外掛庫的地方,直接搜尋啟用這個 Classic Editor 的外掛,就可以了喔!這樣在新增文章時,會多一個傳統編輯器的選項。

Classic Editor
Classic Editor / 傳統編輯器外掛

升級到 WordPress 5.0 前要注意什麼嗎?

  • https://wordpress.org/gutenberg/ 直接測試玩玩
  • 關注 WordPress 5.0 的消息,發布時,帶路姬也會公佈喔!
  • 關注自己的主題與外掛的相關消息
  • 替老舊的主題或外掛尋找替代方案
  • 一定要做好備份、最好是在測試網站試過後才正式升級!

WordPress 5.0 什麼時候公佈呢?

官方已經在 12/6 正式發布了喔!

更多 Gutenberg 的計劃?

以下是其他更多我搜集到的資訊喔!

  1. 支援快捷鍵.  像是 Ctrl+Z 是返回上一步喔!
  2. 支援 Custom Post Type (可以定義支援哪些 blocks 或者自訂 blocks )
  3. 原本的 TinyMCE 按鈕,在 Classic Editor 裡面還是可以用.                        
  4. 主題是可以給區塊「預設的樣式」
  5. 原本的 Shortcode 短代碼還是一樣可以用                                                 
  6. 會支援 Columns (目前還在Beta版)
  7. 將會支援 Nested Blocks (內崁子區塊),但不會在第一版                           
  8. 支援拖拉重新排序
  9. 現在是用主題外觀自訂器+Gutenberg 編輯器來設計網站,未來可能會變成完全用Blocks來設計網站    
  10. 區塊將會取代原本的小工具,可以把區塊放在側邊欄,把選單換成選單區塊,還可以有子區塊等等。

新的編輯器為什麼叫 Gutenberg?

Gutenberg, 其實是一個人名喔!他是1398年出生的德國人,是世界上第一個發明了活字印刷術的人,他的發明引發了媒介的革命,WordPress 開發團隊以他的名字來命名,以示敬意。

帶路姬的總結

就我的使用經驗來說,我覺得 Gutenberg 比傳統編輯器好用非常多啊!我只要一直打字,打到一個段落時按一次 Enter,他就會自動變另一個段落區塊,做了漂亮的分段。甚至我開始用「*」號時,他還會聰明的幫我建立「清單」區塊。

雖然,比起 Elementor 之類的很成熟的頁面編輯器,Gutenberg 還有很多進步的空間,但是,我對 WordPress 的開發團隊,勇於跨出這一步,是保持很敬佩而且很期待的!

WordPress 從2003年開始, 1.0 的版本所搭載的編輯器是只能打純文字和程式碼的,到 2005年底,2.0的版本才正式介紹了「視覺化預覽」的編輯器,當時也造成 WordPress 圈很大的動盪,很多正反意見的衝擊。但即便如此,2008年的時候,WordPress 還是堅持腳步,繼續優化視覺化的編輯器,一直到現在。

所以,這次的轉變,雖然短期會造成許多的不便,但是為了更方便的未來、為了讓 WordPress 更容易上手、為了讓更多人使用 WordPress,大家就給 WordPress 的開發團隊,多一點信心和鼓勵吧!讓任何人真的都可以真的不用寫程式,就能隨心所欲的寫作與設計自己的網站!

標籤

網站帶路姬 / Erin Lin

Hello~我是Erin Lin,美國網頁設計研究碩士,七年美國工作經驗,2012年成立「Erin Lin 網頁設計工作室」專門設計高質感的WordPress網站。2018年五月,開始「WordPress 網站帶路姬」,希望以輕鬆有趣的方式來分享 WordPress 架站教學與資源給不懂程式的新手與創業站長。

相關文章

發佈留言

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

Back to top button
★ 完全免費的影音+圖文教學+ ★

帶路姬陪你用五天的下班時間
做好第一個 WordPress 網站

想完整的學好基礎嗎?快來看看吧!😊
close-link
close-link
close-link
close-link
Close