Gutenbergブロック再利用の考え方
Gutenberg(ブロックエディタ)で記事や固定ページを作っていると、「毎回同じパーツを手で作っているな」と感じる場面が必ず出てきます。例えば、記事の最後に入れる定型の案内文、プロフィール、問い合わせボタン、注意書きなどです。こうした「何度も使うブロック」を効率よく、しかもミスなく管理するための仕組みが、以前は「再利用ブロック」と呼ばれていたもの、現在は「同期パターン(Synced Pattern)」として提供されている機能です。
再利用ブロック(同期パターン)とは何か
再利用ブロック(現在の名称では「同期パターン」)は、1つまたは複数のブロックを「ひとまとまりの部品」として保存し、サイトのどこからでも呼び出せるようにしたものです。特徴は次の通りです。
- 一度作れば、何度でも同じ形で挿入できる
- 元の再利用ブロックを編集すると、挿入済みのすべての場所に変更が反映される
- コードを書く必要はなく、エディタ上の操作だけで作成できる
WordPress 6.3以降では、「再利用ブロック」は「パターン」という概念に統合され、その中で「同期(Synced)をオンにしたパターン」が、従来の再利用ブロックと同じ振る舞いをします。
どんな場面で使うと便利か
再利用ブロック(同期パターン)が真価を発揮するのは、「頻繁に使うが、たまに内容をまとめて変えたい」パーツです。例えば次のようなものがあります。
- 記事末尾の定型文
- 「この記事が役に立ったらSNSでシェアしてください」などの案内
- 著者プロフィール
- 名前・肩書き・アイコン画像・SNSリンクのセット
- 問い合わせ・資料請求ボタン
- ボタン+説明文+アイコンなどの組み合わせ
- 注意書き・免責事項
- 法的な文言や利用上の注意など、サイト全体で共通のテキスト
これらを再利用ブロックにしておくと、1箇所を直すだけでサイト全体の同じパーツが一斉に更新されるため、「修正漏れ」や「古い情報が残る」リスクを大きく減らせます。
エディタから再利用ブロック(同期パターン)を作る手順
ここからは、実際にGutenbergエディタ上で再利用ブロック(同期パターン)を作る流れを、初心者向けにかみ砕いて説明します。
単一ブロックを再利用ブロックにする例
まずは、もっともシンプルな「1つの段落ブロックを再利用ブロックにする」例から見ていきます。
例:記事末尾の定型文
- 投稿または固定ページの編集画面を開きます。
- 記事の末尾に、次のような段落ブロックを追加します。text
この記事が役に立ったと感じたら、ぜひSNSでシェアしてください。 新着記事もチェックしていただけると嬉しいです。 - その段落ブロックを選択した状態で、ブロックツールバーの「︙(三点リーダー)」メニューをクリックします。
- メニューの中から「パターンとして作成」または「パターンを作成」を選びます。
- パターン名(例:
記事末尾のシェア案内)を入力します。 - 「同期」オプションをオンにします(これで再利用ブロック=同期パターンになります)。
- 「作成」ボタンを押します。
これで、先ほどの段落ブロックが「同期パターン」として保存され、以後はどの投稿・固定ページからでも呼び出せるようになります。
複数ブロックをまとめて再利用ブロックにする例
再利用ブロックの真価は、複数のブロックを「ひとまとまりの部品」として保存できるところにあります。次は、プロフィールカードを例にしてみます。
例:著者プロフィールカード
- 新しい投稿または固定ページで、次のような構成を作ります。
- 画像ブロック:著者のアイコン
- 見出しブロック:著者名
- 段落ブロック:肩書き・簡単な自己紹介
- ソーシャルリンクブロック:Twitter / Instagram / GitHubなど
- これらのブロックをまとめて選択します。
- マウスでドラッグして範囲選択するか、
- 左側の「リストビュー」で該当ブロックを複数選択します。
- 選択したブロック群のツールバーに表示される「︙」メニューをクリックします。
- 「パターンとして作成」を選びます。
- パターン名(例:
著者プロフィールカード)を入力します。 - 「同期」オプションをオンにします。
- 「作成」をクリックします。
これで、「画像+見出し+テキスト+SNSリンク」のセットが1つの再利用ブロック(同期パターン)として保存されます。今後、どの投稿でも「著者プロフィールカード」を挿入するだけで、同じレイアウト・同じ内容を簡単に再利用できます。
再利用ブロックの挿入・編集・解除の使い分け
再利用ブロック(同期パターン)は、「作る」だけでなく「どう挿入するか」「どう編集するか」「いつ同期を切るか」が重要です。ここを理解しておくと、運用で迷いにくくなります。
再利用ブロック(同期パターン)を挿入する
- 投稿・固定ページの編集画面で、「+」ボタン(ブロックインサーター)をクリックします。
- 「パターン」タブ、または「同期パターン」タブに切り替えます。
- 自分で作成したパターンの一覧から、目的のパターン(例:
著者プロフィールカード)を選びます。 - クリックするとカーソル位置に挿入されます。ドラッグ&ドロップで任意の位置に挿入することもできます。
また、ブロックインサーターの検索欄にパターン名を入力して探すこともできます。慣れてくると、スラッシュコマンド(/パターン名)で素早く挿入することも可能です。
再利用ブロックを編集する(全ページに反映させる)
同期パターンは、「どこか1箇所で編集すると、使われているすべての場所に反映される」という性質を持っています。これを活かして、サイト全体の共通パーツを一括で更新できます。
編集方法は主に2つあります。
- 投稿・固定ページ上で直接編集する
- 再利用ブロックを挿入した状態で、そのブロックを選択します。
- ブロック設定パネルやツールバーに表示される「元のパターンを編集」ボタンをクリックします。
- 内容を変更して保存すると、そのパターンを使っているすべてのページに変更が反映されます。
- 「パターン管理」画面から編集する
- ブロックエディタの「オプション」メニューから「パターンを管理」を選びます。
- または、外観 → エディター → パターン から一覧を開きます。
- 編集したいパターンを選び、内容を変更して保存します。
このように、「編集の入口」が複数あるので、自分の作業スタイルに合った方法を選ぶと良いです。
再利用ブロックの同期を切る(通常ブロックに戻す)
重要なポイントとして、「あるページだけ内容を変えたい」という場面では、同期を切る(パターンを通常ブロックに変換する)必要があります。
- 投稿・固定ページ上で、再利用ブロック(同期パターン)を選択します。
- ブロックツールバーの「︙」メニューを開きます。
- 「パターンを解除」または「通常のブロックに変換」といったメニューを選びます。
- すると、そのページ上のブロックは通常のブロックに戻り、以後の編集は他のページには影響しなくなります。
これにより、「基本レイアウトは同じだが、このページだけ文言を変えたい」「この投稿だけボタンのリンク先を変えたい」といった細かな調整が可能になります。
「同期」と「非同期」の違いをもう一歩深掘りする
再利用ブロック(同期パターン)を使いこなすうえで、「同期パターン」と「非同期パターン(通常のパターン)」の違いを理解しておくことはとても重要です。
同期パターン(再利用ブロック的な動き)
- 特徴
- 内容を1箇所で編集すると、使われているすべての場所に反映される
- ビジネス営業時間、料金表、共通の注意書きなど「サイト全体で同じであるべき情報」に向いている
- メリット
- 修正漏れが起きにくい
- サイト全体の一貫性を保ちやすい
- 注意点
- 「このページだけ変えたい」ときは、必ず同期を解除してから編集する
非同期パターン(レイアウトだけを再利用する)
- 特徴
- 挿入した後は、各ページごとに自由に内容を変えられる
- レイアウトや構造だけを共通化し、テキストや画像はページごとに変えたい場合に向いている
- 例
- 「3カラムのサービス紹介」レイアウト
- 「FAQの質問+回答」ブロック構成
- メリット
- デザインの統一感を保ちつつ、コンテンツはページごとに柔軟に変えられる
WordPress.comのドキュメントでも、「同期パターンは内容を共有したいとき」「非同期パターンはレイアウトだけ共有したいとき」に使い分けると良い、と説明されています。
開発者目線の一歩先:PHPでパターンを登録するテンプレート
プログラミング初心者の方でも、「少しコードを書いてみたい」「テーマ側でパターンを用意しておきたい」と感じることがあると思います。そこで、開発者向けのテンプレートを、できるだけ噛み砕いて紹介します。
パターン定義の基本構造
テーマの functions.php などで、PHPを使ってパターンを登録することができます。WordPressの開発者向けドキュメントでは、次のようなコメント形式+HTMLブロックでパターンを定義する例が紹介されています。
<?php
/**
* Title: 新着イベント告知
* Slug: mytheme/new-event-announcement
* Block Types: core/post-content
* Post Types: post
* Categories: featured, text
*/
?>
<!-- wp:heading -->
<h2>イベント詳細</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>ここにイベントの詳細を記載します。</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button -->
<div class="wp-block-button">
<a class="wp-block-button__link wp-element-button">詳しく見る</a>
</div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
PHPこのようなファイルをテーマ内の patterns ディレクトリに置くことで、エディタの「パターン」一覧に表示されるようになります。
初心者向けのポイント
- Title: エディタ上に表示されるパターン名です。
- Slug: パターンの識別子で、テーマ名+用途などを組み合わせると分かりやすいです。
- Block Types: このパターンがどのブロックタイプ(ここでは
core/post-content)で使われるかを指定します。 - Post Types: どの投稿タイプ(投稿・固定ページなど)で優先的に表示するかを指定します。
最初は難しく感じるかもしれませんが、「エディタで作ったレイアウトを、テーマ側からも提供できる」というイメージを持つと、パターンの仕組みがぐっと身近になります。
まとめ:再利用ブロックで「記事作成の型」を育てる
この記事では、WordPress Tipsとして「投稿・固定ページ運用」における Gutenberg ブロックの再利用ブロック(同期パターン)について、初心者向けにかみ砕いて解説しました。
押さえておきたいポイントは次の通りです。
- 再利用ブロックは、現在「同期パターン」として提供されており、内容を一括管理できる仕組みです。
- 単一ブロックだけでなく、複数ブロックをまとめて「ひとまとまりの部品」として保存できます。
- 同期パターンは「内容を共有したいパーツ」に、非同期パターンは「レイアウトだけ共有したいパーツ」に向いています。
- 編集は、投稿・固定ページ上からでも、「パターン管理」画面からでも行えます。
- 「このページだけ変えたい」ときは、必ず同期を解除して通常ブロックに変換してから編集します。
- 一歩進んだ使い方として、テーマ側からPHPでパターンを登録することもできます。
再利用ブロック(同期パターン)をうまく使うと、「毎回ゼロから記事を組み立てる」状態から、「自分のサイトに合った型を使って、内容に集中できる」状態へと変わっていきます。少しずつ、自分のサイトにとっての「定番パターン」を育てていく感覚で、Gutenbergの再利用ブロックを活用してみてください。


