解碼WordPress:如何開發和構建WordPress區塊樣板

如何開發和構建WordPress區塊樣板

WordPress是一個強大的線上釋出工具,允許任何人輕鬆地建立和分享文字和/或多媒體內容。但除此之外,它也是一個偉大的專業工具,適用於設計師、營銷人員和開發人員,無論其背景和技能如何。

簡而言之,WordPress可以成為你最有價值的工作同事,並幫助你在各種專業領域取得成功。

考慮到這一點,我們在這個部落格上發表了一系列文章,以幫助你獲得成為一個WordPress開發者所需的技能:

是的,你可以用Gutenberg開發技能提升你的職業預期,但你不一定需要成為一名開發人員來為你的WordPress網站建立高階佈局。

WordPress使用者可以利用強大的功能,讓他們輕鬆地建立高階區塊佈局,而不需要任何麻煩。在這篇文章中,我們將把注意力放在區塊樣板上。

  1. 區塊樣板 vs. 可重複使用區塊 vs. 與模板部件
  2. 如何建立區塊樣板
  3. 刪除支援、取消註冊和隱藏區塊樣板
  4. 用樣板建立器構建和分享區塊樣板

區塊樣板 vs. 可重複使用區塊 vs. 與模板部件

區塊樣板是在WordPress 5.5中首次引入的,允許WordPress使用者只需點選幾下,就可以把複雜的即用型巢狀區塊結構納入他們的內容。

開箱後,WordPress提供了一些內建的區塊樣板,供你在建立內容時選擇。此外,區塊主題通常提供更多的區塊樣板,你可以直接從區塊插入器新增到你的內容中。

例如,目前的預設主題Twenty Twenty-Three就提供了以下的區塊樣板:

  • 特色
  • 文章
  • 文字
  • 相簿
  • Call to action
  • Banner
  • 頁首
  • 頁尾
  • 引語

你並不侷限於WordPress或你的主題所提供的樣板,因為樣板目錄提供了大量現成的區塊樣板。

但是,區塊樣板並不是你可以利用的唯一功能,在你的WordPress網站上建立區塊佈局。新的Gutenberg區塊編輯器提供了額外的工具供你選擇,以建立你的內容佈局,包括可重用區塊和模板部件。這些功能之間有什麼不同?什麼時候更喜歡其中一個?讓我們深入瞭解一下。

  1. 區塊樣板
  2. 區塊樣板的優點
  3. 區塊樣板的演變
  4. 可重用區塊
  5. 模板部件
  6. 區塊樣板、可重用區塊和模板部件之間的區別

區塊樣板

區塊樣板是預定義的區塊組,你可以將其新增到你的內容中,並使用相同的設計工具對所包含的區塊進行定製。對區塊樣板所做的改變只會影響你正在編輯的特定例項,而不會應用於你可能已經新增到你網站的其他文章或頁面的任何其他例項。

你可以使用區塊樣板來包括你需要定製的預建佈局,改變影象、文字、樣式,或新增/刪除元素。

區塊樣板是可重複使用的,這意味著一旦你建立了你的自定義區塊樣板,你可以把它新增到你網站的任何地方,並使用編輯器的內建控制元件,只需點選幾下就可以定製它。

區塊插入器中的樣板面板

區塊插入器中的樣板面板

你可以在編輯器的區塊插入器中的樣板選項卡中瀏覽和插入區塊樣板,或者在區塊插入-樣板中點選探索所有樣板按鈕時,通過樣板目錄中的樣板探索來探索可用的樣板。

探索WordPress樣板目錄中的樣板

探索WordPress樣板目錄中的樣板

你會在區塊插入器的樣板標籤中發現大量的樣板,或者直接從編輯器的介面中探索區塊樣板庫。你也可以訪問區塊樣板網站,選擇一個樣板,然後點選複製。

在樣板庫中挑選一個樣板

在樣板庫中挑選一個樣板

