WordPress 塊模式 101:它們是什麼? 以及如何使用它們
已發表: 2021-08-03想在 WordPress 塊編輯器中節省時間並創建更專業的設計嗎? 如果是這樣,了解 WordPress 塊模式可能正是您所需要的。
使用塊狀圖案,您可以插入預製設計,對其進行調整以滿足您的需求,並準備好開始使用。 這是一個很好的節省時間。 而且,如果您不是設計師,塊模式也很有幫助,因為即使您不具備從頭開始構建這些設計的知識,它們也可以讓您利用更多獨特的設計。
在這篇文章中,我們將介紹您需要了解的有關 WordPress 塊模式的所有信息:
- 什麼是 WordPress 塊模式以及它們與可重複使用的塊有何不同。
- 如何在編輯器中使用塊模式。
- 在哪裡可以找到新的塊模式以及如何使用它們。
- 如何在沒有代碼的情況下創建自己的塊模式。
什麼是 WordPress 塊模式?
WordPress 塊模式本質上只是由塊組成的模板。
它們可以包含以特定佈局排列的單個塊或多個塊。 除了塊本身,塊圖案還將包括這些塊的設置(例如將按鈕配置為某種顏色)。
您可以找到整頁模板的塊模式。 或者,更常見的是,您會發現您可能希望在頁面中使用的某些部分的塊模式。 然後,您可以將多個積木圖案(如樂高積木)組合在一起來構建您的設計。
例如,假設您要創建一個具有圖像背景、一些標題文本和一個按鈕的部分。 您可以使用塊編輯器手動設置它。 但是使用塊模式,您可以插入具有該佈局的預製設計,然後對其進行自定義以匹配您的內容。
正如我上面提到的,使用 WordPress 塊模式的主要好處是:
- 它們可以節省您的時間。
- 它們使創建更複雜的設計變得更加容易,因為您可能不具備自己創建某些類型設計的知識。
塊模式與可重用塊
既然您知道 WordPress 塊模式是什麼,您可能會認為它們聽起來很像 WordPress 可重用塊,這是在塊模式之前引入的核心功能。
可重複使用的塊也是一個或多個塊的集合,您可以輕鬆地將其插入到您的內容中。
它們的相似之處在於都可以讓您快速插入預製設計,但它們有一個很大的不同:
- 塊狀圖案是您設計的起點。 您可以使用它們來導入您想要使用的基本設計,但您每次都將自定義它們,並且塊模式的每個實例都會有所不同。
- 可重複使用的塊在每個實例中都是相同的。 可重用塊的每個實例將始終相同,如果您在一個地方更新可重用塊設計,這些更改將自動應用於可重用塊的每個實例。
這是您何時可以使用每個示例的示例:
首先,假設您有一種特殊的格式可以在您的內容中插入引號。 因此,每當您插入引號時,您都希望使用完全相同的塊排列來保持一致。
如果每個引用都不同,您將需要為此使用塊模式。 您可以插入塊模式以設置基本格式,然後添加唯一的引用文本。
現在,假設您有一個號召性用語 (CTA),讓人們加入您的電子郵件列表,您希望在每篇博客文章的末尾包含該列表。 您希望此 CTA 在每個實例中都完全相同,並且您還希望能夠在將來對其進行更新。
對於這個用例,您可能希望使用可重用的塊。 可重用塊將確保您的 CTA 的每個實例都是相同的。 如果您想更改 CTA,只需更新可重用塊一次,這些更改將應用於每個實例。
如何使用 WordPress 塊模式
您可以通過用於插入塊的相同界面插入塊模式。
首先,打開要在其中插入塊模式的內容的編輯器。 然後,單擊左上角的加號圖標以打開內容插入器界面。
在出現的邊欄中,單擊“模式”選項卡。 然後,您可以使用下拉菜單過濾掉不同類型的模式。
當您找到您喜歡的模式時,您需要做的就是單擊它以將其插入到您的內容中:

插入塊圖案後,您可以像手動創建設計一樣編輯所有單獨的塊:

