wordpress區(qū)塊提供了一種自定義網(wǎng)站內(nèi)容和外觀的新方法。這些區(qū)塊允許WordPress用戶添加和編輯內(nèi)容元素，如段落、圖像和小部件。

當(dāng)前WordPress版本中有超過90個默認(rèn)區(qū)塊可用。它們涵蓋文本、媒體、小部件、主題元素和嵌入。

除此之外，與經(jīng)典編輯器相比，Gutenberg區(qū)塊編輯器具有拖放功能和更好的內(nèi)容視覺預(yù)覽。

因此，與舊編輯器相比，這種新的基于區(qū)塊的編輯方法提供了更友好的用戶體驗(yàn)和更多種類的自定義選項(xiàng)。如果您想擴(kuò)展基于區(qū)塊的編輯器的功能，安裝WordPress區(qū)塊插件將添加更多內(nèi)容區(qū)塊選項(xiàng)。

本文將解釋您需要了解的有關(guān)區(qū)塊的所有信息以及如何使用新的WordPress區(qū)塊編輯器。我們還將列出10個插件來擴(kuò)展區(qū)塊集合并提供更多自定義可能性。

什么是WordPress區(qū)塊？

區(qū)塊是用于在WordPress文章或頁面中創(chuàng)建和編輯元素的組件。WordPress編輯器中提供了各種區(qū)塊類型，用于添加文本、媒體文件和布局元素，讓您更靈活地構(gòu)建內(nèi)容。

• 什么是WordPress區(qū)塊？
• 為什么使用WordPress區(qū)塊？
• 區(qū)塊編輯器中有哪些類型的WordPress區(qū)塊可用？
  • 文本區(qū)塊
  • 媒體區(qū)塊
  • 設(shè)計區(qū)塊
  • 小工具區(qū)塊
  • 主題區(qū)塊
  • 嵌入?yún)^(qū)塊
• 如何使用WordPress區(qū)塊來自定義您的網(wǎng)站
• 10個最佳WordPress區(qū)塊插件
  • 1. Genesis Blocks
  • 2. Getwid
  • 3. Ultimate Addons for Gutenberg
  • 4. Premium Blocks for Gutenberg
  • 5. PublishPress Blocks
  • 6. Stackable
  • 7. Ultimate Blocks
  • 8. Kadence Blocks
  • 9. Otter Blocks
  • 10. CoBlocks

為什么使用WordPress區(qū)塊？

舊的WordPress編輯器是一個專注于文本編輯的TinyMCE編輯器。該界面類似于文本編輯器軟件，沒有提供頁面或文章預(yù)覽的視覺元素。

相比之下，內(nèi)容區(qū)塊允許您更改頁面布局并無縫插入各種視覺和交互式元素 – 使用舊的經(jīng)典編輯器無法完成的任務(wù)。

區(qū)塊在許多方面也提高了易用性。例如，嵌入外部媒體（如YouTube視頻）現(xiàn)在就像將特定區(qū)塊添加到內(nèi)容并粘貼視頻URL一樣簡單。

使用以前的編輯器，這樣的內(nèi)容定制可能需要額外的HTML代碼。

可重復(fù)使用的區(qū)塊功能可讓您保存預(yù)先自定義的區(qū)塊以供將來使用，因此您不必從頭開始重新創(chuàng)建內(nèi)容。

另一種選擇是使用區(qū)塊樣板——可用于不同目的的預(yù)構(gòu)建區(qū)塊布局。

使用基于區(qū)塊的wordpress主題也是使用區(qū)塊編輯器及其全局樣式界面自定義模板的好方法。只需重新排列內(nèi)容區(qū)塊，就可以更輕松地更改模板甚至整個站點(diǎn)的布局。

總體而言，新的WordPress編輯器為內(nèi)容編輯提供了更好的用戶體驗(yàn)。它也是一個更加用戶友好的平臺，供新用戶學(xué)習(xí)WordPress。

區(qū)塊編輯器中有哪些類型的WordPress區(qū)塊可用？

最新的WordPress版本中有90多個區(qū)塊可用，分為六類——文本、媒體、設(shè)計、小工具、主題和嵌入。

讓我們看看WordPress區(qū)塊編輯器中的所有塊及其主要自定義選項(xiàng)。

文本區(qū)塊

文本區(qū)塊可讓您向內(nèi)容添加標(biāo)題、段落和其他文本元素。一些可用的主要文本區(qū)塊是：