一旦你複製了一個樣板,把它貼上到你的內容中,你就完成了。

將區塊樣板新增到你的內容中是快速和簡單的

將區塊樣板新增到你的內容中是快速和簡單的

現在你可以自定義樣板中包含的區塊組,而不影響註冊的樣板或你網站上的任何額外例項。

區塊樣板的優點

當你建立區塊樣板時,你只需將多個區塊貼上在一起,即可建立一個小模板。這意味著你可以快速組裝你的網站,因為你不需要從頭開始建立每個頁面。

這還不是唯一的好處。以下是其他一些優點:

  • 你可以使用區塊建立整個版塊:建立自己的自定義區塊模式意味著任何在網站上工作的人都可以管理內容,而不必擔心佈局和設計。
  • 您可以使用專業設計師提供的預製區塊樣板:你可以修改這些模板,使其符合你的風格,從而在建立文章或頁面時有更多的選擇。
  • 你可以儲存經常使用的樣板:建立或選擇區塊樣板後,您可以將它們儲存起來,建立一個適合自己品牌的模板庫。
  • 你可以更快地建立新內容:插入已儲存的樣板比從頭開始設計頁面要快得多。
  • 靈活且可定製:您可以根據自己的具體設計和功能需求來定製預建的塊模式。在 WordPress 樣板目錄中找到適合你的區塊樣板,然後根據你的創意進行修改。
  • 與主題無關:自定義區塊樣板不受任何特定主題的約束。如果您以後更換了 WordPress 網站的主題,您的樣板也不會改變。
  • 它們提供響應式頁面和文章佈局:使用區塊和區塊模式設計 WordPress 網站意味著您的網站內容將針對智慧手機或平板電腦等不同裝置進行適當優化。

區塊樣板的演變

區塊樣板早在 2020 年 8 月 WordPress 5.5(Eckstine)釋出時就已引入。

從那時起,我們看到了大量的演變:

  • WordPress 5.9 增加了在全站編輯器中複製和貼上區塊樣板的選項。
  • WordPress 6.0 使區塊插入器更易於瀏覽,並使開發人員更容易將樣板新增到他們的主題中。
  • WordPress 6.3 引入了同步樣板,這種樣板在整個網站上看起來都是一樣的。您可以在一個頁面上編輯同步樣板,所有其他副本都會更新為相同的外觀。
  • WordPress 6.5 按類別提供了全新的區塊樣式。
  • WordPress 6.6 引入了覆蓋同步樣板系統的選項,因此樣板的每個副本都可以有一些獨特的內容或樣式。

可重用區塊

可重用區塊是一個預先構建的區塊或區塊組,你可以將其新增到你網站的任何文章或頁面。你也可以將可重用區塊匯出到其他網站。

可重複使用的區塊對於建立你可能想在你的網站的幾個頁面和/或不同網站上包含的元素特別有用。想想看,CTA、促銷Banner、價格表,等等。

在下面的例子中,我們從一個欄目區塊、一個圖片、一個段落和一個按鈕建立一個可重複使用的區塊。

建立可重用區塊

建立可重用區塊

一旦你建立了一個可重複使用的區塊,你可以從區塊插入器中把它新增到你網站的任何頁面。

區塊插入器中的可重用區塊

區塊插入器中的可重用區塊

WordPress認為可重複使用的區塊是 wp_block 文章型別,因此,將它們儲存在 wp_posts 表中。

在區塊設定選單中管理可重複使用的區塊

在區塊設定選單中管理可重複使用的區塊

一旦你建立了你的可重用區塊,你就可以從可重用區塊管理介面來管理它們。你可以通過幾種方式進入該頁面:

  • 將/wp-admin/edit.php?post_type=wp_block新增到您網站的WordPress URL中。
  • 點選區塊插入器中的管理可重用區塊按鈕。
  • 點選區塊設定下拉選單中的 “管理可重用區塊” 按鈕。

