ブロックエディターを使いこなそう
WordPressを使っていて「再利用ブロック」という言葉を聞いたことがある方も多いと思います。実はこの「再利用ブロック」は現在では「パターン」と呼ばれるようになっています。
さらにパターンには「同期パターン」と「非同期パターン」の2種類があり、ここで混乱する方も多いのではないでしょうか。
この記事では、「同期パターン」と「非同期パターン」の違いや使い分けのヒントを紹介します。
こんにちは、スタッフの久納です。
VK FullSite Installer 用のデモサイトを作っていて、「同期パターン」と「非同期パターン」をよく使います。使い方をわかってしまえば良いのですが、慣れないうちは誤って同期パターンを修正してしまい全ページに影響がでてしまったりと、なにかと混乱する場面もあると思います。
わたしもよく迷っていましたので、ここで記事にすることにしました。
再利用ブロックからパターンへ
もともと「再利用ブロック」と呼ばれていた仕組みは、WordPress 6.3以降のアップデートで「パターン」という名称に整理されました。
現在は 同期パターン と 非同期パターン に分かれ、用途ごとに使い分けられるようになりました。
パターンの種類
WordPressの「パターン」には、大きく分けて 同期パターン と 非同期パターン の2種類があります。
- 同期パターン：編集すると全ページに反映される（共通部品向き）
- 非同期パターン：配置した時点で独立（テンプレート向き）
以下それぞれの特徴と使い分けのヒントを書いていきます！
同期パターン（旧：再利用ブロック）
同期パターンは、以前の「再利用ブロック」と同じ仕組みです。
ひとつ編集すると、サイト内のすべての配置箇所に同じ内容が反映されます。共通パーツをまとめて管理できるのが大きなメリットです。
たとえば「フッターの問い合わせボタン」「サイト全体で表示するキャンペーン告知」などに使えば、修正を一度で済ませることができます。
ただし注意点として、誤って編集すると全ページに変更が及んでしまうため、用途をしっかり見極めることが大切です。
一部のブロックを上書きできる
さらに、同期パターンは一部のブロックを上書き可能にすることができます。
やり方は簡単で、サイトエディターで同期パターンを作成し、対象のブロックを選択して [高度な設定] → [上書きを有効化] をチェックします。
そうすると、投稿やページにパターンを設置したときに「上書きを有効化」したブロックだけ個別に編集できるようになります。
たとえば「商品カード」のパターンでメーカー名や価格だけを個別に上書きできるようにしておけば、デザインを統一しつつ内容だけ柔軟に変えられるので、カスタムフィールドのような使い方も可能です。
最近では、こんな使い方をしました！↓
使い方の一例
無料体験申し込みのCTAを同期パターンで作成して、締め切りの日付の部分の段落ブロックの上書きを有効化しました。一部のテキストだけ変えたい場合に大変便利です。
非同期パターン
非同期パターンは、配置した時点で独立するのが特徴です。
あとから編集しても他のページに影響せず、1つずつ内容をカスタマイズできます。
たとえば「スタッフプロフィール」「イベント紹介」といった、レイアウトは同じでも内容はページごとに異なる部分にぴったりです。
テンプレートのように繰り返し使いたいけれど、中身は変えたいというケースに最適です。
同期パターンと非同期パターンを登録する方法
パターンを新規に登録する際に、同期か非同期かを選択できます。登録の流れは次のとおりです。
パターンにしたいブロックを選択
パターンにしたいブロックを選択します。
右上の「…（オプション）」から「パターンを作成」を選択
右上の「…（オプション）」から「パターンを作成」 を選択します。
パターンを追加画面に名前やカテゴリーを選択
名前は、管理しやすい名前を入れます。カテゴリーはお好きなカテゴリーを選んでください。（カテゴリーは選択しない場合マイパターンに入ります）
登録画面で「同期」をオンにすると同期パターンになり、オフにすれば非同期パターンとして登録されます。
同期と非同期の使い分け
同期パターンも「一部上書き」ができるようになったことで、非同期パターンが今後いらなくなってくるのでは？と思う方もいるかもしれません。
実際に使ってみると、上書きができないブロックもあり、複雑な入れ子構造のパターン全体を柔軟に変えるのは難しかったりします。つまり同期パターンは「全体は共通化したいけれど、一部だけ差し替えたい」といった 部分的なカスタマイズ に向いています。
非同期は「配置した瞬間に完全に独立」するため、すべての要素を自由に変更できます。なので、記事ごとに内容がバラバラになるようなケースでは、非同期のほうがストレスがないので、デザインのひな型だけ欲しいなら非同期が最適だと思います。
まとめ
- 同期パターン：共通部分をすべて同じにしたいときに便利
- 同期パターン＋一部上書き：全体のデザインを統一しつつ、一部だけ差し替えたいときに最適
- 非同期パターン：配置したパターンを完全に独立させ、自由に編集したいときに有効
と覚えておくと便利です。
わたし自身も制作の中でよく迷いましたが、この仕組みを理解すると使い所もわかってきました。みなさんもぜひ参考にしてみてください！
この記事を書いた人
を購入して
特典をゲットしよう！
特典A
X-T9 工務店
（ ナチュラル ）
19,800円 (税込)
0円に！
特典B
Lightning ビジネス（Evergreen）
9,900円 (税込)
0円に！
特典C
Lightning 工務店
（ ナチュラル ）
19,800円 (税込)
0円に！
今なら！
Vektor Passport の
有効期間中、上記の
デモサイトデータを
何度でも素早くまるごと
インポートできます！
爆速!!１分でデモサイトと同じ
ホームページができる
選んだデモサイトと同じ状態の WordPress サイトを、わずか数ステップで再現できるインポート専用プラグインです。数クリックで、プロ品質のサイトがすぐに起動します。
フルサイト編集対応ブロックテーマ
WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。
パターンを使って
よりクオリティの高いサイトに
パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。
ブロックエディターで
ABテストを
自由に作成できる
VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。