• 段落
• 標(biāo)題
• 列表
• 引用
• 引文
• 經(jīng)典
• 預(yù)格式化
• 代碼
• 表格
• 詩篇

一些文本區(qū)塊還提供不同的方式來顯示文本。例如，pullquote區(qū)塊有助于將注意力吸引到文本摘錄，而table區(qū)塊可以更容易地呈現(xiàn)和比較任何信息。

代碼和預(yù)格式化等其他區(qū)塊允許您突出顯示代碼片段。

媒體區(qū)塊

媒體區(qū)塊讓您可以將各種文件上傳到媒體庫并將它們嵌入到內(nèi)容中。有七個媒體區(qū)塊：

• 圖片
• 畫廊
• 音頻
• 封面
• 文件
• 媒體和文字
• 視頻

圖片和畫廊區(qū)塊是最常見的媒體區(qū)塊之一。

當(dāng)圖像區(qū)塊顯示單個圖像時，圖庫區(qū)塊允許您創(chuàng)建圖像集群。也就是說，圖庫中的圖像被視為具有自己的替代文本字段的獨(dú)立區(qū)塊。

文件區(qū)塊可以接受任何文件類型并將它們嵌入到站點(diǎn)中。此區(qū)塊的一個顯著功能是PDF查看器，它允許您嵌入PDF文件，訪問者可以直接在網(wǎng)站上閱讀或下載。

設(shè)計區(qū)塊

使用WordPress區(qū)塊編輯器，可以使用設(shè)計區(qū)塊輕松自定義內(nèi)容布局。雖然這種區(qū)塊類型不會添加內(nèi)容，但它有助于確定內(nèi)容對網(wǎng)站訪問者的顯示方式。

有八個可用的設(shè)計模塊：

• 多個按鈕
• 欄目
• 組
• 行
• 更多
• 分頁符
• 分隔符
• 空格

欄目、組和行也是WordPress容器區(qū)塊類型，這意味著它們可以在其中托管單個區(qū)塊。

例如，使用欄目區(qū)塊創(chuàng)建側(cè)邊欄。您可以將頁面寬度劃分為 70:30 的比例，將內(nèi)容添加到較大的一側(cè)，并將WordPress小工具和其他元素插入到較小的一側(cè)。

使用行區(qū)塊，在同一水平位置添加多個區(qū)塊。例如，使用它將元素添加到頁眉和頁腳。

小工具區(qū)塊

小工具現(xiàn)在以區(qū)塊的形式出現(xiàn)，您可以在頁面的任何位置插入，包括頁腳和側(cè)邊欄。

Gutenberg區(qū)塊編輯器中可用的12個小部件區(qū)塊是：

• 檔案
• 日歷
• 類別
• 自定義HTML
• 最新評論
• 最新文章
• 頁面列表
• RSS
• 搜索
• 短代碼
• 社會圖標(biāo)
• 標(biāo)簽云

主題區(qū)塊

大多數(shù)主題區(qū)塊都是動態(tài)的，會引入內(nèi)容信息，例如發(fā)布內(nèi)容、查詢循環(huán)和發(fā)布評論，并將它們顯示在網(wǎng)站上。其中一些對于顯示站點(diǎn)標(biāo)識也是必不可少的，包括站點(diǎn)徽標(biāo)、站點(diǎn)標(biāo)題和站點(diǎn)標(biāo)語。

共有23個主題區(qū)塊。與網(wǎng)站和主題設(shè)計相關(guān)的區(qū)塊通常是：

• 導(dǎo)航
• 網(wǎng)站標(biāo)志
• 網(wǎng)站標(biāo)題
• 網(wǎng)站標(biāo)語
• 標(biāo)題
• 頁腳
• 模板部分
• 登入/登出

還有一些區(qū)塊可以從博客文章中獲取內(nèi)容信息：

• 文章標(biāo)題
• 后摘錄
• 發(fā)布特色圖片
• 發(fā)布內(nèi)容
• 文章作者
• 發(fā)布日期
• 文章類別
• 發(fā)布標(biāo)簽
• 下一篇文章
• 上一篇

嵌入?yún)^(qū)塊

新的區(qū)塊編輯器可讓您通過復(fù)制和粘貼URL輕松嵌入外部內(nèi)容。例如，有一個用于嵌入YouTube視頻的專用區(qū)塊。

新編輯器提供的一些嵌入?yún)^(qū)塊是：

• Twitter
• YouTube
• 視頻
• Spotify
• SoundCloud
• Pinterest

如果找不到所需的平臺，請使用嵌入區(qū)塊并粘貼URL以嵌入媒體。