可重複使用的區塊管理螢幕

可重複使用的區塊管理螢幕

在那裡,你可以

  • 編輯、移除或將你的塊匯出為JSON、
  • 從JSON中匯入可重用區塊、
  • 建立新的可重用區塊。

對一個可重用區塊的所有修改都將應用於整個網站上該區塊的每一次出現,不管是在哪個管理頁面進行修改。

如果你大量使用可重用區塊,不要錯過J. B. Audras的這個偉大的外掛

模板部件

Gutenberg時代之前,WordPress的主題和模板主要是用PHP構建的。對子主題模板層次結構和主要的前端開發語言的紮實知識是建立或定製模板的基本要求。但隨著區塊主題的引入,情況發生了變化。

在選擇了這個功能的區塊主題和經典主題中,你可以在網站編輯器介面上輕鬆地建立或定製模板或模板部分。不需要任何開發技能,當然,除非你決定成為一個主題開發者。

一個區塊模板是一個區塊專案的列表。區塊專案的例子是網站標題、標誌和導航。

模板部件是一個頁面的特定部分,可以在幾個地方視覺化,如頁首和頁尾,並可以顯示在你的WordPress網站的每一頁上。

你可以通過網站編輯器介面建立和編輯模板部分,在那裡你可以使用所有可用於區塊的編輯工具。

建立新的模板部件

建立新的模板部件

但與區塊樣板和可重複使用的區塊不同,模板部件是為網站中不經常變化的區域準備的。

在Twenty Twenty-Three主題中編輯頁尾模板部件

在Twenty Twenty-Three主題中編輯頁尾模板部件

區塊樣板、可重用區塊和模板部件之間的區別

總結一下,以下是三者之間的主要區別:

區塊樣板

  • 區塊樣板是預定義的區塊佈局,你可以將其新增到你的內容中,並使用與所含區塊相同的工具進行定製。對一個區塊樣板所做的改變將隻影響該區塊樣板的單一例項。
  • 你可以從樣板目錄中複製和貼上區塊樣板。
  • 你可以建立新的樣板,並在樣板目錄中釋出它們。

可重用區塊

  • 可重複使用的區塊是一組區塊,你可以在你網站的任何文章或頁面上使用。對一個可重用區塊所做的所有修改都將應用於整個網站上該塊的每一次出現,不管是在哪個管理頁面做的修改。
  • 可重用區塊作為 wp_block 文章型別儲存在 wp_posts 表中。
  • 你可以從其他網站匯入和匯出可重複使用的區塊。

模板部件

  • 模板部件是一個頁面的特定區域,可以顯示在多個位置,包括頁首、頁尾和側邊欄,在你的WordPress網站的幾個頁面上重複出現。
  • 你可以通過網站編輯器介面建立和編輯模板部分。
  • 模板部分是為網站中不經常變化的區域準備的。

如何建立區塊樣板

伴隨著區塊樣板功能,WordPress 5.5為開發者引入了一個新的API,以 “建立預先設計的內容區塊,可以很容易地插入到文章、頁面、自定義文章型別和模板”。新的API提供了 register_block_patternregister_block_pattern_category 函式來註冊區塊樣板和樣板類別。

WordPress 6.0開始,你也可以用一個PHP檔案來註冊區塊樣板。

所以,在寫這篇文章的時候,你有兩種方法來建立一個區塊樣板。

  • 使用 register_block_pattern 輔助函式、
  • 在你的主題中的pattern資料夾中新增一個PHP檔案。

使用外掛建立區塊樣板

第一種方法主要是為WordPress的開發者準備的,但也足夠簡單,非高階的開發者也可以使用。

如果你決定採用第一種方法,你可以在外掛的PHP檔案中或在你的主題的functions.php中使用兩個新的函式 register_block_patternregister_block_pattern_category 來建立一個區塊樣板。

選擇或註冊一個樣板類別

