WordPress 是一種功能強(qiáng)大的在線發(fā)布工具，任何人都可以使用它輕松創(chuàng)建和共享文本和/或多媒體內(nèi)容。但除此之外，對于設(shè)計師、營銷人員和開發(fā)人員，無論他們的背景和技能如何，它也是一個很好的專業(yè)工具。
簡而言之，WordPress 可以成為您最有價值的工作伙伴，并幫助您在各種職業(yè)中取得成功。
WordPress 用戶可以利用強(qiáng)大的功能，輕松輕松地創(chuàng)建高級塊布局。在這篇文章中，我們將把注意力集中在塊樣板（Block Patterns）上。
塊樣板與可重用塊與模板部件
塊樣板首先在WordPress 5.5中引入，允許 WordPress 用戶只需單擊幾下即可將復(fù)雜的嵌套塊的現(xiàn)成結(jié)構(gòu)包含到他們的內(nèi)容中。
開箱即用，WordPress 提供了一些內(nèi)置塊模式供您在創(chuàng)建內(nèi)容時選擇。此外，塊主題通常提供更多塊樣板，您可以直接從塊插入器添加到您的內(nèi)容中。
例如，當(dāng)前的默認(rèn)主題Twenty Twenty-Three提供以下塊樣板：
- 呼吁采取行動
- 默認(rèn)頁腳
- 隱藏的404
- 隱藏的評論
- 隱藏的無結(jié)果內(nèi)容
- 文章元數(shù)據(jù)
而且您不限于 WordPress 或您的主題提供的樣板，因為樣板目錄提供了大量現(xiàn)成的塊樣板。
但是塊樣板（Block Patterns）并不是您可以用來在 WordPress 網(wǎng)站上創(chuàng)建塊布局的唯一功能。新的 Gutenberg 塊編輯器提供了額外的工具供您選擇來創(chuàng)建您的內(nèi)容布局，包括可重用塊（Reusable Blocks）和模板部件（Template Parts）。這些功能彼此有何不同？什么時候更喜歡一個？讓我們開始吧。
塊樣板
塊樣板是預(yù)定義的塊組，您可以將它們添加到您的內(nèi)容中，并使用可用于包含的塊的相同設(shè)計工具進(jìn)行自定義。對塊樣板所做的更改只會影響您正在編輯的特定實例，不會應(yīng)用于您可能已添加到網(wǎng)站其他帖子或頁面的任何其他實例。
您可以使用塊樣板來包含需要就地自定義的預(yù)構(gòu)建布局，更改圖像、文本、樣式或添加/刪除元素。
塊樣板是可重復(fù)使用的，這意味著一旦您創(chuàng)建了自定義塊樣板，您就可以將其添加到您網(wǎng)站的任何位置，并使用編輯器的內(nèi)置控件單擊幾下即可對其進(jìn)行自定義。
您可以從編輯器的區(qū)塊插入器中的樣板選項卡瀏覽和插入塊模式，或者通過單擊區(qū)塊插入器 中的【查看所有樣板】按鈕時出現(xiàn)的樣板瀏覽器來探索樣板目錄中可用的樣板。
您會在塊插入器的“樣板”選項卡中找到大量樣板，或者直接從編輯器界面探索“??塊樣板”庫。您還可以訪問區(qū)塊樣板網(wǎng)站，選擇一個樣板，然后單擊復(fù)制。
一旦你復(fù)制了一個樣板，將它粘貼到你的內(nèi)容中，你就完成了。
現(xiàn)在，您可以自定義包含在樣板中的塊組，而不會影響注冊樣板或您網(wǎng)站上的任何其他實例。
可重用塊
可重用塊是一個預(yù)建塊或一組塊，您可以將其添加到您網(wǎng)站的任何帖子或頁面。您還可以將可重復(fù)使用的塊導(dǎo)出到其他網(wǎng)站。
可重復(fù)使用的塊對于構(gòu)建您可能希望包含在網(wǎng)站的多個頁面和/或不同網(wǎng)站上的元素特別有用。想想號召性用語、促銷橫幅、價格表等等。
在下面的示例中，我們從 Columns 塊、Image、Paragraph 和 Button 創(chuàng)建一個可重用塊。
創(chuàng)建可重用塊后，您可以從塊插入器將其添加到您網(wǎng)站的任何頁面。
WordPress 將可重用塊視為wp_block帖子類型，因此將它們存儲在wp_posts表中。
創(chuàng)建可重用塊后，您可以從可重用塊管理屏幕管理它們。您可以通過多種方式訪問??該頁面：
- 將/wp-admin/edit.php?post_type=wp_block添加到您網(wǎng)站的 WordPress URL。
- 單擊塊插入器中的管理可重用塊按鈕。
- 單擊塊設(shè)置下拉菜單中的管理可重用塊按鈕。
到達(dá)那里后，您可以
- 將您的塊編輯、修改或?qū)С鰹?JSON，
- 從 JSON 導(dǎo)入可重用塊，
- 創(chuàng)建新的可重用塊。
對可重用塊的所有更改都將應(yīng)用于整個網(wǎng)站上該塊的每次出現(xiàn)，無論進(jìn)行更改的管理頁面如何。
如果你經(jīng)常使用 Reusable blocks，千萬不要錯過JB Audras的這個Reusable Blocks Extended插件。
模板部件
在古騰堡時代之前，WordPress 的主題和模板主要是用 PHP 構(gòu)建的。對子主題、模板層次結(jié)構(gòu)和主要前端開發(fā)語言的扎實了解是創(chuàng)建或自定義模板的基本要求。但隨著塊主題的引入，情況發(fā)生了變化。
在選擇了此功能的塊主題和經(jīng)典主題中，您可以在站點編輯器界面中輕松創(chuàng)建或自定義模板或模板部件。當(dāng)然，除非您決定成為主題開發(fā)人員，否則不需要任何開發(fā)技能。
塊模板是塊項目的列表。塊項的示例是站點標(biāo)題、徽標(biāo)和導(dǎo)航。
模板部件是頁面的特定部分，可以在多個位置可視化，例如頁眉和頁腳，并且可以顯示在 WordPress 網(wǎng)站的每個頁面上。
您可以通過站點編輯器界面創(chuàng)建和編輯模板部件，您可以在其中使用所有可用于塊的編輯工具。
但與塊樣板和可重用塊不同，模板部分適用于不經(jīng)常更改的站點區(qū)域。
塊樣板、可重用塊和模板部件之間的差異
總結(jié)一下，三者的主要區(qū)別如下：
塊樣板
- 塊樣板是預(yù)定義的塊布局，您可以將其添加到您的內(nèi)容中，并使用與包含的塊相同的工具進(jìn)行自定義。對塊樣板所做的更改只會影響塊樣板的單個實例。
- 您可以從 樣板目錄復(fù)制和粘貼塊樣板。
- 您可以創(chuàng)建新樣板并將它們發(fā)布在樣板目錄中。
可重用塊
- 可重用塊是您可以在網(wǎng)站的任何帖子或頁面上使用的塊組。對可重用塊所做的所有更改都將應(yīng)用于整個網(wǎng)站上該塊的每次出現(xiàn)，無論進(jìn)行更改的管理頁面如何。
- 可重復(fù)使用的塊作為帖子類型
wp_block存儲在wp_posts表中。 - 您可以從其他網(wǎng)站導(dǎo)入和導(dǎo)出可重復(fù)使用的塊。
模板部件
- 模板部件是頁面的特定區(qū)域，可以顯示在多個位置，包括頁眉、頁腳和側(cè)邊欄，在您的 WordPress 網(wǎng)站的多個頁面上重復(fù)出現(xiàn)。
- 您可以通過站點編輯器界面創(chuàng)建和編輯模板部件。
- 模板部分適用于不經(jīng)常更改的站點區(qū)域。
如何創(chuàng)建塊樣板
除了塊樣板功能，WordPress 5.5還為開發(fā)人員引入了一個新的 API，以“創(chuàng)建可以輕松插入到帖子、頁面、自定義帖子類型和模板中的預(yù)先設(shè)計的內(nèi)容塊”。新的 API 提供register_block_pattern和register_block_pattern_category函數(shù)來注冊塊樣板和樣板類別。
從WordPress 6.0開始，您還可以使用 PHP 文件注冊塊樣板。
因此，在撰寫本文時，您有兩種創(chuàng)建塊樣板的方法。
- 使用
register_block_pattern輔助函數(shù)， - 將 PHP 文件添加到樣板文件夾中的主題。
使用插件創(chuàng)建塊樣板
第一種方法主要面向 WordPress 開發(fā)人員，但也足夠簡單，可供非高級開發(fā)人員使用。
如果您決定使用第一種方法，您可以使用這兩個新函數(shù)register_block_pattern、register_block_pattern_category在插件的 PHP 文件或主題的functions.php中創(chuàng)建塊模式。
選擇或注冊樣板類別
首先，您可能想要為您的樣板選擇一個類別。在 WordPress 6.2 中，添加了新的樣板類別并修改了一些現(xiàn)有類別。在撰寫本文時，您可以使用以下內(nèi)置類別：
- 精選 (
featured) - 帖子 (
posts) - 文本 (
text) - 圖庫 (
gallery) - 號召性用語 (
call-to-action) - 橫幅 (
banner) - 標(biāo)題 (
header) - 頁腳 (
footer) - 團(tuán)隊 (
team) - 感言 (
testimonials) - 服務(wù) (
services) - 投資組合 (
portfolio) - 媒體 (
media)
如果您的塊樣板不屬于任何默認(rèn)類別，您還可以使用函數(shù)register_block_pattern_category注冊一個新類別。
這個函數(shù)接受兩個參數(shù)：
$category_name：樣板類別名稱，包括名稱空間。$category_properties: 類別屬性數(shù)組。
一個示例將幫助您更好地理解如何注冊一個新的樣板類別：
if ( function_exists( 'register_block_pattern_category' ) ) {
function my_plugin_register_pattern_category() {
register_block_pattern_category(
'my-pattern-category',
array(
'label' => __( 'My Pattern Category', 'my-plugin-text-domain' ),
'description' => __( 'Simple call to action with a header, an image, a paragraph, and a button.' ),
)
);
}
add_action( 'init', 'my_plugin_register_pattern_category' );
}注冊塊樣板
注冊樣板類別后，下一步就是注冊塊樣板本身。您將使用輔助函數(shù)register_block_pattern注冊塊樣板，如下所示：
function my_plugin_register_block_pattern() {
register_block_pattern( 'prefix/pattern-name', $props );
}
add_action( 'init', 'my_plugin_register_block_pattern' );這個函數(shù)有兩個參數(shù)：
$pattern_name:形式為機(jī)器可讀的namespace/pattern-name名稱。$pattern_properties：樣板的一組屬性。
以下是當(dāng)前可用樣板屬性的列表：
title（必需）：樣板的人類可讀標(biāo)題。content（必需）：樣板的 HTML 標(biāo)記。description：描述插入器中樣板的文本。描述是可選的，但建議使用，因為它可以幫助用戶找到樣板。categories：一個或多個注冊樣板類別的數(shù)組。您必須先注冊一個類別，然后才能在此處使用它（請參閱上一節(jié)）。keywords：一組關(guān)鍵字，可幫助用戶找到樣板。viewportWidth：一個整數(shù)，指定預(yù)覽中樣板的寬度。blockTypes：將與樣板一起使用的可選塊類型數(shù)組。postTypes：允許使用該樣板的帖子類型數(shù)組。templateTypes：樣板有意義的模板類型數(shù)組（自WordPress 6.2起可用）。inserter：一個布爾值，用于確定樣板是否應(yīng)該在塊插入器中可見。將值設(shè)置為false隱藏樣板。默認(rèn)情況下，所有樣板都將出現(xiàn)在塊插入器中。
以下是 register_block_pattern 的用法示例：
if ( function_exists( 'register_block_pattern' ) ) {
function my_plugin_register_block_pattern() {
register_block_pattern(
'my-plugin/my-block-pattern',
array(
'title' => _x( 'My awesome pattern', 'Block pattern title', 'my-plugin-text-domain' ),
'categories' => array( 'my-pattern-category' ),
'postTypes' => array( 'post' ),
'content' => '<!-- wp:paragraph --><p>My awesome block pattern</p><!-- /wp:paragraph -->'
)
);
}
add_action( 'init', 'my_plugin_register_block_pattern' );
}在此代碼中，我們使用該postTypes屬性使樣板僅適用于常規(guī)博客文章。您還可以設(shè)置不同的值以使其postTypes可用于不同的帖子類型。如果您有一個product帖子類型并決定使該樣板僅適用于該帖子類型，您將編寫：
'postTypes' => array( 'product' ),現(xiàn)在創(chuàng)建一個新帖子（或自定義帖子類型），打開塊插入器，然后單擊“樣板”選項卡。您應(yīng)該找到一個包含自定義塊樣板的新樣板類別（我的樣板類別）。隨意使用樣板屬性來自定義您的塊樣板。
現(xiàn)在讓我們更深入地研究并嘗試構(gòu)建一個真實世界的塊樣板。
塊樣板使用示例
假設(shè)您要構(gòu)建一個包含標(biāo)題、圖像、段落和按鈕的塊樣板。
在編輯器中，為您的塊樣板創(chuàng)建布局，然后切換到代碼編輯器并復(fù)制標(biāo)記。
在我們的示例中，我們有以下代碼：
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"240px"} -->
<div class="wp-block-column" style="flex-basis:240px"><!-- wp:image {"id":25,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px"}}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="http://wordpress-block-patterns.local/wp-content/uploads/2023/05/placeholder.jpg" alt="" class="wp-image-25" style="border-top-left-radius:16px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"color":{"text":"#5831f6"}}} -->
<h4 class="wp-block-heading has-text-color" style="color:#5831f6">Your New Home for Modern Web Apps and Sites</h4>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Kinsta is a Cloud Platform designed to help companies and dev teams ship and manage their web projects faster and more efficiently.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:buttons {"layout":{"type":"flex"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","textColor":"base","width":100,"style":{"color":{"background":"#5831f6"},"typography":{"fontSize":"1.36rem"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"16px","bottomRight":"16px"}}},"fontFamily":"inter"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family" style="font-size:1.36rem"><a class="wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6"><strong>View Plans</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->您現(xiàn)在可以優(yōu)化此代碼。如果您使用插件注冊塊樣板，則必須按如下方式更改圖像 URL：
esc_url( plugin_dir_url( __FILE__ ) . 'images/placeholder.jpg' )這樣，WordPress 就不會在uploads中查找圖像，而是在插件的images文件夾中查找。
然后，您可以使用viewportWidth屬性在塊插入器中提供更好的樣板預(yù)覽：
'viewportWidth' => 800,
您還可以包含一組關(guān)鍵字來幫助用戶找到您的塊樣板：
'keywords' => array( 'cta', 'demo' ),
幫助用戶在搜索中找到塊的另一個選項是添加塊類型數(shù)組：
'blockTypes' => array( 'core/button' ),這樣，當(dāng)用戶搜索指定塊之一時，塊模式將出現(xiàn)在建議中。
該postTypes屬性允許您使塊模式僅適用于特定的帖子類型。例如，您可以使樣板僅對product帖子類型可見：
'postTypes' => array( 'product' ),最后，您可以將 CSS 類添加到塊樣板的包裝器中。
為此，您需要創(chuàng)建一個具有以下className屬性的新組：
<!-- wp:group {"className":"my-css-class","layout":{"type":"constrained"}} -->
<div class="wp-block-group my-css-class">
<!-- Your blocks -->
</div>
<!-- /wp:group -->請注意，您需要將相同的類名添加到以下div元素。
如需更深入地了解塊樣板和更多代碼示例，另請參閱WordPress.org主題手冊中的塊樣板。
使用文件創(chuàng)建塊樣板
如上所述，WordPress 6.0 引入了一種新的更簡單的方法來向您的WordPress 主題添加塊樣板。您現(xiàn)在可以隱式注冊塊樣板，方法是將它們聲明為主題根目錄中/patterns文件夾下的 PHP 文件。
假設(shè)您想在塊主題中隱式注冊上一節(jié)中構(gòu)建的相同塊樣板。在這個例子中，我們將使用Twenty Twenty-Three主題。
您可以設(shè)置與先前方法相同的參數(shù)，但將它們包含在文件頭的注釋中。此外，您將使用空格分隔單詞，而不是使用駝峰式大小寫的參數(shù)名稱，而不是數(shù)組，您將使用逗號分隔的列表項。
首先，停用您在上一個示例中用于注冊樣板的插件。然后創(chuàng)建一個新的my-block-pattern.php文件并包含以下標(biāo)頭：
<?php
/**
* Title: My awesome pattern
* Slug: twentytwentythree/my-block-pattern
* Post Types: post
* Categories: featured, banner
* Viewport Width: 800
* Keywords: Call to action, kinsta
* Block Types: core/buttons
*/
?>接下來，您要將內(nèi)容添加到塊樣板中。您可以使用與我們之前示例中相同的標(biāo)記，但首先，您需要稍微更改一下：
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"240px"} -->
<div class="wp-block-column" style="flex-basis:240px"><!-- wp:image {"id":25,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px"}}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>" alt="" class="wp-image-25" style="border-top-left-radius:16px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"color":{"text":"#5831f6"}}} -->
<h4 class="wp-block-heading has-text-color" style="color:#5831f6">Your New Home for Modern Web Apps and Sites</h4>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Kinsta is a Cloud Platform designed to help companies and dev teams ship and manage their web projects faster and more efficiently.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:buttons {"layout":{"type":"flex"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","textColor":"base","width":100,"style":{"color":{"background":"#5831f6"},"typography":{"fontSize":"1.36rem"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"16px","bottomRight":"16px"}}},"fontFamily":"inter"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family" style="font-size:1.36rem"><a class="wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6"><strong><?php echo __( 'View plans', 'text-domain' ); ?></strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->標(biāo)記與前面的示例基本相同。我們只做了兩個改變。
由函數(shù)get_theme_file_uri占位符圖像 URL生成：
<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>當(dāng)然，您應(yīng)該首先將placeholder.jpg圖像放在主題的/assets/images文件夾中。
以下指令生成您要翻譯的文本。
<?php echo __( 'View plans', 'text-domain' ); ?>現(xiàn)在保存您的文件并創(chuàng)建一個新帖子。您的塊樣板應(yīng)該出現(xiàn)在“精選”和“橫幅”類別中。
??請注意，您添加到模式中的 PHP 代碼僅在樣板添加到您的內(nèi)容時執(zhí)行。一旦放置在帖子中，塊樣板就像靜態(tài)塊一樣。
刪除支持、注銷和隱藏塊樣板
在某些情況下，您可能希望對塊樣板執(zhí)行特殊操作。例如，您可能想用自己的塊樣板替換核心塊樣板，或者在某些條件下注銷類別。以下是您可以執(zhí)行的操作。
1. 移除對所有核心塊樣板的支持
首先，主題開發(fā)人員可以刪除對核心塊樣板的支持并提供他們自己的樣板集。要刪除核心樣板支持，您可以這樣使用remove_theme_support函數(shù)：
remove_theme_support( 'core-block-patterns' );建議將函數(shù)remove_theme_support附加到after_setup_theme鉤子上。
2.注銷單塊樣板
如果您想提供自定義替代樣板或不希望它與您的主題一起使用，您也可以取消注冊特定的塊樣板。
Patterns API為此提供了以下unregister_block_pattern功能：
function my_theme_unregister_block_pattern() {
unregister_block_pattern( 'namespace/block-pattern-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );如果您也可以取消注冊核心塊樣板，您將使用以下內(nèi)容：
function my_theme_unregister_block_pattern() {
unregister_block_pattern( 'core/query-offset-posts' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );您將使用unregister_block_pattern鉤子init。
3.注銷塊樣板類別
您還可以注銷樣板類別，將unregister_block_pattern_category函數(shù)掛接到init鉤子中：
function my_theme_unregister_block_pattern_categories() {
unregister_block_pattern_category( 'pattern-category-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern_categories' );使用樣板構(gòu)建器構(gòu)建和共享塊樣板
您還可以使用免費的在線工具創(chuàng)建您的樣板并與社區(qū)分享它們：The Pattern Creator。
如果您有 WordPress.org 帳戶，則可以從樣板目錄訪問 Pattern Creator 。
到達(dá)那里后，單擊“創(chuàng)建新樣板”。這將啟動特定于樣板的塊編輯器版本，您可以使用它來創(chuàng)建塊樣板。
您還可以使用Openverse 庫托管的免費圖像。
對更改感到滿意后，您可以保存草稿或提交樣板進(jìn)行修改。
然后您可以返回到 樣板目錄并選擇My patterns。您會在三個選項卡中找到所有樣板：全部、草稿和待審。
完成編輯后，您可以與社區(qū)分享您的樣板。只需單擊編輯器右上角的“提交”按鈕即可提交樣板進(jìn)行修改（請務(wù)必在提交模式之前遵循樣板指南）。
總結(jié)
WordPress已經(jīng) 20 歲了，統(tǒng)計數(shù)據(jù)告訴我們，它仍然是世界上使用最廣泛的CMS，截至 2023 年 5 月，市場份額為 63.3%。
這些數(shù)字證明 WordPress 是一種優(yōu)秀的發(fā)布工具，被全球數(shù)以千計的專業(yè)人士、開發(fā)人員和簡單的博主使用。
投入時間和資源來獲取WordPress 開發(fā)的新技能并學(xué)習(xí)自定義塊、可重用塊和塊樣板等高級功能對于您作為營銷人員、網(wǎng)頁設(shè)計師或出版商的職業(yè)生涯來說可能是一項極好的投資。
現(xiàn)在由你決定。您已經(jīng)創(chuàng)建了塊樣板嗎？你有沒有與社區(qū)分享過？我們很樂意看到您的作品。發(fā)表您對塊樣板的想法評論吧。
