使用即將推出的 WordPress Gutenberg 編輯器的終極指南

已發表: 2018-10-30

在接下來的幾個月裡，您使用 WordPress 創建內容的方式將發生根本性的變化。您多年來一直使用的當前文本編輯器將消失，取而代之的是全新的 WordPress Gutenberg 編輯器。

像這樣的大變化可能會在你的腦海中敲響警鐘……

您的工作流程會中斷嗎？您當前的插件和主題會繼續運行嗎？您如何使用這個新編輯器繼續創作精彩內容？

在這篇文章中，您將了解這些問題的答案以及更多內容。

這是最終的 WordPress Gutenberg 編輯器指南，適用於使用 WordPress 創建內容的任何人和每個人。

你會學到：

什麼是 WordPress Gutenberg 編輯器，為什麼/何時出現，以及一些基本常見問題的答案。
如何模仿當前的編輯器功能並使用 Gutenberg 創建基本的博客文章。
使用 Gutenberg 更高效地工作的一些不為人知的技巧（基於我在實時站點上使用它的實踐經驗）。
如何利用 Gutenberg 中的新功能從您以前從未訪問過的內容和佈局功能中受益。

無論如何，這款新編輯器即將推出，因此請花一些時間熟悉 WordPress Gutenberg 編輯器，以便您在它發布後立即投入使用！

古騰堡編輯器是什麼，以及為什麼你應該關心

古騰堡編輯器是對當前 WordPress 文本編輯器的完全重新構想，您可以使用該編輯器使用 WordPress 創建帖子或頁面。

我說重新構想而不是重新設計，因為它真正從頭開始重建編輯體驗。

開發完成後，Gutenberg 將替換當前的 WordPress 文本編輯器，您將使用 Gutenberg 編輯器創建未來的內容（不過，如果您想堅持當前的體驗，您將有多種選擇——稍後會詳細介紹）。

那麼是什麼讓古騰堡編輯器成為“徹底的重新想像”呢？

首先，讓我們先來回顧一下我所說的“WordPress 編輯器”的含義。如果您不太確定我一直在談論什麼，那麼當前的 WordPress TinyMCE 編輯器如下所示：

如果您一直使用Wordable直接從 Google Docs 發布 WordPress 帖子，那麼您可能不會在那里花很多時間！ 但我敢打賭，您仍然很有可能熟悉編輯器的工作方式。

古騰堡編輯器介紹了一種叫做“塊”的東西

當前的 WordPress 文本編輯器有點像一個長的 Microsoft Word 文檔。古騰堡用一種叫做blocks 的東西來改變這種動態。

古騰堡中的每個“事物”都不是單個編輯字段，而是它自己的“塊”。 如果你曾經用 Medium 寫過一篇文章——這是同樣的想法。

例如：

每一段文本都是它自己獨立的塊。
圖像是它自己的塊。
YouTube 視頻是它自己的塊。
……你懂的。

然後，您可以使用一系列塊來組合您的內容。例如，下面是與上面相同的內容在古騰堡中的樣子。它有四個不同的塊：

三個獨立的段落塊
一個圖像塊

這種基於塊的方法的重要性在於它為內容和佈局解鎖了更高級的功能。

例如，您將能夠引入列、插入和样式按鈕，並執行許多其他操作，而這些操作要么使用當前編輯器無法完成，要么需要使用當前編輯器使用 HTML/CSS。

稍後，我將更詳細地介紹塊。但是，如果您想立即體驗一下，您可以前往此處體驗古騰堡編輯器的現場演示——無需安裝任何東西。

這就是 WordPress 核心團隊進行此更改的原因

在其生命的大部分時間裡，WordPress 都使用相同的基本編輯器 (TinyMCE)。雖然設計可能在這里和那裡發生了變化，但核心功能從未動搖過。

那為什麼現在改變了？ 如果它在過去的大約 15 年裡有效，為什麼它不能在接下來的 15 年裡繼續工作？

有幾個原因。

首先，當前的編輯器對於這個時代的臨時用戶來說太有限了。雖然 WordPress 可以創建您可以想像的任何東西，但只有在您了解一些 HTML/CSS 的情況下才能做到這一點。

再加上來自 Squarespace 和 Wix 等可視化網站建設者的競爭（過去一年他們的使用量都翻了一番），你就可以理解為什麼 WordPress 核心團隊認為 WordPress 需要更靈活的編輯體驗來保持其優勢。