首先,你可能想為你的樣板選擇一個類別。隨著WordPress 6.2,新的樣板類別已經被新增,一些現有的類別已經被修改。在寫這篇文章的時候,你可以使用以下內建類別:

  • 熱門(featured)
  • 文章(posts)
  • 文字(text)
  • 畫廊(gallery)
  • CTA (call-to-action)
  • 橫幅(banner)
  • 頁首(header)
  • 頁尾(footer)
  • 團隊(team)
  • Testimonials (testimonials)
  • 服務(services)
  • 作品集(portfolio)
  • 多媒體(media)

WordPress 6.2中可用的樣板類別的完整列表

WordPress 6.2中可用的樣板類別的完整列表

如果你的區塊樣板不屬於任何預設的類別,你也可以使用 register_block_pattern_category 函式來註冊一個新的類別。

這個函式接受兩個引數:

  • $category_name: 樣板類別名稱,包括名稱空間。
  • $category_properties: 一個類別屬性的陣列。

一個例子將幫助你更好地理解如何註冊一個新的樣板類別:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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' );
}
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' ); }
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' );
}

註冊一個區塊樣板

一旦樣板型別被註冊,下一步就是註冊區塊樣板本身。你將使用 register_block_pattern 輔助函式來註冊區塊樣板,如下所示:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function my_plugin_register_block_pattern() {
register_block_pattern( 'prefix/pattern-name', $props );
}
add_action( 'init', 'my_plugin_register_block_pattern' );
function my_plugin_register_block_pattern() { register_block_pattern( 'prefix/pattern-name', $props ); } add_action( 'init', 'my_plugin_register_block_pattern' );
function my_plugin_register_block_pattern() {
register_block_pattern( 'prefix/pattern-name', $props );
}
add_action( 'init', 'my_plugin_register_block_pattern' );

這個函式需要兩個引數:

  • $pattern_name: 一個機器可讀的名字,其形式為 namespace/pattern-name
  • $pattern_properties: 該樣板的屬性陣列。

下面是當前可用的樣板屬性的列表:

  • title (要求): 一個可供人類閱讀的樣板標題。
  • content (要求): 該樣板的HTML標記。
  • description: 插入器中描述樣板的文字。描述是可選的,但建議使用,因為它有助於使用者找到該樣板。
  • categories: 一個或多個已註冊的樣板類別的陣列。你必須先註冊一個類別,然後才能在這裡使用它(見前面的章節)。
  • keywords: 一個幫助使用者找到樣板的關鍵字陣列。
  • viewportWidth: 一個整數,指定預覽中樣板的寬度。
  • blockTypes: 一個可選的、將與樣板一起使用的區塊型別陣列。
  • postTypes: 允許使用該樣板的文章型別的陣列。
  • templateTypes: 一個模板型別的陣列,該樣板在這裡是有意義的(從WordPress 6.2開始可用)。
  • inserter: 一個布林值,用於確定該樣板是否應該在區塊插入器中可見。將該值設定為 false 以隱藏該樣板。預設情況下,所有樣板都會出現在區塊插入器中。

下面是 register_block_pattern 的一個使用例子:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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' );
}
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' ); }
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 屬性,使該樣板僅適用於普通部落格文章。你也可以為 postTypes 設定一個不同的值,使其對不同的文章型別可用。如果你有一個 product 文章型別,並決定使該樣板只適用於該文章型別,你要寫:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
'postTypes' => array( 'product' ),
'postTypes' => array( 'product' ),
'postTypes' => array( 'product' ),

現在建立一個新的文章(或自定義文章型別),開啟區塊插入器,並點選樣板標籤。你應該發現一個新的樣板類別(My Pattern Category),其中有你的自定義區塊樣板。請自由發揮樣板屬性,以定製你的區塊樣板。

現在讓我們再深入一點,嘗試建立一個真實世界的區塊樣板。

一個現實世界中的區塊樣板的例子

