[PR] WordPress苦手主婦のためのWordPress専門コミュニティ「MasterPress®︎」詳細はこちら

【図解あり】WordPressのブロックパターンの作り方・使い方を解説

ブロックエディタを使っているのですが、ブロック一覧のところにある「パターン」ってなんですか?

このような質問をいただきましたので、解説します!!

この記事を書いた人
ゆか
  • ゆかブログの管理人
    (ブログで生活する主婦ブロガー)
  • WordPressコミュニティ「MasterPress®」主宰
  • WordPressを教えた人:200人超
  • YouTube「ゆかチャンネル」登録者:13,300人超

ワードプレスのブロックパターン、まだまだ使いこなしている方はあまりいないようなんですが、パターン機能を使ってないのはかなりもったいないです!!

なぜかというと、ひとまずこんなことができるという動画を簡単に作ったのでこちらをどうぞ。(音声あり推奨)

※音が出ますのでご注意ください!!

参照:パターン – Japanese Team – WordPress.org 日本語

このようにすでにデザインパターン化されたブロックを呼び出して使うことができるのがパターン機能です。

繰り返しになりますが、ブロックエディタを使っているなら、便利なパターン機能は使わないともったいないです!!

単純にブロックを呼び出して使う以外にも、使い方次第ではブログ記事作成の効率化につながる素晴らしい機能です。(詳しくは本文で…。)

この記事では、ワードプレスのブロックパターンについて詳細から使い方まで詳しく解説します。

ブロックパターンを使いこなして、効率よくブログ記事を書いてくださいね!!

ブロックパターンの説明とかいいから「すぐに使い方だけ知りたーい」という方はこちら
> WordPressのブロックパターンの使い方

WordPress専門コミュニティ
「MasterPress」の主宰をしています!

WordPressのブロックパターンとは?

WordPressブロックパターンは、複数のブロックを組み合わせた事前にデザインされたレイアウトのブロックです。

数クリックするだけで、あらかじめ用意されたパターンを挿入できるので、複雑なレイアウトも簡単に作成できます。

例えば、こういったホームページのトップページに使うようなデザインもパターンを使えば一瞬です。

説明文+ボタンがついたパターン:サービスプランを表示させるのに使えます。

ブロックパターンは元々ワードプレスのデフォルトで作られているものがあったり、使っているテーマによってはテーマが作ってくれているパターンなどがあります。

他にも記事装飾とかできるプラグインだったら、パターンを作ってくれてることも♪

それに、自分でマイパターンを作ることも可能なんです。

作り方はこちらの「WordPressのブロックパターンの作成・登録手順」で解説しています。

こちらはゆかブログに入っているパターンです。

※音は入っていません。

自分で作ったパターンとWordPressテーマ「STORK19 」のパターン、プラグイン「SIMPLE BLOG DESIGN」のパターンが入っています。

パターンは、ブロックエディタを利用している方ならどなたでも簡単に使うことができますので、使いこなさないともったいない機能です。

ちなみにこの機能は、WordPress 5.5の時導入されました。そして、2023年8月にリリースされたWordPress6.3以降では管理画面から簡単にブロックパターンの登録ができるようになっています。

ゆか

わたしはめちゃくちゃパターンを活用し、記事を書く効率を上げていますよ。

再利用ブロックとパターンは統合しました

WordPress 6.3 から、従来の「再利用ブロック」と「ブロックパターン」は統合されて 「パターン」 という名称に変更されました。

統合による主な変更点
  • 機能名称の変更
  • パターン登録方法の簡略化
  • カテゴリー機能の追加
  • パターンブラウザのデザイン変更
ゆか

再利用ブロックはめちゃくちゃ使える機能だったので、統合された時「再利用ブロックがなくなったー」とかなり焦りました。

ただ、再利用ブロックは統合されて名称やら機能やら変わったのですが、パターンになってかなり使い勝手が良くなりました!