就是這樣! 如果您想插入另一個塊模式,您可以重複相同的過程。 塊模式將插入您在編輯器中放置光標的任何位置。
如何查找和使用新的 WordPress 塊模式
為了幫助您找到新的塊模式,WordPress 團隊在 WordPress 創建了一個官方塊模式庫。 您可以通過單擊此處訪問它。
您可以使用過濾器瀏覽所有塊模式並單擊結果進行預覽。 如果您找到喜歡的塊圖案,只需單擊“複製圖案”按鈕即可將圖案複製到剪貼板:

現在,打開要添加塊模式的內容的編輯器並將其粘貼,就像粘貼常規文本一樣 - 通過右鍵單擊並選擇粘貼或使用鍵盤快捷鍵,如Ctrl + V (或Mac 上的Cmd + V )。

就是這樣——你應該看到完整的塊圖案出現在你粘貼的任何地方:

除了 WordPress.org 上的官方塊模式庫,您還可以找到第三方目錄,如 ShareABlock 和 Gutenberg Hub 模板庫(使用與官方庫相同的複制/粘貼方法)。
您還可以找到一些插件,讓您插入塊模式和模板,儘管它們可能使用自己的自定義解決方案而不是使用本機塊模式功能。 無論哪種方式,最終的結果都是一樣的。 您可以在我們關於 Gutenberg 模板插件的帖子中找到一些最佳選項。
如何在沒有代碼的情況下創建自己的 WordPress 塊模式
到目前為止,核心 WordPress 塊編輯器不允許您創建自己的塊模式,除非您知道如何編碼,這有點令人失望。
值得慶幸的是,正如您對 WordPress 所期望的那樣,有一些插件可以解決這個問題。
我個人最喜歡的是 Justin Tadlock 的免費 Block Pattern Builder 插件。 本質上,這個插件可以讓你使用塊編輯器創建自己的設計,然後將其保存為塊模式。 因此,您可以使用編輯器設計您的模式,將其保存為模式,然後像任何其他模式一樣輕鬆插入它。
老實說,這個功能不在核心 WordPress 軟件中有點奇怪,但這沒什麼大不了的,因為你可以通過安裝一個免費插件來解決它。
首先,從 WordPress.org 安裝並激活免費的 Block Pattern Builder 插件。 我正在使用 Justin Tadlock 的上述插件,但是 BlockMeister 有一個同名的插件,它似乎提供了相同的功能和更多的功能。
然後,打開常規編輯器並創建要保存的設計。 完成後,選擇要包含在塊模式中的所有塊,然後單擊三個點圖標。 然後,選擇Add to Block Patterns選項:

然後你可以給它一個名字:

就是這樣——您現在可以像插入任何其他塊模式一樣插入它。 默認情況下,它將位於“未分類”部分:

除了在編輯器中工作之外,您還將在 WordPress 儀表板中獲得一個專用的塊模式選項卡來管理和創建塊模式。
立即開始使用塊模式
WordPress 塊模式是一個非常有用的工具,可以從塊編輯器中獲得更多信息,因此了解它們的工作原理很重要。
使用塊模式非常簡單——你可以像塊一樣插入它們。 一旦插入它們,您就可以編輯圖案中的塊,就像您自己創建設計一樣。
為了給自己更多的靈活性,有幾種方法可以訪問新的塊模式:
- 您可以使用 WordPress.org 上的官方塊模式庫或第三方庫網站之一。 您需要做的就是在庫和 WordPress 編輯器之間複製和粘貼。
- 您可以使用我們收集的 Gutenberg 模板插件之一。 這些插件並不都使用原生塊模式功能,但它們確實具有完全相同的目的和功能。
- 您可以使用編輯器和像 Block Pattern Builder 這樣的插件來設計自己的塊模式。 保存設計後,您可以在未來輕鬆地重複使用它們。
要了解其他一些改進您在塊編輯器中的工作方式的方法,請查看我們的指南,了解如何充分利用塊編輯器和我們最好的塊插件集合。
您對 WordPress 塊模式還有任何疑問嗎? 在評論中告訴我們,我們會盡力提供幫助。