假設你想建立一個包括標題、圖片、段落和按鈕的區塊樣板。

在編輯器中,為你的區塊樣板建立佈局,然後切換到程式碼編輯器並複製標記。

一個區塊佈局的例子

一個區塊佈局的例子

在我們的例子中,我們有以下程式碼:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!-- 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">專注於WordPress主題和外掛開發</h4>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>閃電博是國內一家優秀的原創主題和外掛開發商,同時提供實用的WordPress站長線上小工具及分享優質WordPress教學資源等。</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>檢視詳情</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- 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">專注於WordPress主題和外掛開發</h4> <!-- /wp:heading --> <!-- wp:paragraph --> <p>閃電博是國內一家優秀的原創主題和外掛開發商,同時提供實用的WordPress站長線上小工具及分享優質WordPress教學資源等。</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>檢視詳情</strong></a></div> <!-- /wp:button --></div> <!-- /wp:buttons -->
<!-- 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">專注於WordPress主題和外掛開發</h4>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>閃電博是國內一家優秀的原創主題和外掛開發商,同時提供實用的WordPress站長線上小工具及分享優質WordPress教學資源等。</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>檢視詳情</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

你現在可以優化這段程式碼。如果你是用一個外掛來註冊區塊樣板,你必須改變圖片的URL,如下:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
esc_url( plugin_dir_url( __FILE__ ) . 'images/placeholder.jpg' )
esc_url( plugin_dir_url( __FILE__ ) . 'images/placeholder.jpg' )
esc_url( plugin_dir_url( __FILE__ ) . 'images/placeholder.jpg' )

這樣,WordPress就不會在上傳檔案中尋找圖片,而是在你的外掛的影象資料夾中尋找。

然後你可以使用 viewportWidth 屬性,在區塊插入器中提供一個更好的樣板預覽:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
'viewportWidth' => 800,
'viewportWidth' => 800,
'viewportWidth' => 800,

在區塊插入器中為部落格文章新增自定義區塊樣板

在區塊插入器中為部落格文章新增自定義區塊樣板

你還可以包括一個關鍵詞陣列,以幫助使用者找到你的區塊樣板:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
'keywords' => array( 'cta', 'demo', 'wbolt' ),
'keywords' => array( 'cta', 'demo', 'wbolt' ),
'keywords' => array( 'cta', 'demo', 'wbolt' ),

新增關鍵詞以幫助使用者找到你的區塊樣板

新增關鍵詞以幫助使用者找到你的區塊樣板

另一個幫助使用者在搜尋中找到區塊的選項是新增區塊型別陣列:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
'blockTypes' => array( 'core/button' ),
'blockTypes' => array( 'core/button' ),
'blockTypes' => array( 'core/button' ),

這樣,當使用者搜尋指定的區塊之一時,該區塊樣板將出現在建議中。

postTypes 屬性允許你使區塊樣板只對特定的文章型別可用。例如,你可以讓該樣板只對 product 文章型別可見:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
'postTypes' => array( 'product' ),
'postTypes' => array( 'product' ),
'postTypes' => array( 'product' ),

最後,你可以給你的區塊樣板的封裝器新增一個CSS類

要做到這一點,你需要建立一個帶有 className 屬性的新組:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!-- wp:group {"className":"my-css-class","layout":{"type":"constrained"}} -->
<div class="wp-block-group my-css-class">
<!-- Your blocks -->
</div>
<!-- /wp:group -->
<!-- wp:group {"className":"my-css-class","layout":{"type":"constrained"}} --> <div class="wp-block-group my-css-class"> <!-- Your blocks --> </div> <!-- /wp:group -->
<!-- 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主題手冊中的區塊樣板

用一個檔案建立一個區塊樣板

如上所述,WordPress 6.0引入了一種新的、更容易的方法來向你的WordPress主題新增區塊樣板。現在你可以通過在主題根目錄下的/patterns資料夾中宣告它們為PHP檔案來隱式註冊區塊樣板。