其次，Gutenberg 提供了統一繁忙的 WordPress 用戶擁有的許多不同界面的能力。我不想在這裡太技術化。但是，如果您使用第三方插件，您可能有各種短代碼、元框和設置區域，這些都是 WordPress 工作流程的一部分。

古騰堡可以將所有這些不同的接口統一到塊系統中。

第三，古騰堡將現代技術引入 WordPress。具體來說，反應。這不僅有助於編輯器本身，而且還允許第三方開發人員使用這些現代技術。

最後，內容編輯只是這個過程的開始。雖然現在，古騰堡只是要改變你創建帖子和頁面的方式，但最終的目標是讓古騰堡進入完整的視覺網站設計。

遷移到新的古騰堡編輯器的利弊

那麼……古騰堡對你來說是件好事嗎？

嗯，這實際上是 WordPress 社區中一個非常分裂的問題，雙方都有激烈的爭論。

一方面，有人在吹捧古騰堡的好處：

內容的更多可能性——古騰堡為按鈕、拉引號等添加了預先構建的塊。這使您可以更好地控制您的內容，而無需自定義 CSS。此外，第三方插件可以添加自己的內容塊，這為您提供了更大的靈活性。
更多佈局可能性——除了新的內容可能性之外，您還可以獲得新的佈局選項，例如無需任何自定義代碼即可包含列或分隔符的能力。
統一體驗——無需使用短代碼插入來自第三方插件的內容，這些插件將能夠創建自己的塊，從而創建更簡單、更統一的編輯體驗。
移動友好- 默認情況下，古騰堡在移動設備上運行良好，可讓您從任何設備創建或編輯內容。

但另一方面，有人指出了一個如此雄心勃勃的項目的一些大問題：

向後兼容性-整個互聯網約有32% 的用戶使用當前的 WordPress 編輯器，這使得過渡到全新的編輯體驗變得非常困難。基本上，所有舊內容都有很多邊緣情況，很難確保無縫過渡。
對開發人員來說很難——主題和插件開發人員需要將 Gutenberg 兼容性構建到他們的插件和主題中，而較舊的擴展可能並不總是能完美運行。有數以萬計的舊插件可能會遇到兼容性問題。
用戶教育——雖然新用戶可能喜歡 Gutenberg，但老用戶需要學習新的工作流程，這對於為非技術客戶構建網站的開發人員來說尤其困難。

那麼 WordPress Gutenberg 編輯器是好事還是壞事？

好吧，我在這裡插入一些個人意見，但我認為從長遠來看，古騰堡將是一個積極的變化。您可以更好地控制內容的外觀和功能，而無需外部解決方案或自定義代碼解決方案。

話雖如此，在與您可能使用的現有插件的兼容性方面，肯定有可能出現短期成長的痛苦。並且很難迫使 WordPress 龐大的用戶群學習新的界面。

古騰堡編輯器什麼時候發布？

簡短的回答是——我們不知道確切日期。 Gutenberg 將作為 WordPress 5.0 的一部分發布，但目前還沒有關於 WordPress 5.0 確切發布日期的官方消息。

不過，我們現在確實有一個粗略的想法。根據最近的 WordPress 5.0 啟動會議，預計日期最早為2018 年 11 月 19 日，或最晚為2019 年 1 月 22 日。

這是更長的答案：

現在，古騰堡編輯器在測試狀態下作為插件存在。如果您願意，您實際上可以安裝該插件並立即開始在您的網站上使用它（不過，它處於測試階段，所以我不推薦它）。

測試版和測試完成後，WordPress 團隊會將古騰堡編輯器合併到WordPress 5.0 中的核心 WordPress 軟件中。然後，一旦您將 WordPress 站點更新到 WordPress 5.0，Gutenberg 編輯器將自動替換當前的 TinyMCE 編輯器。

古騰堡編輯器發布後，您現有的內容會怎樣？

由於古騰堡正在替換當前的編輯器，您可能想知道所有現有內容會發生什麼。

別擔心——古騰堡是為向後兼容而構建的。

就目前而言，古騰堡將您所有的舊內容放入一個經典塊中。例如，當我安裝 Gutenberg 時，上面的 TinyMCE 示例如下所示：

如果您願意，您可以繼續在單個 Classic 塊內工作，儘管體驗有點尷尬。或者，您可以單擊三個點圖標將舊內容轉換為古騰堡塊：

將舊內容轉換為塊後，它將像任何其他古騰堡編輯器帖子一樣工作。

