検索キーワードを入力
カテゴリーを選択

初心者必見!WordPressのブロックパターンを自作する方法を徹底解説(サンプルコード付き)

投稿日:2025年02月02日(日)
初心者必見!WordPressのブロックパターンを自作する方法を徹底解説(サンプルコード付き)|UMENOKI|すぐに仕事で使えるIT技術情報メディア

みなさんこんにちは!エンジニアの高澤です!

今回はWordPressのブロックパターンを自作する方法について解説していきたいと思います。

ブロックパターンを自作することができれば、サイト運営者がプログラム知識なしで簡単にサイト上に表示するためのCTA(お問い合わせ導線等)を設定できたり、その設定したCTAに対して、背景色やボタンの大きさや色、余白などをクリック操作だけで簡単に編集することが可能になります。

パターンにはWordPress公式でパターンディレクトリというページがあり、気に入ったパターンがあったらコードをコピーするボタンをクリックしてエディタに貼り付けるだけですぐに利用することが可能です。

このように何かと便利でメリットもたくさんあるので、オリジナルのパターンの実装方法について知っていただくとともに操作方法やメリットなどについても解説していけたらと思います。

お仕事でもパターンを作って欲しいなどのクライアントの要望だったり、もっとエディタを便利にしたいなどといった場合に当記事はお役立ていただけるかと思いますので、よろしければぜひ当記事をご活用いただけましたら幸いです。

目次

ブロックパターンとは

ブロックパターン(パターン)とは、頻繁に使用するブロックの配置やデザインをテンプレート化して再利用できる機能のことをいいます。WordPress 5.5以降に導入されました。

設定方法としては、下図のように投稿画面のブロックエディタ画面左のインサーターにある「パターン」というタブをクリックすると、パターンのカテゴリーが一覧で表示されており、いずれか選択してパターンを選択すると、クリック操作だけで簡単にエディタ上にパターンを設置することが可能です。

パターンは細かい編集も可能です。

下図のように、設置したパターンを選択することで画面右側の設定パネルに編集用のUIが表示され、パターン上にある文字や背景、画像などを編集することが可能です。

このようにパターンを活用することで、ページ作成の手間を省くことができ、統一感のあるデザインを簡単に実現できます。

このブロックパターンには、WordPress公式でパターンディレクトリというページが公開されており、あらかじめに非常に多くのパターンが用意されており、パターンを構成するコードをコピー&ペーストするだけで簡単にエディタに設定することが可能です。

このパターンディレクトリは2025年2月時点で1,700点ほどのパターンが配布されておりますが、ご自身で作成したパターンはこのパターンディレクトリに公開配布することができます。

パターンについての概要はこんな感じですが、以下にWordPress公式のページを掲載しておきますので、この時点でもっと詳しく知りたいという方はご活用ください。

ブロックパターンの使い方などについて知りたい方は以下のページをご確認ください。

また、ブロックパターンディレクトリについて知りたい方は以下のページをご確認ください。

ブロックエディタとは

そもそもブロックエディタとは?という方向けに、基本中の基本ですのでここで解説しておきたいと思います。

ブロックエディタ(Gutenberg)は、WordPress 5.0以降で導入された新しいコンテンツ編集機能のことを言います。

これにより、ユーザーは「ブロック」と呼ばれる単位でコンテンツを作成できます。テキスト、画像、動画、ボタンなど、各要素が独立したブロックとして管理され、直感的に操作できるため、コーディングの知識がなくても美しいページを作成できます。

従来のクラシックエディタと異なり、ブロックエディタではコンテンツの配置やデザインを視覚的に編集可能です。

さらに、カスタムブロック(自作のブロック)やブロックパターンを使うことで、個別のデザインやレイアウトを簡単に作成できます。これにより、レスポンシブ対応や効率的なコンテンツ作成が可能となり、Webサイトの制作がより便利で自由になります。

ブロックエディタは、初心者から上級者まで幅広いユーザーに使いやすい設計がされており、WordPressの利用をさらに強化しています。

このブロックエディタについて詳しく知りたいという方は、以下のWordPress公式のページをご確認ください。

ブロックパターン・同期パターン・テンプレートパーツの違い

WordPressでは、ブロックでレイアウトを作成する方法は大きく以下の3つあります。

  • ブロックパターン
  • 同期パターン(旧:再利用ブロック)
  • テンプレートパーツ

それぞれざっくり似たような機能ではありますが異なる機能であるため、混乱しないようにここでしっかりそれぞれの特徴などについて理解しておきましょう。

ブロックパターン

ブロックパターンは、あらかじめデザインされたブロックの集合体で、ユーザーが簡単に複雑なレイアウトを作成できる機能です。

例えば、見出し、テキスト、画像、ボタンなどを組み合わせたパターンを選択するだけで、デザインされた構造が自動的にページに挿入されます。

これにより、コーディングやデザインに関する知識がなくても、プロフェッショナルなレイアウトを作成することが可能です。

また、ブロックパターンはテーマやプラグインによって提供されることもあり、ユーザーはこれらを活用することで、時間を節約しつつ魅力的なコンテンツを作成できます。

同期パターン(旧:再利用ブロック)

