WordPressでブロックパターンを構築する方法

WordPressは、誰でも簡単にテキストやマルチメディアのコンテンツを作成し、共有することができる強力なオンラインパブリッシングツールです。それどころか、デザイナー、マーケティング担当者、開発者に便利な万能ツールとすら言えるでしょう。

つまり、WordPressは有能な仕事仲間として、さまざまな職業での成功を後押ししてくれます。

このような背景から、Kinstaでは、WordPress開発者におすすめのスキル習得のコツを各種記事でご紹介しています。

• Gutenbergカスタムブロックを構築する方法
• Gutenbergの動的なブロックを作成する方法
• Gutenbergで投稿にメタボックスとカスタムフィールドを追加する方法

また、Gutenbergカスタムブロックについての動画もご用意しています。

そして、たしかにGutenbergの開発スキルでキャリアアップを目指すことはできますが、WordPressサイトで高度なレイアウトを作成するのに、必ずしも開発者である必要はありません。

WordPressを使って、手間をかけずに高度なブロックレイアウトを簡単に作成することができます。今回の記事では、ブロックパターンに焦点を当てたいと思います。

ブロックパターン vs 再利用ブロック vs テンプレートパーツ

ブロックパターンは、WordPress 5.5で導入されたもので、数回クリックするだけで、すぐに使える複雑な入れ子構造のブロックをコンテンツに追加できます。

WordPressには、コンテンツを作成する際に選択できるように、いくつかのブロックパターンが組み込まれています。また、ブロックテーマには通常、そのまま使えるブロックパターンがいくつも付帯するものです。

例えば、現在のデフォルトテーマであるTwenty Twenty-Threeには、以下のブロックパターンがあります。

• コールトゥアクション
• デフォルトのフッター
• 非表示404
• 非表示コメント
• 検索結果なしの非表示コンテンツ
• 投稿メタ

また、WordPressのテーマに限定されず、パターンディレクトリにはすぐに使えるブロックパターンが大量に用意されています。

とはいえ、WordPressサイトでブロックレイアウトを作成する際には、ブロックパターン以外にもいくつか方法があります。新しいGutenbergブロックエディターには、再利用ブロックやテンプレートパーツなど、コンテンツのレイアウトを作成する機能が追加されています。これらの機能には、どのような違いがあるのでしょうか。また、どのように使い分けをすべきしょうか。さっそく見ていきましょう。

ブロックパターン

ブロックパターンは、ブロックのグループを定義することのできる機能です。これをコンテンツに追加して、対象のブロックと同じ機能を使ってカスタマイズできます。ブロックパターンに加えた変更は、編集中の特定のインスタンスにのみ影響し、ウェブサイトの他の投稿や固定ページに追加した他のインスタンスには適用されません。

ブロックパターンを使用すると、構築済みのレイアウトを追加して、画像、テキスト、スタイルの変更、要素の追加/削除など、その場で細かなカスタマイズを施せます。

ブロックパターンは再利用可能なので、一度ブロックパターンを作成すれば、ウェブサイト上のどこにでも配置できます。さらに、エディターから数回クリックするだけでカスタマイズ可能です。

ブロックパターンは、エディター内新規ブロック追加の「パターン」タブで閲覧・挿入できます。また、「すべてのパターンを表示」ボタンをクリックすると表示される画面から、パターンディレクトリを確認することもできます。

「パターン」タブにある大量のパターンから選択することも、エディターの新規ブロック追加画面から直接「ブロックパターンライブラリ」を確認することもできます。また、ブロックパターンの紹介ページからパターンを選択し、「Copy」をクリックすることでも使用できます。

パターンをコピーしたら、それをコンテンツに貼り付けて完了です。

これで、登録したパターンやウェブサイト上の他のインスタンスに影響を与えることなく、パターンの中身をカスタマイズできます。

再利用ブロック

再利用ブロックは、サイトの投稿や固定ページで使いまわすことのできるブロックまたはそのグループです。再利用ブロックは、他のウェブサイトにエクスポートすることもできます。

再利用ブロックは、ウェブサイトの複数ページや複数サイトで使用する要素を構築するのに便利です。コールトゥアクション、キャンペーンのバナー、価格表などが挙げられます。

以下の例では、カラム、画像、段落、ボタンから再利用ブロックを作成しています。

再利用ブロックを作成したら、新規ブロック追加ボタンからウェブサイトのどのページにも追加することができます。