由於古騰堡編輯器對舊內容使用這種單一的經典塊方法，因此您不會遇到任何過渡問題。但是您可能會遇到第三方插件的問題，因此您仍應保持警惕並檢查舊內容。

古騰堡編輯器是否適用於所有 WordPress 主題？

是的！ 同樣，因為 Gutenberg 將成為默認編輯器，它自然需要與任何 WordPress 主題一起使用。

話雖如此，開發人員可以做一些事情來為古騰堡添加特殊功能，因此您很快就會開始看到“與古騰堡兼容”出現在許多主題的營銷材料中。

以下是使主題與古騰堡兼容的原因：

特殊塊樣式- 主題可以為核心古騰堡塊添加特殊樣式。這可確保所有 Gutenberg 塊與您的主題設計完美匹配。
全角對齊– Gutenberg 允許您創建橫跨整個屏幕的全角圖像，但前提是主題開發人員專門啟用它。
編輯器樣式– 主題開發人員還可以將自己的樣式添加到後端 Gutenberg 編輯界面。這創造了更多的視覺設計方法。您可以在此處查看示例。

WordPress 5.0 發布後，您是否必須使用 Gutenberg 編輯器？

不！雖然 Gutenberg 將成為 WordPress 5.0 中的默認編輯器，但您實際上不必使用它。

如果您想繼續使用當前的 WordPress 編輯器，有一個官方的經典編輯器插件可以隱藏古騰堡的所有痕跡並恢復當前的編輯體驗。

或者，此插件還可以讓您使用兩個編輯器並逐個在它們之間切換。

WordPress Gutenberg 教程 - 您將如何使用新編輯器

好的，現在您已經完成了古騰堡 101 速成課程，讓我們親自體驗古騰堡編輯器。

本節的目標是讓您熟悉古騰堡編輯器，以便您能夠在它發布後立即投入使用。

首先，這裡有一個圖形可以幫助您了解古騰堡編輯器界面的核心元素：

這是編輯器的主體。這是您處理內容的地方
這些按鈕可讓您添加新塊。如果您想添加圖像、視頻或任何其他塊內容，您將使用它們。
這是您添加帖子標題的地方。
這些選項可讓您保存草稿、查看預覽並最終發布您的帖子。
當您沒有選擇區塊時，此側邊欄可讓您管理帖子的整體選項，例如類別和特色圖片。當你有一個塊中選擇，它可以讓你為特定塊的選項。

然後，當您要添加新塊時，您將看到此彈出窗口，其中包含所有可用塊的列表。您可以：

使用手風琴選項卡瀏覽所有可用的塊
直接搜索你想要的塊

如何使用古騰堡編輯器創建簡單的博客文章

在本節中，您將了解如何執行與您在當前 WordPress 編輯器中已經可以執行的相同類型的操作。

基本上，您將學習如何使現有工作流程適應古騰堡編輯器。然後，在下一節中，我將向您展示如何利用古騰堡編輯器的新功能。

添加或格式化基本文本內容

基本段落文本內容很簡單——您只需單擊並鍵入即可。唯一的直接區別是，每當您按 Enter創建新行時，Gutenberg 都會自動為您的下一段創建一個新塊：

當您單擊一個塊時，您會看到一個格式工具欄出現，您可以在其中：

更改對齊方式
添加粗體和斜體
插入鏈接
等等。

基本上，這很像當前編輯器中的工具欄：

稍後，我將向您展示這種默認方法的巧妙替代方法。

除了工具欄中的格式選項之外，您還可以在右側邊欄中獲得一些選項，讓您：

控製文字大小和顏色
添加首字下沉

到目前為止足夠簡單，對吧？

創建標題（H1、H2 等）

您有幾個不同的選項來創建標題。

首先，您可以使用+圖標插入一個新的標題塊：

插入標題塊後，您可以鍵入以添加文本並使用側欄或工具欄來控制要使用的標題（例如 H2 與 H3）：

或者，您還可以：

使用更改塊類型按鈕將常規段落塊轉換為標題塊。
使用 markdown 創建標題（例如“## 這是標題 2”）

這是一個 GIF 來說明這兩種方法：

插入圖像、視頻或其他媒體內容

好的，現在您可以創建和格式化基本文本和標題。這會讓你大部分時間到達那裡！

但是插入媒體內容呢？

要插入任何媒體內容，您可以使用相同的+圖標插入塊。

要在現有內容下方插入媒體內容，請使用左上角的+圖標。

