建站
咨詢
售后
建站咨詢
新聞中心
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：國際域名空間、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、瀘溪網(wǎng)站維護(hù)、網(wǎng)站推廣。
當(dāng)wordpress區(qū)塊編輯器或古騰堡于2018年12月推出時(shí)，我們不知道會發(fā)生什么。當(dāng)然，我們有足夠的時(shí)間來玩它的測試版，但我們無法預(yù)測實(shí)際發(fā)布的順利程度，或者用戶和開發(fā)人員會多么熱衷于接受新編輯器。
但經(jīng)過三年的發(fā)展，我們已經(jīng)看到古騰堡編輯在兩年多的時(shí)間里經(jīng)歷了巨大的發(fā)展。它已從最小可行產(chǎn)品 (MVP) 發(fā)布轉(zhuǎn)變?yōu)楦墒斓捻?xiàng)目，該項(xiàng)目越來越接近為WordPress創(chuàng)建統(tǒng)一的完整站點(diǎn)編輯體驗(yàn)的目標(biāo)。
考慮到這些變化，我們重新審視了古騰堡編輯器，帶您了解它的新面孔，包括它接下來的發(fā)展方向。
什么是古騰堡區(qū)塊編輯器？
Gutenberg，也稱為“WordPress區(qū)塊編輯器”或“WordPress編輯器”，是2018年12月6日發(fā)布的WordPress 5.0中引入的WordPress內(nèi)容編輯器。
如果您還沒有聽說過這個(gè)詞，它是所有WordPress網(wǎng)站都會使用默認(rèn)編輯器，除非您明確禁用它。它看起來像這樣：
WordPress古騰堡編輯器
WordPress古騰堡編輯器與之前的WordPress編輯器（現(xiàn)在稱為“經(jīng)典編輯器”或“TinyMCE編輯器”）之間的最大區(qū)別是一種新的基于區(qū)塊的內(nèi)容創(chuàng)建方法。
使用Gutenberg，您內(nèi)容中的每個(gè)元素都是一個(gè)區(qū)塊，可以輕松操作內(nèi)容。每個(gè)段落都是一個(gè)區(qū)塊，每個(gè)圖像都是一個(gè)區(qū)塊，每個(gè)按鈕都是一個(gè)區(qū)塊——你懂的！
第三方開發(fā)人員還可以創(chuàng)建自定義區(qū)塊，這有助于結(jié)束WordPress與短代碼的關(guān)系。假設(shè)您要嵌入聯(lián)系表單。無需像過去那樣添加短代碼（例如`[your-form-shortcode]`），現(xiàn)在只需放入表單插件區(qū)塊即可。
除此之外，您還可以使用區(qū)塊來創(chuàng)建更復(fù)雜的布局，例如設(shè)置多列設(shè)計(jì)或?qū)^(qū)塊分組以創(chuàng)建一個(gè)有凝聚力的部分。隨著我們深入向您展示如何使用區(qū)塊編輯器，您將更好地了解如何使用塊來改進(jìn)您創(chuàng)建內(nèi)容的方式。
古騰堡不僅僅是一個(gè)內(nèi)容編輯器
需要了解的一件重要事情是，Gutenberg項(xiàng)目的目標(biāo)不僅僅是一個(gè)內(nèi)容編輯器。
2021年7月，Gutenberg仍然只是一個(gè)內(nèi)容編輯器（大多數(shù)情況下）。但是Gutenberg的長期目標(biāo)是將其推向稱為Full Site Editing的領(lǐng)域。
Full Site Editing的理念是您可以使用Gutenberg編輯器設(shè)計(jì)100%的網(wǎng)站。例如，您不僅可以使用WordPress主題附帶的標(biāo)題選項(xiàng)，還可以使用Gutenberg區(qū)編輯器設(shè)計(jì)自定義標(biāo)題。
這種類型的功能目前尚不可用，但它是在路上，我們也有一些項(xiàng)目“概念證明”，我們會給你看一下近這篇文章的結(jié)尾。
古騰堡與流行替代品的優(yōu)缺點(diǎn)
現(xiàn)在我們已經(jīng)能夠使用WordPress區(qū)塊編輯器兩年多了，我們對古騰堡與其他解決方案的一些優(yōu)缺點(diǎn)有了很好的了解。在WordPress上創(chuàng)建內(nèi)容有兩種主要選擇：
- TinyMCE編輯器：這是在WordPress 5.0之前使用的經(jīng)典編輯器。
- 頁面構(gòu)建器插件：這些是為WordPress添加視覺、拖放設(shè)計(jì)的第三方插件。
一般來說，經(jīng)典的TinyMCE編輯器提供更精簡的類似字處理器的體驗(yàn)，而頁面構(gòu)建器提供更靈活的視覺拖放設(shè)計(jì)體驗(yàn)。
如果我們根據(jù)它們的設(shè)計(jì)靈活性對所有三個(gè)編輯器進(jìn)行排序，它會是這樣的：
Classic TinyMCE編輯器（最不靈活）< Gutenberg < 頁面構(gòu)建器（最靈活）
現(xiàn)在，讓我們談?wù)劰膨v堡塊編輯器與替代品的一些優(yōu)缺點(diǎn)。
古騰堡與經(jīng)典編輯器：優(yōu)點(diǎn)和缺點(diǎn)
讓我們首先比較Gutenberg與經(jīng)典的TinyMCE編輯器。
優(yōu)點(diǎn)：
- 古騰堡提供了更視覺化的設(shè)計(jì)背景
- 您不需要使用短代碼來嵌入內(nèi)容——您將獲得一個(gè)統(tǒng)一的區(qū)塊系統(tǒng)
缺點(diǎn)：
- 有些人發(fā)現(xiàn)用古騰堡寫作有點(diǎn)笨拙，因?yàn)槊總€(gè)段落都是一個(gè)單獨(dú)的區(qū)塊。對于長文章，操作文本可能很困難。您可能更喜歡在另一個(gè)編輯器中書寫并在完成后將文本粘貼到Gutenberg中。
- 雖然Gutenberg的性能有了顯著提高，但它仍然會滯后于大量文章，而經(jīng)典編輯器不太可能發(fā)生這種情況。
如果您認(rèn)為經(jīng)典TinyMCE編輯器更適合您的需求，您可以完全禁用Gutenberg編輯器。
古騰堡與頁面構(gòu)建器：優(yōu)點(diǎn)和缺點(diǎn)
現(xiàn)在，讓我們來看看Gutenberg如何與第三方頁面構(gòu)建器插件相抗衡。
優(yōu)點(diǎn)：
- Gutenberg是一項(xiàng)核心功能，這意味著您不必?fù)?dān)心兼容性問題。
- 因?yàn)樗且粋€(gè)核心功能，所以所有開發(fā)人員都可以將Gutenberg支持構(gòu)建到他們的插件中，從而提高兼容性。
- Gutenberg輸出更干凈、更輕量級的代碼。在所有條件相同的情況下，使用Gutenberg構(gòu)建的設(shè)計(jì)通常比使用頁面構(gòu)建器構(gòu)建的相同設(shè)計(jì)加載速度更快。
缺點(diǎn)：
- 古騰堡不像頁面構(gòu)建器那樣提供適當(dāng)?shù)囊曈X編輯。它比經(jīng)典編輯器更易于訪問，但仍然不像頁面構(gòu)建器那樣100%無縫。
- 頁面構(gòu)建器仍然為您提供更靈活的設(shè)計(jì)和布局選項(xiàng)。
- 大多數(shù)頁面構(gòu)建器提供更加流暢和靈活的拖放移動(dòng)。
關(guān)于比較的想法
對于大多數(shù)用戶來說，古騰堡在靈活性方面達(dá)到了最佳點(diǎn)。大多數(shù)人不需要為其內(nèi)容提供頁面構(gòu)建器的靈活性，尤其是博客文章。但同時(shí)，快速設(shè)置多列設(shè)計(jì)或插入按鈕也不錯(cuò)，經(jīng)典編輯器并不容易。因此，考慮到這一點(diǎn)，讓我們進(jìn)入如何開始使用古騰堡。
如何使用WordPress古騰堡區(qū)塊編輯器
現(xiàn)在您對Gutenberg區(qū)塊編輯器有所了解，讓我們深入研究如何使用它來開始創(chuàng)建內(nèi)容。我們將首先介紹界面，然后逐步開發(fā)更高級的方法來使用編輯器和改進(jìn)您的工作流程。
古騰堡區(qū)塊編輯器界面
當(dāng)您打開編輯器時(shí)，它將隱藏WordPress儀表盤側(cè)邊欄并為您提供全屏體驗(yàn)：
WordPress古騰堡區(qū)塊編輯器界面
編輯器分為三個(gè)主要部分：
- 內(nèi)容：您的內(nèi)容占據(jù)了大部分屏幕。您將看到網(wǎng)站前端的視覺預(yù)覽。這不是100%準(zhǔn)確，但您應(yīng)該對最終設(shè)計(jì)有一個(gè)很好的了解。
- 頂部工具欄：頂部的工具欄可幫助您插入新區(qū)塊、撤消/重做以及訪問其他重要設(shè)置
- 側(cè)邊欄：側(cè)邊欄包含兩個(gè)選項(xiàng)卡。 “文章”選項(xiàng)卡讓您可以配置文章級別的設(shè)置，例如其類別、標(biāo)簽、特色圖片等?！?strong>區(qū)塊”選項(xiàng)卡顯示您選擇的區(qū)塊的設(shè)置——稍后會詳細(xì)介紹。
要?jiǎng)?chuàng)建更加身臨其境的寫作體驗(yàn)，您可以通過單擊右上角的“齒輪”圖標(biāo)隱藏側(cè)邊欄。要恢復(fù)側(cè)邊欄，您需要做的就是再次單擊“齒輪”圖標(biāo)：
單擊“齒輪”圖標(biāo)將顯示/隱藏側(cè)欄
您的編輯器可能看起來略有不同，因?yàn)橹黝}開發(fā)人員可以選擇將他們的樣式添加到編輯器中以創(chuàng)建更具視覺效果的體驗(yàn)。根據(jù)您的主題，您可能會看到不同的字體或顏色。
例如，如果您使用新的2021默認(rèn)主題，編輯器界面如下所示：
2021主題將其樣式應(yīng)用于區(qū)塊編輯器的示例
添加區(qū)塊
要將常規(guī)段落文本添加到您的文章中，您只需單擊并鍵入即可。每次按 Enter 鍵時(shí)，編輯器都會自動(dòng)創(chuàng)建一個(gè)新的段落區(qū)塊。
對于其他類型的內(nèi)容，您需要插入一個(gè)新區(qū)塊。您將使用塊作為圖像、按鈕、視頻嵌入等。
要添加新區(qū)塊，您可以單擊界面中的“加號”圖標(biāo)之一。它是左上角的主要區(qū)塊插入器圖標(biāo)，但您還會在界面內(nèi)看到其他圖標(biāo)，用于打開較小的區(qū)塊插入器界面：
“加號”圖標(biāo)可讓您插入新區(qū)塊
首先，將鼠標(biāo)光標(biāo)放在要插入新區(qū)塊的位置。例如，要在按鈕下方添加新區(qū)塊，您可以單擊按鈕下方，然后單擊+圖標(biāo)。
您應(yīng)該會看到一個(gè)側(cè)面板，其中顯示了所有可用的區(qū)塊，分為不同的類別。您可以搜索特定塊或僅從列表中選擇一個(gè)選項(xiàng)。當(dāng)您將鼠標(biāo)懸停在一個(gè)區(qū)塊上時(shí)，您將看到其功能的描述和預(yù)覽。
要插入?yún)^(qū)塊，您只需單擊它。例如，要插入常規(guī)圖像，您只需單擊圖片區(qū)塊：
單擊要插入的區(qū)塊類型
然后，您可以按照提示上傳或從媒體庫中選擇現(xiàn)有圖像。
基本格式選項(xiàng)
要為您的區(qū)塊進(jìn)行基本格式選擇，您將獲得一個(gè)浮動(dòng)工具欄，當(dāng)您單擊任何區(qū)塊時(shí)會出現(xiàn)該工具欄。如果您要格式化常規(guī)文本，您可以在此處：
- 添加粗體或斜體
- 插入鏈接
- 更改路線
- 添加格式，如內(nèi)聯(lián)代碼、刪除線和訂閱
浮動(dòng)工具欄允許您進(jìn)行基本的格式選擇
例如，假設(shè)您想在您的內(nèi)容中插入一個(gè)鏈接。您將首先選擇要鏈接的特定文本 – 在我們的示例中，即“對于其他類型的內(nèi)容”。然后，您可以單擊工具欄上的鏈接圖標(biāo)打開鏈接插入選項(xiàng)：
在WordPress古騰堡區(qū)塊編輯器中插入鏈接
配置高級區(qū)塊設(shè)置
您插入的所有區(qū)塊都在側(cè)欄中帶有附加設(shè)置。一些塊可能會給你一些設(shè)置，而另一些區(qū)塊會給你幾個(gè)選項(xiàng)來控制設(shè)計(jì)、布局、功能等。
要打開區(qū)塊的設(shè)置，請?jiān)诰庉嬈髦袉螕魤K以選擇它。然后，轉(zhuǎn)到邊欄中的“區(qū)塊”選項(xiàng)卡以查看其設(shè)置。
下面，您可以看到按鈕區(qū)塊的設(shè)置，這是更靈活的區(qū)塊之一。你可以改變顏色，使它更寬，等等。
當(dāng)您更改區(qū)塊的設(shè)置時(shí)，您會立即看到這些更改反映在編輯器中。
您可以在邊欄中訪問區(qū)塊的設(shè)置
同樣，每個(gè)區(qū)塊都將具有該區(qū)塊獨(dú)有的設(shè)置。例如，如果您打開常規(guī)段落文本的設(shè)置，您只會獲得一些基本的排版和顏色選項(xiàng)。在下面，您可以看到我們能夠應(yīng)用顏色背景來突出顯示某些文本：
常規(guī)段落文本的區(qū)塊設(shè)置
重新排列區(qū)塊
除了僅使用復(fù)制和粘貼（您可以像任何其他編輯器一樣對文本執(zhí)行此操作）之外，Gutenberg還為您提供了兩種重新排列塊的主要方法。
首先，如果您想將一個(gè)區(qū)塊向上或向下移動(dòng)幾個(gè)位置，您可以使用浮動(dòng)工具欄上的向上或向下箭頭。
對于廣泛的移動(dòng)，您可以使用拖放。要拖放區(qū)塊，您需要單擊箭頭左側(cè)的“六個(gè)點(diǎn)”圖標(biāo)。
在該圖標(biāo)上單擊并按住鼠標(biāo)后，您可以將區(qū)塊拖動(dòng)到頁面上的任何位置：
您可以使用箭頭或拖放來重新排列區(qū)塊
對于非文本內(nèi)容，復(fù)制和粘貼可能很棘手。在這篇文章的稍后部分，我們將向您展示如何在保留其樣式的同時(shí)復(fù)制和粘貼整個(gè)區(qū)塊。
嵌入來自其他來源的內(nèi)容
Gutenberg帶有專用區(qū)塊，用于嵌入來自第三方來源（如 YouTube、Vimeo、Soundcloud 等）的內(nèi)容。您可以在區(qū)塊插入器的“嵌入”部分找到所有這些選項(xiàng)。
例如，要嵌入YouTube視頻，您只需：
在Gutenberg中嵌入YouTube視頻
然后，您應(yīng)該會在編輯器中看到嵌入視頻的預(yù)覽。
創(chuàng)建多列或分組布局
正如我們之前提到的，塊編輯器相對于舊版TinyMCE編輯器的顯著優(yōu)勢之一是您可以創(chuàng)建更復(fù)雜的布局，而無需依賴自定義代碼或短代碼。區(qū)塊編輯器帶有兩個(gè)默認(rèn)塊來幫助您執(zhí)行此操作：
- 欄目：創(chuàng)建多列布局。
- 組：將多個(gè)區(qū)塊分組。例如，您可以使用它為顯示在多個(gè)區(qū)塊后面的整個(gè)部分設(shè)置背景顏色。
這兩個(gè)塊的工作原理都是“嵌套”塊，這意味著您將一個(gè)或多個(gè)區(qū)塊放在另一個(gè)區(qū)塊中。
我們將向您展示一個(gè)使用欄目區(qū)塊的示例，但相同的基本原則適用于組區(qū)塊。
假設(shè)您要?jiǎng)?chuàng)建一個(gè)兩列布局，其中左側(cè)的列有一些常規(guī)段落文本，右側(cè)的列有一個(gè)按鈕。
首先，您將使用區(qū)塊插入器添加欄目區(qū)塊。這將顯示一個(gè)提示，您可以在其中選擇您喜歡的布局：
選擇欄目結(jié)構(gòu)和列寬比
我們將為此示例選擇兩列 50/50 布局。有了它，你會看到兩個(gè)大小相等的盒子，里面有+圖標(biāo)。要插入內(nèi)容，您可以單擊那個(gè)+圖標(biāo)打開塊插入器界面：
如何向欄目區(qū)塊添加內(nèi)容
將第一個(gè)區(qū)塊添加到列后，您可以點(diǎn)擊+圖標(biāo)插入其他區(qū)塊。或者，您可以將一個(gè)區(qū)塊從列結(jié)構(gòu)外部拖放到列中。
10個(gè)提高工作效率的古騰堡技巧
現(xiàn)在您已經(jīng)對古騰堡的工作原理有了基本的了解，讓我們回顧一些有助于您更有效地使用區(qū)塊編輯器的有價(jià)值的提示和技巧。
1.使用/ （正斜杠）快速插入?yún)^(qū)塊
如果您需要插入很多區(qū)塊，手動(dòng)打開區(qū)塊插入器可能會有點(diǎn)乏味。值得慶幸的是，一旦您開始學(xué)習(xí)需要使用的常用區(qū)塊的名稱，就有一種僅使用鍵盤/（正斜杠）即可更快地插入?yún)^(qū)塊的方法。
如果您按“Enter”開始一個(gè)新的段落區(qū)塊，您可以通過鍵入一個(gè)正斜杠來快速插入一個(gè)區(qū)塊，后跟要插入的區(qū)塊的名稱。
當(dāng)您開始輸入時(shí)，您將看到與您的查詢匹配的所有區(qū)塊的列表。然后，您可以使用鍵盤箭頭導(dǎo)航塊并按“Enter”鍵選擇要插入的區(qū)塊。
以下是使用快速插入添加圖像區(qū)塊的示例：
如何使用正斜杠快速插入?yún)^(qū)塊
2. 通過從桌面拖動(dòng)圖像來插入圖像
如果您要插入許多圖像，區(qū)塊編輯器包含另一個(gè)省時(shí)功能，讓您無需在上傳圖像之前添加圖像區(qū)塊。
相反，您可以直接將圖像文件從桌面拖動(dòng)到您想要將其添加到文章的位置。當(dāng)您將圖像文件拖到您網(wǎng)站的內(nèi)容上時(shí)，您會看到一條藍(lán)線標(biāo)記圖像的顯示位置。
發(fā)布文件后，WordPress將自動(dòng)上傳它并在適當(dāng)?shù)奈恢貌迦雸D像區(qū)塊：
您可以通過從桌面拖動(dòng)文件來插入圖像
3. 使用一些Markdown格式
如果你是Markdown語法創(chuàng)建內(nèi)容的粉絲，你會很高興地知道，區(qū)塊編輯器不支持某些用途有限，Markdown-主要是做標(biāo)題。
例如，如果您想插入帶有H3標(biāo)簽的標(biāo)題塊，您可以鍵入三個(gè)主題標(biāo)簽 (`###`)，然后按空格鍵。編輯器會自動(dòng)將其轉(zhuǎn)換為H3，然后您可以繼續(xù)輸入標(biāo)題：
區(qū)塊編輯器支持標(biāo)題的基本Markdown語法
假設(shè)您想要更高級的Markdown支持。在這種情況下，你可以安裝一個(gè)像EditorsKit這樣的免費(fèi)插件，它也可以讓你使用Markdown來加粗、斜體和刪除線——我們稍后會在這篇文章中詳細(xì)討論Gutenberg插件。
4. 將格式工具欄固定在編輯器的頂部
如果您不喜歡格式化工具如何“浮動(dòng)”在塊上方，塊編輯器包含一項(xiàng)功能，可讓您將其固定在頂部工具欄下方：
您可以將格式工具欄固定到頂部
5. 復(fù)制區(qū)塊及其所有設(shè)置
區(qū)塊編輯器允許您像在任何編輯器中一樣復(fù)制和粘貼文本 – “ Ctrl + C ”或右鍵單擊并選擇Copy。
但是，您不能使用此方法復(fù)制和粘貼整個(gè)區(qū)塊，同時(shí)保留其設(shè)置。相反，您需要：
如何復(fù)制區(qū)塊及其所有設(shè)置
以這種方式復(fù)制區(qū)塊后，您可以像往常一樣粘貼它——即“ Ctrl + V ”或右鍵單擊并選擇粘貼。
6.使用區(qū)塊列表視圖快速選擇正確的區(qū)塊
對于大多數(shù)區(qū)塊，您只需單擊編輯器即可選擇區(qū)塊。但是，如果您開始使用“嵌套”區(qū)塊，例如在列或組塊中插入?yún)^(qū)塊，這可能會變得棘手。
編輯器包括一個(gè)列表視圖選項(xiàng)，您可以從頂部工具欄打開它來解決這個(gè)問題。列表視圖將顯示每個(gè)區(qū)塊，包括縮進(jìn)的嵌套區(qū)塊。
您可以通過在列表中單擊一個(gè)區(qū)塊來選擇它，當(dāng)您將鼠標(biāo)懸停在列表中時(shí)，編輯器也會突出顯示該區(qū)塊。
在下面的示例中，您可以看到：
- 主要的父列區(qū)塊
- 每列的嵌套區(qū)塊
- 一列內(nèi)的嵌套組區(qū)塊
- 組區(qū)塊內(nèi)的嵌套標(biāo)題區(qū)塊
要選擇主父塊，您只需打開列表視圖并從列表中選擇它：
打開列表視圖可幫助您導(dǎo)航嵌套區(qū)塊
7. 打開代碼編輯器（對于單個(gè)區(qū)塊或完整的文章）
Gutenberg區(qū)塊編輯器的優(yōu)點(diǎn)之一是它允許您配置許多樣式和布局選項(xiàng)，而無需求助于代碼。但是，在某些情況下，您仍可能希望為更高級的用戶直接訪問代碼。
為了幫助您做到這一點(diǎn)，Gutenberg編輯器提供了幾個(gè)不同的選項(xiàng)。
首先，您可以編輯單個(gè)區(qū)塊的代碼，這對于插入CSS類等細(xì)微調(diào)整很有用。為此，請從區(qū)塊的工具欄中打開下拉菜單，然后選擇Edit as HTML（作為HTML編輯）：
如何將單個(gè)區(qū)塊作為HTML編輯
選擇此選項(xiàng)會將視覺預(yù)覽轉(zhuǎn)換為該區(qū)塊的代碼編輯器，而不會影響其他區(qū)塊的視覺預(yù)覽：
單個(gè)區(qū)塊的HTML編輯器
其次，編輯器包含一個(gè)HTML自定義區(qū)塊，您可以使用它來嵌入完整的HTML片段。您所做的就是添加區(qū)塊并粘貼到您的代碼中。
最后，您還可以通過使用在右上角的下拉菜單或鍵盤快捷方式：Ctrl + Shift + Alt + M打開整個(gè)文檔的完整代碼編輯器。
請記住，當(dāng)您打開完整的代碼編輯器時(shí)，您還會看到來 Gutenberg的區(qū)塊格式標(biāo)記，因此導(dǎo)航可能有點(diǎn)棘手：
完整的代碼編輯器，包括區(qū)塊標(biāo)記
8. 學(xué)習(xí)鍵盤快捷鍵
區(qū)塊編輯器包含許多鍵盤快捷鍵，可讓您執(zhí)行常見操作?；〞r(shí)間學(xué)習(xí)它們是值得的，因?yàn)樗鼈儠屇愀行?，并讓你免于重?fù)點(diǎn)擊鼠標(biāo)。
以下是一些最常見的快捷方式——如果您使用的是 Mac，您需要將“Ctrl”切換為“Command (?)”：
- 打開區(qū)塊列表視圖 – Shift + Alt + O
- 保存更改 — Ctrl + S
- 撤消上次更改 — Ctrl + Z
- 重做上次撤消 – Ctrl + Shift + Z
- 復(fù)制選定的區(qū)塊 — Ctrl + Shift + D
- 刪除選定的區(qū)塊 — Shift + Alt + Z
- 在所選區(qū)塊之前插入一個(gè)新區(qū)塊 — Ctrl + Alt + T
- 在所選區(qū)塊之后插入一個(gè)新區(qū)塊 — Ctrl + Alt + Y
您還可以在編輯器中打開所有鍵盤快捷鍵的完整備忘單。為此，您可以使用鍵盤快捷鍵 — Shift + Alt + H — 或單擊編輯器右上角的“三個(gè)垂直點(diǎn)”菜單圖標(biāo) ( ? )，然后從下拉列表中選擇鍵盤快捷鍵。
9. 通過隱藏區(qū)塊整理你的界面
默認(rèn)情況下，區(qū)塊編輯器會添加許多區(qū)塊，但您可能不會全部使用它們。為了幫助您整理界面，編輯器包含一個(gè)名為區(qū)塊管理的功能，可讓您禁用和隱藏您不使用的區(qū)塊：
您可以取消選中塊以將它們從區(qū)塊插入器中隱藏
10. 為跳轉(zhuǎn)鏈接添加錨點(diǎn)
最后，我們最后一個(gè)有用的提示是區(qū)塊編輯器的專用HTML錨鏈接功能，它允許您創(chuàng)建指向內(nèi)容特定部分（例如目錄）的跳轉(zhuǎn)鏈接。
在經(jīng)典編輯器中，您必須手動(dòng)使用代碼添加HTML錨點(diǎn)。但是使用Gutenberg，您只需在任何區(qū)塊設(shè)置的高級區(qū)域的HTML錨點(diǎn)字段中輸入跳轉(zhuǎn)鏈接的文本：
如何設(shè)置自定義錨文本
深入研究更高級的區(qū)塊編輯器概念
在這一點(diǎn)上，我們已經(jīng)介紹了很多關(guān)于編輯器如何工作的內(nèi)容以及一些提高工作效率的技巧。現(xiàn)在您已經(jīng)掌握了基本知識，讓我們來看看兩個(gè)稍微高級一點(diǎn)的策略：
- 區(qū)塊模式
- 可重復(fù)使用的區(qū)塊
區(qū)塊模式
區(qū)塊模式本質(zhì)上是一個(gè)模板。它是排列成布局的塊的集合。它可能是一些次要的東西，比如按鈕的排列。它甚至可以是整個(gè)部分甚至整個(gè)頁面的模板。
WordPress內(nèi)置區(qū)塊模式，第三方插件開發(fā)者也可以添加自己的。
您可以從主區(qū)塊插入器的“模式”選項(xiàng)卡插入新模式：
如何插入?yún)^(qū)塊模式
插入?yún)^(qū)塊模式后，您可以完全編輯構(gòu)成該模式的所有塊，就像手動(dòng)添加區(qū)塊一樣。
目前，核心Gutenberg編輯器不允許您創(chuàng)建區(qū)塊模式（除非您知道如何編碼）。但是，您可以使用Justin Tadlock的免費(fèi)Block Pattern Builder插件來解決此問題。激活插件后，您可以使用Gutenberg創(chuàng)建您的設(shè)計(jì)，然后將該設(shè)計(jì)保存為模式。
首先，轉(zhuǎn)到Block Patterns > Add New以使用編輯器創(chuàng)建新模式。確保在完成后發(fā)布它：
創(chuàng)建您的自定義區(qū)塊模式
完成此操作后，您將能夠像插入任何其他模式一樣插入您的區(qū)塊模式 – 在未分類部分中查找它：
插入您創(chuàng)建的自定義區(qū)塊模式
WordPress核心團(tuán)隊(duì)還在WordPress.org上推出了一個(gè)官方區(qū)塊模式庫。您可以使用復(fù)制和粘貼將它們插入到編輯器中。只需單擊區(qū)塊模式庫網(wǎng)站上的復(fù)制按鈕，然后將其粘貼到編輯器中即可。
可重復(fù)使用的區(qū)塊
可重用區(qū)塊是可以作為一組插入的一個(gè)或多個(gè)區(qū)塊的集合。它們類似于區(qū)塊模式，但有一個(gè)關(guān)鍵區(qū)別：
區(qū)塊模式是您將在每個(gè)實(shí)例中編輯的起始模板，而可重用區(qū)塊在您包含它的每個(gè)實(shí)例中都是相同的。
如果您更新可重用區(qū)塊，這些更改將自動(dòng)應(yīng)用于所有現(xiàn)有實(shí)例。
例如，您可以使用可重復(fù)使用的區(qū)塊來創(chuàng)建一個(gè)號召性用語 (CTA)，您希望在所有內(nèi)容中都相同。然后，如果您想更新CTA，您只需更新可重用區(qū)塊一次即可在整個(gè)站點(diǎn)上更改它。
要在WordPress的Gutenberg編輯器中創(chuàng)建可重復(fù)使用的區(qū)塊，請單擊并拖動(dòng)以選擇一個(gè)或多個(gè)區(qū)塊。然后，單擊添加到可重用區(qū)塊選項(xiàng)。（我們上面提到的插件還允許您以這種方式創(chuàng)建區(qū)塊模式。）
如何創(chuàng)建一個(gè)可重用的區(qū)塊
然后您的區(qū)塊將被分組 – 您可以在側(cè)邊欄中的可重用區(qū)塊設(shè)置中為您的可重用塊命名。
現(xiàn)在，您將能夠通過搜索其名稱來插入該可重用區(qū)塊。您可以使用 `/` 來快速插入?yún)^(qū)塊：
如何插入可重用區(qū)塊
如果您更改可重用區(qū)塊，您將在更新文章時(shí)獲得發(fā)布這些更改的選項(xiàng)。如果您決定發(fā)布可重用區(qū)塊更改，這些更改將自動(dòng)應(yīng)用于可重用塊的每個(gè)實(shí)例：
如何更新可重用區(qū)塊
使用插件擴(kuò)展區(qū)塊編輯器
到目前為止，我們一直專注于核心區(qū)塊編輯器功能，但有一些例外。
但是，區(qū)塊編輯器的一大優(yōu)點(diǎn)是您可以使用插件來擴(kuò)展它，就像使用WordPress網(wǎng)站的其余部分一樣。
您可以將插件用于一些不同的事情：
- 添加新的內(nèi)容區(qū)塊：插件可以添加您可以在設(shè)計(jì)中使用的新區(qū)塊。這是目前古騰堡插件最常見的用例。
- 添加新的模板/區(qū)塊模式：一些插件使用核心區(qū)塊模式系統(tǒng)，而其他插件則創(chuàng)建了自己的模板系統(tǒng)。
- 更改編輯器界面/功能：您可以使用插件來修改編輯器本身。例如，您可以添加更好的Markdown支持。
除了專為Gutenberg構(gòu)建的插件之外，許多其他WordPress插件也可以使用區(qū)塊編輯器。
例如，如果您使用的是聯(lián)系表單插件，該插件可能會為您提供一個(gè)專用區(qū)塊，您可以使用它來嵌入您的表單。許多其他類型的插件也是如此。
一旦您掌握了編輯器的基礎(chǔ)知識，就值得探索這些插件，看看您是否找到了可以改善您體驗(yàn)的插件。
以下是我們撰寫本文時(shí)一些最受歡迎的選項(xiàng)：
- Ultimate Addons for Gutenberg
- Kadence Blocks
- GenerateBlocks
- Stackable
- Getwid
您可以在WordPress.org的啟用區(qū)塊的插件部分查看更多類似插件。
WordPress古騰堡編輯器和完整站點(diǎn)編輯
正如我們在本文開頭提到的，Gutenberg項(xiàng)目的目標(biāo)不僅僅是一個(gè)內(nèi)容編輯器。
長期計(jì)劃是讓W(xué)ordPress進(jìn)入Full Site Editing。這正是它所說的意思 – 目標(biāo)是您最終將能夠使用Gutenberg編輯器編輯您網(wǎng)站的所有部分。這包括您網(wǎng)站的頁眉、頁腳、側(cè)邊欄等。
與WordPress 5.0中區(qū)塊編輯器的推出不同，全站點(diǎn)編輯采用迭代方法。這將是一個(gè)逐漸增加的功能，每個(gè)新版本都建立在以前的版本上。
例如，從WordPress5.8開始，您現(xiàn)在將使用塊編輯器來管理您站點(diǎn)的小部件。您還可以訪問一些以主題為中心的新區(qū)塊，例如站點(diǎn)Logo、導(dǎo)航、查詢循環(huán)（允許您為列表文章創(chuàng)建模板）等。
但是，雖然官方的完整站點(diǎn)編輯仍在進(jìn)行中，但一些勇敢的主題開發(fā)人員已經(jīng)開始發(fā)布基于塊的主題，這為我們提供了一些關(guān)于完整站點(diǎn)編輯如何工作的很好的例子。
此外，您可以訪問Gutenberg插件版本中的一些實(shí)驗(yàn)性完整站點(diǎn)編輯功能。
所以，讓我們看兩件事：
當(dāng)Full Site Editing成為主流時(shí)，所有這些都可能發(fā)生或大或小的變化。這只是為了讓您了解它可能是什么。
使用區(qū)塊而不是小部件
從WordPress 5.8開始，您現(xiàn)在將使用區(qū)塊來控制側(cè)邊欄和頁腳而不是小工具（默認(rèn)情況下 – 如果您愿意，可以禁用它）。
當(dāng)您轉(zhuǎn)到外觀> 小工具時(shí)，您將能夠使用區(qū)塊編輯器管理每個(gè)小工具區(qū)域的內(nèi)容。
您可以看到每個(gè)小工具區(qū)域都有一個(gè)單獨(dú)的編輯器，您可以通過單擊手風(fēng)琴開關(guān)打開該編輯器。您還可以通過單擊頂部附近的鉤狀箭頭圖標(biāo)在不同的小工具區(qū)域之間移動(dòng)區(qū)塊：
使用區(qū)塊來編輯小工具區(qū)域
使用新的主題區(qū)塊
WordPress 5.8還添加了新的專用主題區(qū)塊，可讓您在站點(diǎn)中插入動(dòng)態(tài)內(nèi)容。當(dāng)您在未來版本中為您的主題設(shè)計(jì)模板時(shí)，這些塊也將發(fā)揮關(guān)鍵作用。
例如，假設(shè)您想在頁面上嵌入最近內(nèi)容的列表?，F(xiàn)在，您只需添加Query Loop區(qū)塊，您就可以動(dòng)態(tài)插入來自特定文章類型（例如博客帖子）的內(nèi)容，包括按類別、作者、關(guān)鍵字等進(jìn)行過濾：
使用Query Loop區(qū)塊顯示動(dòng)態(tài)內(nèi)容
在Query Loop區(qū)塊內(nèi)，您可以嵌套其他主題區(qū)塊來控制顯示在那里的內(nèi)容的模板。例如，您可以通過將Post Date區(qū)塊添加到模板來顯示每個(gè)文章的日期。
使用WordPress 5.8中的Query Loop區(qū)塊，您基本上可以設(shè)計(jì)自己的自定義博客列表頁面。適當(dāng)?shù)耐暾军c(diǎn)編輯會將其擴(kuò)展到您的整個(gè)主題 – 所以讓我們接下來看看。
設(shè)計(jì)內(nèi)容模板
模板編輯模式是WordPress 5.8中的另一項(xiàng)新功能。它允許您使用Gutenberg使用區(qū)塊來設(shè)計(jì)文章和頁面的模板。
目前，此功能僅在您的主題開發(fā)人員明確啟用時(shí)才可用，因此如果您的主題開發(fā)人員尚未啟用，您可能看不到它。
如果您正在使用的主題，支持模板在WordPress 5.8編輯模式，你會看到一個(gè)新的模板中的部分文章/頁面的側(cè)邊欄的標(biāo)簽，當(dāng)你編輯文章或網(wǎng)頁。您可以創(chuàng)建新模板或選擇現(xiàn)有模板之一：
在支持模板模式的主題中創(chuàng)建新模板
如果您創(chuàng)建了一個(gè)新模板，您將能夠?yàn)槠涿詭椭涀∷?。然后，您可以使用特殊的模板編輯器模式以及我們在上一?jié)中詳述的新主題塊來設(shè)計(jì)模板：
WordPress 5.8中的新模板編輯器
Blockbase完整站點(diǎn)編輯示例
Blockbase是Automattic的一個(gè)主題，它充當(dāng)一種“概念證明”和完整站點(diǎn)編輯的游樂場。它仍然是實(shí)驗(yàn)性的，因此在這些功能成為核心WordPress軟件之前它可能會發(fā)生變化。但它提供了完整站點(diǎn)編輯的想法。
安裝Gutenberg的主題和插件版本后，您將獲得一個(gè)新的站點(diǎn)編輯器區(qū)域，您可以使用上面看到的相同編輯器“構(gòu)建”主題。
但是，關(guān)鍵的區(qū)別在于您不僅僅是在構(gòu)建單個(gè)文章或頁面。相反，您正在使用WordPress區(qū)塊編輯器來創(chuàng)建您網(wǎng)站的所有內(nèi)容將使用的實(shí)際模板——例如，您的標(biāo)題模板。
完整站點(diǎn)編輯的早期示例
為了幫助您實(shí)現(xiàn)這一點(diǎn)，您將獲得一系列新的設(shè)計(jì)區(qū)塊，包括您在上面看到的一些主題區(qū)塊：
帶有完整站點(diǎn)編輯的新設(shè)計(jì)區(qū)塊
要在不同模板之間導(dǎo)航，您可以單擊左上角的WordPress徽標(biāo)來編輯其他模板并創(chuàng)建新模板：
編輯不同的主題模板
同樣，我們的想法是您最終將能夠使用古騰堡編輯器來控制所有主題的模板/布局。當(dāng)這種情況發(fā)生時(shí)，創(chuàng)建一個(gè) WordPress 網(wǎng)站將與我們在 2021 年認(rèn)為的“正?！本W(wǎng)站大不相同。
小結(jié)
自2018年以來，古騰堡區(qū)塊編輯器取得了很大進(jìn)展。隨著即將轉(zhuǎn)向完整站點(diǎn)編輯，區(qū)塊編輯器將只會成為WordPress更重要的一部分。
在這篇文章中，我們涵蓋了從塊編輯器基礎(chǔ)知識到高級技巧和功能的所有內(nèi)容。我們還研究了未來完整站點(diǎn)編輯的樣子。
如果您還沒有準(zhǔn)備好嘗試，您可以永久禁用古騰堡并使用經(jīng)典編輯器。然而，古騰堡會繼續(xù)增長，所以你不會想永遠(yuǎn)忽視它。
網(wǎng)頁名稱：深入了解最新的WordPress古騰堡編輯器（2021）
文章網(wǎng)址：http://fisionsoft.com.cn/article/cophgdc.html
