【ブロックエディタ】ブロックパターンの使い方(雛形ブロックを簡単に使い回せる)(Cocoon編)

【ブロックエディタ】ブロックパターンの使い方(雛形ブロックを簡単に使い回せる)(Cocoon編)

この記事では、効率よく組み合わせブロックを使い回せる「ブロックパターン」の作成(登録)、使い方について解説します。(テーマはCocoonを対象)

「CTRL」+「D」を押すだけで、この記事がブックマークできます!

ブロックエディタは効率よく記事を書ける機能が盛沢山です。

その一つに、使い回したいコンテンツ(ブロックなど)を何度も入力する手間が削減できる「ブロックパターン」というものがあります。

記事を投稿していくと、同じようなブロックやレイアウトを書くことが多くないですか?

そんな時に、雛形となる「ブロックパータン」をあらかじめ登録しておけば、記事の中で呼び出して、ちょっと修正するだけで手間がかかる作業を削減することができます。

ここでは、「ブロックパターン」についての作成(登録)方法、使い方を詳しく書いているので、「ブロックパターン」を有効利用して記事を書く作業を効率アップしていきましょう!

目次

ブロックパターンとは?

「ブロックパターン」とは、使い回しができる「ブロックを組み合わせた雛形のレイアウト」のことです。

あらかじめ「ブロックパターン」として登録しておくことで、記事内に「ブロックパターン」を簡単に挿入することができます。

そして、挿入した「ブロックパターン」を記事に合わせて一部修正するだけで、効率よく「ブロックパターン」を使い回しすることができます。

「ブロックパターン」の使い回し
ブロックパターンの使い回し手順

WordPress標準のブロックパターンは使えない

WordPressをインストールしたら、あらかじめ用意されているWordPress標準の「ブロックパターン」をすぐに使うことができます。

ただ、悲しいことにこの標準の「ブロックパターン」には、使えそうなものがほとんどありません。

WordPress標準のブロックパターンの例

実際に、標準で用意されている「ブロックパターン」は、以下の手順で確認できます。

新規記事を開き、「+」プラスのアイコンをクリック。

WordPress標準の「ブロックパターン」

「パターン」のタブをクリックすると、下の方にWordPress標準の「ブロックパターン」の一覧が用途別に表示されます。

WordPress標準の「ブロックパターン」

例えば、「テキスト」をクリックすると、テキストに関する「ブロックパターン」がその右側にイメージが表示されます。

WordPress標準の「ブロックパターン」

右のイメージを見ても、よくわからない「ブロックパターン」ですよね。

ブロックをどう組み合わせているのかも、パッと見てもわかりません。

一通り、標準で用意されている「ブロックパターン」を確認してみましたが、デザイン的に凝っているものばかりのようで、はっきり言って標準の「ブロックパターン」は使えません。

自分専用の「ブロックパターン」を作成する

「使い回しをしたい組み合わせブロック」というのは、やはり記事書く人それぞれで違うものだと思います。

となると、「ブロックパターン」を自由に作成できることが重要なんですが、実は、WordPress標準では「ブロックパターン」を作成(登録)する機能はないんですよね。

ちなみに、SWELLというテーマの場合はこの弱点をカバーするように、「ブロックパターン」を作成する機能(ブログパーツ)を独自に拡張して、「ブロックパターン」が作成できるようになっています。

Cocoonは、「ブロックパターン」を作成する機能は実装していなので、SWELLのように「ブロックパターン」を作成することはできません。

ただし、「ブロックパターン」を作成できるプラグインがあるので、このプラグインを使えば自由に「ブロックパターン」を作成することができます。

ブロックパターンを作れるプラグインをインストール

では、ブロックパターンを作れるプラグインをインストールしてみます。

ちなみに名前は「Custom Block Patterns」で、実はこのプラグインは、SWELLの開発者が作ったものなんですね(感謝)

では、「Custom Block Patterns」をインストールします。

WorPressの管理画面にログインし、管理画面メニュー「プラグイン」の「新規追加」(①)をクリック。

「プラグイン」の新規追加

キーワードに「Custom Block Patterns」を入力。(入力したら自動でプラグインを検索します)

プラグイン「Custom Block Patterns」をインストール

「Custom Block Patterns」が検索されるので、「今すぐインストール」をクリックし、次に「有効化」をクリック。

プラグイン「Custom Block Patterns」をインストール

これで「Custom Block Patterns」のインストールは完了です。
インストールが終わったら、管理メニューに「ブロックパターン」のメニューが追加されます。

プラグイン「Custom Block Patterns」をインストール

ブロックパターンの作成(登録)

では、「ブロックパターン」を作成(登録)してみます。

「ブロックパターン」といっても、普通に記事を書く要領で組み合わせるブロックを書いていけばいいだけです。

管理画面メニュー「ブロックパターン」→「新規追加」(①)をクリック。

「Custom Block Patterns」を使った「ブロックパターン」の作成

①「ブロックパターン」の名前を入力
②「ブロックパターン」の内容(組み合わせブロック)を入力
  ※組み合わせがない単独のブロックでも構いません
③「公開」をクリック

「Custom Block Patterns」を使った「ブロックパターン」の作成

再度「公開」をクリック

「Custom Block Patterns」を使った「ブロックパターン」の作成

これで、「ブロックパターン」の作成(登録)が完了です。
作成した「ブロックパターン」は、管理メニューの「ブロックパターン」から確認できます。

「Custom Block Patterns」を使った「ブロックパターン」の作成

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

では、登録した「ブロックパターン」を使ってみます。

記事の本文内で、「ブロックパターン」を挿入したい位置にカーソルをセットします。

登録した「ブロックパターン」を記事の中に挿入する

①「+」アイコン(①)をクリック
②「パターン」を選択
③「CBP」を選択
④登録した「ブロックパターン」をクリック

登録した「ブロックパターン」を記事の中に挿入する

これで、下の画像のように記事の中に「ブロックパターン」の内容(ブロック)が挿入されます。

「ブロックパターン」の挿入はコピーになるので、登録済の「ブロックパターン」は影響受けずに修正することができます。

登録した「ブロックパターン」を記事の中に挿入する

記事に挿入された「ブロックパターン」の内容を記事にあわせて修正したのが、以下の画像です。

登録した「ブロックパターン」を記事の中に挿入する

ブロックパターンのまとめ

「ブロックパターン」の作成(登録)、使い方について解説しました。

「同じ組み合わせのブロックを、記事にあわせて修正したい」という場合は、「再利用ブロック」ではなく「ブロックパターン」を利用しましょう。

「ブロックパターン」を挿入したら、あとはちょっとした修正をするだけで「毎回同じように書く(同じブロックレイアウト)」作業がかなり削減できますよ。

「再利用ブロック」同様、「ブロックパターン」も効率よく記事を書くことができる強力なツールです。

記事の数が増えれば増えるほど、「ブロックパターン」による作業時間削減の恩恵を受けるので、ぜひ有効利用していきましょう!

同じ「使い回し」ができる「再利用ブロック」については、次の記事を参考にしてください。


「再利用ブロック」と「ブロックパターン」の違いがわからない人は、次の記事を参考にしてください。

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