或者，您還可以通過將鼠標懸停在要插入內容的位置上，在現有內容之間插入一個新塊。然後，您將使用新塊左側的添加塊按鈕：

打開“插入塊”彈出窗口後，您可以選擇：

圖像– 從 WordPress 媒體庫或外部 URL 插入圖像。
視頻– 嵌入來自 WordPress 媒體庫或外部 URL 的視頻。
嵌入– 單獨的塊，可幫助您嵌入來自 YouTube、Vimeo、Spotify、SoundCloud、Instagram 和大量其他來源的內容。

例如，下面是從 WordPress 媒體庫中插入圖像的樣子：

以下是嵌入 YouTube 視頻的方法：

從其他插件插入短代碼

如果您像大多數 WordPress 用戶一樣，您可能會使用短代碼將一些插件包含在您的帖子或頁面內容中。

最終，目標是讓這些類型的插件創建您可以直接使用的自己的 Gutenberg 塊（稍後會詳細介紹）。但在那之前，您仍然可以使用Shortcode塊在 Gutenberg 內容中包含短代碼：

重新排列內容（您有兩個選擇）

好的，到目前為止足夠簡單……但是如果您想更改塊的順序怎麼辦？

為此，您有兩個選擇。

首先，如果您將鼠標懸停在塊的左側*，您可以使用拖放來移動塊：

其次，您還可以使用向上或向下箭頭將塊向上或向下移動一個位置：

*要激活拖放，請將鼠標懸停在上下箭頭之間的 6 個點上。

處理幕後信息（類別、URL Slug 等）

好的，以上內容應該涵蓋瞭如何添加基本的博客內容。但是，準備發布帖子的所有其他幕後工作呢？

對於大多數操作，您可以使用側邊欄的“文檔”選項卡。您將在這裡：

提前選擇發布日期/安排帖子
選擇作者
添加類別和標籤
選擇您的特色圖片
輸入您的摘錄

此外，您可以使用側邊欄上方的按鈕來：

預覽您的帖子
保存草稿（古騰堡會自動保存您的草稿，因此您通常不需要手動執行此操作）
發布您的帖子

唯一棘手的是設置您的帖子或頁面的 URL slug。要編輯它，請單擊標題。然後，您將能夠編輯 slug：

Yoast SEO之類的插件怎麼樣？它們將如何工作？

您很有可能需要為每個內容配置一些其他後端插件。

您可以通過兩種方式與這些插件進行交互。

首先，許多開發人員已經在致力於直接與古騰堡兼容。例如，Yoast SEO 已經支持 Gutenberg，您將直接從同一個文檔側邊欄配置您的 Yoast SEO 設置：

對於還沒有 Gutenberg 支持的舊插件，您仍然可以像使用 TinyMCE 編輯器一樣使用元框：

使用古騰堡提高工作效率的六個技巧

當您第一次開始使用古騰堡編輯器時，它可能會感覺有點遲鈍。這些提示可以幫助加快流程並使快速插入和自定義您需要的塊變得更加容易。

1. 通過鍵入“/”快速插入塊以節省大量時間

當您剛開始使用 Gutenberg 時，我在上面向您展示的插入塊的方法很有用，因為它可以讓您看到所有可用的塊。

但是，一旦您熟悉了需要哪些塊，就可以使用快速插入功能更快地插入它們。

而不是單擊+圖標，只需：

按回車鍵創建一個新塊
輸入“/”
開始輸入塊的名稱

當您鍵入時，Gutenberg 會自動建議匹配的塊。然後，只需按 Enter即可插入所需的塊。

這是在行動：

那快了很多，對吧？

2. 學習快速編輯的鍵盤快捷鍵

古騰堡配備了可以加快工作速度的鍵盤快捷鍵。

您可以通過單擊CTRL + Alt + H (Windows) 或CMD + Alt + H (Mac) 來調出這些快捷方式的完整列表：

您應該通讀完整列表，但這裡有一些最有幫助的：

Ctrl + S – 保存草稿。
Ctrl + Z – 撤消或Ctrl + Y – 重做。
Ctrl + Alt + Backspace – 刪除選定的塊（非常方便）。
Ctrl + Shift + D – 複製選定的塊。
Ctrl + Alt + T – 在所選塊之前插入一個新塊。
Ctrl + Alt + Y – 在所選塊之後插入一個新塊。

您還可以使用大多數全局快捷鍵，例如Ctrl + B加粗或Ctrl + V粘貼。

3. 將桌面上的圖像拖放到 Gutenberg 內容中

