ブロックパターンとは何ですか?
基本的に、ブロックパターンは、事前に設定された1つ以上のブロックに過ぎず、最終ユーザーに提示されます。これらは再利用可能なブロックのグループと考えてください。
それらは、ユーザーが投稿やページのコンテンツに挿入するための出発点として理想的ですが、テンプレート内で使用する際にも便利です。
ユーザーは、サイトエディターからテンプレートに直接挿入したり、投稿エディターからコンテンツに挿入したりできます:
再利用可能なブロックのグループのための類似機能であるテンプレートパーツと比較すると、パターンはPHPへのアクセスも提供します。これにより、テキストを国際化したり、画像を含むURLを動的に追加したりすることができます。
ユーザーは、管理画面の外観 > エディター > パターン画面からカスタムパターンを作成および管理することもできます。この画面を使用して、開発インストールで自分のパターンを管理することもできます:
ブロックパターンの操作
このセクションでは、カスタムブロックパターンを作成し、テーマに登録し、登録解除する方法を学びます。また、パターンを操作するための便利なヒントやトリック、その他の方法も学びます。
ブロックパターンの作成
ブロックパターンを作成する最も簡単な方法は、投稿エディターでいくつかのブロックを組み合わせることから始めることです。これはお好きなもので構いませんが、この記事の目的のために、以下に共有するコードは、いくつかのブロックがネストされたコアのカバーブロックの構造に従います:
- グループ
- 見出し
- 段落
- ボタン
- ボタン
特にブロックエディターの操作に慣れていない場合は、これを自分で再現してみてください。また、これをお好きなようにカスタマイズすることもできますが、初めてパターンを作成する際は、比較的シンプルに保つことをお勧めします。
作成が完了したら、ツールバーの⋮(オプション)アイコンをクリックし、コピーをクリックします:
これにより、作業に必要なコードが得られます。これは次のようになります:
<!-- wp:cover {"overlayColor":"contrast","align":"full"} -->
<div class="wp-block-cover alignfull"><span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"2.5rem"}},"layout":{"type":"constrained","wideSize":"%","contentSize":"75%"}} -->
<div class="wp-block-group"><!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">Welcome to My Site</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">This is my little home away from home. Here, you will get to know me. I'll share my likes, hobbies, and more. Every now and then, I'll even have something interesting to say in a blog post.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">See My Popular Posts →</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->
この記事の残りの部分では、この同じパターンを使用して、登録、登録解除、さらにカスタマイズする方法を学びます。
ほとんどのパターンをグループ、カバー、または他のコンテナブロック(すなわち、ネストされたブロックを許可するブロック)でラップすることは良い習慣です。これにより、テーマユーザーがエディター内でパターン全体を移動しやすくなります。また、パターン全体に適用されるカスタムスタイリングのために、この外部ブロックにCSSクラスを追加することもできます。
ブロックパターンの登録
WordPressでブロックパターンを登録する方法は2つあります:
- ブロックマークアップを含むファイルをテーマの
/patterns
フォルダーに配置すること。 register_block_pattern()
関数を手動で呼び出すこと。
最も簡単な方法は最初の方法です。次のセクションで両方の方法を学びますが、このハンドブックでは、いくつかの例外を除いて/patterns
フォルダーを使用することをお勧めします。
パターンを登録するための/patternsディレクトリの使用
WordPressは、テーマの/patterns
フォルダーに配置された任意のパターンファイルを認識し、有効なパターンファイルヘッダーがある限り、自動的に登録します。
ファイルヘッダーは、ファイルの先頭にキーと値のペアのリストを含むPHPコメントコードです。WordPressはこの情報を解析してメタデータを収集します。この場合、メタデータはブロックパターンを登録するために使用されます。
パターンファイルヘッダーでは、設定できるキーは次のとおりです:
Title
: 翻訳可能な人間が読めるタイトル。Slug
:namespace/pattern-name
の形式で、パターンに固有の名前空間付きスラッグ。Categories
: パターンが属するカテゴリのカンマ区切りリスト。Description
: 登録されたパターンの長い説明。スクリーンリーダーにのみ表示されます。Viewport Width
: パターンをプレビューする際の<iframe>
ビューポートの幅(ピクセル単位)。Inserter
: 挿入ツールにパターンを表示するかどうか。デフォルトはtrue
です。Keywords
: 検索用のパターンに関連するキーワードのカンマ区切りリスト。Block Types
: パターンに関連付けるブロックタイプのカンマ区切りリスト。Post Types
: パターンを制限する投稿タイプのカンマ区切りリスト。デフォルトはすべての投稿タイプです。Template Types
: パターンに適合するテンプレートタイプのカンマ区切りリスト。
ほとんどのパターンでは、少なくともTitle
、Slug
、Categories
フィールドを追加する必要があります。パターンファイルは次のようになります:
<?php
/**
* Title: Hero
* Slug: themeslug/hero
* Categories: featured
*/
?>
<!-- Pattern code goes here. -->
次に、前のセクションからコピーしたコードをテーマの/patterns/hero.php
ファイルに追加しましょう:
<?php
/**
* Title: Hero
* Slug: themeslug/hero
* Categories: featured
*/
?>
<!-- wp:cover {"overlayColor":"contrast","align":"full"} -->
<div class="wp-block-cover alignfull"><span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"2.5rem"}},"layout":{"type":"constrained","wideSize":"%","contentSize":"75%"}} -->
<div class="wp-block-group"><!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">Welcome to My Site</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">This is my little home away from home. Here, you will get to know me. I'll share my likes, hobbies, and more. Every now and then, I'll even have something interesting to say in a blog post.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">See My Popular Posts →</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->
今、WordPressで新しい投稿を追加または編集すると、挿入ツールにパターンが表示されるはずです。パターンタブをクリックし、フィーチャーを選択します:
また、WordPress管理画面の外観 > エディター > パターンの下にパターンが表示されるはずです。
PHPを使用してパターンを登録する
PHPでブロックパターンを登録するには、[`````register_block_pattern()`````](https://developer.wordpress.org/reference/functions/register_block_pattern/)関数を使用する必要があります。関数のシグネチャは次のようになります:
``````bash
register_block_pattern(
string $pattern_name,
array $pattern_properties
): bool
`
この関数は2つのパラメータを受け取り、パターンが正常に登録されたかどうかに応じてtrue
またはfalse
を返します:
$pattern_name
:namespace/pattern-name
の形式で、パターンに固有の名前空間付きスラッグ。$pattern_properties
:content
: パターンのブロックマークアップ。title
: 翻訳可能な人間が読めるタイトル。slug
:namespace/pattern-name
の形式で、パターンに固有の名前空間付きスラッグ。categories
: パターンが属するカテゴリの配列。description
: 登録されたパターンの長い説明。スクリーンリーダーにのみ表示されます。viewportWidth
: パターンをプレビューする際の<iframe>
ビューポートの幅(ピクセル単位)。inserter
: 挿入ツールにパターンを表示するかどうか。デフォルトはtrue
です。keywords
: 検索用のパターンに関連するキーワードの配列。blockTypes
: パターンに関連付けるブロックタイプの配列。postTypes
: パターンを制限する投稿タイプの配列。デフォルトはすべての投稿タイプです。source
: 登録されたパターンのソース。これは、パターンがテーマから来ているため、theme
に設定する必要があります。templateTypes
: パターンに適合するテンプレートタイプの配列。
PHPを介してパターンを登録する場合は、init
フックで行う必要があります。次に、functions.php
にこのコードを追加してカスタムパターンを登録してみてください(content
プロパティにカスタムマークアップを追加することを忘れないでください):
add_action( 'init', 'themeslug_register_patterns' );
function themeslug_register_patterns() {
register_block_pattern( 'themeslug/hero', array(
'title' => __( 'Hero', 'themeslug' ),
'categories' => array( 'featured' ),
'source' => 'theme',
'content' => '<!-- Block pattern goes here. -->'
) );
}
テンプレートにパターンを含める
テーマを構築する際、パターンはユーザーがコンテンツに追加できる再利用可能なブロックのセクションに過ぎません。それは素晴らしい機能ですが、パターンの真の力は、テーマのフロントエンド出力に直接使用することです。
パターンをテンプレートやテンプレートパーツに含めるには、パターンブロックのマークアップを追加し、パターンスラッグを渡します。
既存の「ヒーロー」パターンを呼び出すときのパターンブロックのマークアップは次のようになります:
<!-- wp:pattern {"slug":"themeslug/hero"} /-->
これは比較的簡単なはずです。必要なのは、パターンを登録したときのslug
の値を知っていることだけです。
次に、テーマのテンプレートの1つに追加してみてください。たとえば、/templates/home.html
や/templates/index.html
のヘッダーの下に追加します。パターンコードを含むテンプレートは次のようになります:
<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:pattern {"slug":"themeslug/hero"} /-->
<!-- Some other blocks. /-->
<!-- wp:template-part {"slug":"footer"} /-->
次に、外観 > エディター > テンプレートに移動し、追加したテンプレートを選択して、サイトエディターでパターンの追加をテストします:
ブロックパターンの登録解除
ユーザーに挿入ツールに表示されないようにブロックパターンを登録解除する必要がある場合があります。たとえば、コアのWordPressパターンや、親テーマによって追加されたパターン(子テーマを構築している場合)、またはサードパーティのプラグインによって追加されたパターンを削除したい場合があります。
単一のブロックパターンを登録解除する必要がある場合は、unregister_block_pattern()
関数を使用します:
unregister_block_pattern( string $pattern_name ): bool
パターンを登録する際と同様に、init
フックで登録解除することをお勧めします。パターンは一般的に(ただし常にではありません)init
で10
のデフォルト優先度で登録されるため、コードが後で実行されるようにするために、より高い優先度を使用する必要があります。
以前のカスタムパターンを登録解除するには、functions.php
ファイルにこのコードを追加してみてください:
add_action( 'init', 'themeslug_unregister_patterns', 999 );
function themeslug_unregister_patterns() {
unregister_block_pattern( 'themeslug/hero' );
}
コアパターンの削除
すべてのコアWordPressパターンを削除するには、テーマの`````functions.php`````ファイルにこのコードを追加します:
``````bash
add_action( 'after_setup_theme', 'themeslug_remove_core_patterns' );
function themeslug_remove_core_patterns() {
remove_theme_support( 'core-block-patterns' );
}
`
リモートパターンの無効化
WordPressは、WordPress.orgの公式パターンディレクトリからいくつかのパターンを自動的に読み込みます。これらのパターンがテーマデザインに合わない場合など、これらのパターンを読み込みたくない状況がいくつかあります。また、クライアントのために構築しているサイトでリモートAPIを呼び出すことを選択しない場合もあります。いずれにせよ、should_load_remote_block_patterns
フックをフィルタリングすることで、これを無効にできます。
リモートパターンを無効にするには、functions.php
ファイルにこのコードを追加します:
add_filter( 'should_load_remote_block_patterns', '__return_false' );
ヒントとトリック
以下に、ブロックパターンをWordPressテーマ開発の強力で柔軟な部分にするさまざまなヒント、トリック、およびその他の便利な機能を見つけることができます。
パターン内のテキストの国際化
ブロックパターンの主な使用ケースの1つは、テキストの国際化(翻訳の準備をすること)です。たとえば、テンプレートやテンプレートパーツにテキストがある場合、そのテキストを国際化する唯一の方法は、PHPに完全にアクセスできるパターンに移動することです。
パターンファイルは単なるPHPであるため、WordPress内の国際化関数を使用できます。以下の例では、esc_html_e()
を使用して、セキュリティのためにテキストをエスケープし、翻訳者の準備をします。
「ヒーロー」パターンの例を取り、見出し、段落、ボタンブロック内のカスタムテキストをesc_html_e()
関数でラップしてみてください。パターンファイルは次のようになります:
<?php
/**
* Title: Hero
* Slug: themeslug/hero
* Categories: featured
*/
?>
<!-- wp:cover {"overlayColor":"contrast","align":"full"} -->
<div class="wp-block-cover alignfull"><span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"2.5rem"}},"layout":{"type":"constrained","wideSize":"%","contentSize":"75%"}} -->
<div class="wp-block-group"><!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center"><?php esc_html_e( 'Welcome to My Site', 'themeslug' ) ?></h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"><?php esc_html_e( "This is my little home away from home. Here, you will get to know me. I'll share my likes, hobbies, and more. Every now and then, I'll even have something interesting to say in a blog post.", 'themeslug' ) ?></p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button"><?php esc_html_e( 'See My Popular Posts →', 'themeslug' ) ?></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->
画像やその他のアセットの使用
画像やその他のアセットの動的URLを追加することは、パターンのもう1つの重要な機能です。PHPアクセスがあるため、get_theme_file_uri()
のような関数を使用して、テーマにバンドルされた画像URLを出力できます。たとえば。
「ヒーロー」パターンのカバーブロックに画像の背景を追加してみてください。画像が必要な場合は、WordPressのフォトディレクトリから1つを取得してみてください(以下の例では、このNepal night scene photoを使用しています)。
画像をダウンロードして、テーマの/assets/images
フォルダー(またはお好きなフォルダー)に保存し、hero-background.jpg
という名前を付けます。
次に、エディターでパターンを開き、カバーブロックの背景として画像をアップロードします。次のようになります:
以前と同様に、パターンを構成するブロックをコピーします。パターンコード内に画像URLの2つのインスタンスがあることに気付くでしょう。それは次のようなハードコーディングされたURLになります:
http://localhost/wp/wp-content/uploads/2023/10/hero-background.jpg
これらのインスタンスの両方を変更して、テーマの/assets/images
フォルダーにある画像を指すようにする必要があります。これを行うには、次の2つのことを行う必要があります:
get_theme_file_uri()
のような関数を使用して正しいURLを取得します。esc_url()
を使用して、出力に安全なようにURLをエスケープします。
ハードコーディングされた画像URLを次のように変更します:
<?php echo esc_url( get_theme_file_uri( 'assets/images/hero-background.jpg' ) ) ?>
最終的なパターンコードは次のようになります(この例には、前のセクションで説明した国際化されたテキストが含まれています):
<?php
/**
* Title: Hero
* Slug: themeslug/hero
* Categories: featured
*/
?>
<!-- wp:cover {"url":"<?php echo esc_url( get_theme_file_uri( 'assets/images/hero-background.jpg' ) ) ?>","id":3838,"dimRatio":50,"overlayColor":"contrast","align":"full"} -->
<div class="wp-block-cover alignfull"><span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-3838" alt="" src="<?php echo esc_url( get_theme_file_uri( 'assets/images/hero-background.jpg' ) ) ?>" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"2.5rem"}},"layout":{"type":"constrained","wideSize":"%","contentSize":"75%"}} -->
<div class="wp-block-group"><!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center"><?php esc_html_e( 'Welcome to My Site', 'themeslug' ) ?></h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"><?php esc_html_e( "This is my little home away from home. Here, you will get to know me. I'll share my likes, hobbies, and more. Every now and then, I'll even have something interesting to say in a blog post.", 'themeslug' ) ?></p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button"><?php esc_html_e( 'See My Popular Posts →', 'themeslug' ) ?></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->
サードパーティブロックの条件付き読み込み
ユーザーのインストールに登録されている場合にのみブロックを使用したい場合があります。これは、プラグインに含まれるサードパーティブロックに特に当てはまります。
WordPressは、ブロックマークアップを追加し、インストールされていない場合はユーザーにブロックのインストールを促します。これにより、壊れたウェブサイトにはならないため、このセクションで説明する方法を使用しないことは問題ありません。
ただし、登録されていないブロックを隠したい場合(または代替を使用したい場合)、WP_Block_Type_Registry::is_registered()
メソッドを介してブロックが登録されているかどうかを条件付きで確認できます。
この例のコードは、core/paragraph
ブロックを確認する方法を示しています。登録されている場合は、ブロックマークアップを出力します:
<?php if ( WP_Block_Type_Registry::get_instance()->is_registered( 'core/paragraph' ) ) : ?>
<!-- Add your block markup here. -->
<?php endif ?>
以前のカスタム「ヒーローブロック」にこの方法を適用して、段落ブロックをこの条件付きチェックでラップしてみてください。パターンコードは次のようになります:
<?php
/**
* Title: Hero
* Slug: themeslug/hero
* Categories: featured
*/
?>
<!-- wp:cover {"url":"<?php echo esc_url( get_theme_file_uri( 'assets/images/hero-background.jpg' ) ) ?>","id":3838,"dimRatio":50,"overlayColor":"contrast","align":"full"} -->
<div class="wp-block-cover alignfull"><span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-3838" alt="" src="<?php echo esc_url( get_theme_file_uri( 'assets/images/hero-background.jpg' ) ) ?>" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"2.5rem"}},"layout":{"type":"constrained","wideSize":"%","contentSize":"75%"}} -->
<div class="wp-block-group"><!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center"><?php esc_html_e( 'Welcome to My Site', 'themeslug' ) ?></h2>
<!-- /wp:heading -->
<?php if ( WP_Block_Type_Registry::get_instance()->is_registered( 'core/paragraph' ) ) : ?>
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"><?php esc_html_e( "This is my little home away from home. Here, you will get to know me. I'll share my likes, hobbies, and more. Every now and then, I'll even have something interesting to say in a blog post.", 'themeslug' ) ?></p>
<!-- /wp:paragraph -->
<?php endif ?>
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button"><?php esc_html_e( 'See My Popular Posts →', 'themeslug' ) ?></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->
もちろん、段落ブロックはコアのWordPressによって登録されており、登録解除されていないと仮定すると、エディターとフロントエンドに段落ブロックが表示されるはずです。この主な使用ケースは、サードパーティブロックを条件付きで確認することです。
条件付きでパターンを登録する
特定の部分を条件付きで出力するのではなく、全体のパターンを条件付きで登録する必要がある場合(前のセクションで示したように)、パターンを登録する方法に応じて選択できる2つの方法があります。
/patternsフォルダーでの条件付きパターン登録
テーマの/patterns
フォルダーにパターンを配置する自動登録方法を使用している場合、条件付きで登録する真の方法はありません。この場合、パターンを登録解除する必要があります。
たとえば、core/paragraph
ブロックが登録されている場合にのみ、以前に登録したヒーローパターンを利用可能にしたいとします。実際のシナリオでは、サードパーティブロックを確認することが多く、core/paragraph
ブロックはこの例のためだけに使用されます。
``````bash
add_action( 'init', 'themeslug_unregister_patterns', 999 );
function themeslug_unregister_patterns() {
if ( WP_Block_Type_Registry::get_instance()->is_registered( 'core/paragraph' ) ) {
unregister_block_pattern( 'themeslug/hero' );
}
}
`
register_block_pattern()を介して条件付きでパターンを登録する
PHPを介して手動でパターンを登録した場合、条件付きチェックでregister_block_pattern()
の呼び出しをラップするだけで済みます。
上記の例を使用して、core/paragraph
ブロックが登録されている場合にのみパターンを登録するように、functions.php
にこれを追加してみてください:
add_action( 'init', 'themeslug_register_patterns', 999 );
function themeslug_register_patterns() {
if ( WP_Block_Type_Registry::get_instance()->is_registered( 'core/paragraph' ) ) {
register_block_pattern( 'themeslug/hero', array(
'title' => __( 'Hero', 'themeslug' ),
'categories' => array( 'featured' ),
'source' => 'theme',
'content' => '<!-- Block pattern goes here. -->'
) );
}
}
パターンカテゴリ
WordPressには、デフォルトで登録されるいくつかのブロックパターンカテゴリがあります:
featured
about
audio
(WordPress 6.4で追加)banner
buttons
call-to-action
columns
contact
footer
gallery
header
media
portfolio
posts
query
(posts
を使用)services
team
testimonials
text
video
(WordPress 6.4で追加)
一般的には、テーマにこれらのデフォルトカテゴリを使用するのが最善です。これにより、ユーザーが慣れ親しんだ一貫したUIが維持されます。しかし、独自のカテゴリを追加したり、すでに登録されているカテゴリを削除したりしたい場合もあります。
この記事のこのセクションでは、カスタムブロックパターンカテゴリを登録および登録解除する方法を学びます。
パターンカテゴリの登録
1つ以上のパターンを配置するためのカスタムカテゴリを登録するには、register_block_pattern_category()
関数を使用する必要があります:
register_block_pattern_category(
string $category_name,
array $category_properties
): bool
この関数は2つのパラメータを受け取ります:
$category_name
: カテゴリの一意のID/スラッグ。これをテーマスラッグでプレフィックスするのが良い習慣です。$category_properties
: カテゴリに関するさらなるデータを定義するためのプロパティの配列:label
: 翻訳可能なカテゴリの人間が読めるラベル/タイトル。description
: 翻訳可能なカテゴリの説明。
テーマの新しいカスタムパターンカテゴリを追加してみてください。このコードをテーマのfunctions.php
ファイルに追加します:
add_action( 'init', 'themeslug_register_pattern_categories' );
function themeslug_register_pattern_categories() {
register_block_pattern_category( 'themeslug/custom', array(
'label' => __( 'Theme Name: Custom', 'themeslug' ),
'description' => __( 'Custom patterns for Theme Name.', 'themeslug' )
) );
}
次に、themeslug/custom
カテゴリを任意のブロックパターンに追加してみてください:
<?php
/**
* Title: Hero
* Slug: themeslug/hero
* Categories: featured, themeslug/custom
*/
?>
<!-- Your block markup goes here. -->
このカテゴリに登録されたパターンは、挿入ツールおよび外観 > エディター > パターンの下に表示されるようになります:
パターンカテゴリの登録解除
登録されたパターンカテゴリを登録解除するには、unregister_block_pattern_category()
関数を使用する必要があります:
unregister_block_pattern_category( string $category_name ): bool
この関数は1つのパラメータを受け取ります:
$category_name
: 登録解除するカテゴリの名前(すなわち、スラッグ)。
前のステップで登録したthemeslug/custom
カテゴリを削除するには、このコードをfunctions.php
に追加してみてください:
add_action( 'init', 'themeslug_unregister_pattern_categories' );function themeslug_unregister_pattern_categories() { unregister_block_pattern_category( 'themeslug/custom' );}