MENU
おすすめの記事
WordPressテーマ『SWELL』を使った素敵なサイト、ブログを集めました!!

2024年4月にリニューアルしました!絞り込み検索やお気に入り機能もあります。ぜひ見ていってください!

さとしん
WordPressとSWELLが好きなブロガー。
ブロックエディターに出会ってWordPressが楽しくなりました。
WordPressのこと、SWELLのこと、ブロックエディターのことを熱く語るブログです。
【2024/10/24】SWELLサイト事例集を更新しました!→【20241024】SWELLサイト集更新!→クリックタップ

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

当ページのリンクには広告が含まれています。
  • URLをコピーしました!

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

ブロックパターンは、良く使うブロックの組み合わせやレイアウトをあらかじめ登録しておき、エディター上で簡単に呼び出すことができる機能です。

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

この記事の内容
  • ブロックパターンとはどんな機能か?
  • ブロックパターンの作り方
  • ブロックパターンの使い方

とても便利な機能なのでぜひ活用してみてください。

2023年8月9日リリースのWordPress6.3から、ブロックパターンの名称が「パターン」に変更されました。この記事でも、WordPress6.2以前の「ブロックパターン」だけでなく、6.3以降の「パターン」についての解説も追記しました。ご自身のサイトのバージョンを確認の上、当てはまる内容をご確認ください。


ブロックエディターガイド

WordPressブロックエディターの使い方をまとめたガイドを作りました。

目次

ブロックパターンとは?

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

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

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

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

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

さとしん

ブロックパターンはとても便利でおすすめの機能です…!

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

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

ある記事内の再利用ブロックを編集すると、他の記事内で使用している同じ再利用ブロックにも編集内容が反映されます。

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

WordPress6.3から、再利用ブロックとブロックパターンが統合され「パターン」と名称が変更されました。それぞれ解説していきます。

WordPress6.3から名称が「パターン」に変更|再利用ブロックと統合された

2023年8月9日にリリースされたWordPress6.3から、従来の「ブロックパターン」と「再利用ブロック」が統合されて『パターン』という名称に変更になりました。

機能名称の変更で少し戸惑うかもしれませんが、従来よりもブロックパターンの登録が簡単になっています。

概要や使い方を紹介していきます。

パターンの種類|同期パターンと非同期パターンがある

パターンは、同期する仕様と同期しない仕様の2種類あります。以下のイメージです。

  1. 同期パターン(従来の再利用ブロック)
  2. 非同期パターン(従来のブロックパターン)

同期パターンは従来の再利用ブロックなので、任意の1つの同期パターンを編集すると、別の場所で使っている同じ同期パターンにも変更が反映されます。

非同期パターンは従来のブロックパターンで、他ページなどで使っている同じパターンに変更は反映されません。

再利用ブロックとブロックパターンの違い

再利用ブロックとブロックパターンの機能イメージをそれぞれ図にしました。

再利用ブロック
ブロックパターン

同期パターン・非同期パターンそれぞれの登録方法

同期パターン、非同期パターンは同じ場所から登録ができるようになりました。特に非同期のパターン(ブロックパターン)に関しては従来よりも簡単に登録できるようになりました。

それぞれ紹介します。

同期パターンの登録方法

同期パターン(従来の再利用ブロック)は以下の手順で登録します。

STEP
登録したいブロックを選択
STEP
ブロックツールバーの「オプション」から『パターン / 再利用ブロックの作成をクリック
WordPress6.3以降のパターン登録方法-1
STEP
パターンの名前を入力
WordPress6.3以降のパターン登録方法-2
STEP
「同期」ボタンをオンにした状態で、『生成』をクリック
WordPress6.3以降のパターン登録方法-3

これで、サイト全体で再利用する同期パターンが登録されました。

非同期パターンの登録方法

同期しない通常のパターン(従来のブロックパターン)は以下の手順で登録します。

STEP
登録したいブロックを選択
STEP
ブロックツールバーの「オプション」から『パターン / 再利用ブロックの作成をクリック
WordPress6.3以降のパターン登録方法-1
STEP
パターンの名前を入力
WordPress6.3以降のパターン登録方法-2
STEP
「同期」ボタンはオフのまま、『生成』をクリック
WordPress6.3以降のパターン登録方法-4

