ブロックパターンの使い方!ブロックエディターで組んだレイアウトを使い回そう!

ブロックパターンの使い方!ブロックエディターで組んだレイアウトを使い回そう!

WordPressのブロックエディターには「ブロックパターン」という機能があります。

良く使うブロックの組み合わせ、レイアウトなどを保存しておき、必要な時に呼び出すことができる機能です。

ブログ記事の中や、トップページのレイアウトなど、うまくブロックパターンを使うことで作業を効率化することができます。

ブロックパターンはとても便利…!
この記事の内容まとめ
  • ブロックパターンの使い方
  • プラグインでブロックパターンを作る方法
  • テーマの機能でブロックパターンを作る方法

とても便利な機能なので知っておいて損はないです。

ぜひ、参考にしてください。

ブロックエディターの使い方が不安な方は、まずこちらの記事もみてみてください。
>>WordPressブロックエディター(Gutenberg)の使い方!時短テクニックも紹介!

目次

ブロックパターンとは?

ブロックパターンは、複数のブロックで作られたレイアウトを登録しておいて、記事内で呼び出すことができる機能です。

ブロックエディターを使っている方なら、テーマに関係なくブロックパターン機能を使うことができます。

以下が実際のブロックパターンを使っている動画です。

呼び出したブロックパターンは自由に編集することができます。

なので、良く使うレイアウトやブロックの組み合わせをブロックパターンに登録しておくことで、記事執筆やコンテンツ制作にかかる時間を短縮することができます。

さとしん

とっても便利でおすすめの機能です…!

また、ブロックエディターには、ブロックパターンと似た機能で「再利用ブロック」というものも存在します。

再利用ブロックは、ブロックの組み合わせだけでなく、登録された画像や文字も定型的に使うことができる機能です。

1つの再利用ブロックを変更すると、他の全ての再利用ブロックにも編集内容が反映されます。

挨拶や、目次前に挿入しているプロフィールなど、定型的なコンテンツには再利用ブロックがおすすめです。

再利用ブロックについては、以下の記事で紹介しています。
>>再利用ブロックの使い方!ブロックエディターで定型文を使い回す方法!

ブロックパターンの作り方

ブロックパターンはWordPress側で数パターン用意されていますが、自分で新しく作成、登録することもできます。

良く使うブロックの組み合わせをブロックパターンに登録する方法を紹介します。

簡単にできる方法として主に2つの方法があります。

  1. プラグインを使用する
  2. テーマの機能を使用する

自分でプログラムを書いて機能を実装することもできますが、今回は省略します。

プラグイン「Custom Block Patterns」で作る

ブロックパターンを登録するプラグインは数多く開発されています。

今回はその中から「Custom Block Patterns」というプラグインをご紹介します。

日本のプラグインで、SWELL開発者の了さんが開発されたプラグインです。

さとしん

もちろん、SWELL以外のテーマでも使用できますよ…!

SWELLはテーマ側に機能が用意されているので、このプラグインは不要です。

使い方もシンプルなので、ぜひ使ってみてください。

簡単に紹介しておきます。

STEP
Custom Block Patternsをインストール

管理画面→「プラグイン」→「新規追加」の右上にある検索窓から『Custom Block Patterns』と検索しましょう。
見つけたらインストールして有効化してください。

Custom Block Patterns
STEP
管理画面→「ブロックパターン」→「新規追加」をクリック
Custom Block Patterns-2
STEP
お好みのブロックの組み合わせを作成して「公開」ボタンをクリック

通常の記事作成と同じ要領で公開まで進めましょう。

Custom Block Patterns-3
さとしん

これで登録が完了です…!

WordPressテーマ「SWELL」はテーマの標準機能で作れる

WordPressテーマの機能としてブロックパターンの登録ができることもあります。

今回は、当サイトでも使用しているSWELLを例にご紹介します。

SWELLはブロックエディターの機能がとても充実しているテーマです。詳細は別記事を見てみてください。

>>SWELLのブロックエディターは使い心地が最高!充実の機能を動画で紹介!

SWELLでは、以下の手順でブロックパターンを作成していきます。

ブログパーツというSWELL専用の機能を使います。
>>SWELLブログパーツの使い方!記事内でもウィジェットでも大活躍の便利機能!

STEP
管理画面→「ブログパーツ」→「新規追加」をクリック
SWELLのブロックパターン
STEP
お好みのブロックの組み合わせを作成
SWELLのブロックパターン-2
STEP
サイドバーの用途を「ブロックパターン」に設定して公開
SWELLのブロックパターン-3

これでブロックパターンの登録が完了です。

さとしん

テーマの機能として用意されていると手間が減ってありがたいですね…!

SWELLについて詳しく知りたい方は以下の記事を見てみてください。

>>SWELLレビュー!進化が止まらない高機能でオシャレなWordPressテーマ!

ブロックパターンの使い方

では、登録されているブロックパターンを記事内に呼び出す方法を紹介します。

先ほどの動画が1番分かりやすいと思うので、再掲します。

一応、テキストと画像でも説明していきます。

STEP
投稿画面の左上にある「+」ボタンをクリック
ブロックパターンの使い方
STEP
パターンをクリックし、カテゴリーを選択
ブロックパターンの使い方-2
STEP
お好みのブロックパターンをクリック
ブロックパターンの使い方-3

これだけの操作でブロックパターンを呼び出すことができます。

ブロックパターンを記事内に配置した後は自由に変更することができます。

画像を差し替えたり、文字を入れ替えたりなど自由にコンテンツを作りましょう。

さとしん

良く使うレイアウトはブロックパターンで効率化できるね…!

効率良くコンテンツを作っていきましょう!

良く使うブロックの組み合わせやレイアウトを登録しておくことができる「ブロックパターン」についてご紹介しました。

複数の記事で同じレイアウトのブロックを使う機会の多い方にはとてもおすすめしたい機能です。

ブロックパターンに良く使う組み合わせを登録しておけば、クリック操作だけでいつでも呼び出すことができます。

また、呼び出したブロックは自由に編集をすることができます。

さとしん

かなり柔軟な使い方ができる便利機能です…!

なかなかブロックエディターを使った作業の効率が上がらないと悩んでいる方は、ご自身のコンテンツの中に、ブロックパターンで効率化できる要素がないか振り返ってみると良いかもしれません。

単純にブロックエディターの操作に慣れていない場合は、ショートカットキーを覚えてみるのもおすすめです。以下の記事で解説しています。

>>ブロックエディターの記事執筆を快適にするショートカットまとめ!

最後まで読んでいただきありがとうございました。

ブロックパターンの使い方!ブロックエディターで組んだレイアウトを使い回そう!

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!

この記事を書いた人

WordPressとSWELLが好きな20代のブロガー。
ブロックエディターに出会ってWordPressが楽しくなりました。
WordPressのこと、SWELLのこと、ブロックエディターのことを熱く語るブログです。

目次
閉じる