同期パターン(旧:再利用ブロック)とは、個別に作成したブロックを組み合わせたりなどして保存して、後で他の投稿やページに挿入できる機能のことをいいます。

この機能の特徴的な部分は、「同期パターンを編集すると、その変更はすべてのインスタンスに反映される」という点です。

これにより、サイト全体で一貫性を保ちながら、頻繁に使う要素(例えば、特定のCTAボタンやフッターの内容)を一度作成し、どこでも使用することができます。

たとえば、同期パターンとして保存したCTAボタンのデザインやテキストを編集すると、そのボタンを使用しているすべてのページに変更が自動で反映されます。

これにより、サイト全体の更新が一度の編集で完了し、効率的な管理が可能になります。この「一元管理できる更新性」は、同期パターンの大きな強みです。

テンプレートパーツ

テンプレートパーツは、WordPressテーマの中で繰り返し使用される部分的なテンプレートを意味します。

例えば、ヘッダーやフッター、サイドバーなどの共通部分として切り出して、再利用することができます。テンプレートパーツは下図のようにPHPファイルとして管理され、テーマ内の任意の場所でインクルードされます。

そのため、デザインの一貫性を保ちながら、変更を一箇所で行うことでサイト全体に反映させることができます。

再利用ブロックと似ている部分もありますが、テンプレートパーツは主にテーマレベルで使用され、サイト全体のレイアウトや構造に関わる部分に対して使用されるのが特徴です。

再利用ブロックがページ単位で使えるのに対し、テンプレートパーツはサイト全体で共通する要素を管理するために使用されます。

ブロックパターンを自作するメリット

ブロックパターンを自作するメリットについて解説いたします。

ブロックパターンを本当に実装すべきか検討する際や、クライアントなどからどんなメリットがあるのかを回答したり提案したりする際の材料になるかと思いますので、ここで確認しておきましょう。

メリットとしては、以下があるかと思います。

  • プログラム知識なしで簡単に表示を制御できる
  • ページのデザインを簡単に編集できる
  • ブロックパターンを公式ディレクトリに公開できる

それぞれ解説いたします。

プログラム知識なしで簡単に表示を制御できる

ブロックパターンの最大のメリットの一つは、プログラム知識がなくても簡単に表示やレイアウトを制御できる点です。

WordPressのブロックエディタを使えば、あらかじめ用意されたパターンをドラッグ&ドロップで配置し、直感的に操作できます。
これにより、コードを書く必要がなく、専門的なスキルがなくてもプロフェッショナルなデザインを実現可能です。

また、個別のブロックの色やサイズ、配置を調整することで、柔軟かつ独自性のあるページを作成できます。このシンプルさが、初心者や非エンジニアにもWordPressを使いやすくしているポイントです。

ページのデザインを簡単に編集できる

ブロックパターンはページデザインの効率化に大きく寄与します。

一度挿入したパターンは、その場で自由に編集が可能です。例えば、テキストや画像を差し替えるだけで、ページ全体のデザインを瞬時に変更できます。

これにより、時間をかけずに頻繁な更新や修正が求められるサイト運営にも対応できます。さらに、複数のページに同じブロックパターンを適用しておけば、統一感のあるデザインが保たれるだけでなく、修正の手間も大幅に削減できます。

カスタマイズ性の高さと手軽さが、編集作業をよりスムーズにしてくれるのがブロックパターンの魅力です。

ブロックパターンを公式ディレクトリに公開できる

自作のブロックパターンをWordPress公式のパターンディレクトリに公開できることも、大きなメリットです。

自分の作成したデザインを他のユーザーと共有することで、多くの人に役立つツールを提供できます。また、公開したパターンが利用されることで、フィードバックやアイデアを得る機会も広がります。

これにより、スキルの向上やブランドの認知度向上にもつながります。さらに、他の開発者やデザイナーとの交流を深めるきっかけにもでき、コミュニティの中で自分の存在感を高める一助となるでしょう。

ブロックパターンの実装方法

それでは早速、ブロックパターンの実装方法について解説いたします。

ここでは、まず独自のパターンカテゴリーを登録し、その後にブロックパターンも登録してそのカテゴリーを割り当てて実装していきたいと思います。

ブロックパターンとしては下図のようなパターンを実装したいと思います。

よくあるCTAをイメージいたしました。文字2つとボタン2つというシンプルな構成ですが、ブロックパターンの基本として、こちらを実装していきたいと思います。

パターンカテゴリーを登録

まずは独自のパターンカテゴリーを登録していきたいと思います。

パターンカテゴリーとは、下図のブロックエディタ画面左側のインサーターの「パターン」というタブをクリックして表示されるカテゴリーの一覧のことを言います。

この中に「マイパターンカテゴリー」という名前でカテゴリーを登録したいと思います。

以下のコードをテーマで実装する場合はfunctions.phpに、プラグインで実装する場合はプラグインを構成するいずれかのPHPファイルにコピー&ペーストしてください。

<?php
// カスタムブロックパターンカテゴリーを登録する
if ( function_exists( 'register_block_pattern_category' ) ) {
	function my_plugin_register_pattern_category() {
		register_block_pattern_category( 
			'my-pattern-category', // カテゴリーID
			array(
				'label'       => 'マイパターンカテゴリー', // カテゴリー名
				'description' => 'このパターンはマイパターンカテゴリーに含まれるパターンです。', // 説明文
			)
		);
	}
	add_action( 'init', 'my_plugin_register_pattern_category' );
}