この方法で同期しないパターンとして、従来のブロックパターンと同じように登録されます。

同期パターン・非同期パターンそれぞれの使い方

登録した同期パターンと通常のパターンを使用する方法を紹介します。

同期パターンの使い方

同期パターンは、ブロックインサーターの「再利用可能」タブから呼び出すことができます。

WordPressの同期パターンの使い方-1

もしくは、段落ブロック内で「/ + “再利用ブロック名”」でも呼び出すことが可能です。

WordPressの同期パターンの使い方-2

従来の再利用ブロックと同様の使い方なので、詳細は以下の記事を見てみてください。

非同期パターンの使い方

同期パターンも従来のブロックパターンと同様ですが、ブロックインサーターの「パターン」タブから呼び出すことができます。

WordPressの非同期パターンの使い方-1

【WordPress6.2以前の方向け】ブロックパターンの作り方

WordPressのバージョンが6.2以前の方は以下の方法でブロックパターンを登録できます。

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

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

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

自分でコードを書いて機能を実装することもできますが、今回は省略します。

それぞれの方法を紹介していきます。

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

一部のWordPressテーマでは、ブロックパターンの登録や管理ができる機能が実装されていることがあります。

今回は、当サイトでも使用しているSWELLを例にご紹介します。SWELLはブロックエディターの機能がとても充実しているテーマです。

SWELLでは、ブログパーツという独自機能を活用してブロックパターンを作成していきます。

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

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

さとしん

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

は僕の中でイチオシのWordPressテーマです。機能も充実しており、ブログにもサイト制作にも活用できます。

特に、ブロックエディターの使い心地は本当に素晴らしく、記事の執筆やサイト制作が楽しく感じられるようになりました。SWELLへの思いは以下のレビュー記事にまとめています。

3年以上愛用しているテーマです…!

URL:

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

もし、SWELLのようにテーマ側でブロックパターン登録機能が無い場合は、プラグインを使用することで代用も可能です。

シンプルな機能のものだと、SWELL開発者の了さんが開発された「Custom Block Patterns」というプラグインがおすすめです。

さとしん

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

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

使い方もシンプルなので、ぜひ使ってみてください。簡単に紹介しておきます。

STEP
Custom Block Patternsをインストール

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

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

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

Custom Block Patterns-3
さとしん

これで登録が完了です…!簡単でしたね!

プラグイン「VK Block Patterns」は便利な拡張機能も使える

上述したCustom Block Patternsプラグインは、ブロックパターンを登録・管理するだけのシンプルなプラグインでした。

もう少しブロックパターンの機能を強化したい方にはVK Block Patternsプラグインがおすすめです。

VK Block PatternsはLightningという有名なWordPressテーマを開発している株式会社ベクトルさんのプラグインです。

VK Block Patternsでは、以下のような機能が使えます。

  • 自分で作成したパターンの登録
  • VK Block Patterns独自のパターンの追加
  • 登録したパターンのカテゴリー分け、編集権限の設定
  • WordPress標準パターンを非表示にする
  • VKパターンライブラリとの連携機能

VK Block Patterns独自のパターンが追加されるので、自分でブロックパターンを作らずに、よく見かけるようなデザインを再現することができます。

それから、サイト制作や複数人が絡むメディアなどで便利な機能として、ブロックパターンの登録権限を設定できる機能があります。例えば、クライアントさんやライターさんが不必要にブロックパターンを登録してしまい混乱するようなケースを防ぐことができます。

ブロックパターンの機能を少し便利に拡張しながら使いたい場合には、VK Block Patternsを使ってみてください。

VK Block Patternsプラグインについては以下の記事にまとめています。

【WordPress6.2以前の方向け】ブロックパターンの使い方

ここまで、ブロックパターンを自分で作成・登録する方法を紹介しました。

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

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

動画内の流れと同じですが、テキストと画像でも説明していきます。

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

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

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

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

さとしん

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

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

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

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

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

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

さとしん

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

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

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

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

ブロックエディターの関連記事

ブロックエディターの使い方完全ガイド↓↓

ブロックエディターの便利機能
テーマやプラグイン独自のブロック機能
ブロックパターンの使い方!ブロックエディターで組んだレイアウトを使い回そう!

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次