如何使用WordPress區(qū)塊來自定義您的網(wǎng)站

Gutenberg區(qū)塊編輯器是用于創(chuàng)建文章和頁面的默認(rèn)WordPress編輯器。在WordPress 5.9中使用基于區(qū)塊的主題時，區(qū)塊編輯器也可用于完整的站點(diǎn)編輯。

添加新的博客文章或頁面時，編輯器將默認(rèn)提供一個段落區(qū)塊，以便您可以立即開始寫作。當(dāng)您按Enter時，段落區(qū)塊也是默認(rèn)的新區(qū)塊，使編寫過程無縫。

或者，通過單擊內(nèi)容區(qū)域中的加號(?+?) 按鈕添加新區(qū)塊。將出現(xiàn)一個小彈出窗口，其中包含六個最近使用的區(qū)塊和一個搜索欄。使用搜索欄查找特定區(qū)塊并單擊它以將其插入到內(nèi)容中。

另一種選擇是通過單擊屏幕左上角的加號(?+ ) 按鈕打開區(qū)塊插入器。

左側(cè)將出現(xiàn)一個新面板，其中包含所有可用區(qū)塊 – 您可以使用搜索欄找到所需的選項(xiàng)。然后，單擊該區(qū)塊以將其添加到內(nèi)容中。

要重新排列區(qū)塊，WordPress區(qū)塊編輯器具有拖放功能。選擇任何區(qū)塊，單擊其工具欄上的拖動圖標(biāo)，然后將其放在所需的位置。

或者，使用區(qū)塊工具欄上的向上和向下箭頭。

所有WordPress內(nèi)容區(qū)塊都有不同的設(shè)置工具。要配置其中任何一個，請選擇一個區(qū)塊，然后單擊屏幕右上角的“設(shè)置”按鈕打開區(qū)塊設(shè)置面板。

設(shè)置面板將出現(xiàn)在右側(cè)。例如，段落區(qū)塊具有自定義顏色、排版和其他設(shè)計元素的選項(xiàng)。

10個最佳WordPress區(qū)塊插件

安裝WordPress插件是向WordPress編輯器添加不同區(qū)塊選項(xiàng)的好方法。

有幾個WordPress插件可用于使用附加的內(nèi)容區(qū)塊、自定義工具甚至布局模板來擴(kuò)展區(qū)塊庫。

但是，每個區(qū)塊插件都提供一組不同的區(qū)塊。因此，為了幫助您找到最佳選擇，我們將列出前10個WordPress區(qū)塊插件。

1.Genesis Blocks

Genesis Blocks插件向WordPress區(qū)塊編輯器添加了14個新區(qū)塊。它可能看起來不多，但它的一組區(qū)塊可以幫助將商業(yè)網(wǎng)站提升到一個新的水平。

定價區(qū)塊是主要的新增功能之一。該區(qū)塊有助于創(chuàng)建定價表，而無需使用表區(qū)塊從頭開始構(gòu)建它。它允許您添加最多四個定價列，并帶有CTA按鈕。

call-to-action區(qū)塊可讓您將號召性用語部分添加到站點(diǎn)。它支持圖像背景和全角布局，使其從其他內(nèi)容中脫穎而出。

該插件的高級版本Genesis Pro增加了兩個區(qū)塊和區(qū)塊級用戶權(quán)限，這樣只有選定的用戶才能訪問某些區(qū)塊?？偠灾?，這個插件適用于尋找簡單附加區(qū)塊的博客和小型企業(yè)網(wǎng)站。

2.Getwid

Getwid是具有最廣泛附加Gutenberg區(qū)塊的免費(fèi)區(qū)塊插件。它提供了38個獨(dú)特的區(qū)塊和超過35個預(yù)制模板，可幫助您創(chuàng)建漂亮的網(wǎng)頁設(shè)計，而無需安裝太多插件。

圖像滑塊、圖像框和圖像堆棧庫等區(qū)塊提供了在內(nèi)容上呈現(xiàn)圖像的新方法。Getwid還附帶了擴(kuò)展現(xiàn)有嵌入選項(xiàng)的Instagram和Google Maps區(qū)塊。

預(yù)制模板類似于WordPress區(qū)塊樣板。但是，Getwid使用模板庫區(qū)塊而不是模式插入器來選擇模板并將其插入到內(nèi)容中。

您可以禁用未使用的區(qū)塊以保持編輯器的速度和簡單性。轉(zhuǎn)到儀表盤->設(shè)置->?Getwid并打開“區(qū)塊”選項(xiàng)卡以選擇要禁用的區(qū)塊。

