ワードプレスブログの始め方

【図解あり】WordPressブロックパターンの追加・編集・削除・使い方を解説

ブロックパターンを使ってみたいのですが、使い方がわかりません。

このような疑問を解決する記事を書きました。

ワードプレスのブロックパターンは、よく使うレイアウトや装飾をすぐ呼び出せる便利な機能です。

まだ使いこなしている方はそこまで多くない印象ですが、ブロックエディタを使っているなら使わないともったいない機能のひとつです。

ちなみに、ブロックパターンを使うとこんなことができます!(音声あり推奨)

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

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

単純にブロックを呼び出して使うだけではなく、使い方次第ではブログ記事作成の効率化にもつながります。

この記事では、WordPressのブロックパターンの追加や編集・使い方を図解つきでわかりやすく解説します。

「ブロックパターンとは何か」よりも、まずは実際に使う方法を知りたい方に向けた内容です。

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

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

完成されたレイアウトをそのまま使える
Emanon Patterns

記事レイアウトの作成に時間がかかっている方や、ブロックエディタで記事デザインを整えたい方には、Emanon Patternsはとても便利なプラグインです。

WordPressの記事作成をもっとスムーズにしたい方は、こちらから詳細をご確認ください。

特別価格で提供中!

WordPressのブロックパターンを使う前に知っておきたいこと

WordPressのブロックパターンは、複数のブロックを組み合わせたレイアウトを呼び出せる機能です。

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

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

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

ブロックパターンは、WordPressにもともと用意されているもののほか、テーマやプラグインによって追加されていることもあります。

また、自分でマイパターンを作ることも可能です。

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

ゆかブログに入っている自作パターンなどです。

※音は入っていません。

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

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

ゆか

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

再利用ブロックと呼ばれていました!

以前の「再利用ブロック」に近い機能は、現在はパターンとして扱われています。

そのため、古い情報を見ていると「再利用ブロック」という表現が出てくることがありますが、今はパターンとして理解しておけばOKです。

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

WordPressのパターンには、「同期パターン」と「非同期パターン」の2種類があります。

同期パターン

同じパターンを使っている場所すべてに変更が反映されるタイプです。

サイト全体で同じ内容を表示したい、お知らせや共通パーツに向いています。

同期パターン

挿入したあとに、それぞれ個別で編集できるタイプです。

記事ごとに内容を変えながら、同じデザインだけ使いたいときに向いています。
例えば、吹き出しやメリット・デメリット、商品紹介ボックスなどに使いやすいです。

文章だけだと分かりづらいので、こちらの動画もどうぞ。(音声あり推奨)

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

WordPressのブロックパターンの追加・登録手順

ここからは、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か所で編集すると他のページで使っている同じパターンにも変更が反映されます。
共通のお知らせやプロフィールには便利ですが、記事ごとに内容を変えたいパーツには向きませんのでご注意ください。

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

非同期パターンの使い方・編集

記事ごとに内容を変えながら同じデザインを使いたいなら、非同期パターンの方が使いやすいです。

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

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

STEP

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

STEP

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

STEP

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

STEP

パターンを挿入します。

STEP

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

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

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

WordPressのブロックパターンは、カテゴリー分けして管理できます。

パターンが増えてきたときにカテゴリー分けしておくと、使いたいパターンを見つけやすくなって便利です。

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

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

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

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

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

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

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

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

※音は出ません

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

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

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

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

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

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

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

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

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

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

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

STEP

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

STEP

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

STEP

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

STEP

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

STEP

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

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

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

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

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

パターンを検索して使う

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

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

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

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

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

※音は出ません

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

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

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

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

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

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

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

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

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

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

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

今回は、WordPressのブロックパターンの追加や編集・使い方を図解つきでわかりやすく解説しました。

ブロックパターンを使うと、よく使うレイアウトや装飾をすぐ呼び出せるので、記事作成の効率アップにつながります。

特に、

・同じ装飾を何度も使う
・CTAや説明ボックスをよく入れる
・記事作成を少しでも時短したい

という方には便利な機能です。

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

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

パターンには「同期パターン」と「非同期パターン」があるので、用途に合わせて使い分けてみてください。

上手にブロックパターンを追加・登録して、投稿作業をもっとラクにしていきましょう!!

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

完成されたレイアウトをそのまま使える
Emanon Patterns

記事レイアウトの作成に時間がかかっている方や、ブロックエディタで記事デザインを整えたい方には、Emanon Patternsはとても便利なプラグインです。

WordPressの記事作成をもっとスムーズにしたい方は、こちらから詳細をご確認ください。

特別価格で提供中!

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

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