WordPressでは、再利用ブロックはwp_block投稿タイプとみなされ、wp_postsテーブルに保存されます。

再利用ブロックを作成したら、「再利用ブロック」管理画面からそのブロックを管理することができます。この画面を開く方法は複数あります。

• ウェブサイトのWordPress URLに「/wp-admin/edit.php?post_type=wp_block」を付したものを検索
• ブロック新規追加画面から「再利用ブロックを管理」ボタンをクリック
• ブロック設定のドロップダウンメニューで「再利用ブロックを管理」をクリック

この画面では、次のことができます。

• ブロックの編集、削除、またはJSONとしてエクスポート
• JSONから再利用ブロックをインポート
• 新しい再利用ブロックを作成

再利用ブロックの変更内容は、変更が行われた管理ページに関係なく、ウェブサイト全体のそのブロックのすべてに適用されます。

再利用ブロックを頻繁に使用する場合は、J. B. Audras氏によるこちらの素晴らしいプラグインのご利用をおすすめします。

テンプレートパーツ

Gutenberg以前は、WordPressのテーマやテンプレートは主にPHPで作られていました。子テーマ、テンプレート階層、主要なフロントエンド開発言語に関する確かな知識が、テンプレートを作成したりカスタマイズしたりする最低条件でした。しかし、ブロックテーマの登場により状況は一変しました。

ブロックテーマとこの機能を選択したクラシックテーマでは、サイトエディターのインターフェースで簡単にテンプレートやテンプレートパーツを作成、カスタマイズできます。テーマ開発者になることを決めない限り、特別な開発スキルは必要ありません。

ブロックテンプレートは、ブロックアイテムの一覧と言い換えることができます。ブロックアイテムの例としては、サイトタイトル、ロゴ、ナビゲーションなどがあります。

テンプレートパーツは、ヘッダーやフッターなど、複数箇所で確認できるページの特定の要素であり、WordPressサイトのすべてのページで表示することができます。

テンプレートパーツの作成と編集は、サイトエディターのインターフェースから、ブロックに使用できるすべての編集機能を使って行うことができます。

しかし、ブロックパターンや再利用ブロックとは異なり、テンプレートパーツは、サイトの中で頻繁に変更されない領域を対象としています。

ブロックパターン、再利用ブロック、テンプレートパーツの違い

まとめると、この3つの主な違いは以下の通りです。

ブロックパターン

• ブロックパターンは、定義済みのブロックレイアウトで、コンテンツに追加して、対象となるブロックと同じ機能を使ってカスタマイズできます。ブロックパターンに加えた変更は、そのブロックパターンの1つのインスタンスにのみ影響します。
• ブロックパターンは、パターンディレクトリからコピー＆ペースト可能です。
• 新しいパターンを作成し、パターンディレクトリに公開することができます。

再利用ブロック

• 再利用ブロックは、ウェブサイトのどの記事またはページでも使用できるブロックのグループです。再利用ブロックに加えられたすべての変更は、変更が行われた管理ページに関係なく、ウェブサイト全体のそのブロックに適用されます。
• 再利用ブロックは、wp_postsテーブルにwp_block投稿タイプとして保存されます。
• 再利用ブロックは、他のウェブサイトからインポートしたり、他のウェブサイトへエクスポートしたりすることができます。

テンプレートパーツ

• テンプレートパーツは、ヘッダー、フッター、サイドバーなどの複数の場所に表示できる特定の領域で、WordPressサイトの複数ページに繰り返し表示できます。
• テンプレートパーツの作成と編集は、サイトエディターのインターフェースを使って行うことができます。
• テンプレートパーツは、サイトの中で頻繁に変更されない領域を対象とします。

ブロックパターンを作成する方法

WordPress 5.5では、ブロックパターンとともに、開発者向けに「投稿、ページ、カスタム投稿タイプ、テンプレートに簡単に挿入できる、デザイン済みのコンテンツブロックを作成する」ためのAPIが導入されました。このAPIでは、ブロックパターンとパターンカテゴリーを登録する関数として、register_block_patternとregister_block_pattern_categoryが用意されています。

WordPress 6.0からは、PHPファイルでブロックパターンを登録することもできるようになりました。

つまり、この記事を書いている時点では、ブロックパターンを作成する方法は2つあることになります。

• register_block_patternヘルパー関数を使う
• テーマ内のpatternsフォルダ内にPHPファイルを追加する

プラグインでブロックパターンを作成する

最初の方法は、主にWordPress開発者向けの方法ですが、上級者でない開発者でも使えるほど簡単です。

