WordPress中的塊編輯器，是我們現(xiàn)在用來編寫內(nèi)容和編輯站點的默認工具。它在2019年推出，大家都親切地稱它為“古騰堡（Gutenberg）”。這個新編輯器取代了之前的老式經(jīng)典編輯器。塊編輯器用起來特別簡單、直觀，無論是創(chuàng)建內(nèi)容還是編輯WordPress網(wǎng)站，它都能勝任。

塊編輯器 (Gutenberg) 和經(jīng)典編輯器有什么區(qū)別？

在深入研究塊編輯器之前，讓我們比較并了解古騰堡塊編輯器和舊經(jīng)典編輯器之間的差異。WordPress 中的經(jīng)典編輯器如下所示：

它有一個文本編輯器框，其中包含一些基本的格式選項。它的功能和視覺外觀非常有限。WordPress 中的塊編輯器如下所示：

就像你所看到的，它們是兩個完全不同的編輯器，用于在 WordPress 中創(chuàng)建內(nèi)容。舊的經(jīng)典編輯器是帶有類似于 Microsoft Word 的格式按鈕的文本編輯器。新編輯器使用不同的方法，稱為“塊”（因此，名稱為“塊編輯器”）。

塊是可以添加到編輯屏幕以創(chuàng)建布局的內(nèi)容元素。添加到帖子或頁面的每個項目都是一個塊。例如，可以添加段落、圖像、視頻、圖庫、音頻、列表等塊。所有常見內(nèi)容元素都有塊，并且可以通過WordPress 插件添加更多塊。

WordPress 塊編輯器比經(jīng)典編輯器有何優(yōu)勢？

WordPress 塊編輯器提供了一種向帖子和頁面添加不同類型內(nèi)容的簡單方法。例如，以前，如果你想使用經(jīng)典編輯器向內(nèi)容添加表格，那么需要一個單獨的表格插件。使用塊編輯器，你可以簡單地添加表格塊，選擇列和行，然后開始添加內(nèi)容。

可以上下移動內(nèi)容元素，將它們作為單獨的塊進行編輯，并輕松創(chuàng)建富媒體內(nèi)容。最重要的是，WordPress 塊編輯器易于使用和學(xué)習(xí)。這為所有剛剛開始第一個博客或構(gòu)建DIY 商業(yè)網(wǎng)站的WordPress 初學(xué)者提供了巨大的優(yōu)勢。

話雖這么說，讓我們來看看如何像專業(yè)人士一樣使用 WordPress 塊編輯器來創(chuàng)建精彩的內(nèi)容。

使用 Gutenberg – WordPress 塊編輯器

塊編輯器的設(shè)計直觀且靈活。雖然它看起來與舊的 WordPress 編輯器不同，但它仍然可以完成你在經(jīng)典編輯器中可以完成的所有操作。

使用塊編輯器創(chuàng)建新的博客文章或頁面

像平常一樣開始創(chuàng)建新的博客文章或頁面。只需單擊WordPress 管理員中的帖子 ? 添加新帖子菜單。如果要創(chuàng)建頁面，請轉(zhuǎn)至頁面?添加新菜單。

這時就會啟動塊編輯器。

如何在塊編輯器中添加塊

每個帖子或頁面的第一個塊是標(biāo)題?？梢允褂檬髽?biāo)移動到標(biāo)題下方或按鍵盤上的 Tab 鍵將光標(biāo)向下移動并開始書寫。

默認情況下，下一個塊是段落塊，這樣用戶就可以開始寫作了。但是，如果你想添加其他類型的內(nèi)容，也很方便。只需要點擊編輯器左上角的“添加新塊”按鈕[+]，或者在現(xiàn)有塊的下面或右邊點擊這個按鈕，就可以添加新的內(nèi)容塊了。

單擊該按鈕將顯示添加塊菜單，頂部有搜索欄，下面有常用塊。可以單擊選項卡來瀏覽塊類別或輸入關(guān)鍵字來快速搜索特定塊。

如果不想使用鼠標(biāo)點擊按鈕，那么也可以使用鍵盤快捷鍵。首先輸入 / 搜索一個塊，然后按鍵盤上的 Enter 鍵將其插入。

在新編輯器中使用塊