ちなみに再利用ブロックというのは、作成したブロックを「再利用ブロック」として登録すると、他のページでも同じ内容のブロックを呼び出して再利用することができる機能。

詳しくは以下の記事に詳しくまとめています。

同期パターンと非同期パターン

WordPress 6.3 以降、パターンには「同期パターン」と「非同期パターン」と呼ばれる2種類ができました。

同期パターン
  • 再利用ブロックの特性を受け継いだパターン。
  • 特定のページで使用されている同期パターンを編集すると、他のページで使用されている同じ同期パターンにも変更が反映される。
  • サイト全体で統一させたいお知らせなどを入れておくのに適している。
同期パターン
  • 従来のブロックパターン。
  • 特定のページで使用されている非同期パターンを編集しても、他のページで使用されている同じパターンには変更が反映されない。
  • 記事やページごとに個別のデザインを適用したい時に適している。
    (例:吹き出しやメリット・デメリットとかに使える)

文章の説明だけだと分かりづらいのでこちらの動画を観てみてください。(音声あり推奨)

※音がでますので、ご注意ください。

WordPressのブロックパターンの作成・登録手順

ここからはワードプレスのブロックパターン「同期パターン」「非同期パターン」の作成・登録手順をそれぞれ詳しく解説します。

同期パターンの作成・登録

同期パターン作成手順
  1. エディター画面でパターンにしたいブロックを選択します。
  2. ブロックツールバーの「オプション」メニューを開きます。
  3. 「パターンを作成」を選択します。
  4. 名前・カテゴリーを入力し、「生成」をクリックします。

この手順を詳しく解説します。

ワードプレスの投稿画面を開いて登録したいているところから解説スタートします。

STEP

エディタ画面でパターンにしたいブロックを選択します。

STEP

ブロックツールバーの「オプション」メニューを開きます。

STEP

「パターンを作成」を選択します。

STEP

名前・カテゴリーを入力し、「生成」をクリックします。
※同期のチェックは外さないでください。カテゴリー分けについては別で解説します。(→)

名前は、自分が使いやすい名前をつけてあげてください。使う時にはパターンの検索をしたりもできるので、検索するのに使える名前がおすすめです。

これで同期パターンが作成・登録できました。

※同期パターンの使い方についてはこちら同期パターンの使い方

非同期パターンの作成・登録

非同期パターン作成手順
  1. エディター画面でパターンにしたいブロックを選択します。
  2. ブロックツールバーの「オプション」メニューを開きます。
  3. 「パターンを作成」を選択します。
  4. パターン設定画面で「同期」のチェックを外します。
  5. 名前・カテゴリーを入力し、「生成」をクリックします。

※途中までは、同期パターンと同じ手順です。

この手順を詳しく解説します。

STEP

エディター画面でパターンにしたいブロックを選択します。

STEP

ブロックツールバーの「オプション」メニューを開きます。

STEP

「パターンを作成」を選択します。

STEP

パターン設定画面で「同期」のチェックを外します。←これは絶対に忘れないでください!

STEP

名前・カテゴリーを入力し、「生成」をクリックします。
※カテゴリー分けについては別で解説します。(→)

名前は、自分が使いやすい名前をつけてあげてください。使う時にはパターンの検索をしたりもできるので、検索するのに使える名前がおすすめです。

これで非同期パターンが作成・登録できました。

※非同期パターンの使い方についてはこちら非同期パターンの使い方

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

作成・登録したワードプレスのブロックパターン「同期パターン」「非同期パターン」の使い方をそれぞれ詳しく解説します。

ここでは、自分が作成したブロックだけを使う方法をご紹介していますが、もともと入っているWordPressデフォルトのパターンや使っているテーマのパターンもほぼ同じ使い方です。

同期パターンの使い方