上記のコードは、WordPressに独自の「ブロックパターンカテゴリー」を追加するコードになります。

register_block_pattern_category()関数を使用し、新しいカテゴリーを登録しています。このカテゴリーは、ブロックエディタ内でブロックパターンを整理するためのカテゴリーになります。

具体的には、my_plugin_register_pattern_category()という関数名でを独自の関数を定義し、「my-pattern-category」というIDでカテゴリーを登録しています。

また、「label」にはカテゴリー名、「description」にはどういった内容のカテゴリーなのかの概要文を説明しています。

最後に、この関数をadd_action( ‘init’, ‘my_plugin_register_pattern_category’ )関数で「init」フックに追加して実行させています。これにより、WordPressが初期化される際にカスタムカテゴリーが登録され、エディタ内で利用できるようになります。

ちなみにこの時点でインサーターを確認しても特に何も追加で表示されていないかと思います。

というのも、仕様として登録したこのパターンカテゴリーに何かしらのブロックパターンを割り当てないと表示されないようになっているためです。

そのため、何も表示されてなくてもご安心ください。

ブロックパターンを登録

パターンカテゴリーの登録ができたら、次はいよいよブロックパターンを作成して登録していきます。

以下のコードをテーマで実装する場合はfunctions.phpに、プラグインで実装する場合はプラグインを構成するいずれかのPHPファイルにコピー&ペーストしてください。

<?php
// カスタムブロックパターンを登録する
if ( function_exists( 'register_block_pattern' ) ) {
	function my_plugin_register_block_pattern() {
		register_block_pattern( 
			'my-plugin/my-block-pattern', // パターンID
			array(
				'title'       => __( 'シンプルなCTAパターン', 'my-plugin-text-domain' ), // パターンのタイトル
				'categories'  => array( 'my-pattern-category' ), // 先ほど作成したカテゴリーに属する
				'postTypes'   => array( 'post', 'page' ), // 使用可能な投稿タイプ(投稿と固定ページ)
				'content'     => '
                    <!-- wp:group {"metadata":{"categories":["call-to-action"],"patternName":"simple-call-to-action","name":"Simple call to action"},"align":"full","style":{"color":{"text":"#000000","background":"#f7f7f7"}}} -->
                    <div class="wp-block-group alignfull has-text-color has-background" style="color:#000000;background-color:#f7f7f7"><!-- wp:spacer {"height":"64px"} -->
                    <div style="height:64px" aria-hidden="true" class="wp-block-spacer"></div>
                    <!-- /wp:spacer -->

                    <!-- wp:paragraph {"align":"center","style":{"typography":{"lineHeight":".9"}},"fontSize":"small"} -->
                    <p class="has-text-align-center has-small-font-size" style="line-height:.9"><strong>特別なオファーを見逃さないで!</strong></p>
                    <!-- /wp:paragraph -->

                    <!-- wp:heading {"textAlign":"center","style":{"typography":{"fontSize":59,"lineHeight":"1.15"}}} -->
                    <h2 class="wp-block-heading has-text-align-center" id="schedule-a-visit" style="font-size:59px;line-height:1.15"><strong>今すぐ無料相談を予約!</strong></h2>
                    <!-- /wp:heading -->

                    <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center","orientation":"horizontal"}} -->
                    <div class="wp-block-buttons"><!-- wp:button {"width":46,"style":{"color":{"background":"#000000","text":"#ffffff"},"border":{"radius":"50px"}}} -->
                    <div class="wp-block-button has-custom-width wp-block-button__width-46"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="border-radius:50px;color:#ffffff;background-color:#000000">詳細を見る</a></div>
                    <!-- /wp:button -->

                    <!-- wp:button {"width":46,"style":{"color":{"background":"#0000ff","text":"#ffffff"},"border":{"radius":"50px"}}} -->
                    <div class="wp-block-button has-custom-width wp-block-button__width-46"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="border-radius:50px;color:#ffffff;background-color:#0000ff">今すぐ予約</a></div>
                    <!-- /wp:button -->
                    </div>
                    <!-- /wp:buttons -->

                    <!-- wp:spacer {"height":"64px"} -->
                    <div style="height:64px" aria-hidden="true" class="wp-block-spacer"></div>
                    <!-- /wp:spacer --></div>
                    <!-- /wp:group -->
				', // パターンのコンテンツ
			) 
		);
	}
	add_action( 'init', 'my_plugin_register_block_pattern' );
}

ペーストが完了したら、エディタ画面を更新して再度インサーターを確認してみましょう。

下図のように「マイパターンカテゴリー」が追加されているのが確認できるかと思います。

「マイパターンカテゴリー」をクリックしていただくと右に「シンプルなCTAパターン」が表示されるので、クリックしてみましょう。

すると下図のようにエディタ上に「シンプルなCTAパターン」のパターンが設置されます。

設置できたら投稿を保存してプレビューを見てみましょう。

プレビューを確認していただくと、下図のように「シンプルなCTAパターン」がそのままの見た目で表示されているのが確認できるかと思います。