每個塊都有自己的工具欄，顯示在塊的頂部。工具欄中的按鈕將根據(jù)你正在編輯的塊而變化。例如，在下面的屏幕截圖中，我們正在開發(fā)一個段落塊，它顯示基本的格式按鈕，如文本對齊、粗體、斜體、插入鏈接以及三點菜單下可用的更多選項。

除了工具欄之外，每個塊還可以有自己的塊設(shè)置，這些設(shè)置顯示在編輯屏幕的右欄中。這些設(shè)置根據(jù)正在編輯的塊而有所不同。例如，段落塊可以編輯文本、背景、鏈接顏色以及版式。

可以上下移動塊并重新排列它們。如果你想執(zhí)行此操作，只需單擊拖放或單擊塊工具欄中的向上和向下按鈕即可。

按組和列組織塊

塊編輯器還附帶了方便的工具來管理和組織你的內(nèi)容布局。可以通過在按住鍵盤上的 Shift 鍵的同時單擊多個塊來選擇它們。

之后，繼續(xù)并單擊工具欄中的塊類型按鈕，將選定的塊轉(zhuǎn)換為組或列。然后，可以將樣式應(yīng)用到整個組塊，例如更改對齊方式或間距。

塊編輯器還可以添加空的組或列塊。后面還可以用其他塊填充它們。

可以根據(jù)需要在每列中添加任何類型的塊。這讓你可以為不同的用列創(chuàng)建漂亮的布局。

在古騰堡中保存和重復(fù)使用塊

使用塊的最好的優(yōu)點是它們可以保存和重復(fù)使用。這對于經(jīng)常需要向其文章或頁面添加特定內(nèi)容片段的網(wǎng)站所有者和博主特別有用。只需單擊位于每個塊工具欄右上角的菜單按鈕即可。從菜單中選擇“創(chuàng)建圖案”選項。

注意：你還可以將整個組和列保存為可重復(fù)使用的塊。這樣，就可以保存整個部分，并在以后需要時快速使用它們。要保存為可重復(fù)使用的塊，只需點擊相關(guān)選項，然后會彈出一個窗口。在這個窗口里，您需要給這個塊起個名字，這樣以后要用的時候就能輕松找到它。另外，你還可以選擇一個類別來保存這個塊。這樣，就可以更有條理地管理這些可重復(fù)使用的塊了。

接下來，單擊“創(chuàng)建”按鈕保存你的圖案。 WordPress 會存儲你的模式以及其中的所有塊。要重復(fù)使用你的模式，只需編輯要添加它的帖子或頁面即可。然后，單擊 [+] 添加阻止按鈕或使用 / 鍵盤快捷鍵?？梢酝ㄟ^輸入你指定的名稱來找到該模式。

模式功能讓網(wǎng)站站長更輕松地往頁面布局里添加一些常用的元素，比如吸引人的標(biāo)語、社交媒體分享按鈕、橫幅廣告等。你選擇的WordPress主題或插件可能自帶了一些模式，也可以去WordPress的塊模式庫里找找其他人分享的模式，看看有沒有喜歡的。

在古騰堡塊編輯器中發(fā)布和管理選項

每篇WordPress 帖子都包含大量元數(shù)據(jù)。包括發(fā)布日期、類別和標(biāo)簽、特色圖像等信息。所有這些選項都整齊地放置在編輯器屏幕的右欄中。

古騰堡中的插件選項

WordPress 插件可以利用塊編輯器的 API 將其設(shè)置集成到編輯屏幕中。一些流行的插件帶有自己的塊。例如，WPForms，最好的WordPress 表單生成器插件，可以使用塊將表單添加到你的內(nèi)容中。

其他 WordPress 插件也可能會將其設(shè)置添加到塊編輯器屏幕。例如，以下是WordPress 的多合一 SEO如何允許在塊編輯器底部編輯 SEO 設(shè)置：

同樣，如果使用WooCommerce運行在線商店，那么會注意到它也有自己的塊。這些塊可以讓你將產(chǎn)品添加到任何 WordPress 帖子和頁面。

在塊編輯器中添加一些常用塊