同期パターン使い方
  1. エディタ画面で左上の「+」クリックしてブロック一覧を開きます。
  2. 「パターン」タブに切り替えます。
  3. 「すべてのパターン」を選択します。
    (ここでは、ひとまず「すべてのパターン」から探してみます)
  4. 使いたいパターンを選択します。
  5. パターンを挿入します。
  6. パターン内のテキストや画像などをお好きなように編集します。
STEP

エディタ画面で左上の「+」クリックしてブロック一覧を開きます。

STEP

「パターン」タブに切り替えます。

STEP

「すべてのパターン」を選択します。
(ここでは、ひとまず「すべてのパターン」から探してみます)

STEP

使いたいパターンを選択します。

直近で登録したモノが一番上に表示されます。

STEP

パターンを挿入します。

STEP

パターン内のテキストや画像などをお好きなように編集します。

同期パターンは最初の方でもお伝えした通り
『特定のページで使用されている同期パターンを編集すると、他のページで使用されている同じ同期パターンにも変更が反映される』
ご注意ください。

以上、これが同期パターンの使い方です。

非同期パターンの使い方

非同期パターン使い方
  1. エディタ画面で左上の「+」クリックしてブロック一覧を開きます。
  2. 「パターン」タブに切り替えます。
  3. 「すべてのパターン」を選択します。
    (ここでは、ひとまず「すべてのパターン」から探してみます)
  4. 使いたいパターンを選択します。
  5. パターンを挿入します。
  6. パターン内のテキストや画像などを編集します。
STEP

エディタ画面で左上の「+」クリックしてブロック一覧を開きます。

STEP

「パターン」タブに切り替えます。

STEP

「すべてのパターン」を選択します。
(ここでは、ひとまず「すべてのパターン」から探してみます)

STEP

使いたいパターンを選択します。

STEP

パターンを挿入します。

STEP

パターン内のテキストや画像などをお好きなように編集します。

以上、これが非同期パターンの使い方です

WordPressのブロックパターンのカテゴリー分け方法

ブロックパターンはカテゴリー分類をして管理できます。

カテゴリー分けすると、使用するときに目的のパターンを見つけやすくなり、効率的にパターンを見つけて活用できます。

カテゴリー分けするときの注意点
  • カテゴリー分けは、あくまでも目安です。
  • 多くのカテゴリーを設定すると、かえって使いにくくなる場合があります。
  • 適切なカテゴリー名を設定することで、パターンを見つけやすくなります。

ブロックパターンのカテゴリーは、以下の方法で設定できます。

  • パターン作成時: 新しいパターンを作成する際、カテゴリーを選択できます。
  • パターン編集時: 既存のパターンのカテゴリーを変更できます。

パターン作成時にカテゴリー追加する方法

カテゴリーをパターンを作成するときに作成するには、以下の画像のパターン作成時にカテゴリー名を入力します。

上記の入力の際に、カテゴリーに自分でつけたいカテゴリー名を入力をして決定すると、以下のような表示になります。

この状態で「生成」をクリックすると、カテゴリーが作成されます。

文章だと伝わりづらいかもしれませんので、こちらの動画をどうぞ。(音はありません)

※音は出ません

パターン編集時にカテゴリー追加する方法

作成したパターンは、ワードプレス管理画面のメニューで「パターン」に管理されています。

メニュー名はWordPressテーマによって違うので「マイパターン」「再利用ブロック」などの名前で見つけてください。

ワードプレス管理画面のメニューで「パターン」を見つけてクリックします。(ここではWordPressテーマ「Cocoon」で解説します。)

パターン一覧が表示されますので、カテゴリーをつけたいパターンを選択します。

パターンの編集画面が開くので、①左側の設定を開いて②パターンカテゴリーにパターン名を入力します。

パターン名の入力が完了したら、「更新」をクリックします。

これでカテゴリー追加完了しました。

カテゴリーから見つけてブロックパターンを使う

カテゴリーを追加したら、ブロックパターンを使うときにカテゴリーから見つけることができます。

簡単に使い方を解説します。

STEP

エディタ画面で左上の「+」クリックしてブロック一覧を開きます。

