WordPress塊模式
已發表: 2022-06-21自從引入塊模式以來，WordPress 生態系統中對塊模式的興趣激增。
向 Gutenberg 添加塊模式對 WordPress 用戶非常有利。 這是因為您現在可以在設計網站時使用預製設計並根據自己的喜好進行調整。 與從頭開始設計網站頁面相比，這確實有助於節省時間。
在本文中，我們將研究這些塊模式是什麼，在哪裡可以找到它們，如何使用它們，以及它們與可重用塊的比較。
目錄
什麼是塊模式
使用現有的塊模式
塊模式與可重用塊
如何創建自己的塊模式
- 手動方法
- 通過模式目錄
如何創建自定義塊模式插件
取消註冊塊模式
取消註冊塊模式類別
結論
什麼是塊模式
塊模式是組合在一起以創建預先設計的佈局的塊的集合。
例如，想要設置號召性用語的 WordPress 用戶可以通過在他們的頁面中添加一些塊來實現，例如標題、段落和按鈕塊。 然而，佈置塊以匹配您首選的設計佈局可能並不容易，尤其是對於新手 WordPress 用戶而言。 在這種情況下，塊模式確實派上用場，因為 WordPress 用戶只需添加號召性用語塊模式。 然後，他們可以將塊模式編輯為所需的視圖。
使用現有的塊模式
WordPress 集成了一個塊編輯器 (Gutenberg)，它是經典編輯器的替代品。 在編輯器中，您可以輕鬆地將模式添加到您的頁面或帖子中。 首先，您需要先單擊塊插入器。
單擊它後，導航到下圖所示的 Patterns 選項卡：
接下來，單擊“探索”按鈕
在呈現的彈出窗口中，您將擁有許多基於不同類別分組的模式。
為了在頁面或帖子中插入模式，您只需單擊它，然後它應該會在您的頁面或帖子中呈現。
完成此操作後，您可以根據自己的喜好進一步自定義模式中的塊。
您還可以從 wordpress.org 塊模式目錄中找到更多模式。
一旦找到您喜歡的圖案，您只需在所需圖案上出現鼠標懸停事件時單擊顯示的複制按鈕即可複制它。
完成此操作後，您需要將模式粘貼到您的頁面或帖子中。
塊模式與可重用塊
可重複使用的塊是單個或多個塊的集合，您稍後可以在帖子或頁面中使用它們。
按照上面的定義，可重用塊似乎與塊模式非常相似，因為它們都涉及在帖子或頁面中添加預製塊。 但是，這兩個項目之間存在差異。
當談到可重用的塊時，這些塊與塊模式相比不太靈活。 可重用塊保留單個實例，無論它們應用在哪個頁面或帖子中。 這意味著，如果您將可重用塊添加到多個頁面並決定在其中一個頁面中自定義可重用塊，則更改將應用於所有頁面的可重用塊的所有實例。
另一方面，對於塊模式，一旦您將塊模式添加到多個頁面並在特定頁面中對塊模式進行一些自定義，則自定義不會應用於其餘頁面上的塊模式。 因此，塊模式實例是不同的。
與可重複使用的塊不同，塊模式也可以在您的主題或插件代碼中註冊。
如果您想使用將應用於多個頁面或帖子的特定佈局，那麼塊模式是理想的，然後他們可以在各個頁面或帖子上自定義它們，以匹配相應頁面或帖子的上下文。
另一方面，可重用塊非常適合您想要在頁面中復制和使用確切內容的場景。 例如，這可以在橫幅廣告中。
如何創建自己的塊模式
您可以通過多種方式創建自己的塊模式。 在本文中，我們將介紹其中兩種方法：
- 手動方法
- 通過模式目錄
手動方法
在這種方法中，我們需要首先在頁面或帖子中創建塊集合，然後將其註冊為模式。
創建塊集合
為了設置您的塊集合，您需要執行以下操作：
i) 首先創建一個新頁面或帖子
ii）添加您想要的塊，以在帖子或頁面中形成圖案或佈局。 在我們的例子中，我們將添加一個媒體和文本塊以及一個按鈕塊和一些樣式。
下面是塊的示例顯示：
註冊塊模式
為了將塊集合註冊為塊模式，您需要執行以下操作：
i) 在您擁有塊集合的頁面或帖子中，切換到代碼編輯器：
ii) 複製所有呈現的代碼並將它們粘貼到所需的文本編輯器中，例如記事本或 Sublime Text：
iii) 接下來，將以下代碼添加到您的子主題中的 functions.php 文件中：
function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'featured' ), 'content' => 'Fill in your copied code here' ) ); } add_action( 'init', 'reg_block_patterns' );您需要將“在此處填寫您複製的代碼”的內容替換為上面（ii）中復制的代碼。
以下是我們最終代碼的示例：
function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'featured' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' );完成此操作後，您可以訪問您的頁面或帖子，並在導航到模式部分後，您將在“精選”部分看到新模式，如下圖所示：
註冊模式類別
WordPress 提供了一些默認模式類別，您可以在註冊模式時使用它們。 其中包括：按鈕、列、圖庫、標題、文本、查詢和精選。
在註冊塊模式時，更好的方法是在自定義類別中註冊模式。 為了實現這一點，您需要首先註冊一個模式類別。
為了註冊模式類別，您需要在子主題的 functions.php 文件中添加以下代碼。
function register_category_pattern() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_category_pattern' );您可以將類別標籤更改為您的偏好。 在上面的代碼示例中，我們使用了類別標籤“自定義”。
為了使自定義模式類別顯示在您的頁面或帖子上，您需要將其與模式相關聯。 在本例中，我們將更改原始模式註冊代碼以適應此模式類別。 為此，請搜索以下代碼行：
'categories' => array( 'featured' ),然後，您需要將“特色”類別更改為“自定義”類別，以便代碼現在讀取為：
'categories' => array( 'custom' ),在我們的案例中註冊模式和模式類別的最終代碼將如下所示：
function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'custom' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' ); function register_pattern_categories() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_pattern_categories' );一旦您現在訪問您的頁面或帖子並嘗試向其中添加模式，該模式將呈現在我們新註冊的“自定義”類別中，如下所示：
通過模式目錄
如果您想創建 WordPress 生態系統中的每個人都可以訪問的模式，您現在可以從 Patterns Directory 中實現這一點。
訪問模式目錄後，您需要執行以下操作：
i) 登錄到模式目錄。
ii) 單擊“創建新模式”鏈接。
iii) 在下一個屏幕上，添加您的模式標題並開始添加您想要的塊。 您需要至少添加三個塊。
iv) 完成塊添加後，您可以將模式保存為草稿。
v) 接下來，驗證您的模式不違反此處列出的準則：模式準則。 如果一切正常，那麼您可以提交模式。
您可以通過單擊此處所示的“我的模式”鏈接來查看已有的模式：
“我的模式”部分中呈現的模式是草稿、您已提交的模式和等待審核的模式。
vi) 然後您可以復制新塊並將其粘貼到您的頁面或帖子中。
如何創建自定義塊模式插件
您可以選擇使用自定義插件來添加模式和模式類別，而不是在您的 functions.php 文件中註冊您的模式和類別的代碼。 為此，您需要執行以下操作：
i) 通過您的主機面板或使用 Filezilla 等 FTP 軟件通過 FTP 訪問您的網站文件
ii) 導航到 wp-content > plugins 目錄路徑
iii) 在插件目錄中，創建一個名為“custom-patterns”的文件夾
iv) 在文件夾中，創建一個名為 custom-patterns.php 的文件
v) 在文件中添加以下標題註釋：
<?php /** * Plugin Name: Custom Patterns * Description: Adds a custom block pattern and category * Version: 1.1.0 * Requires at least: 6.0 * Requires PHP: 7.4 * Author: John Chris * License: GPL v2 or later * Text Domain: custom-patterns */您可以自定義上面的標題註釋以匹配您所需的插件命名。
vi) 在標題註釋下方，添加您的代碼以註冊模式和類別。 在我們這裡的例子中，我們將使用我們之前創建的代碼來註冊我們的模式和自定義類別。 因此，最終代碼將是：
<?php /** * Plugin Name: Custom Patterns * Description: Adds a custom block pattern and category * Version: 1.1.0 * Requires at least: 6.0 * Requires PHP: 7.4 * Author: John Chris * License: GPL v2 or later * Text Domain: custom-patterns */ function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'custom' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' ); function register_pattern_categories() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_pattern_categories' );vii) 在儀表板的插件列表中，您現在應該可以從插件列表中查看插件。 單擊插件名稱旁邊的激活鏈接以激活插件
viii）一旦激活，您現在應該可以在塊編輯器中看到塊模式和自定義類別，如下所示：
取消註冊塊模式
可以刪除您註冊的塊模式。 例如，如果您希望刪除我們之前註冊的“my-plugin/media-text-pattern”塊模式，則需要在子主題的 functions.php 文件中添加以下代碼：
function deregister_my_pattern() { unregister_block_pattern( 'my-plugin/media-text-pattern' ); } add_action( 'init', 'deregister_my_pattern' );在上面的代碼中，您需要將“my-plugin/media-text-pattern”替換為您註冊的模式的名稱。
取消註冊塊模式類別
如果您只想取消註冊模式類別並保留模式本身，則需要在子主題的 functions.php 文件中添加以下代碼：
function deregister_pattern_category() { unregister_block_pattern_category( 'custom'); } add_action( 'init', 'deregister_pattern_category');上面的代碼取消註冊我們之前添加的“自定義”類別。 您需要將“custom”替換為您註冊的類別。
結論
在本文中，我們研究了什麼是塊模式、如何使用它們，以及註冊和取消註冊塊模式和類別。 使用塊編輯器設計網站時，塊模式非常關鍵。 它們可以輕鬆地在您的網站中設計動態頁面和帖子。
我們確實希望本文能提供有關如何在您的網站中使用塊模式的相關見解。 如果您有任何問題或意見，請隨時在下面的評論部分提交。