基本上，塊編輯器功能強大，完全可以勝任舊經(jīng)典編輯器所做的工作。不僅如此，使用它，你的工作將變得更快、更流暢。更厲害的是，它還具備更多新功能，比如提供豐富的無代碼選項，輕松設(shè)計內(nèi)容。以下是一些常見的塊，可以根據(jù)需要輕松使用它。

1. 在 WordPress 塊編輯器中添加圖像

WordPress 塊編輯器中有一個隨時可用的圖像塊。只需添加塊，然后上傳圖像文件或從媒體庫中選擇它。

還可以從計算機中拖放圖像，編輯器將自動創(chuàng)建圖像塊。添加圖像后，你會看到塊設(shè)置，可以在其中添加圖像的元數(shù)據(jù)，例如替代文本、圖像分辨率大小以及添加圖像鏈接。

2. 在塊編輯器中添加鏈接

塊編輯器附帶多個塊，可以在其中添加文本。最常用的是段落塊，它在工具欄中有一個插入鏈接按鈕。所有其他常用的文本塊在工具欄中也有一個鏈接按鈕。

還可以使用鍵盤快捷鍵插入鏈接，在 Mac 上為 Command + K，在 Windows 計算機上為 CTRL + K。

3. 在古騰堡中添加圖片庫

圖庫塊的工作原理類似于圖像塊。添加它，然后上傳或選擇圖像文件。

4. 使用 Gutenberg 在 WordPress 帖子中添加短代碼

在經(jīng)典編輯器中使用的所有短代碼，在塊編輯器中同樣可以完美運行。可以直接將它們插入到段落塊中，或者選擇使用專門的簡碼塊來實現(xiàn)。

在塊編輯器中探索其他內(nèi)容塊

古騰堡編輯器承諾通過引入一些新塊來解決 WordPress 中一些長期存在的可用性問題。

1. 在 WordPress 中的某些文本旁邊添加圖像

使用舊的編輯器，許多用戶無法在文本旁邊放置圖像。但現(xiàn)在可以使用媒體和文本塊執(zhí)行這步操作。

這個簡單的塊包含兩個并排放置的塊，讓你可以輕松添加旁邊帶有一些文本的圖像。

2. 在 WordPress 帖子和頁面中添加按鈕

在以前的編輯器中，給博客文章或頁面添加按鈕確實是個頭疼的事?？赡艿谜覍ｉT的插件來生成按鈕的短代碼，或者直接切換到 HTML 模式手動編寫代碼。幸運的是，古騰堡編輯器內(nèi)置了一個按鈕塊，讓您能輕松快捷地給任何帖子或頁面加上按鈕，再也不用為這事煩惱啦！

你可以為按鈕添加鏈接、更改顏色等等。

3. 在博客文章和登陸頁面中添加漂亮的封面圖片

還有一個很好的功能，那就是封面塊。它能讓你輕松給帖子和頁面加上封面圖像或者一個帶有顏色的背景封面。封面圖像一般都比較寬，經(jīng)常用來作為頁面新部分或者故事開頭的裝飾。它看起來特別美觀，還能幫你打造吸睛的內(nèi)容布局。

使用起來也很簡單，只需添加一個封面塊，然后上傳喜歡的圖片就行。還可以選擇給封面加個覆蓋顏色，或者設(shè)置成固定背景圖像，這樣用戶往下滾動頁面時就能產(chǎn)生超酷的視差效果了。

4. 在文章中創(chuàng)建表格

在經(jīng)典編輯器中，添加表格到WordPress帖子可不是件容易的事，得借助插件，或者自己編寫CSS和HTML代碼來創(chuàng)建。不過好消息來了，現(xiàn)在塊編輯器內(nèi)置了一個默認的表格塊，能輕松快捷地把表格加到帖子和頁面里。只需添加這個塊，然后選好要插入的列數(shù)和行數(shù)，就能搞定啦！

現(xiàn)在可以繼續(xù)開始向表行添加數(shù)據(jù)。如果需要，可以隨時添加更多行和列，并且有兩種基本樣式選項可用。

5. 創(chuàng)建多欄內(nèi)容

經(jīng)典編輯器在創(chuàng)建多列內(nèi)容時確實不太給力，這讓很多人頭疼。好在塊編輯器為我們提供了列塊功能，只需要簡單地添加一下，就能輕松得到兩列段落塊，讓我們的內(nèi)容展示更加多樣和靈活。

