如何開始使用古騰堡

已發表: 2019-06-11

如果您對新的 WordPress 編輯器 Gutenberg 感到好奇,那麼這篇文章適合您。

Gutenberg 是 WordPress 編輯器的新成員。 它是在 GitHub 上使用 WordPress REST APIJavaScript 和 React開發的。 編輯感覺現代,易於合作且非常謙虛。 將 Gutenberg 與 Classic Editor 進行比較就像比較兩座房子:一間有很多家具,另一間幾乎沒有。 即使您覺得極簡風格有點令人生畏,但一旦您開始使用 Gutenberg,整體體驗就會很愉快。

當然,Gutenberg 有其缺點,如果您對 Classic Editor 非常有經驗,您可能會覺得使用 Gutenberg 似乎是一種倒退。

在本文中,我將嘗試涵蓋盡可能多的內容,讓您清楚地了解 Gutenberg 的前景。 我將討論優缺點,以及如何改進這些缺點,使過渡更加無縫。

首先,您只需將 WordPress 更新到最新版本即可使用 Gutenberg。 Gutenberg 現在是 WordPress核心的一部分。 如果您仍然擁有Classic Editor 插件,則可以先將其刪除並準備好使用 Gutenberg。

第一步

Gutenberg 和 Divi 在整合方面取得了長足的進步。 在早期階段,您無法在不丟失所有內容的情況下保存 Divi 使用 Gutenberg 發布的帖子。 今天,這些問題都消失了。 您可以輕鬆保存在古騰堡上使用 Divi 發布的帖子,並且您仍然可以使用 Divi 對其進行編輯。 這同樣適用於 Elementor。

Gutenberg 功能現在是無縫的,您可以讓 Divi、Elementor 和 Gutenberg 在同一個站點上完美運行,您甚至可以使用不同的構建器創建不同的內容,而不會出現任何問題。 當然,只要您在使用 Divi 時不切換回 Gutenberg 編輯器然後強制保存,在這種情況下它肯定會覆蓋您的 Divi 內容,如果您嘗試使用其他構建器丟棄和保存內容,也會發生同樣的情況。

一般結構和塊

Gutenberg 由塊的一般結構組成,每個塊由 HTML 特徵表示和劃分,因此,例如,如果您有一個 H2 標題和一個段落,您將看到 2 個單獨的塊。 Gutenberg 背後的想法是通過 HTML 類來分隔塊,雖然乍一看這似乎很奇怪,但它有其優點。

要查看編輯和样式選項,請將鼠標懸停在塊上。 這將顯示各種特定於塊的選項,例如為標題提供 H1 到 H6 或為段落文本提供不同的樣式,例如粗體、斜體、鏈接等。

添加新塊按鈕

與編輯器流暢的構建體驗有點相反,“添加新塊”按鈕有點遙不可及。 要添加到佈局,您需要將鼠標移至左上角並單擊加號圖標。
新塊按鈕的位置有點偏。 添加新塊後,請記住,第二個“添加塊”按鈕的位置將直接出現在最後一個塊之後。

Gutenberg 的極簡編輯器的一個問題是第二個按鈕可能會丟失。 您需要將鼠標懸停在空白處才能顯示按鈕。 只有在添加不是段落的新模塊時才會發生這種情況段落可以通過鍵盤上的“輸入”輕鬆添加。

區塊管理

一旦您開始了解塊的概念,您就會發現 Gutenberg 不僅僅是帶有幾個按鈕的空白區域。
Gutenberg 默認安裝所有類型的塊,插件或主題添加的每個新塊都將顯示在添加新塊結構上。
最後,添加塊後,您可以編輯、克隆或刪除它。 此功能隱藏在右側的 3 個點下。 單擊這些以打開塊編輯菜單。 幸運的是,如您所見,絕大多數選項都有快捷方式,因此您可以輕鬆記住它們。 這為輕鬆克隆塊並四處移動它們開闢了可能性。

添加塊後,您可以將它們移動到內容上,使用箭頭等向上和向下移動。

邊欄

側邊欄是古騰堡所有設置中最簡單的。 您將在側邊欄上有 2 個塊,即佈局本身,其信息與經典編輯器和塊選項卡中的信息相同。

塊選項卡顯示特定塊的詳細選項。 在此示例中,我們可以將圖片鏈接到媒體文件並選擇我們希望顯示的列數。 每個模塊在側邊欄“塊”選項卡下都有自己的一組可配置選項。

向前進

接近 Gutenberg 的最佳方式是盡可能多地打字。 使用 Enter 鍵是激發新區塊的最佳方式。 例如,如果您決定添加一個新的段落塊,您可以選擇將該塊轉換圖像或圖片庫。

使用回車鍵創建新塊是跳過隱藏的“新塊”按鈕的最佳方式。 嘗試在使用鼠標時添加它會嚴重影響您的編輯技能。 通過使用回車鍵生成新塊,您稍後可以通過簡單地選擇該塊右側的圖像圖標來添加圖像。

但是請記住,古騰堡沒有經典編輯器那樣添加新圖像的快捷鍵。 這會迫使您使用鼠標,這會完全打斷書寫流程。 如果古騰堡添加了插入圖像和畫廊的快捷方式,這可能會使舊的經典編輯器很快過時。

通過創建段落、標題和圖片庫,您可以了解為什麼當您有大量需要重新排列的塊時,古騰堡更容易使用。 準備好文章後,您可以發布它並享受您的第一篇古騰堡文章。 請記住,一旦您開始創建古騰堡帖子,您就無法返回。

Gutenberg 會在每個帖子中添加代碼,如果您以後決定禁用它,它會變得很糟糕,因此,即使您可以開始試驗它,請記住,如果您開始在您的網站上使用它,您將無法恢復後無需手動修改每個帖子。

額外功能

統一工具欄聚光燈模式是古騰堡的兩個不錯的補充。 統一模式完全按照它說的去做,它統一了頂部的工具欄,對於所有模塊,所以每次編輯模塊時,所有工具欄內容都會在頂部,這非常方便並且模仿了經典編輯器某種方式。

另一方面,Spotlight 功能會調暗除您正在編輯的部分之外的所有內容的亮度。 當您有一篇非常複雜的文章並且需要專注於您正在做的事情時,這很方便。 兩種模式都可以在古騰堡配置選項下訪問——屏幕右上角的 3 個點。

對於編輯

古騰堡對編輯來說是驚人的。 處理一般的文案寫作要容易得多,因為您可以輕鬆更改和交換塊而不會破壞任何內容。 此外,您可以獨立編輯塊,並且您有一個簡單的信息菜單,可以讓您計算單詞數。

42主題

先睹為快,我們的新項目基於 WordPress 的新可視化編輯器 The 42 Theme。 它將很快在 Aspen Grove Studios 網站以及 WordPress 存儲庫中發布。

綜上所述

一旦您了解其中的細微差別,Gutenberg 就是一個易於使用的編輯器。 如果您訓練自己使用回車鍵書寫並從那時起添加圖像和其他塊,古騰堡可以積極提升您的網站建設體驗

但是,如果您更喜歡使用鼠標,那麼古騰堡的所有美感都將消失,您的工作效率也會受到影響。 對於那些非常熟悉 Classic Editor 的人來說,Gutenberg 可能是一個挑戰,但如果您遵循我在這裡的建議,您可以立即輕鬆適應 Gutenberg。