WordPress Tips | 投稿・固定ページ運用:Gutenberg ブロックの再利用ブロックを作る

web Web
スポンサーリンク
スポンサーリンク

Gutenbergブロック再利用の考え方

Gutenberg(ブロックエディタ)で記事や固定ページを作っていると、「毎回同じパーツを手で作っているな」と感じる場面が必ず出てきます。例えば、記事の最後に入れる定型の案内文、プロフィール、問い合わせボタン、注意書きなどです。こうした「何度も使うブロック」を効率よく、しかもミスなく管理するための仕組みが、以前は「再利用ブロック」と呼ばれていたもの、現在は「同期パターン(Synced Pattern)」として提供されている機能です。

再利用ブロック(同期パターン)とは何か

再利用ブロック(現在の名称では「同期パターン」)は、1つまたは複数のブロックを「ひとまとまりの部品」として保存し、サイトのどこからでも呼び出せるようにしたものです。特徴は次の通りです。

  • 一度作れば、何度でも同じ形で挿入できる
  • 元の再利用ブロックを編集すると、挿入済みのすべての場所に変更が反映される
  • コードを書く必要はなく、エディタ上の操作だけで作成できる

WordPress 6.3以降では、「再利用ブロック」は「パターン」という概念に統合され、その中で「同期(Synced)をオンにしたパターン」が、従来の再利用ブロックと同じ振る舞いをします。

どんな場面で使うと便利か

再利用ブロック(同期パターン)が真価を発揮するのは、「頻繁に使うが、たまに内容をまとめて変えたい」パーツです。例えば次のようなものがあります。

  • 記事末尾の定型文
    • 「この記事が役に立ったらSNSでシェアしてください」などの案内
  • 著者プロフィール
    • 名前・肩書き・アイコン画像・SNSリンクのセット
  • 問い合わせ・資料請求ボタン
    • ボタン+説明文+アイコンなどの組み合わせ
  • 注意書き・免責事項
    • 法的な文言や利用上の注意など、サイト全体で共通のテキスト

これらを再利用ブロックにしておくと、1箇所を直すだけでサイト全体の同じパーツが一斉に更新されるため、「修正漏れ」や「古い情報が残る」リスクを大きく減らせます。

エディタから再利用ブロック(同期パターン)を作る手順

ここからは、実際にGutenbergエディタ上で再利用ブロック(同期パターン)を作る流れを、初心者向けにかみ砕いて説明します。

単一ブロックを再利用ブロックにする例

まずは、もっともシンプルな「1つの段落ブロックを再利用ブロックにする」例から見ていきます。

例:記事末尾の定型文

  1. 投稿または固定ページの編集画面を開きます。
  2. 記事の末尾に、次のような段落ブロックを追加します。textこの記事が役に立ったと感じたら、ぜひSNSでシェアしてください。 新着記事もチェックしていただけると嬉しいです。
  3. その段落ブロックを選択した状態で、ブロックツールバーの「︙(三点リーダー)」メニューをクリックします。
  4. メニューの中から「パターンとして作成」または「パターンを作成」を選びます。
  5. パターン名(例:記事末尾のシェア案内)を入力します。
  6. 「同期」オプションをオンにします(これで再利用ブロック=同期パターンになります)。
  7. 「作成」ボタンを押します。

これで、先ほどの段落ブロックが「同期パターン」として保存され、以後はどの投稿・固定ページからでも呼び出せるようになります。

複数ブロックをまとめて再利用ブロックにする例

再利用ブロックの真価は、複数のブロックを「ひとまとまりの部品」として保存できるところにあります。次は、プロフィールカードを例にしてみます。

例:著者プロフィールカード

  1. 新しい投稿または固定ページで、次のような構成を作ります。
    • 画像ブロック:著者のアイコン
    • 見出しブロック:著者名
    • 段落ブロック:肩書き・簡単な自己紹介
    • ソーシャルリンクブロック:Twitter / Instagram / GitHubなど
  2. これらのブロックをまとめて選択します。
    • マウスでドラッグして範囲選択するか、
    • 左側の「リストビュー」で該当ブロックを複数選択します。
  3. 選択したブロック群のツールバーに表示される「︙」メニューをクリックします。
  4. 「パターンとして作成」を選びます。
  5. パターン名(例:著者プロフィールカード)を入力します。
  6. 「同期」オプションをオンにします。
  7. 「作成」をクリックします。

これで、「画像+見出し+テキスト+SNSリンク」のセットが1つの再利用ブロック(同期パターン)として保存されます。今後、どの投稿でも「著者プロフィールカード」を挿入するだけで、同じレイアウト・同じ内容を簡単に再利用できます。

再利用ブロックの挿入・編集・解除の使い分け

再利用ブロック(同期パターン)は、「作る」だけでなく「どう挿入するか」「どう編集するか」「いつ同期を切るか」が重要です。ここを理解しておくと、運用で迷いにくくなります。

再利用ブロック(同期パターン)を挿入する

  1. 投稿・固定ページの編集画面で、「+」ボタン(ブロックインサーター)をクリックします。
  2. 「パターン」タブ、または「同期パターン」タブに切り替えます。
  3. 自分で作成したパターンの一覧から、目的のパターン(例:著者プロフィールカード)を選びます。
  4. クリックするとカーソル位置に挿入されます。ドラッグ&ドロップで任意の位置に挿入することもできます。

また、ブロックインサーターの検索欄にパターン名を入力して探すこともできます。慣れてくると、スラッシュコマンド(/パターン名)で素早く挿入することも可能です。

再利用ブロックを編集する(全ページに反映させる)

同期パターンは、「どこか1箇所で編集すると、使われているすべての場所に反映される」という性質を持っています。これを活かして、サイト全体の共通パーツを一括で更新できます。

編集方法は主に2つあります。

  1. 投稿・固定ページ上で直接編集する
    • 再利用ブロックを挿入した状態で、そのブロックを選択します。
    • ブロック設定パネルやツールバーに表示される「元のパターンを編集」ボタンをクリックします。
    • 内容を変更して保存すると、そのパターンを使っているすべてのページに変更が反映されます。
  2. 「パターン管理」画面から編集する
    • ブロックエディタの「オプション」メニューから「パターンを管理」を選びます。
    • または、外観 → エディター → パターン から一覧を開きます。
    • 編集したいパターンを選び、内容を変更して保存します。

このように、「編集の入口」が複数あるので、自分の作業スタイルに合った方法を選ぶと良いです。

再利用ブロックの同期を切る(通常ブロックに戻す)

重要なポイントとして、「あるページだけ内容を変えたい」という場面では、同期を切る(パターンを通常ブロックに変換する)必要があります。

  1. 投稿・固定ページ上で、再利用ブロック(同期パターン)を選択します。
  2. ブロックツールバーの「︙」メニューを開きます。
  3. 「パターンを解除」または「通常のブロックに変換」といったメニューを選びます。
  4. すると、そのページ上のブロックは通常のブロックに戻り、以後の編集は他のページには影響しなくなります。

これにより、「基本レイアウトは同じだが、このページだけ文言を変えたい」「この投稿だけボタンのリンク先を変えたい」といった細かな調整が可能になります。

「同期」と「非同期」の違いをもう一歩深掘りする

再利用ブロック(同期パターン)を使いこなすうえで、「同期パターン」と「非同期パターン(通常のパターン)」の違いを理解しておくことはとても重要です。

同期パターン(再利用ブロック的な動き)

  • 特徴
    • 内容を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の再利用ブロックを活用してみてください。

タイトルとURLをコピーしました