如果您需要包含大量圖像，這是另一個巧妙的技巧。

您無需為每個圖像手動創建一個新的圖像塊，只需將圖像直接從桌面上的文件夾拖到您可以將其包含在帖子中的位置即可。

然後 WordPress 會自動將其上傳到您的媒體庫並將其插入到那裡。只有一件事需要注意——確保在拖動圖像時看到藍線，否則將無法工作：

4.添加固定編輯工具欄

有些人覺得 Gutenberg 難以解決的一件事是，當您在不同的段落塊之間單擊時，編輯工具欄會不斷地閃爍進出。

如果你不喜歡這樣，你可以打開統一工具欄選項，在古騰堡界面的頂部獲得一個始終存在的工具欄：

5. 對標題、列表等使用 Markdown 語法

如果您喜歡使用 Markdown，您將能夠在 Gutenberg 中加入一些 Markdown 語法。

例如：

## – 創建一個 H2（你已經看到了這個 – 它轉換成一個標題塊）。
* - 開始一個無序列表。
1. – 啟動一個有序列表。
> – 創建一個引用塊（轉換為引用塊）。

您不能使用所有降價語法。但是上面的例子對於更快的格式化已經非常有幫助：

6. 如果需要，直接編輯 HTML

如果確實遇到了要直接編輯 HTML 的情況，可以通過單擊右上角的三個點或使用Ctrl + Shift + Alt + M快捷鍵來訪問代碼編輯器：

利用 Gutenberg 的新功能 – 列、按鈕等！

好的，我們已經介紹了：

如何使用 Gutenberg 創建基本的博客文章。
加快與古騰堡合作的一些技巧。

現在，讓我們來看看您可以用古騰堡做的一些很酷的新東西。這些令人興奮的功能應該有助於解釋為什麼 WordPress 團隊決定繼續使用 Gutenberg。

插入按鈕 – 不需要 HTML

使用舊的編輯器，創建按鈕的唯一方法是手動添加 CSS 類或使用第三方插件。

使用 Gutenberg，您只需添加Button塊。要編輯按鈕文本，您只需單擊並鍵入。要更改顏色，您可以使用側邊欄：

創建多列佈局

使用舊的編輯器，如果沒有您自己的自定義 HTML 或第三方插件，就無法創建多列佈局。

使用 Gutenberg，您只需添加Columns塊。然後，您可以添加不同的欄目內的其他塊：

創建全寬拉伸圖像

如果您的主題支持它，您將獲得一個新的全角對齊選項，可讓您在整個屏幕上拉伸圖像，從而打開一些有趣的內容佈局：

創建可重用的塊模板

如果您發現自己經常使用相同的塊組合，則可以通過創建可重用的塊組來節省時間。

首先，您可以單擊並拖動以選擇要包含的所有塊。然後，您可以使用三個點添加到可重用塊：

你會給它一個名字。然後，您將能夠像插入任何其他塊一樣插入整個模板：

您可以使用第三方插件添加更多塊和功能

這是古騰堡開始變得更酷的地方：

第三方插件可以添加自己的塊，您可以在 Gutenberg 設計中使用這些塊。

這有兩種方式可以使您受益：

您已經使用的插件將創建自己的古騰堡塊。例如，如果您使用事件日曆插件，則只需使用插件的事件塊即可插入事件。
開發人員正在製作專用的 Gutenberg 插件，這些插件添加了大量通用的新內容塊，讓您可以更好地控制您的設計。

例如，查看免費的 Stackable 插件。安裝並激活它後，您將在 Gutenberg 中獲得一組全新的 Stackable 塊：

然後你可以使用這些塊做一些很酷的事情，比如插入定價表或推薦：

這只是 WordPress Gutenberg 編輯器的開始

就是這樣！如果你做到了這一步，你應該是一個古騰堡大師，一旦 WordPress 5.0 發布，他就準備好開始運行。

雖然學習新的工作流程並不在大多數人的“週末有趣方式”清單上，但掌握古騰堡的來龍去脈對於使用 WordPress 的任何人來說都是必不可少的。

古騰堡不僅會影響您現在創建內容的方式，而且還將在 WordPress 的未來發展中發揮重要作用。

你在上面看到的一切只是古騰堡的第一階段。在第二階段，Gutenberg 將進入頁面模板，第三階段將 Gutenberg 轉變為完全網站定制的工具。

所以……成為古騰堡的好朋友，因為在接下來的幾年裡你會看到很多！