最初の方法を採用した場合、2つの新しい関数register_block_patternとregister_block_pattern_categoryを使用して、プラグインのPHPファイルまたはfunction.phpでブロックパターンを作成することができます。

パターンカテゴリーの選択・登録

まず、パターンのカテゴリーを選択します。WordPress 6.2では、新しいパターンカテゴリーが追加され、既存のカテゴリーも一部変更されました。この記事を書いている時点では、以下のビルトインカテゴリーを使用することができます。

• 特集（featured）
• 投稿（posts）
• テキスト（text）
• ギャラリー（gallery）
• コールトゥアクション（call-to-action）
• バナー（banner）
• ヘッダー（header）
• フッター（footer）
• チーム（team）
• お客様の声（testimonials）
• サービス紹介（services）
• ポートフォリオ（portfolio）
• メディア（media）

ブロックパターンがデフォルトのカテゴリーのいずれにも該当しない場合は、register_block_pattern_category を使って新しいカテゴリーを登録することも可能です。

この関数は、2つの引数を受け取ります。

• $category_name：名前空間を含むパターンカテゴリー名
• $category_properties：カテゴリープロパティの配列

新規にパターンカテゴリーを登録する例が以下の通りです。

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ヘルパーを使って、次のように行います。

function my_plugin_register_block_pattern() {
	register_block_pattern( 'prefix/pattern-name', $props );
}
add_action( 'init', 'my_plugin_register_block_pattern' );

この関数は2つの引数をとります。

• $pattern_name：（namespace/pattern-nameのような形式の）機械での読み取りが可能な名前
• $pattern_properties：パターンのプロパティの配列

現在利用可能なパターンプロパティは以下の通りです。

• title (必須)：人間にとって読みやすいパターンのタイトル
• content (必須)：パターンのHTMLマークアップ
• description：パターンを説明するテキスト（説明文は任意ですが、ユーザーによるパターン発見を助けるため推奨されます）
• categories：1つまたは複数のパターンカテゴリー（ここで使用する前に、カテゴリーを登録しておく必要があります ※前のセクションを参照）
• keywords：ユーザーによるパターン発見を助けるキーワード
• viewportWidth：プレビューでのパターンの幅を指定する整数値
• blockTypes：パターンで使用されるブロックタイプ（任意）
• postTypes：パターンの使用を許可する投稿タイプ
• templateTypes：パターンが意味を持つテンプレートタイプ（WordPress 6.2以降で使用可能）
• inserter：ブロック追加画面でパターンを表示するかどうかを決定するブール値（値をfalseに設定すると、パターンが非表示になります。デフォルトでは、すべてのパターンが追加画面で表示されます）

以下は、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という投稿タイプがあり、その投稿タイプでのみパターンを利用できるようにしたいのであれば、次のように書きます。

'postTypes' => array( 'product' ),

新しい投稿（またはカスタム投稿タイプ）を作成し、ブロック追加画面を開いて、「パターン」タブをクリックします。新しいパターンカテゴリー（「My Pattern Category」）に、カスタムブロックパターンが表示されているはずです。ブロックパターンをカスタマイズするために、パターンのプロパティを自由に操作してください。

では、もう少し深堀りして、実際にブロックパターンを作ってみましょう。

ブロックパターンの作成例

例えば、見出し、画像、段落、ボタンを含むブロックパターンを作りたいとします。

エディターでブロックパターンのレイアウトを作成し、コードエディターに切り替えてマークアップをコピーします。

この例では、次のようなコードになっています。

<!-- 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 -->

このコードを最適化することができます。ブロックパターンをプラグインで登録している場合は、画像URLを以下のように変更する必要があります。

esc_url( plugin_dir_url( __FILE__ ) . 'images/placeholder.jpg' )

こうすることで、WordPressは「uploads」の画像ではなく、プラグインの「images」フォルダにある画像を参照するようになります。

そして、viewportWidthプロパティを使用して、ブロック追加画面でのパターンのプレビューを調整することができます。

'viewportWidth' => 800,

また、ユーザーがブロックパターンを簡単に見つけられるように、キーワードを配列で指定することができます。

'keywords' => array( 'cta', 'demo', 'kinsta' ),

検索でブロックを見つけやすくするために、ブロックの種類を追加することもできます。

'blockTypes' => array( 'core/button' ),

こうすることで、ユーザーが指定したブロックのいずれかを検索したときに、ブロックパターンが候補に表示されます。

