WordPress Gutenberg (古騰堡) 5.0 版本全新內建網頁編輯器外掛教學

歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略 – WordPress Gutenberg (古騰堡) 5.0 版本全新內建網頁編輯器外掛教學，在資訊科技不斷更迭發展的現代，對企業而言保持既有營運模式固然利於守成，但如果沒有破舊立新的思考模式，是非常容易被時代所淘汰。有鑑於此，WordPress 這套世界聞名的網站架設 CMS 系統在開始營運 12 年後，終於對功能非常陽春的 WordPress 內建編輯器做出重大變革。
這套全新的 WordPress 內建編輯外掛被命名為 Gutenberg (古騰堡，音譯)，其由來自於歐洲第一位發明活字印刷術，改變文明進程的偉人 Johannes Gutenberg 的姓氏，由此可知 WordPress 官方對於這一次內建編輯器的改版有著相當高的目標與期許，希望能創造出劃時代的改變。Gutenberg 與目前需要透過 TinyMCE Advanced 附加功能的傳統編輯器比較起來最大不同的地方在於 Gutenberg 以視覺化編輯為主，透過所見即所得的方式，讓網頁編輯的過程不再需要反覆切換前台與後台來比較修改後的效果，另外也在 Gutenberg 中加入許多網頁元素，不需自行寫入 HTML ，只要點選增添區塊按鍵就可直接建立網頁元素功能，對於非資訊工程背景的站長而言，可以說省下不少時間力氣，接下就 Gutenberg 基本功能開始做教學介紹，希望能帶給各位一些幫助。
(小提醒：鵠學苑的所有教學均是以 Apple Mac OS X 系統 做步驟示範！)

WordPress Gutenberg下載網址
https://wordpress.org/plugins/gutenberg/

在 WordPress 後台安裝 Gutenberg 及外掛介面功能解說

第一步：進入到上方提供的 WordPress 外掛頁面，可以下載 Gutenberg 的 zip 檔案，再透過上傳外掛的方式安裝，請參考之前的教學文章：WordPress 教學 基礎介紹六（外掛）。

第二步：下在 WordPress 後台安裝外掛選項也可以輸入 Gutenberg 搜尋，在下圖標示的位置依序點選安裝與啟用即可。

第三步：下圖是 WordPress 針對 Gutenberg 的公告訊息，紅色方框標示處就是試用 Gutenberg 的連結，點擊後會跳轉到以 Gutenberg 建立的範例文章。

第四步：在 WordPress 後台側邊欄可以找到 Gutenberg 的項目，點擊子選單的示範內容。

第五步：進入到由 WordPress 提供以 Gutenberg 編輯器建立的範例文章，筆者也會以這篇文章來做編輯器介紹。下圖紅色方框標示加號的部分是可以增加網頁元素區塊的位置，這個功能可以說是 WordPress 內建編輯器改變最多的地方，在就有編輯器中需要透過寫入HTML方式才能建構的網頁元素，像是按鈕、分頁符號、最新文章列表、影音媒體等在這裡就能夠一鍵添加，另外對於網頁元素的詳細設定也不需要再透過 CSS 語法來改變元素外觀樣式，每一個網頁元素都會提供設定諸如大小、段落、顏色等基本設定，真正做到不懂程式語言也能自行架站的目標。

第六步：下圖中標示的資訊圖示在點擊後會出現網頁統計數據，這項功能對於 SEO 是非常有幫助的，標題(h1~h6)、字數、段落等數據都是能讓內容行銷更有效率的被執行，這也是 WordPress 對於網站 SEO 友善的功能體現。

第七步：點選右上角的齒輪可以收起側邊工具區塊，無論是提高網頁編輯的專注度或者是預覽網頁區塊樣式都相當有幫助。左上角的箭頭符號是代表回復上一動作與取消回復上一動作，在編輯時如果有發生操作錯誤，可以善用此功能。

第八步：下圖右上角三點圖示點擊後主要功能為轉換 HTML 編輯模式，對於網站開發者而言這是必備的功能，也有其他比如移動工具列位置，複製所有內容等，相信之後能夠操作的選項會更加豐富。

第九步：下圖就是轉換為 HTML 編輯模式的畫面。