3.Ultimate Addons for Gutenberg

Ultimate Addons for Gutenberg (UAG) 是最引人注目的WordPress區(qū)塊插件之一。除了33個不同的區(qū)塊，UAG還提供81個整頁模板、284個區(qū)塊樣板和56個線框。

post grid、post masonry和post carousel等區(qū)塊以各種格式顯示您的文章。價目表區(qū)塊非常適合列出餐廳的菜單或其他產(chǎn)品價格。也可以使用區(qū)塊的設(shè)計工具為每個項(xiàng)目插入圖像。

UAG帶有幾個模式區(qū)塊，用于how-to、review和FAQ內(nèi)容。這些區(qū)塊不僅有助于更快地設(shè)置內(nèi)容，還可以提高內(nèi)容在搜索引擎上的排名。

該插件的模板、模式和線框可用于文章和頁面，并包括作品集和推薦等選項(xiàng)。單擊編輯器頂部的UAG模板按鈕以查找所有可用選項(xiàng)。

4.Premium Blocks for Gutenberg

Premium Blocks for Gutenberg是一個免費(fèi)插件，它添加了14個對網(wǎng)站性能和速度影響最小的新區(qū)塊。

該插件提供的獨(dú)特區(qū)塊之一是Dual Heading，它將標(biāo)題分成兩部分，您可以單獨(dú)自定義。Fancy Text區(qū)塊可讓您在文本的各個部分之間添加動畫。

該插件提供有限的附加區(qū)塊，專注于每個區(qū)塊的設(shè)置選項(xiàng)，以幫助您調(diào)整、編輯和設(shè)計內(nèi)容。

例如，您可以修改每個區(qū)塊的響應(yīng)能力和容器樣式，而幾個區(qū)塊還帶有獨(dú)特的設(shè)計工具。

有一個選項(xiàng)可以啟用或禁用區(qū)塊，以盡量減少插件的影響。前往Dashboard -> Premium Blocks for Gutenberg -> Block Settings，然后選擇要激活和停用的區(qū)塊。

5. PublishPress Blocks

PublishPress Blocks，以前稱為Advanced Gutenberg，帶有22個高級區(qū)塊，您可以通過 WordPress 管理儀表盤對其進(jìn)行自定義。

獨(dú)特的區(qū)塊之一是Login/Register Form，在區(qū)塊編輯器中提供了一個預(yù)制的登錄界面。PublishPress Blocks還提供時事通訊和聯(lián)系表格區(qū)塊用于潛在客戶生成。

此插件具有區(qū)塊訪問功能，可以為每個用戶角色激活或停用特定區(qū)塊。導(dǎo)航到Blocks?->?Settings以啟用該功能并通過插件設(shè)置頁面上的Block Access面板對其進(jìn)行管理。

區(qū)塊設(shè)置部分允許您修改每個PublishPress區(qū)塊的全局樣式。每個區(qū)塊都有自己的設(shè)置，但它們主要包括顏色、邊框選項(xiàng)和其他設(shè)計選項(xiàng)。

如果你想為你的WordPress網(wǎng)站使用自定義CSS，這個插件還有一個自定義樣式面板來添加CSS類。

6.Stackable

Stackable是最通用的區(qū)塊插件之一。它的免費(fèi)版本增加了35個區(qū)塊、100個預(yù)建區(qū)塊布局、8個UI套件和37個線框，而Stackable高級版通過403個預(yù)建區(qū)塊布局和33個UI套件增加了設(shè)計選項(xiàng)。

預(yù)先構(gòu)建的區(qū)塊布局和UI工具包可用于文章和頁面。通過單擊編輯器屏幕頂部的設(shè)計庫按鈕查找所有可用選項(xiàng)。

Stackable提供了廣泛的區(qū)塊自定義工具，每個區(qū)塊的區(qū)塊、樣式和高級設(shè)置。

區(qū)塊設(shè)置包含一些基本的布局配置，如邊框、對齊和間距，而高級設(shè)置允許您配置區(qū)塊的響應(yīng)能力和HTML標(biāo)簽。還可以使用高級版本添加運(yùn)動效果。

7.Ultimate Blocks

Ultimate Blocks專注于博主和營銷人員。它增加了22個區(qū)塊，例如Review、Social Share和Call to Action以增加網(wǎng)站的參與度。該插件還包括評論和How to區(qū)塊上的數(shù)據(jù)結(jié)構(gòu)化標(biāo)記以改進(jìn)SEO。