假設你想在你的區塊主題中隱式註冊上一節中構建的相同的區塊樣板。在這個例子中,我們將使用Twenty Twenty-Three主題

你可以設定與上一方法相同的引數,但在檔案頭的註釋中包含這些引數。此外,你不使用camel字母大小寫的引數名,而是用空格隔開,你不使用陣列,而是使用逗號分隔的列表項。

首先,停用你在前面的例子中用來註冊樣板的外掛。然後建立一個新的my-block-pattern.php檔案,幷包括以下標題:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?php
/**
* Title: My awesome pattern
* Slug: twentytwentythree/my-block-pattern
* Post Types: post
* Categories: featured, banner
* Viewport Width: 800
* Keywords: Call to action, wbolt
* Block Types: core/buttons
*/
?>
<?php /** * Title: My awesome pattern * Slug: twentytwentythree/my-block-pattern * Post Types: post * Categories: featured, banner * Viewport Width: 800 * Keywords: Call to action, wbolt * Block Types: core/buttons */ ?>
<?php
/**
* Title: My awesome pattern
* Slug: twentytwentythree/my-block-pattern
* Post Types: post
* Categories: featured, banner
* Viewport Width: 800
* Keywords: Call to action, wbolt
* Block Types: core/buttons
*/
?>

接下來,你將把內容新增到你的區塊樣板中。你可以使用與我們之前的例子相同的標記,但首先,你需要對其進行一些修改:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!-- 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">專注於WordPress主題和外掛開發</h4>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>閃電博是國內一家優秀的原創主題和外掛開發商,同時提供實用的WordPress站長線上小工具及分享優質WordPress教學資源等。</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 __( '檢視詳情', 'text-domain' ); ?></strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- 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">專注於WordPress主題和外掛開發</h4> <!-- /wp:heading --> <!-- wp:paragraph --> <p>閃電博是國內一家優秀的原創主題和外掛開發商,同時提供實用的WordPress站長線上小工具及分享優質WordPress教學資源等。</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 __( '檢視詳情', 'text-domain' ); ?></strong></a></div> <!-- /wp:button --></div> <!-- /wp:buttons -->
<!-- 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">專注於WordPress主題和外掛開發</h4>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>閃電博是國內一家優秀的原創主題和外掛開發商,同時提供實用的WordPress站長線上小工具及分享優質WordPress教學資源等。</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 __( '檢視詳情', 'text-domain' ); ?></strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

該標記與之前的例子基本沒有變化。我們只做了兩個改動。

佔點陣圖片的URL現在由 get_theme_file_uri 函式生成:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>
<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>
<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>

當然,你首先應該把placeholder.jpg圖片放在你主題的/assets/images資料夾中。

下面的指令生成了你要翻譯的文字。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?php echo __( 'View plans', 'text-domain' ); ?>
<?php echo __( 'View plans', 'text-domain' ); ?>
<?php echo __( 'View plans', 'text-domain' ); ?>

現在儲存你的檔案並建立一個新的文章。你的區塊樣板應該出現在FeaturedBanners類別中。

✍️ 注意,你新增到樣板中的PHP程式碼只有在樣板被新增到你的內容中時才會執行。一旦放在文章中,區塊樣板的行為就像靜態區塊一樣。

刪除支援、取消註冊和隱藏區塊樣板

在某些情況下,你可能想對區塊樣板進行特殊操作。例如,你可能想用你自己的區塊樣板替換一個核心區塊樣板,或者在某些條件下取消註冊一個類別。下面是你可以執行的操作。

1. 移除對所有核心區塊樣板的支援

首先,主題開發者可以移除對核心區塊樣板的支援,並提供他們自己的一套樣板。要移除對核心樣板的支援,你可以這樣使用 remove_theme_support 函式:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
remove_theme_support( 'core-block-patterns' );
remove_theme_support( 'core-block-patterns' );
remove_theme_support( 'core-block-patterns' );