ちなみにこのままだとボタンのリンクなどを設定していないため、CTAとして何も機能しませんので、編集しましょう。

ブロックエディタから作成したブロックパターンのテキストなどのパターンを構成する要素を選択していただくと、画面右側にその選択した要素に合わせて編集用のUIが表示されますので、操作して編集していきます。

CTA自体の背景色や文字の色や大きさ、ボタンの色や大きさ、リンクの設定など自由度高くさまざまな操作を通して細かく編集することができます。

このようにプログラミングの知識なくてもサイトに合わせて自由にデザインできますし、またパターン内には含まれていない他のブロックを追加したりすることができるため、細かいカスタマイズができます。

まさにこれがブロックパターンのメリットとも言えるでしょう。

ちなみにここまでがブロックパターンの実装方法の基本の解説は終わりになります。お疲れ様でした!

あとはご自身でパターンを自由にカスタマイズなどしていただいて、オリジナルのパターンを作ってみてください。

patternsフォルダでブロックパターンの実装方法

次に、ブロックパターンを別の方法で実装する方法について解説いたします。

実はブロックパターンを実装する方法としては以下の方法があります。

  • register_block_pattern()関数で実装する
  • テーマフォルダ内にpatternsフォルダを作成して実装する

先ほど解説した実装方法は「register_block_pattern()関数で実装する」で、ここで解説するのは「テーマフォルダ内にpatternsフォルダを作成して実装する」方法になります。

作り方は難しくないので、ご安心ください。

テーマフォルダ内にpatternsフォルダを作成する

まずはWordPressテーマフォルダ内に「patterns」という名前でフォルダを作成します。

フォルダ内にPHPファイルを作成する

「patterns」フォルダが作成できたら、この「patterns」フォルダの中にブロックパターンを作成するためのPHPファイルを作成します。

ここでは「sample-pattern.php」というPHPファイル名で作成します。

PHPファイルにパターン情報を追加する

作成したPHPファイルにブロックパターンのメタ情報を追加します。

ファイルの冒頭に以下のメタ情報を追加してください。

<?php
/**
 * Title: シンプルなCTAパターン(patternフォルダ版)
 * Slug: theme-pattern/my-block-pattern
 * Post Types: post
 * Categories: my-pattern-category
 * Viewport Width: 800
 * Keywords: 特別オファー, 無料相談, CTA
 * Block Types: core/group, core/buttons, core/heading, core/paragraph
 * Description: シンプルで効果的な行動喚起を促すパターン。プロモーションや問い合わせに最適。
 */
?>

上記メタ情報のそれぞれの内容は、以下のようになっております。

Titleパターンの名前(管理画面などで表示されるタイトル)。
Slugパターンを識別する一意のID(小文字・ハイフン形式)。
Post Typesこのパターンを使用できる投稿タイプ(例: 投稿や固定ページ)。
Categoriesパターンを分類するカテゴリー(作成済みのパターンカテゴリーを指定)。
Viewport Widthパターンをプレビューする際の幅(ピクセル単位)。
Keywords検索時に関連するキーワード(複数指定可能)。
Block Types使用しているブロックの種類(例: ボタンブロックなど)。
Descriptionパターンの簡単な説明文。

ご確認いただき、カスタマイズする際にご参考にしてください。

ブロックパターンのコードを追加する

PHPファイルにメタ情報を追加できたら、その下にブロックパターンの以下のコードを追加します。