postTypesプロパティでは、ブロックパターンを特定の投稿タイプでのみ利用できるようにすることができます。例えば、productの投稿タイプに対してのみ、このパターンを表示させるには以下のように記述します。

'postTypes' => array( 'product' ),

最後に、ブロックパターンのラッパーにCSSクラスを追加することができます。

これを行うには、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のTheme Handbookの ブロックパターンも参照してください。

ファイルでブロックパターンを作成する

WordPress 6.0では、WordPressテーマにブロックパターンを追加する別の方法が導入されています。テーマのルートにある/patternsフォルダ下にPHPファイルで宣言することで、ブロックパターンを登録することができるようになりました。

前項で構築したブロックパターンと同じものをテーマに登録したいとします。この例では、テーマにTwenty Twenty-Threeを使用します。

前の方法と同じようにパラメータを設定しますが、ファイルヘッダのコメントに記述します。また、パラメータ名をキャメルケースで表記するのではなく、単語をスペースで区切り、配列の代わりにカンマ区切りのリストを使用します。

まず、前の例でパターンの登録に使用したプラグインを停止します。次に、新しくmy-block-pattern.phpファイルを作成し、以下のヘッダを貼り付けます。

<?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
 */
?>

次に、ブロックパターンのコンテンツを追加します。前の例と同じマークアップを使うことができますが、少しだけ変更する必要があります。

<!-- 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 -->

マークアップは、基本的に前の例と変わりません。変更したのは2つだけです。

プレースホルダー画像URLは、get_theme_file_uri関数で生成されています。

<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>

もちろん、最初にplaceholder.jpgの画像をテーマの/assets/imagesフォルダに配置しておく必要があります。

次のコードで、出力したいテキストを指定しています。

<?php echo __( 'View plans', 'text-domain' ); ?>

ファイルを保存して、新しい投稿を作成してみてください。作成したブロックパターンが、「featured」と「banner」カテゴリーに表示されます。

ブロックパターンのサポート解除、登録解除、非表示

状況によっては、ブロックパターンに対して特別な操作を実行したいことがあるかもしれません。例えば、コアブロックパターンを独自のブロックパターンに置き換えたり、特定の条件下でカテゴリーの登録を解除したり。実行可能な操作をご紹介します。

1. すべてのコアブロックパターンのサポートを解除する

テーマ開発の一環として、コアブロックパターンのサポートを削除し、独自のパターンを指定することができます。コアパターンのサポートを解除するには、remove_theme_support関数を以下のように使用します。

remove_theme_support( 'core-block-patterns' );

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' );

コアブロックパターンの登録を解除するには、以下のようにします。

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関数をinitにフックします。

function my_theme_unregister_block_pattern_categories() {
	unregister_block_pattern_category( 'pattern-category-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern_categories' );

パターン作成ツールでブロックパターンを作成・共有する

無料のオンラインツール「Pattern Creator」を使って、パターンを作成し、コミュニティと共有することもできます。

WordPress.orgのアカウントをお持ちの方は、ディレクトリからPattern Creatorにアクセスすることができます。

そこで「Create new pattern」をクリックします。これにより、ブロックパターンを作成するための画面が起動します。

また、Openverseライブラリでホストされている無料の画像も使用できます。

作成できたら、下書きを保存するか、パターンを送信することができます。

次に、ディレクトリに戻りMy patternsを選択すると、すべてのパターンが「All」「Drafts」「Pending Review」の3つのタブで表示されます。

編集が終わったら、パターンをコミュニティと共有することができます。エディターの右上にある「Submit」ボタンをクリックするだけで、パターンを提出可能です（パターンを送信する前に、必ずパターンのガイドラインに従っていることを確認してください）。

まとめ

WordPressは20周年を迎えました。統計によると、2023年5月の時点で63.3%の市場シェアを持ち、依然として世界で最も広く使われているCMSです。

これらの数字は、WordPressが世界中の何千人もの技術者、開発者、ブロガーに使用されている優れたコンテンツ管理ツールであることを証明しています。

WordPress開発の新しいスキルを身につけ、カスタムブロック、再利用ブロック、ブロックパターンなどの高度な機能の学習に時間とリソースを割くことは、マーケター、ウェブデザイナー、出版社のスタッフとして働く方々のキャリアを支えるはずです。

ブロックパターンを作成したことはありますか？また、コミュニティで共有したことはありますか？ブロックパターンに関するお考えとあわせて、是非ご紹介ください。