建議將 remove_theme_support 函式新增到 after_setup_theme 鉤子中。

2. 取消註冊單個區塊樣板

如果你想提供一個自定義的替代方案,或者你不希望它被用於你的主題,你也可以取消註冊一個特定的區塊樣板。

樣板API為此提供了 unregister_block_pattern 函式:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function my_theme_unregister_block_pattern() {
unregister_block_pattern( 'namespace/block-pattern-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );
function my_theme_unregister_block_pattern() { unregister_block_pattern( 'namespace/block-pattern-name' ); } add_action( 'init', 'my_theme_unregister_block_pattern' );
function my_theme_unregister_block_pattern() {
unregister_block_pattern( 'namespace/block-pattern-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );

如果你也能取消對核心區塊樣板的註冊,你將使用以下方法:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function my_theme_unregister_block_pattern() {
unregister_block_pattern( 'core/query-offset-posts' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );
function my_theme_unregister_block_pattern() { unregister_block_pattern( 'core/query-offset-posts' ); } add_action( 'init', 'my_theme_unregister_block_pattern' );
function my_theme_unregister_block_pattern() {
unregister_block_pattern( 'core/query-offset-posts' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );

你將在 init 鉤子中使用 unregister_block_pattern

3. 取消註冊一個區塊樣板類別

你也可以取消註冊一個樣板類別,把 unregister_block_pattern_category 函式掛到 init 鉤子上:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function my_theme_unregister_block_pattern_categories() {
unregister_block_pattern_category( 'pattern-category-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern_categories' );
function my_theme_unregister_block_pattern_categories() { unregister_block_pattern_category( 'pattern-category-name' ); } add_action( 'init', 'my_theme_unregister_block_pattern_categories' );
function my_theme_unregister_block_pattern_categories() {
unregister_block_pattern_category( 'pattern-category-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern_categories' );

用樣板建立器構建和分享區塊樣板

你還可以建立你的樣板,並通過一個免費的線上工具與社羣分享它們:樣板建立器

如果你有一個WordPress.org賬戶,你可以從樣板目錄中訪問樣板建立器。

WordPress.org樣板目錄

WordPress.org樣板目錄

一旦到了那裡,點選建立新樣板。這將啟動一個特定樣板版本的區塊編輯器,你可以用來建立你的區塊樣板。

樣板建立器是WordPress.org的一個免費線上編輯工具

樣板建立器是WordPress.org的一個免費線上編輯工具

你也可以使用由Openverse library託管的免費圖片。

樣板影象由Openverse提供

樣板影象由Openverse提供

一旦你對你的修改感到滿意,你可以儲存草稿或提交樣板進行復審。

通過樣板建立器構建樣板

通過樣板建立器構建樣板

然後你可以回到樣板目錄,選擇我的樣板。在那裡,你會在三個標籤中找到你的所有樣板: 全部、草稿和待審。

預覽樣板

預覽樣板

當你完成編輯後,你可以與社羣分享你的樣板。只需點選編輯器右上角的 “Submit” 按鈕,即可提交樣板進行修改(在提交圖案之前,請務必遵守樣板指南)。

小結

WordPress已經20歲了,統計數字告訴我們,它仍然是世界上使用最廣泛的CMS,截至2023年5月,市場份額為63.3%。

這些數字證明,WordPress是一個優秀的出版工具,被世界各地成千上萬的專業人士、開發人員和簡單的部落格使用。

投入時間和資源來獲得WordPress開發的新技能,並學習高階功能,如自定義區塊、可重用區塊和區塊樣板,可能是對你作為營銷人員、網頁設計師或出版商的職業生涯的一個很好的投資。

現在由你來決定。你已經建立了區塊樣板嗎?你是否與社羣分享過任何東西?我們很願意看到你的創作。請在評論中留下連結或你對區塊樣板的想法。

評論留言