古騰堡教程:如何使用新的 WordPress 塊編輯器

已發表: 2019-04-22

新的 WordPress Gutenberg 塊編輯器以印刷機的發明者 Johannes Gutenberg 命名,在 WordPress 5.0 版本中作為 WordPress 的默認編輯器首次亮相。

任務很簡單,用 WordPress 創造新的寫作和編輯體驗。

Gutenberg 編輯器具有塊,在使用 WordPress 創建富媒體內容方面提供了獨特的體驗。

它為編輯器帶來了許多原生功能,而經典編輯器需要插件來完成任務。

稍後我將帶您了解如何使用 Gutenberg 塊編輯器。

與許多使用 WordPress 的客戶一起工作,沒有多少人對他們的編輯體驗的艱難轉變感到興奮。

這可能解釋了為什麼隨著古騰堡的發布,數百萬 WordPress 用戶一旦選擇了經典編輯器就安裝了經典編輯器。

wordpress 經典編輯器插件

一部分理由可能是與舊主題的兼容性,另一部分只是用戶憤慨或缺乏如何使用古騰堡塊編輯器的知識。

我希望在閱讀完這篇文章後,你會對塊編輯器感到滿意。

一步一步:如何使用古騰堡塊編輯器?

它從創建頁面或帖子開始。 你已經熟悉的東西。

使用古騰堡塊編輯器創建頁面或帖子

當您添加新頁面或帖子時,您首先應該注意的是這個工具欄。

古騰堡編輯器工具欄

在左側,我們有 + 添加塊工具欄。 這是您可以向內容添加塊的地方之一。

古騰堡編輯器工具欄塊

您也可以通過單擊最後一個塊下方的添加塊,然後單擊出現的 + 圖標。

或者,將鼠標懸停在塊之間,會出現“添加塊”圖標,單擊它以添加塊。

古騰堡編輯器工具欄塊添加

接下來是撤消和重做按鈕。

古騰堡編輯器工具欄塊撤消

頂部工具欄上的下一個圖標顯示您的內容結構。

古騰堡編輯器工具欄內容結構

接下來是塊導航

如果並且當您的內容隨著許多塊而增長時,您可以從這裡導航到塊。 很酷是不是。

古騰堡編輯器工具欄導航

在右側,

古騰堡編輯器工具欄右側

這些非常簡單,保存草稿,預覽您的帖子(在新選項卡中打開)和發布。

下一個圖標切換設置的顯示。 它顯示或隱藏右側窗格。

古騰堡編輯器顯示隱藏右窗格

如果設置可見,請單擊它以隱藏以獲得更廣泛的無干擾編輯器。 再次單擊它以顯示設置。

古騰堡編輯器工具欄右窗格隱藏

工具欄的尾部是三個垂直點。 這使您可以隱藏或查看更多工具和選項。

古騰堡編輯器工具欄隱藏更多選項

那麼,您可以使用更多工具和選項來做什麼呢?

  • 您擁有工具欄——在一處訪問所有塊和文檔工具。
  • 聚光燈模式。 讓您一次專注於一個塊
  • 全屏模式。 炸毀您的編輯器,以獲得完全無干擾的編輯體驗。
  • 如果您需要編寫代碼和 HTML 塊無法處理的代碼,請在可視化編輯器(您現在看到的內容)和代碼編輯器之間切換。
  • 管理可重用塊
  • 鍵盤快捷鍵和
  • 複製編輯器上的所有內容。

古騰堡街區

到目前為止,您一直在看到塊,但它們是什麼?

我們將走很長的路來看看它們是如何工作的,希望它會變得有意義,你可以根據你對它的理解給它一個定義。

Gutenberg 中有六類塊,包括最常用塊、通用塊、格式、佈局元素、小部件和嵌入。

古騰堡編輯器添加帖子塊

使用經典編輯器創建內容時,您只需將內容輸入文本區域即可。

使用新的編輯器,您將利用按內容類型組織的塊。 要添加文本內容,需要文本/段落塊、圖像 - 圖像塊、Html、HTML 塊。

這與將所有內容插入到一個位置的經典編輯器不同。

使用塊工具

每個塊都有您在創建和編輯內容時可以使用的工具。

與所有工具可見的經典編輯器不同。

要訪問這些工具,請單擊塊中的內容。 我們將使用段落/內容,因為這是您經常使用的。

古騰堡編輯器訪問塊工具

當您單擊塊中的文本或內容時,會在內容上方打開一個工具箱。

古騰堡開放式塊工具

您將看到的工具是您正在使用的塊所獨有的,因此當您單擊媒體塊時不要期望看到相同的工具。

例如,段落塊具有文本格式工具左對齊、居中對齊、右對齊、粗體、斜體、插入超鏈接和文本刪除線。

加上您安裝的其他插件添加的更多格式化工具,以擴展默認塊功能。

塊工具包上跨越塊的兩個功能是開頭的“變換塊”,然後在最後,您應該看到“更多選項”圖標 - 三個垂直點 - 其中包含塊的更多設置你正在和你一起工作。

轉換古騰堡塊

要轉換塊,請單擊上面段落塊中所見的塊。

假設我們要將第一段轉換為引用,單擊它,然後單擊轉換為圖標,然後選擇要將其轉換為的新塊。

轉換古騰堡塊

將段落塊轉換為引用現在看起來像這樣。

將塊轉換為引用

更多選項按鈕

塊工具包的另一個按鈕是“更多選項”圖標——三個垂直點。 單擊任何塊以查看它。

轉換塊工具附加選項

使用更多選項,您可以使用塊做更多的事情,例如; 隱藏塊設置,複製塊,在前面和後面的塊之前或之後插入塊,將塊編輯為 HTML,將塊添加到可重用塊,最後,刪除或刪除塊。

使用 Gutenberg 塊編輯器更改帖子或頁面的永久鏈接

單擊帖子或頁面的標題。 在其上方,將顯示鏈接。

古騰堡編輯器更改永久鏈接

單擊編輯按鈕,然後修改您的鏈接,然後單擊保存

古騰堡編輯器更改永久鏈接保存

Gutenberg 塊編輯器上的文檔和塊設置

每個 Gutenberg 帖子或頁面的右側都有一個帶有兩個選項卡的窗格。

文檔窗格具有頁面或帖子的文檔範圍設置,包括狀態和可見性、帖子作者、標籤、特色圖片、討論 - 以允許評論、類別和插件相關的帖子和/或頁面設置。

古騰堡編輯器文檔設置

塊窗格包含特定於塊的設置。

單擊內容區域中的塊,然後在右側窗格中單擊塊窗格。

古騰堡編輯器塊設置

結論

我們已經介紹了一些關於 Gutenberg Blocks 編輯器的信息。

我希望有了這些知識,將其用於內容創建和發布應該不那麼令人生畏。

您在使用新的塊編輯器嗎? 您對此有何經驗?

您可能還想將現有的 WordPress 帖子轉換為 Gutenberg 塊?