STEP

「パターン」タブに切り替えます。

STEP

パターンカテゴリーで設定した名前を見つけて選択します。

STEP

パターンカテゴリーに設定したブロックパターンから使いたいモノを見つけてクリックします。

STEP

このようにパターンカテゴリーから選択したブロックパターンを挿入します。

これで簡単にパターンカテゴリーからパターンの挿入ができました。

パターンカテゴリーは、たくさんパターンを作っていない時はそんなにいい機能だとは思わないと思います。

ただ、作成・登録したパターンが増えてきたら、カテゴリー分けして使う方が使いやすいです!

上手にカテゴリー分けをして使う時には、効率よく使用できるようにしておきましょうね!!

パターンを検索して使う

パターンを使うときは、検索して使うことも可能です。

ワードプレスのブロックエディタには、検索窓が2箇所ついています。

  • 文章を入力するところにある「+」ボタンを開くと表示されるよく使うブロックの上に表示される検索窓。
  • 左上の「+」をクリックしてブロック一覧を開いた時に一番上に表示されている検索窓。

ブロックパターンの検索をするときは、この2つの検索窓のどちらからにブロックパターンの名前を入力すると検索ができます。

こちらが検索を使ったパターンの使い方動画です。(音は出ません)

※音は出ません

パターンは検索を使うと簡単に挿入できるので、パターン名は検索で使いやすいように分かりやすい名前をつけておくことをおすすめします!

WordPressのブロックパターンの削除方法

作成・登録したブロックパターンを削除したいときは、左側のメニューの「パターン」から削除をします。

メニュー名はWordPressテーマによって違うので「マイパターン」「再利用ブロック」などの名前で見つけてください。

ワードプレス管理画面のメニューで「パターン」を見つけてクリックします。(ここではWordPressテーマ「Cocoon」で解説します。)

パターン一覧が表示されますので、削除したいパターンの上にマウスを合わせます。

削除したいパターンにマウスを合わせると、「ゴミ箱へ移動」という表示が出てくるのでクリックします。

これでパターンがゴミ箱に移動されました。

このように簡単にパターンの削除はできます。

「パターンを作り過ぎてしまった」「何だか分からないけどパターンが増えていた」みたいな方は、パターンの削除をして整理してみてください!!

まとめ:WordPressのブロックパターンの作り方・使い方を図解入り解説

今回は、ワードプレスのブロックパターンについて詳細から使い方まで詳しく解説しました。

最初にお伝えしたようにブロックパターンは、ブロックエディタを使っている人は使わないともったいない機能です。

もう一度最初につけた動画を貼っておきます。

※音が出ますのでご注意ください!!

パターンには、同期パターンと非同期パターンがあります。この2つの違いは、ちゃんと知って使いこなせるようになることが大事です。

上手にブロックパターンを作成・登録して、投稿の時に効率よく記事を投稿できるように工夫してみてくださいね!!

他にもブロックエディタについての記事を投稿しています。ぜひこちらもチェックしてみてくださいね(^O^)/

WordPress専門コミュニティ
「MasterPress」の主宰をしています!

ABOUT US
ゆかアフィリエイター兼WordPress専門家
ご訪問ありがとうございます! ゆかブログの管理人でアフィリエイター兼WordPress専門家のゆかです。福岡で3人の子供を育てながら、お家でのんびりとブログを書いて生活しています。
ブログを書く以外のお仕事は、パソコンが苦手な女性起業家さんのワードプレスブログ運営をサポートしたり、代行でワードプレスの立ち上げをしています。
●WordPressコミュニティ『MasterPress』運営
SEO検定2級
●チャンネル登録13,600人超え!WordPressブログ構築専門YouTubeチャンネル「ゆかチャンネル

ゆかブログでは、WordPress作成方法・ブログ記事の書き方・アフィリエイトの方法など、パソコン苦手な初心者さんの『困った!!』を解決しています。
詳しいプロフィールはこちら>>