這個柱塊非常靈活。可以在一行中添加最多 6 列，甚至可以在每列中使用其他的塊。

專業(yè)使用古騰堡的額外提示

你可能會擔(dān)心，使用塊編輯器會不會花更多時間去添加和調(diào)整塊，而不是真正去創(chuàng)作內(nèi)容。其實完全不用擔(dān)心，塊編輯器的操作速度超快。稍微熟悉一下，就能很輕松地添加各種塊，根本不需要太多思考。相信你很快就會發(fā)現(xiàn)，使用塊編輯器能讓你的工作流程變得更快更順暢。

下面是一些針對高級用戶的額外提示，可幫助你更快地使用 WordPress 塊編輯器。

1. 將塊工具欄移至頂部

你可能已經(jīng)在上面的屏幕截圖中注意到，每個塊的頂部都有一個工具欄。你可以將此工具欄移動到編輯器的頂部。只需單擊屏幕右上角的三點按鈕，然后選擇“頂部工具欄”選項。

2.使用鍵盤快捷鍵

古騰堡附帶了幾個方便的快捷方式，可以讓你的工作流程變得更快、更輕松。第一個是 /。只需輸入 /，開始輸入，然后編輯器就會向你顯示可以立即添加的匹配塊。如需更多快捷鍵，繼續(xù)單擊屏幕右上角的三點菜單，然后選擇“鍵盤快捷鍵”。

這里會彈出一個彈出窗口，其中列出了你可以使用的所有鍵盤快捷鍵。該列表將為 Windows 和 Mac 用戶提供不同的快捷方式。

3.拖放媒體自動創(chuàng)建媒體塊

古騰堡可以讓你將文件拖放到屏幕上的任何位置，它會自動為你創(chuàng)建一個塊。例如，可以放置??單個圖像或視頻文件，它會為你創(chuàng)建塊?；蛘撸梢詣h除多個圖像文件來創(chuàng)建圖庫塊。

4. 添加 YouTube、Twitter、Vimeo 和其他嵌入內(nèi)容

塊編輯器可以更輕松地將第三方內(nèi)容嵌入到你的 WordPress 內(nèi)容中。所有流行的第三方服務(wù)都有塊。

可以隨時復(fù)制并粘貼嵌入 URL，它會自動為你創(chuàng)建一個塊。例如，如果添加 YouTube 視頻 URL，那么它會自動創(chuàng)建 YouTube 嵌入塊并顯示視頻。

默認嵌入選項不適用于 Facebook 和 Instagram 嵌入，但有一個解決方法，后面會告訴你們。

在 WordPress 中的古騰堡塊編輯器中添加更多塊

WordPress 中的塊編輯器開發(fā)人員可以創(chuàng)建自己的塊。有一些優(yōu)秀的 WordPress 插件為新編輯器提供塊捆綁包。

這里有幾個：

1.Spectra WordPress 古騰堡塊

Spectra WordPress Gutenberg Blocks是一個包含許多高級塊的塊庫，可以向內(nèi)容添加更多設(shè)計元素。

Spectra 由流行的Astra WordPress 主題的開發(fā)團隊創(chuàng)建，可幫助你創(chuàng)建漂亮的設(shè)計，無需編寫任何代碼。

2. PublishPress 塊

PublishPress Blocks是另一個功能強大的塊庫，帶有附加塊來擴展古騰堡塊編輯器。它包括漂亮的布局選項、滑塊、按鈕、圖標(biāo)、圖像庫、地圖、選項卡、推薦、手風(fēng)琴（accordions）等。

3. Stackable – Gutenberg Blocks

Stackable – 古騰堡塊是一系列設(shè)計精美的古騰堡塊的集合，可以在你的網(wǎng)站上使用它們。它包括容器、帖子、功能網(wǎng)格、手風(fēng)琴、圖像框、圖標(biāo)列表、號召性用語等塊。

希望這個古騰堡教程可以幫助你學(xué)習(xí)如何使用 WordPress 塊編輯器。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M解答！免費助力個人，小企站點！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時間：周一至周五，9:30-18:30，節(jié)假日休息