<!-- wp:group {"metadata":{"categories":["call-to-action"],"patternName":"simple-call-to-action","name":"Simple call to action"},"align":"full","style":{"color":{"text":"#000000","background":"#f7f7f7"}}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="color:#000000;background-color:#f7f7f7"><!-- wp:spacer {"height":"64px"} -->
<div style="height:64px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"lineHeight":".9"}},"fontSize":"small"} -->
<p class="has-text-align-center has-small-font-size" style="line-height:.9"><strong>特別なオファーを見逃さないで!</strong></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"textAlign":"center","style":{"typography":{"fontSize":59,"lineHeight":"1.15"}}} -->
<h2 class="wp-block-heading has-text-align-center" id="schedule-a-visit" style="font-size:59px;line-height:1.15"><strong>今すぐ無料相談を予約!</strong></h2>
<!-- /wp:heading -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center","orientation":"horizontal"}} -->
<div class="wp-block-buttons"><!-- wp:button {"width":46,"style":{"color":{"background":"#000000","text":"#ffffff"},"border":{"radius":"50px"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-46"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="border-radius:50px;color:#ffffff;background-color:#000000">詳細を見る</a></div>
<!-- /wp:button -->

<!-- wp:button {"width":46,"style":{"color":{"background":"#0000ff","text":"#ffffff"},"border":{"radius":"50px"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-46"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="border-radius:50px;color:#ffffff;background-color:#0000ff">今すぐ予約</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->

<!-- wp:spacer {"height":"64px"} -->
<div style="height:64px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->

ここまでの説明を通したPHPファイルの全体のコードは以下になります。

<?php
/**
 * Title: シンプルなCTAパターン(patternフォルダ版)
 * Slug: theme-pattern/my-block-pattern
 * Post Types: post
 * Categories: my-pattern-category
 * Viewport Width: 800
 * Keywords: 特別オファー, 無料相談, CTA
 * Block Types: core/group, core/buttons, core/heading, core/paragraph
 * Description: シンプルで効果的な行動喚起を促すパターン。プロモーションや問い合わせに最適。
 */
?>

<!-- wp:group {"metadata":{"categories":["call-to-action"],"patternName":"simple-call-to-action","name":"Simple call to action"},"align":"full","style":{"color":{"text":"#000000","background":"#f7f7f7"}}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="color:#000000;background-color:#f7f7f7"><!-- wp:spacer {"height":"64px"} -->
<div style="height:64px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"lineHeight":".9"}},"fontSize":"small"} -->
<p class="has-text-align-center has-small-font-size" style="line-height:.9"><strong>特別なオファーを見逃さないで!</strong></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"textAlign":"center","style":{"typography":{"fontSize":59,"lineHeight":"1.15"}}} -->
<h2 class="wp-block-heading has-text-align-center" id="schedule-a-visit" style="font-size:59px;line-height:1.15"><strong>今すぐ無料相談を予約!</strong></h2>
<!-- /wp:heading -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center","orientation":"horizontal"}} -->
<div class="wp-block-buttons"><!-- wp:button {"width":46,"style":{"color":{"background":"#000000","text":"#ffffff"},"border":{"radius":"50px"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-46"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="border-radius:50px;color:#ffffff;background-color:#000000">詳細を見る</a></div>
<!-- /wp:button -->

<!-- wp:button {"width":46,"style":{"color":{"background":"#0000ff","text":"#ffffff"},"border":{"radius":"50px"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-46"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="border-radius:50px;color:#ffffff;background-color:#0000ff">今すぐ予約</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->

<!-- wp:spacer {"height":"64px"} -->
<div style="height:64px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->

ここまでで、patternフォルダでのブロックパターンの作成方法は以上になります。

ブロックエディタのインサーターをご確認いただくと、下図のようにパターンが追加されているのがご確認いただけるかと思います。

余談ですが、自作したパターンは管理画面から削除できないようになっているかと思いますが、コード自体を削除したりpatternsフォルダ自体を削除したりすれば、削除することが可能です。

以上でpatternsフォルダを作成してブロックパターンを実装する方法の解説は以上です。お疲れ様でした!

関数で作成するのか、patternsフォルダで作成するのかはご自身の使用されているテーマや、作成しているテーマの方針に沿って選択していただけたらと思います。

ブロックパターンのコードを作成するコツ

ブロックパターンを作成するためには、HTMLとJSONが組み合わさったコードで作成しなければいけません。

ただ、このHTMLとJSONが組み合わさったコードは、あまり詳しい情報がないため人によっては作りにくい可能性があります。

そのため、ここではブロックパターンのコードを作成する際におすすめの方法を解説したいと思います。よろしければご参考にしていただけますと幸いです。

まず作成する流れとしては以下になります。

  • 作成したいパターンに近しいパターンを見つける
  • パターンをコピーする
  • コピーしたコードから使えそうなコードを引用する
  • エディタをみながらパターンを実装する

それぞれ解説します。

作成したいパターンに近しいパターンを見つける

まずは作成したいパターンに近しいパターンを見つけるために、公式のパターンディレクトリを確認します。以下のURLへアクセスしてください。
https://ja.wordpress.org/patterns/

パターンをコピーする

パターンが一覧で見れるので、ご自身の実装したいパターンと近しいものがあったらそれをクリックします。

クリックしたらそのパターンの詳細ページへ飛ぶので、下図のように画面左上にある「Copy pattern」ボタンをクリックします。クリックすると、自動的にパターンのソースコードがコピーされます。

ちなみに、パターンディレクトリではなくブロックエディタからでもコピーができます。

ブロックエディタからコピーするには、まずご自身の作りたいパターンをインサーターから選択してエディタ上に設置します。

設置したら、下図のように画面右上にある縦に点が3つ並んだボタンをクリックし、「すべてのブロックをコピー」をクリックします。

コピーしたコードから使えそうなコードを引用する

コピーができたら、一旦ご自身が使用されているVisual Studio Codeなどのエディタかメモ帳などへペーストします。

すると、以下のようにソースコードが確認できるかと思います。

<!-- wp:cover {"customOverlayColor":"#36220c","contentPosition":"top center","align":"full","style":{"spacing":{"padding":{"top":"5vw","right":"5vw","bottom":"5vw","left":"5vw"},"margin":{"top":"0"}}}} -->
<div class="wp-block-cover alignfull has-custom-content-position is-position-top-center" style="margin-top:0;padding-top:5vw;padding-right:5vw;padding-bottom:5vw;padding-left:5vw"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#36220c"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"3vw"}},"layout":{"type":"flex","flexWrap":"wrap","verticalAlignment":"stretch","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:cover {"url":"https://pd.w.org/2023/04/654642d52f20d6367.57324872.jpg","id":334,"dimRatio":50,"minHeight":75,"minHeightUnit":"vh","contentPosition":"top right","isDark":false,"style":{"layout":{"selfStretch":"fill"},"spacing":{"padding":{"top":"4vw","right":"4vw","bottom":"4vw","left":"4vw"}},"color":{"duotone":["rgb(137, 75, 0)","rgb(210, 210, 210)"]}}} -->
<div class="wp-block-cover is-light has-custom-content-position is-position-top-right" style="padding-top:4vw;padding-right:4vw;padding-bottom:4vw;padding-left:4vw;min-height:75vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-334" alt="" src="https://pd.w.org/2023/04/654642d52f20d6367.57324872.jpg" data-object-fit="cover" /><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","orientation":"vertical","flexWrap":"nowrap","justifyContent":"right"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontSize":"140px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"800","lineHeight":"0.8","letterSpacing":"-6px"},"color":{"text":"#e5683a"}}} -->
<p class="has-text-color" style="color:#e5683a;font-size:140px;font-style:normal;font-weight:800;letter-spacing:-6px;line-height:0.8;text-transform:uppercase">Wardell</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"130px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"800","lineHeight":"0.8","letterSpacing":"-6px"},"color":{"text":"#e5683a"}}} -->
<p class="has-text-color" style="color:#e5683a;font-size:130px;font-style:normal;font-weight:800;letter-spacing:-6px;line-height:0.8;text-transform:uppercase">gray</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","placeholder":"タイトルを入力...","style":{"typography":{"fontSize":"90px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"800","letterSpacing":"0px","lineHeight":"1"},"color":{"text":"#d09c9c"}}} -->
<p class="has-text-align-center has-text-color" style="color:#d09c9c;font-size:90px;font-style:normal;font-weight:800;letter-spacing:0px;line-height:1;text-transform:uppercase">Plays</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","placeholder":"タイトルを入力...","style":{"typography":{"fontSize":"90px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"800","letterSpacing":"0px","lineHeight":"0.8"},"color":{"text":"#e59937"}}} -->
<p class="has-text-align-center has-text-color" style="color:#e59937;font-size:90px;font-style:normal;font-weight:800;letter-spacing:0px;line-height:0.8;text-transform:uppercase">Bebop &</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","placeholder":"タイトルを入力...","style":{"typography":{"fontSize":"90px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"800","letterSpacing":"0px","lineHeight":"1"},"color":{"text":"#e59937"}}} -->
<p class="has-text-align-center has-text-color" style="color:#e59937;font-size:90px;font-style:normal;font-weight:800;letter-spacing:0px;line-height:1;text-transform:uppercase">SWING</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

<!-- wp:group {"style":{"layout":{"selfStretch":"fixed","flexSize":"420px"}},"layout":{"type":"flex","orientation":"vertical","flexWrap":"nowrap","verticalAlignment":"bottom"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontSize":"18px","letterSpacing":"0px","lineHeight":"1.7","fontStyle":"normal","fontWeight":"400"},"color":{"text":"#e59937"}}} -->
<p class="has-text-color" style="color:#e59937;font-size:18px;font-style:normal;font-weight:400;letter-spacing:0px;line-height:1.7">Wardell Gray was born in Oklahoma City, the youngest of four children. His early childhood years were spent in Oklahoma, before moving with his family to Detroit in 1929. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"18px","letterSpacing":"0px","lineHeight":"1.7","fontStyle":"normal","fontWeight":"400"},"color":{"text":"#e59937"}}} -->
<p class="has-text-color" style="color:#e59937;font-size:18px;font-style:normal;font-weight:400;letter-spacing:0px;line-height:1.7">In early 1935, Gray began attending Northeastern High School, and then transferred to Cass Technical High School, which is noted for having Donald Byrd, Lucky Thompson and Al McKibbon as alumni. </p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left"}} -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"text":"#e59937"},"border":{"radius":"0px"},"spacing":{"padding":{"top":"16px","right":"32px","bottom":"16px","left":"32px"}},"typography":{"fontSize":"16px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"700","letterSpacing":"0px"}},"className":"is-style-outline"} -->
<div class="wp-block-button has-custom-font-size is-style-outline" style="font-size:16px;font-style:normal;font-weight:700;letter-spacing:0px;text-transform:uppercase"><a class="wp-block-button__link has-text-color wp-element-button" style="border-radius:0px;color:#e59937;padding-top:16px;padding-right:32px;padding-bottom:16px;padding-left:32px">Listen Now</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:spacer {"height":"7.5vw"} -->
<div style="height:7.5vw" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

このようにコピーしたソースコードを一部削除したら追加したら、編集したりしてパターンを作っていきます。

エディタをみながらパターンを実装する

カスタマイズしたソースコードはブロックエディタにペーストすることによって確認できます。

こちらで確認しながら、実装を進めていきましょう。

もし今後よりもっと効率的な開発手法などがありましたら、随時更新していきたいと思います。

ブロックパターンを制御する方法

ブロックパターンを制御する方法について解説いたします。

例えば、サイト運営者に使ってほしくないブロックパターンがあったりした時に、その特定のパターンを隠したりすることが可能です。

ここでは以下の内容を解説いたします。

  • 全てのコアブロックパターンを非表示
  • 特定のブロックパターンを非表示
  • 特定のブロックパターンカテゴリーを非表示

それぞれ解説いたします。

全てのコアブロックパターンを非表示

WordPressの標準で提供されているコアのブロックパターンを全て非表示にするには、remove_theme_support()関数に引数を「core-block-patterns」で指定することによって可能です。

以下のコードをテーマで実装する場合はfunctions.phpに、プラグインで実装する場合はプラグインを構成するいずれかのPHPファイルにコピー&ペーストしてください。

<?php
function my_theme_disable_core_block_patterns() {
    remove_theme_support( 'core-block-patterns' );
}
add_action( 'after_setup_theme', 'my_theme_disable_core_block_patterns' );

すると以下のように全てのブロックパターンを非表示にすることができます。

ちなみにご自身で作成されたブロックパターンは表示されることになるので、下図のように自作のブロックパターンのみ表示させるようにしたい時にも便利です。

特定のブロックパターンを非表示

特定のブロックパターンを非表示にしたい場合は、unregister_block_pattern()関数を使って、引数に「my-plugin/my-block-pattern」のようなパターンの名前空間を指定します。

以下のコードをテーマで実装する場合はfunctions.phpに、プラグインで実装する場合はプラグインを構成するいずれかのPHPファイルにコピー&ペーストしてください。

<?php
function my_theme_unregister_block_pattern() {
	unregister_block_pattern( 'my-plugin/my-block-pattern' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );

すると今回作成した「マイパターンカテゴリー」のブロックパターンが非表示になっているのが確認できるかと思います。

ちなみに、WordPress標準のブロックパターンを非表示にしたいときは、以下のように引数に「core/」から始まる名前空間で指定すれば非表示にできます。

<?php
function my_theme_unregister_block_pattern() {
	unregister_block_pattern( 'core/query-offset-posts' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );

特定のブロックパターンカテゴリーを非表示

特定のブロックパターンカテゴリーを非表示にしたい時は、unregister_block_pattern_category()関数を使って引数に「my-pattern-category」のようなカテゴリーIDを指定することによって非表示にできます。

以下のコードをテーマで実装する場合はfunctions.phpに、プラグインで実装する場合はプラグインを構成するいずれかのPHPファイルにコピー&ペーストしてください。

<?php
function my_theme_unregister_block_pattern_categories() {
	unregister_block_pattern_category( 'my-pattern-category' );
}
add_action( 'init', 'my_theme_unregister_block_pattern_categories' );

すると下図のように、今回作成した「マイパターンカテゴリー」のブロックパターンカテゴリーが非表示になっているのが確認できるかと思います。

ちなみに、もしunregister_block_pattern_category()関数の引数のカテゴリーIDが知りたい場合は、以下のコードをご利用いただくと良いかと思います。

以下のコードをテーマで実装する場合はfunctions.phpに、プラグインで実装する場合はプラグインを構成するいずれかのPHPファイルにコピー&ペーストしてください。

<?php
function debug_registered_block_pattern_categories() {
    $categories = WP_Block_Pattern_Categories_Registry::get_instance()->get_all_registered();
    
    echo '<pre>';
    print_r($categories);
    echo '</pre>';
}
add_action( 'init', 'debug_registered_block_pattern_categories' );

ペーストが完了したら、サイトのフロントページ(トップページ等)をご確認いただくと、以下のようなオブジェクトのデータが表示されているかと思います。(※公開中のサイトでは絶対に実行しないでください。)

Array
(
    [0] => Array
        (
            [name] => banner
            [label] => バナー
        )

    [1] => Array
        (
            [name] => buttons
            [label] => ボタン
            [description] => ボタンと行動喚起 (CTA) を含むパターン。
        )

    [2] => Array
        (
            [name] => columns
            [label] => カラム
            [description] => より複雑なレイアウトの複数カラムパターン。
        )

    [3] => Array
        (
            [name] => text
            [label] => テキスト
            [description] => 主にテキストを含むパターン。
        )

    [4] => Array
        (
            [name] => query
            [label] => 投稿
            [description] => 最新の投稿をリスト、グリッド、その他のレイアウトで表示します。
        )

    [5] => Array
        (
            [name] => featured
            [label] => 注目
            [description] => 高品質の厳選されたパターンのセット。
        )

    [6] => Array
        (
            [name] => call-to-action
            [label] => CTA (行動喚起)
            [description] => 特定のアクションをトリガーするためのセクション。
        )

    [7] => Array
        (
            [name] => team
            [label] => チーム
            [description] => チームメンバーを表示するさまざまなデザイン。
        )

    [8] => Array
        (
            [name] => testimonials
            [label] => お客様の声
            [description] => あなたのブランドやビジネスに関するクチコミやコメントを紹介しましょう。
        )

    [9] => Array
        (
            [name] => services
            [label] => サービス
            [description] => ビジネスの内容とサポート対象について簡単に説明してください。
        )

    [10] => Array
        (
            [name] => contact
            [label] => 連絡先
            [description] => 連絡先情報を表示します。
        )

    [11] => Array
        (
            [name] => about
            [label] => 紹介
            [description] => 自己紹介しましょう。
        )

    [12] => Array
        (
            [name] => portfolio
            [label] => ポートフォリオ
            [description] => 最新の作品を紹介しましょう。
        )

    [13] => Array
        (
            [name] => gallery
            [label] => ギャラリー
            [description] => 画像を表示する異なるレイアウト。
        )

    [14] => Array
        (
            [name] => media
            [label] => メディア
            [description] => 動画または音声を含む異なるレイアウト。
        )

    [15] => Array
        (
            [name] => videos
            [label] => 動画
            [description] => 動画を含む異なるレイアウト。
        )

    [16] => Array
        (
            [name] => audio
            [label] => 音声
            [description] => 音声を含む異なるレイアウト。
        )

    [17] => Array
        (
            [name] => posts
            [label] => 投稿
            [description] => 最新の投稿をリスト、グリッド、その他のレイアウトで表示します。
        )

    [18] => Array
        (
            [name] => footer
            [label] => フッター
            [description] => 情報とサイトナビゲーションを表示するさまざまなフッターデザイン。
        )

    [19] => Array
        (
            [name] => header
            [label] => ヘッダー
            [description] => サイトのタイトルとナビゲーションを表示するさまざまなヘッダーデザイン。
        )

    [20] => Array
        (
            [name] => my-pattern-category
            [label] => マイパターンカテゴリー
            [description] => このパターンはマイパターンカテゴリーに含まれるパターンです。
        )

)

一番最後の「[20] => Array(my-pattern-category)」以外はWordPress標準のコアのブロックパターンになります。

引数で指定するカテゴリーIDとは、上記でいうところの「[name] 」の値がカテゴリーIDになります。

そのため、以下のようなコードでも全てのブロックパターンカテゴリーを非表示にすることが可能です。

<?php
function unregister_all_block_pattern_categories() {
    $categories = WP_Block_Pattern_Categories_Registry::get_instance()->get_all_registered();
    
    foreach ($categories as $category) {
        unregister_block_pattern_category($category['name']);
    }
}
add_action( 'init', 'unregister_all_block_pattern_categories' );

実行すると下図のように「すべて」と「未分類」以外のブロックパターンカテゴリーを非表示にできます。「すべて」と「未分類」をクリックしても中身は空になります。

もし「すべて」と「未分類」もややこしくて非表示にしたいのであれば、先ほど解説した「全てのコアブロックパターンを非表示」の方法が良いかなと思います。

作成ツールでブロックパターンを作成して公開・配布する方法

ブロックパターンを作成して公開・配布したい場合は、WordPress公式が提供しているブロックパターン作成ツールで作成し、パターンをコミュニティと共有することができます。

やり方としては、無料のオンライン作成ツールである「Pattern Creator」を使用してパターンを作成し、コミュニティと共有することになります。

まずはパターンディレクトリにアクセスしましょう。

アクセスしたら、画面下にある「Create a pattern」ボタンをクリックしましょう。(日本語版のURLはこちらになります:https://ja.wordpress.org/patterns/new-pattern/

この時WordPress.orgのアカウントをお持ちの方はログインしていただき、お持ちでない方はアカウントを作成してからアクセスすることになります。

クリックしていただくと、下図のように作成ツールのエディタが表示されます。

作成が完了したら、画面右上にある「submit」ボタンをクリックしていただくことによって、作成したブロックパターンを提出することができます。

注意点としては、提出する前に必ずこちらのガイドラインをご確認し、ガイドライン通りに作成できているかチェックいただいてから提出するようにしましょう。URLは以下になります。

https://wordpress.org/patterns/about/

また、ブロックパターンディレクトリについて知りたい方は以下のページをご確認ください。

まとめ

今回は、WordPressのブロックパターンを自作する方法について解説しました。

ブロックパターンを活用することで、サイト運営者はプログラムの知識がなくても、簡単にサイト上でCTA(お問い合わせ導線など)を作成・編集できるようになります。背景色やボタンのサイズ・色、余白などもクリック操作だけで調整できるため、柔軟で便利なツールです。

また、WordPress公式のパターンディレクトリを活用すれば、既存のパターンをコピーしてすぐに利用することも可能です。これにより、サイトデザインの効率化や独自性の向上を図ることができます。

オリジナルのパターンを実装できるようになると、クライアントから「パターンを作成してほしい」といった依頼にも応えられるほか、エディタをさらに便利にカスタマイズすることも可能です。

本記事が、ブロックパターンの自作方法や操作方法、また、メリットを理解する一助となれば幸いです。ぜひ、ご自身のプロジェクトやお仕事に活用してみてください。

執筆者

UMENOKI編集部 高澤 翔汰

歴5年目(2024年8月以降から5年目です)のエンジニアです!
CMSでのサイト構築とWebデザイン制作を兼任して5年目になります。
自作のiOSアプリ(iPhoneアプリ)やWordPressプラグインを開発することもあり、まだまだ現在進行形で勉強中です!

お気軽に皆さんのご要望をお聞かせください!

どんなに些細なことでも構いません!よろしければ記事や当サイトへの「こんな記事があったら仕事とかで役に立つな〜」や「こうだったらもっと役に立つのに!」といったようなご要望等をお気軽にお聞かせください!今後のサービス改善にお役立てさせていただきます!

例1)Reactの技術記事を書いてほしい!
例2)WordPressの使い方とかを初心者向けに解説してほしい!...など

送信と同時にプライバシーポリシーに同意したものとします。