第十步：右側工具區塊就是對應傳統編輯器的選項，像是發布時間、文章格式、文章分類標籤、精選圖片等都是在這裡做設定。

介紹 Gutenberg 編輯方式

第一步：不同於以往傳統編輯器的查看網址方式，在新版 Gutenberg 中必須要點選標題區塊，網址編輯的欄位才會顯示，左方連結圖示點選可以複製當前編輯頁面的網址，右方變更永久連結按鈕會到 Setting 的固定網址頁面中快速定義網址結構，就編輯的流暢性來說還算不錯。因為這一篇是範例文章，因此頁面主標題無法編輯，筆者嘗試新增文章並以 Gutenberg 開啟，文章標題就可以自定義了。

第二步：當點選網頁元素區塊時會出現如下圖標示的加號按鈕，點選後就可以加入需要的網頁元素。

下圖中標示 1 的按鈕可以快速添加網頁元素，標示 2 的位置是編輯時常用網頁元素，在圖中顯示的由左至右分別是插入圖片、標題、圖片藝廊，這裡的選項並非固定的，Gutenberg 會根據編輯者上一個添加或編輯的網頁元素自動依順序顯示快捷按鈕，在必須連續添加同一類網站元素的時候相當方便。

點選區塊編輯右方的三點圖試，可以選擇編輯該區塊的 HTML、複製區塊元素或者將區塊元素儲存起來，以便在其他文章或頁面重複使用，這樣的功能在許多付費佈景主題所提供的網站編輯器都是必備功能，WordPress 在 Gutenberg 中同樣也加入此功能，提高新版內建編輯器的可用性與靈活度。

第三步：下圖是筆者嘗試加入圖片區塊，其上傳圖片的方式變得更簡潔明暸，另外在右側工具區塊，在圖片加入完成後也會出現相關設定選項。

第四步：如果點擊文字段落，可以看到左上方可以設定文字位置、粗斜體、加入連結等項目，右側工具欄則出現文字大小及顏色等，以點擊選項的方式就可以變更元素樣式。

第五步：另外要特別提到的是在 Gutenberg 中新增快速轉換區塊類型功能，如下圖所示，可以轉換當前網頁元素區塊為其他網頁元素，善加利用此功能可以提高編輯效率。

第六步：在點擊元素區塊時會出現下圖標示 1 的上下移動按鈕，可以進行網頁元素版面配置，另外標示 2 的區塊就是筆者前文提到對網頁元素可以做詳細設定的部分。

第七步：會下圖是文章發表後前台畫面，紅色方框標示的編輯按鈕點擊後會回到 Gutenberg 的編輯界面，針對內容做快速修改，不需要切換網頁頁面回到後台編輯，也算是 Gutenberg 編輯器的特色之一。

WordPress 安裝
https://www.design-hu.com.tw/wordpress/wordpress-indro/wordpress-installation.html

結語：

Gutenberg 就目前而言其實還算是在測試階段，透過 github.com 論壇可以看到許多 Gutenberg 外掛的錯誤回報狀況就可得知一二，在筆者實際安裝測試的過程中，也有遇到 Gutenberg 與某些 WordPress 佈景主題或外掛不相容的狀況，以 Gutenberg 開啟文章或頁面時會產生空白頁，完全看不到任何可編輯的網頁元素，因此筆者建議不要在已上線運行的網站使用 Gutenberg 這套外掛，在 WordPress 5.0 版本正式釋出更新時再使用，會比較妥當，在此之前如果想要提前熟悉 Gutenberg 的操作方式，或者想要參與開發 Gutenberg ，建議可以使用在本機安裝 WordPress 的方式來做練習。如何在本機上安裝 WordPress 請參考：WordPress 安裝。

今天的教學到這裡告一段落了，不要忘記持續關注鵠學苑的最新文章，想學習超詳細的WordPress攻略嗎？？來 鵠學院 就對了！我們下次的教學見～

架站相關文章：

網站架設知識推薦閱讀：

Astra 2.0 更新，超過 40 萬網站架設的 WordPress 主題推薦！
Google 在地商家 新增訊息功能，在 Google 地圖上即時通訊！
HTTPS 、 SSL 是什麼 ？ SSL憑證 對網站來說重要嗎？