可重復(fù)使用的塊和塊樣板（Patterns）是兩個(gè)強(qiáng)大的 WordPress 編輯功能，它們是隨著從“經(jīng)典”WordPress 到當(dāng)今基于塊的編輯界面的過(guò)渡而出現(xiàn)的。兩者都是我們?cè)S多人多年來(lái)一直希望 WordPress 提供的功能類型的完美示例：一次編寫(xiě)內(nèi)容并在頁(yè)面、帖子和模塊化組件之間同步的能力，以在整個(gè)網(wǎng)站上實(shí)現(xiàn)一致的視覺(jué)體驗(yàn)。在本文中，Ganesh Dahal 解釋了自 WordPress 5.0 中正式發(fā)布可重用塊以來(lái)這些功能是如何演變的，以及這兩者如何在 WordPress 6.3 中融合形成一個(gè)強(qiáng)大的功能，能夠允許內(nèi)容創(chuàng)建者在頁(yè)面中一致地同步內(nèi)容和設(shè)計(jì)樣板和帖子。
WordPress 5.0 中引入的可重用塊允許用戶創(chuàng)建和保存可在不同頁(yè)面或帖子中使用的自定義塊。通過(guò)允許用戶創(chuàng)建可以輕松重復(fù)使用的個(gè)性化內(nèi)容塊，這提高了效率和一致性。隨后，在WordPress 5.5中，引入了塊樣板，允許用戶設(shè)計(jì)由多個(gè)塊組成的布局樣板。
雖然可重用塊（Reusable blocks）允許用戶創(chuàng)建自己的內(nèi)容塊，這些內(nèi)容塊可以在整個(gè)站點(diǎn)上重用，同時(shí)保持其一致性，但塊樣板（block patterns）提供了一種方便的方式，可以將常見(jiàn)的設(shè)計(jì)模式快速應(yīng)用到頁(yè)面和帖子。
可重用塊和塊樣板乍一看似乎很相似，但它們之間有一個(gè)關(guān)鍵區(qū)別。可以直接在帖子編輯器中輕松創(chuàng)建可重復(fù)使用的塊，從而允許用戶生成和重復(fù)使用自己的自定義內(nèi)容塊。相比之下，塊樣板是在塊主題中安裝或注冊(cè)的既定樣板，無(wú)法直接在 WordPress 后臺(tái)中創(chuàng)建。
從 WordPress 6.3 開(kāi)始，可重用塊和塊模式已組合在一起形成一個(gè)稱為“樣板”的功能，該功能使用戶可以靈活地選擇是否要同步模式的所有實(shí)例（類似于可重用塊）或應(yīng)用樣板而不同步內(nèi)容。帖子編輯器中現(xiàn)已提供的新功能使用戶能夠制作既可作為可重用塊又可作為樣板的樣板，以滿足他們的特定要求。
WordPress 6.2 中的可重用塊和樣板
在我們深入了解 WordPress 6.3 中的更改之前，我認(rèn)為有必要重新審視一下之前版本 WordPress 6.2 中如何存在可重用塊和塊樣板。
假設(shè)您網(wǎng)站每個(gè)頁(yè)面的底部都有一段文本（也許是您的營(yíng)業(yè)時(shí)間）。可重復(fù)使用的塊是專門(mén)針對(duì)這種情況而設(shè)計(jì)的。不是將文本作為每個(gè)頁(yè)面上的單獨(dú)塊應(yīng)用，而是創(chuàng)建一次可重用塊，將其應(yīng)用到任何地方，并在它出現(xiàn)的所有實(shí)例之間同步。
在 WORDPRESS 6.2 中創(chuàng)建可重用塊 #
在 WordPress 6.2 中創(chuàng)建可重用塊相當(dāng)簡(jiǎn)單。選擇一個(gè)塊，打開(kāi)附加設(shè)置，然后單擊“創(chuàng)建可重用塊”選項(xiàng)。
選擇“創(chuàng)建可重用塊”選項(xiàng)會(huì)觸發(fā)一個(gè)彈出窗口，提示您命名可重用塊。
一旦命名，可重用塊將被保存并可以在塊插入器中訪問(wèn)。它有點(diǎn)難以發(fā)現(xiàn)，因?yàn)樗菈K插入器中唯一用圖標(biāo)而不是文本標(biāo)簽標(biāo)記的部分。
也許訪問(wèn)該塊的更方便的方法是在帖子編輯器中鍵入正斜杠 ( /)，后跟可重用塊的名稱。
對(duì)可重用塊進(jìn)行更改并不困難，但找到進(jìn)行更改的位置卻很困難。您必須在編輯頁(yè)面或帖子時(shí)單擊帖子編輯器設(shè)置，然后選擇“管理可重用塊”選項(xiàng)。
這將帶您進(jìn)入另一個(gè)新的編輯屏幕，您可以在其中根據(jù)需要直接編輯可重用的塊。有時(shí)我會(huì)將此屏幕添加為書(shū)簽作為快捷方式。保存后，對(duì)可重用塊的更改將應(yīng)用??于整個(gè)站點(diǎn)。
在 WORDPRESS 6.2 中創(chuàng)建塊樣板
與可重復(fù)使用的塊不同，網(wǎng)站創(chuàng)建者無(wú)法從帖子編輯器創(chuàng)建塊樣板。相反，它們更像是插件，其中塊樣板在帖子編輯器中可用之前就已安裝并激活。一旦它們可用，就可以使用塊插入器或正斜杠命令訪問(wèn)它們，就像將可重用塊添加到頁(yè)面和帖子中一樣。
這種類似插件的處理的巧妙之處在于，有一個(gè)樣板目錄，其中充滿了由 WordPress 社區(qū)創(chuàng)建和提交的模式，就像我們有插件目錄一樣。但這也意味著樣板已經(jīng)開(kāi)發(fā)出來(lái)并且需要包含在主題中。
使用 PHP 注冊(cè)自定義塊樣板
在WordPress 6.0中首次引入API register-block-pattern 功能，允許主題作者注冊(cè)自定義塊樣板：
register_block_pattern(
'my-first-pattern/hello-world',
array(
'title' => __( 'Hello World', 'my-first-pattern' ),
'description' => _x( 'A simple paragraph block.', 'my-first-pattern' ),
'content' => "<!-- wp:paragraph -->Hello world<!-- /wp:paragraph -->",
)
);該content參數(shù)可以包含任何原始 HTML 標(biāo)記，這意味著可以直接在帖子編輯器中配置一組要制作成樣板的塊，然后將該組復(fù)制并粘貼到字段中content。將塊粘貼為純文本會(huì)顯示底層的原始 HTML。
我們希望將其制作為自定義函數(shù)，并添加一個(gè)在主題初始化時(shí)觸發(fā)該函數(shù)的操作。
function mytheme_register_block_patterns() {
register_block_pattern( ... );
}
add_action( 'init', 'mytheme_register_block_patterns' );正如可以注冊(cè)塊樣板一樣，也可以使用該函數(shù)unregister-block-pattern以編程方式取消注冊(cè)它。所需要的只是title屬性。
function mytheme_unregister_my_patterns() {
unregister_block_pattern(
'my-first-pattern/hello-world',
array(
'title' => __( 'Hello World', 'my-first-pattern' ),
)
);
}
add_action( 'init', 'my_first_patterns' );通過(guò)目錄 /patterns 注冊(cè)自定義塊樣板
不要與我之前分享的樣板目錄混淆，您可以在其中找到并安裝社區(qū)貢獻(xiàn)者制作的樣板，WordPress 6.0 還支持在/patterns主題文件夾中的文件目錄中注冊(cè)塊樣板。
從此處注冊(cè)塊樣板的過(guò)程與 PHP 方法類似。事實(shí)上，每個(gè)樣板都包含在自己的 PHP 文件中，該文件包含相同的原始 HTML，可以將其復(fù)制并粘貼到函數(shù)register-block-pattern的content參數(shù)中……只是函數(shù)不是必需的。
以下示例顯示了保存footer.php在/patterns文件夾中的名為“帶文本的頁(yè)腳”的樣板：
<?php
/**
* Title: Footer with text.
* Slug: theme-slug/footer
* Categories: site-footer
* Block Types: core/template-parts/footer
* Viewport Width: 1280
*/
?>
<!-- block markup here -->這個(gè)特定的示例演示了塊樣板的另一個(gè)功能：上下文塊類型。將“塊類型”屬性聲明為core/template-parts/footer將樣板附加到名為 footer.php 的模板部件（位于該文件/template-parts夾旁邊的文件夾中/patterns）。將塊樣板附加到塊類型的好處是，它將樣板注冊(cè)為該塊類型的可用轉(zhuǎn)換，這是一種將樣板應(yīng)用于另一個(gè)塊之上的奇特方式。這樣，就不需要修改現(xiàn)有模板部分的結(jié)構(gòu)來(lái)應(yīng)用樣板，這有點(diǎn)類似于我們通常認(rèn)為的子主題，但用樣板代替。
想要將自定義塊樣板添加到主題模板中嗎？在wp:pattern上下文中這是可能的：
<!-- wp:pattern { "slug":"prefix/pattern-slug" } /-->如果您愿意，可以只使用塊樣板來(lái)創(chuàng)建任何整個(gè)模板。以下是取自Automattic 的 Archeo 主題的示例。主題的home.html模板文件清楚地演示了如何根據(jù)先前注冊(cè)的樣板、主題/patterns文件夾中的樣板文件以及wp:pattern上下文構(gòu)建模板：
<!-- wp:template-part { "slug":"header","tagName":"header" } /-->
<!-- wp:group { "layout":{ "inherit":"true" } } -->
<div class="wp-block-group">
<!-- wp:pattern { "slug":"archeo/image-with-headline-description" } /-->
<!-- wp:pattern { "slug":"archeo/simple-list-of-posts-with-background" } /-->
<!-- wp:pattern { "slug":"archeo/layered-images-with-headline" } /-->
</div>
<!-- /wp:group -->
<!-- wp:template-part { "area":"footer","slug":"footer","tagName":"footer" } /-->主題的footer.php樣板在home.html模板中使用之前會(huì)添加到/parts/footer.html模板文件中，如下所示：
<!-- wp:pattern { "slug":"archeo/footer" } /-->有關(guān)注冊(cè)塊樣板的更多信息，請(qǐng)參閱WordPress 主題手冊(cè)。您還可以在 GitHub 上 Automattic 主題存儲(chǔ)庫(kù)的解釋器中發(fā)現(xiàn)塊模式的許多用例。
WordPress 6.3 中的可重用塊和模式
WordPress 6.3 之所以引人注目，有很多原因，其中之一就是可重用塊和塊樣板功能被組合成一個(gè)簡(jiǎn)單的功能，稱為樣板。這個(gè)想法是，可重用塊和塊樣板在本質(zhì)上足夠相似，我們可以決定樣板在編輯級(jí)別是否可重用。無(wú)需預(yù)先確定是否需要可重用塊或塊樣板，而是創(chuàng)建一個(gè)樣板，然后確定是否在整個(gè)站點(diǎn)上同步該樣板的內(nèi)容。
結(jié)果是一個(gè)強(qiáng)大的功能為我們提供了兩全其美的功能。WordPress 6.3 不僅結(jié)合了可重用塊和塊樣板，還對(duì) WordPress 管理界面進(jìn)行了 UI 更改。讓我們把這些變化歸零，以及樣板式在新系統(tǒng)中的工作方式。
創(chuàng)建同步樣板
樣板不僅在站點(diǎn)編輯器中提供，而且可以使用帖子編輯器將它們插入到頁(yè)面或帖子中。事實(shí)上，它的工作原理就像可重用塊在與塊樣板結(jié)合之前所做的那樣。唯一的區(qū)別是上下文菜單中的“創(chuàng)建可重用塊”選項(xiàng)現(xiàn)在稱為“創(chuàng)建樣板/可重用塊”。
創(chuàng)建樣板的過(guò)程也基本相同。選擇已插入頁(yè)面的任何塊或塊組，打開(kāi)上下文菜單，然后選擇“創(chuàng)建樣板/可重用塊”。我希望這個(gè)標(biāo)簽在未來(lái)的版本中簡(jiǎn)單地變成“創(chuàng)建樣板”。這個(gè)較長(zhǎng)的標(biāo)簽可能有助于過(guò)渡。
這是與 WordPress 6.2 不同的地方。單擊“創(chuàng)建樣板/可重用塊”仍然會(huì)觸發(fā)一個(gè)彈出窗口，要求您命名樣板，但新功能是啟用同步內(nèi)容支持的切換。
保存樣板后，可以立即在塊插入器中或使用斜杠 ( /) 命令使用它。
創(chuàng)建標(biāo)準(zhǔn)的、不同步的樣板
這個(gè)功能已經(jīng)推出很長(zhǎng)時(shí)間了，它允許我們創(chuàng)建自己的自定義樣板，類似于站點(diǎn)編輯器中可重用塊的靈活性。
讓我們演示標(biāo)準(zhǔn)的、不同步的樣板如何工作，但與同步的示例略有不同。這次，我們首先從樣板目錄中復(fù)制這個(gè)兩列文本樣板并將其粘貼到頁(yè)面中。我將稍微改變一下顏色，并對(duì)復(fù)制的圖案進(jìn)行一些其他的小調(diào)整，只是為了好玩。我還在彈出窗口中將其命名為“雙列文本不同步樣板”。此樣板與我們之前創(chuàng)建的同步樣板之間的唯一區(qū)別是我禁用了同步設(shè)置。
真的是這樣！我剛剛根據(jù)樣板庫(kù)中提取的另一個(gè)樣板創(chuàng)建了一個(gè)新的自定義樣板，并且可以在我的網(wǎng)站上的任何位置使用它，而無(wú)需同步其中的內(nèi)容。不需要 PHP 或特殊文件目錄！
可以從站點(diǎn)編輯器訪問(wèn)樣板
您可能非常熟悉站點(diǎn)編輯器。只要您的 WordPress 站點(diǎn)配置為塊主題，導(dǎo)航到“外觀”→“站點(diǎn)編輯器”即可打開(kāi)站點(diǎn)編輯界面。
WordPress 6.3 引入了全新重新設(shè)計(jì)的側(cè)邊欄面板，其中包括編輯導(dǎo)航、樣式、頁(yè)面、模板和……樣板的選項(xiàng)。這是一個(gè)大問(wèn)題！現(xiàn)在，樣板被視為模塊化組件，可用于在站點(diǎn)編輯器級(jí)別制作模板。換句話說(shuō)，塊樣板不再僅僅屬于帖子編輯器。
單擊站點(diǎn)編輯器中的樣板將顯示所有已保存的模式。這些模式可以方便地分為同步樣板和未同步樣板，單擊其中任何一個(gè)都會(huì)打開(kāi)一個(gè)編輯界面，可以在其中進(jìn)行更改和保存。
WordPress 6.3 中另一個(gè)有趣的站點(diǎn)編輯器更新是樣板和模板部分現(xiàn)在組合在一起。以前版本的 WordPress 將模板部件放在站點(diǎn)編輯器的頂級(jí)導(dǎo)航中。WordPress 6.3 將站點(diǎn)編輯器導(dǎo)航中的“模板部分”替換為“樣板”，并在結(jié)果屏幕中將“模板部分”與樣板一起顯示。
我將保留稍后的判斷，但這種安排可能會(huì)導(dǎo)致對(duì)樣板和模板部分之間的差異產(chǎn)生一些混亂。當(dāng)樣板和可重用塊是獨(dú)立的但具有相同功能且需要組合的重疊功能時(shí)，就會(huì)發(fā)生這種情況。我想知道模板部分是否會(huì)被打包在同一個(gè)包中，因?yàn)樗鼈兒驼军c(diǎn)編輯器中的樣板之間的區(qū)別越來(lái)越小。
關(guān)于站點(diǎn)編輯器中的樣板界面，需要注意的另一件事是如何在側(cè)面板的文件夾中組織樣板。當(dāng)樣板注冊(cè)為上下文塊樣板時(shí)，會(huì)自動(dòng)創(chuàng)建文件夾，正如我們之前在回顧塊樣板在 WordPress 早期版本中的工作方式時(shí)所演示的那樣。當(dāng)樣板與活動(dòng)主題捆綁在一起時(shí)，文件夾旁邊會(huì)顯示一個(gè)鎖定圖標(biāo)，表明它們是主題外觀的核心，而不是獨(dú)立于主題創(chuàng)建的樣板。鎖定樣板是您想要構(gòu)建的樣板，就像我們之前將樣板注冊(cè)為上下文塊類型一樣。
最后，可以直接從站點(diǎn)編輯器創(chuàng)建新樣板（或模板部分），而無(wú)需離開(kāi)帖子編輯器并在帖子編輯器中創(chuàng)建它。這是一個(gè)非常好的改進(jìn)，它使我們不必像在以前版本的 WordPress 中那樣在兩個(gè) UI 之間跳轉(zhuǎn)。
還記得我之前展示的在帖子編輯器中單擊“管理可重用塊”時(shí)顯示的屏幕嗎？好吧，現(xiàn)在它被稱為“樣板”，而且它也是站點(diǎn)編輯器中的直接鏈接。
此屏幕顯示所有自定義保存的樣板，但不顯示與主題捆綁的樣板。這可能會(huì)在未來(lái)的版本中發(fā)生變化。Gutenberg 項(xiàng)目架構(gòu)師 Matias Ventura 在GitHub 討論線程中表示，樣板最終將通過(guò)樣板目錄提供，而不是捆綁資源。也許那時(shí)我們會(huì)看到所有可用的樣板，而不僅僅是自定義樣板。
使用樣板作為入門(mén)模板
WordPress 6.0 中引入的早期樣板 API的一個(gè)常見(jiàn)用例是顯示幾組入門(mén)內(nèi)容樣板作為用戶在站點(diǎn)編輯器中創(chuàng)建新頁(yè)面模板時(shí)可以選擇的選項(xiàng)。其想法是為您提供一個(gè)具有預(yù)定義布局的模板，而不是從空白模板開(kāi)始，并顯示模板配置的預(yù)覽。
WordPress 6.2 中更新的 樣板 API允許我們通過(guò)為特定模板類型創(chuàng)建自定義樣板來(lái)更輕松地做到這一點(diǎn)。例如，我們可以為單個(gè)帖子創(chuàng)建一組與模板關(guān)聯(lián)的樣板。或者 404 模板的另一組樣板。當(dāng)然，這樣做的好處是我們可以使用樣板作為入門(mén)模板！
讓我們逐步完成使用樣板作為起始頁(yè)模板的過(guò)程，首先向我們的朋友 register-block-pattern()注冊(cè)我們的自定義樣板。我們確實(shí)可以選擇在主題/patterns文件夾中注冊(cè)樣板，就像我們之前所做的那樣，但我發(fā)現(xiàn)它不起作用。讓我們以函數(shù)方式代替文件夾。
使用register-block-pattern()注冊(cè)自定義樣板
我們將從一個(gè)注冊(cè)樣板的函數(shù)開(kāi)始，我們將把該樣板與主題的 404 頁(yè)面模板關(guān)聯(lián)起來(lái)。請(qǐng)注意templateTypes參數(shù)允許我們將樣板鏈接到模板：
function mytheme_register_block_patterns() {
register_block_pattern(
'wp-my-theme/404-template-pattern',
array(
'title' => __( '404 Only template pattern', 'wp-my-theme' ),
'templateTypes' => array( '404' ),
'content' => '<!-- wp:paragraph { "align":"center","fontSize":"x-large" } --><p class="has-text-align-center has-x-large-font-size">404 pattern</p><!-- /wp:paragraph -->',
)
);
}
add_action( 'init', 'mytheme_register_block_patterns' );
我從GitHub Gist中提取了該函數(shù)的大部分內(nèi)容。這是一個(gè)小例子，但您可以看到如果我們?yōu)閱蝹€(gè)模板注冊(cè)許多樣板，事情會(huì)變得多么混亂。另外，為模板注冊(cè)的樣板越多，頁(yè)面就越大，從而使整個(gè)模板難以閱讀、預(yù)覽和維護(hù)。
默認(rèn)的WordPress 2022主題帶有66 種樣板。這可能會(huì)在主題文件夾中變得混亂，但主題巧妙地添加了一個(gè)/inc文件夾，其中包含每個(gè)注冊(cè)樣板的單獨(dú) PHP 文件。主題使用相同的策略來(lái)分解在 functions.php 中注冊(cè)的函數(shù)，以防止它變得過(guò)于復(fù)雜。
為了舉例，讓我們以同樣的方式注冊(cè)一些入門(mén)樣板。首先，我們將/inc在主題文件夾的頂層添加一個(gè)新文件夾，然后添加其中包含的另一個(gè)名為/patterns. 在該文件夾中，我們添加一個(gè)名為block-patterns.php. 在該文件中，讓我們添加 2022 主題的塊注冊(cè)函數(shù)的修改版本，映射到我們想要為 404 頁(yè)面模板注冊(cè)的四種樣板：
404-blue.phppage-not-found.php
一切看起來(lái)是這樣的：
讓我們把注意力轉(zhuǎn)向樣板本身。具體來(lái)說(shuō)，讓我們打開(kāi)該文件并在樣板目錄中404-blue.php添加此樣板的代碼以及此代碼：
<?php
/**
* Blue pattern
* source: https://wordpress.org/patterns/pattern/seo-friendly-404-page/
**/
?>
return array(
'title' => __( '404 Blue', 'mytheme' ),
'categories' => array( 'post' ),
'templateTypes' => array( '404' ),
'inserter' => 'yes',
'content' => '<!-- wp:columns { "align":"full" } -->
<div class="wp-block-columns alignfull"><!-- wp:column { "width":"100%" } -->
<div class="wp-block-column" style="flex-basis:100%"><!-- wp:columns { "style":{" color":{ "gradient":"linear-gradient(308deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100% )" },"spacing":{ "padding":{ "right":"20px","bottom":"100px","left":"20px","top":"100px"} } } } -->
<div class="wp-block-columns has-background" style="background:linear-gradient(308deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);padding-top:100px;padding-right:20px;padding-bottom:100px;padding-left:20px"><!-- wp:column { "width":"1920px" } -->
<div class="wp-block-column" style="flex-basis:1920px"><!-- wp:heading { "textAlign":"center","level":1,"style":{ "typography":{ "textTransform":"uppercase","fontSize":"120px" } },"textColor":"white" } -->
<h1 class="has-text-align-center has-white-color has-text-color" style="font-size:120px;text-transform:uppercase"><strong>404</strong></h1>
<!-- /wp:heading -->
<!-- wp:heading { "textAlign":"center","style":{ "typography":{ "textTransform":"uppercase" } },"textColor":"white" } -->
<h2 class="has-text-align-center has-white-color has-text-color" style="text-transform:uppercase">? <strong>Page Not Found</strong> ?</h2>
<!-- /wp:heading -->
<!-- wp:paragraph { "align":"center","textColor":"white" } -->
<p class="has-text-align-center has-white-color has-text-color">The page you are looking for might have been removed had it's name changed or is temporary unavailable. </p>
<!-- /wp:paragraph -->
<!-- wp:search { "label":"","showLabel":false,"placeholder":"Try Searching for something else...","width":100,"widthUnit":"%","buttonText":"Search","buttonPosition":"no-button","align":"center","style":{ "border":{ "radius":"50px","width":"0px","style":"none" } },"backgroundColor":"black","textColor":"white" } /-->
<!-- wp:paragraph { "align":"center","textColor":"white" } -->
<p class="has-text-align-center has-white-color has-text-color">? Or you can return to our <a href="#">home page</a> or <a href="#">contact us</a> if you can't find what you are looking for</p>
<!-- /wp:paragraph -->
<!-- wp:buttons { "layout":{"type":"flex","justifyContent":"center" } } -->
<div class="wp-block-buttons"><!-- wp:button { "backgroundColor":"black","textColor":"white","style":{ "border":{ "radius":"50px" },"spacing":{ "padding":{ "top":"15px","right":"30px","bottom":"15px","left":"30px" } } } } -->
<div class="wp-block-button"><a class="wp-block-button__link has-white-color has-black-background-color has-text-color has-background" style="border-radius:50px;padding-top:15px;padding-right:30px;padding-bottom:15px;padding-left:30px">Go to Homepage</a></div>
<!-- /wp:button -->
<!-- wp:button { "backgroundColor":"black","textColor":"white","style":{ "border":{ "radius":"50px" },"spacing": { "padding":{ "top":"15px","bottom":"15px","left":"60px","right":"60px" } } } } -->
<div class="wp-block-button"><a class="wp-block-button__link has-white-color has-black-background-color has-text-color has-background" style="border-radius:50px;padding-top:15px;padding-right:60px;padding-bottom:15px;padding-left:60px">Contact Us</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:paragraph { "align":"center","textColor":"white","fontSize":"small" } -->
<p class="has-text-align-center has-white-color has-text-color has-small-font-size">Find the page at our <a href="#sitemap">sitemap</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->'
再次，我認(rèn)為值得提出這個(gè)templatesTypes論點(diǎn)，因?yàn)槲覀兪褂盟鼇?lái)將這個(gè)“404 Blue”樣板鏈接到 404 頁(yè)面模板。這樣，樣板僅注冊(cè)到該模板并且僅注冊(cè)到該模板。
現(xiàn)在我們已經(jīng)添加了正確的文件夾和文件，并將“404 Blue”樣板注冊(cè)到 404 頁(yè)面模板，我們可以創(chuàng)建 404 頁(yè)面模板并查看我們的樣板的工作情況：
- 打開(kāi) WordPress 管理員并導(dǎo)航到站點(diǎn)編輯器（外觀 → 編輯器）。
- 單擊站點(diǎn)編輯器側(cè)面板中的“模板”打開(kāi)模板屏幕。
- 單擊“添加新模板”。
- 選擇“頁(yè)面：404”選項(xiàng)。
選擇 404 頁(yè)面模板會(huì)觸發(fā)一個(gè)彈出窗口，提示您使用（您猜對(duì)了）我們剛剛注冊(cè)的樣板為頁(yè)面選擇一種樣板！還會(huì)顯示主題建立的默認(rèn)啟動(dòng)樣板。
具有入門(mén)樣板的自定義模板
我們剛剛所做的是創(chuàng)建一組鏈接到主題的 404 頁(yè)面模板的樣板。但是，如果我們想將樣板集鏈接到自定義頁(yè)面模板怎么辦？當(dāng)站點(diǎn)編輯器首次推出時(shí)，它僅支持一些核心頁(yè)面模板，例如頁(yè)面、帖子和首頁(yè)。然而，現(xiàn)在我們不僅有更多的選擇，而且還可以選擇創(chuàng)建自定義頁(yè)面模板。
因此，讓我們通過(guò)將新文件添加到/inc/patterns我們?cè)谏弦粋€(gè)示例中創(chuàng)建的文件夾中來(lái)看看該過(guò)程：
about-me.php,my-portfolio.php。
由于我們?cè)谏弦粋€(gè)示例中詳細(xì)說(shuō)明了完整的過(guò)程，因此我們不會(huì)獲取這些代碼示例。但我要指出的是，主要區(qū)別在于我們更改了每個(gè)樣板文件中的templateTypes參數(shù)，以便將樣板鏈接到我們計(jì)劃在站點(diǎn)編輯器中創(chuàng)建的自定義模板：
<?php
/**
* About Me
* source: https://wordpress.org/patterns/pattern/seo-friendly-404-page/
**/
?>
return array(
'title' => __( 'About Me', 'mytheme' ),
'categories' => array( 'post' ),
'templateTypes' => array( 'portfolio', 'author' ),
// etc.
);現(xiàn)在我們可以返回站點(diǎn)編輯器，打開(kāi)模板屏幕，然后像之前一樣選擇“添加新模板”。但這一次，我們將單擊底部的“自定義模板”選項(xiàng)，而不是選擇預(yù)定義的模板選項(xiàng)之一。從那里，我們收到一個(gè)新的提示來(lái)命名自定義模板。我們將其稱為“我的作品集”：
接下來(lái)，我們可以嘗試為模板選擇樣板，但在撰寫(xiě)本文時(shí)它會(huì)導(dǎo)致空白頁(yè)。相反，我們可以跳過(guò)該步驟，在編輯器中打開(kāi)模板，然后將模式添加到模板中，就像添加任何其他塊或樣板一樣。單擊+編輯器左上角的按鈕打開(kāi)塊插入器側(cè)面板，然后打開(kāi)“圖案”選項(xiàng)卡并選擇樣板以在自定義模板中預(yù)覽它們。
附帶說(shuō)明一下，您是否看到這些模式是如何捆綁在類別中的（例如，精選、帖子、文本等）？這就是樣板文件的返回?cái)?shù)組中的categories參數(shù)所設(shè)置的內(nèi)容。如果樣板未分配類別，則它將自動(dòng)進(jìn)入“未分類”類別。
WordPress 開(kāi)發(fā)人員博客提供了自定義入門(mén)模板的其他示例。
在帖子編輯器中使用樣板
我們可以使用帖子編輯器將自定義樣板插入到頁(yè)面和帖子中，就像使用站點(diǎn)編輯器將它們插入到模板中一樣。在帖子編輯器中，任何已注冊(cè)但未鏈接到特定模板的自定義樣板都會(huì)在塊插入器的“樣板”選項(xiàng)卡的“我的樣板”類別中列出。
GitHub 上的討論表明，未來(lái)版本將優(yōu)先顯示自定義樣板的類別。
使用樣板目錄中的樣板
在我們介紹的其余示例中，我們當(dāng)然一直圍繞這個(gè)主題進(jìn)行討論。我們一直在復(fù)制和粘貼樣板目錄中的項(xiàng)目來(lái)注冊(cè)我們自己的自定義樣板并將它們鏈接到特定的頁(yè)面模板。但讓我們也看看直接使用樣板目錄中的樣板而不進(jìn)行任何修改會(huì)是什么樣子。
如果您已經(jīng)從插件目錄安裝了插件，那么您已經(jīng)熟悉從樣板目錄安裝樣板。這是相同的概念：社區(qū)成員貢獻(xiàn)開(kāi)源樣板，任何運(yùn)行 WordPress 網(wǎng)站的人都可以使用它們。
該庫(kù)允許用戶選擇由 WordPress.org 團(tuán)隊(duì)“社區(qū)”貢獻(xiàn)或“策劃”的樣板，所有這些樣板都屬于各種不同的類別，從文本和圖庫(kù)到橫幅和號(hào)召性用語(yǔ)，其中好多其它的。
向站點(diǎn)添加樣板與安裝插件并不完全相同。可以通過(guò) WordPress 管理員直接從插件目錄安裝插件并從那里激活。但是，樣板應(yīng)該添加到塊主題的theme.json中，并使用樣板的 slug 作為值在patterns對(duì)象中注冊(cè)。可以使用逗號(hào)分隔注冊(cè)多個(gè)樣板：
{
"version": 2,
"patterns": [ "short-text", "patterns-slug" ],
// etc.
}以下示例使用樣板目錄中名為“傾斜樣式號(hào)召性用語(yǔ)”的樣板。它用于我從默認(rèn)的2023主題克隆的主題theme.json文件中：
{
"version": 2,
"patterns": [ "slanted-pattern", "slanted-style-call-to-action" ]
}現(xiàn)在，我們可以通過(guò)打開(kāi)塊插入器并選擇列出樣板的“樣板”選項(xiàng)卡來(lái)在帖子編輯器中查看新添加的樣板。同樣，可以使用塊插入器的搜索功能來(lái)提取樣板：
對(duì)于那些想要直接使用樣板目錄中的樣板而無(wú)需先注冊(cè)的人，GutenbergHub團(tuán)隊(duì)創(chuàng)建了一個(gè)頁(yè)面構(gòu)建器應(yīng)用程序，使之成為可能。他們有一個(gè)介紹性視頻來(lái)演示這一點(diǎn)。
您可以從應(yīng)用程序復(fù)制代碼并將其粘貼到網(wǎng)站中，這使得以低代碼方式構(gòu)建復(fù)雜的布局樣板變得更加容易。Jamie Marsland 在此短視頻（1:27）中展示了如何使用該應(yīng)用程序通過(guò)從模式目錄中選擇所需的頁(yè)面部分來(lái)創(chuàng)建整個(gè)頁(yè)面布局，類似于成熟的頁(yè)面構(gòu)建器。
在WordPress 開(kāi)發(fā)人員資源文檔的“利用樣板”部分了解有關(guān)創(chuàng)建入門(mén)樣板的更多信息。
總結(jié)
在本文中，我們討論了 WordPress 6.3 中不斷發(fā)展的新塊樣板功能，并展示了一些在站點(diǎn)編輯器中創(chuàng)建自定義樣板的用例。這項(xiàng)新功能為用戶提供了無(wú)限的方式來(lái)排列塊并將其保存為樣板以供廣泛使用。站點(diǎn)和帖子編輯器中可重用塊和傳統(tǒng)樣板的集成旨在簡(jiǎn)化工作流程、增強(qiáng)內(nèi)容創(chuàng)建，并為 WordPress 6.4 中即將推出的增強(qiáng)功能做好準(zhǔn)備。
此外，WordPress 6.4 路線圖還包括我們期待的更多高級(jí)樣板功能：
- 設(shè)置類別；
- 更新插入器體驗(yàn)，確保同步和未同步之間的一致性；
- 提高非塊主題的兼容性；
- 迭代樣板頁(yè)面的空類別狀態(tài)；
- 同步樣板未在編輯器中接收對(duì)齊屬性。
您可以觀看此WordPress TV 視頻，了解有關(guān)塊樣板如何演變的更多詳細(xì)信息。此外，還可以在 GitHub 上跟蹤正在進(jìn)行的工作問(wèn)題。
注意：自本文撰寫(xiě)以來(lái)，WordPress 6.4 Beta 1已發(fā)布。新版本允許用戶在創(chuàng)建過(guò)程中通過(guò)類別更好地組織同步和未同步樣板。請(qǐng)參閱發(fā)行說(shuō)明以獲取更多最新信息。