區(qū)塊管理器功能允許您啟用和禁用區(qū)塊。通過導(dǎo)航到Dashboard?->?Ultimate Blocks?->?Ultimate Blocks打開區(qū)塊管理器。

Ultimate Blocks擁有一個擁有400多名成員的活躍社區(qū)。如果您在使用插件時遇到困難，請查看現(xiàn)有討論或在論壇上發(fā)布您的問題。

Dashboard?->?Ultimate Blocks?->?Contact Us上也提供了聯(lián)系表格。

8. Kadence Blocks

Kadence Blocks提供的工具可以讓您在博客文章或頁面中輕松創(chuàng)建復(fù)雜的布局。免費(fèi)版為編輯器增加了15個區(qū)塊，而Kandace Blocks Pro帶有12個高級區(qū)塊，包括產(chǎn)品輪播和視頻彈出窗口。

Kadence還提供預(yù)構(gòu)建的部分和入門模板。通過單擊文章或頁面編輯器頂部的設(shè)計庫按鈕打開Kadence設(shè)計庫。

此外，可以通過單擊設(shè)置圖標(biāo)旁邊的Kadence Blocks徽標(biāo)來設(shè)置區(qū)塊的全局樣式。它允許您更改每個區(qū)塊的調(diào)色板和全局樣式。

9.Otter Blocks

Otter Blocks是一個輕量級的免費(fèi)插件，它向編輯器添加了29個新區(qū)塊，包括Google地圖和添加到購物車的區(qū)塊。

有一個選項(xiàng)可以將部分區(qū)塊設(shè)置為新頁面的默認(rèn)區(qū)塊?；蛘撸蜷_模板庫以從51個預(yù)建部分中進(jìn)行選擇，以快速創(chuàng)建內(nèi)容。

通過單擊標(biāo)題右上角的Otter Blocks徽標(biāo)并選擇Global Defaults來調(diào)整默認(rèn)區(qū)塊設(shè)置。您將能夠更改每個區(qū)塊的默認(rèn)顏色、版式和間距。

該插件還具有適用于Otter區(qū)塊和默認(rèn)WordPress區(qū)塊的動畫和自定義CSS功能。例如，使用默認(rèn)段落區(qū)塊編寫數(shù)字時，您可以為其添加計數(shù)動畫。

自定義CSS功能也不同于默認(rèn)CSS類，因?yàn)樗试S您直接在編輯器中編寫CSS代碼。

10.?CoBlocks

CoBlocks是一個免費(fèi)插件，可為Gutenberg區(qū)塊編輯器添加靈活的頁面構(gòu)建體驗(yàn)。它帶有31個新區(qū)塊，包括用于創(chuàng)建餐廳菜單的食物和飲料區(qū)塊類型和用于強(qiáng)調(diào)重要文本的突出顯示區(qū)塊。

該插件還提供了新的嵌入可能性。OpenTable允許您為您的餐廳網(wǎng)站嵌入預(yù)訂小工具，并且使用Gist區(qū)塊，您可以顯示來自GitHub Gist的代碼片段。

CoBlocks的另一個獨(dú)特功能是某些區(qū)塊（如Row?）的拖動調(diào)整大小功能。您可以通過單擊并拖動行區(qū)塊或使用行設(shè)置上的自定義裝訂線來調(diào)整行區(qū)塊內(nèi)列的寬度。

小結(jié)

結(jié)合WordPress 5.9上推出的新功能和基于區(qū)塊的主題，區(qū)塊現(xiàn)在是完整站點(diǎn)編輯和改善用戶體驗(yàn)的基礎(chǔ)。

WordPress區(qū)塊通過讓您在不使用額外代碼或插件的情況下構(gòu)建有吸引力的布局和視覺設(shè)計，使內(nèi)容定制變得更加容易。

與之前的編輯器相比，它還有其他幾個好處。例如，可重復(fù)使用的區(qū)塊讓您可以保存預(yù)先設(shè)計的區(qū)塊以供將來使用，從而簡化頁面和后期創(chuàng)建過程。區(qū)塊工具欄中提供的拖放功能允許您快速重新排列內(nèi)容。

目前，WordPress有超過90個默認(rèn)區(qū)塊，分為六類。雖然它們足以創(chuàng)建一個基本的WordPress網(wǎng)站或博客，但WordPress區(qū)塊插件可以擴(kuò)展區(qū)塊庫并提供更多定制工具來滿足您的設(shè)計需求。