ブログ初心者・Web制作の情報サイト
WordPressでオリジナルのブロックパターンを作成する方法

WordPressでオリジナルのブロックパターンを作成する方法

この記事ではWordPressで自作のブロックパターンを作成する方法を紹介します。グーテンベルクが使えれば誰でもオリジナルのブロックが作成できます。

広告タグ・アフィリエイトタグ・ショートコードの雛形・オリジナルブロックなど、よく使うブロックをブロックパターンに登録して使い回せば記事作成が効率的になります。オリジナルのブロックパターンを作成すれば記事の独自性を高めることも可能です。

こんなブロックが欲しいな、と思っている人はオリジナルのブロックパターンを作成してみましょう。作成方法はそれほど難しくありません。

ブロックパターン

ブロックパターンはWordPress5.5で追加された機能です。

再利用可能ブロックと似ていますが、ブロックパターンは出力したブロックを個別に編集可能です。ブロックパターンは「再利用可能ブロックを通常のブロックに変換した状態」とよく似ています。

ブロックパターンはグーテンベルクが使えれば誰でも簡単にオリジナルブロックを作成できる凄い機能です

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

ブロックパターンはブロックを雛形として登録して編集画面上で呼び出す機能です。

編集画面でブロックの追加 > パターン

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

デフォルトではいくつかの(邪魔な)ブロックパターンが登録されています。

ブロックパターンをクリックするとブロックが追加されます。

オリジナルブロックパターンの作成

オリジナルのブロックパターン作成は次のような流れになります。

  1. グーテンベルクのエディタ画面でブロックを作成する
  2. 作成したブロックをコピーしてブロックパターンとして登録する

以下で順に説明していきます。

グーテンベルクでブロックを作成する

まずはパターンとして登録するためのブロックを作成します。

グーテンベルクエディタでブロックを組み上げてオリジナルのパターンを作成します。グーテンベルクの基本的な使い方を知っていれば簡単に作れます。

グループ化やCSSクラスを追加して目的のデザインに仕上げてください。作成したブロックはブロックパターンを登録するための設計図として使います。

オリジナルブロックの作成例

ここでは独自CSSを適用したボタンを作成する例を紹介します。

オリジナルボタン

①ボタンブロックを追加します。ブロックの追加 > デザイン > ボタン

ボタンブロックの追加

②スタイルを記述する
下記のスタイルをstyle.cssに追加して保存します。

.my-button .wp-block-button__link {
  background-color: #fa5;
  box-shadow: 0 5px #0009;
}

③クラスを追加する
段落ブロックにクラスを追加します。CSSが適用されてオリジナルのボタンができあがりました。

CSSクラスの追加
オリジナルボタン

これでパターンとして登録するためのブロックが完成しました。試しにブロックを選択してコピーし、メモ帳などに貼り付けてみてください。

グーテンベルク:ブロックのコピー

以下のようなコメントで囲まれたHTMLが表示されるはずです。

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"my-button"} -->
<div class="wp-block-button my-button"><a class="wp-block-button__link">オリジナルボタン</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

これがブロックの設計図です。これを元にブロックパターンとして登録します。

ブロックを作成してコピーするだけでオリジナルブロックのコードが取得できます。とても簡単だと思いませんか?

ブロックパターンはグーテンベルクが使えれば誰でも簡単にオリジナルブロックを作成できる凄い機能なのです

ブロックパターンの登録

作成したブロックをブロックパターンとして登録します。登録することでエディタ上でパターンとして使用できるようになります。

下記コードをfunctions.phpに追加してください。(WordPress5.5未満では使用できません)

functions.phpの編集方法と注意

add_action('admin_init', function () {
  //1 パラメータの設定
  $pattern = [
    "title" => "my-button",
    "categories" => ["original"],
    "descripiton" => "",
    "content" => '<!-- wp:buttons --><div class="wp-block-buttons"><!-- wp:button {"className":"my-button"} --><div class="wp-block-button my-button"><a class="wp-block-button__link">オリジナルボタン</a></div><!-- /wp:button --></div><!-- /wp:buttons -->',
  ];

  //2 ブロックパターンの登録
  register_block_pattern($pattern["title"], $pattern);

  //3 カテゴリーの登録
  register_block_pattern_category('original', ['label' => 'オリジナル']);
});

パラメータの設定

  • “title”:パターンを登録するためのタイトル
  • “categories”:カテゴリー
  • “descripiton”:パターンの説明文
  • “content”:出力するHTML(ブロックをコピーしたコードを記載する)

必須項目は”title”と”content”の2つです。

“title”はエディタ上で表示される名称です。

“content”には、作成したブロックをコピーしたコードを貼り付けます。必ず ” (シングルクォーテーション)で囲ってください

“categories”は必須ではありませんが登録しておくことをおすすめします。エディタ上でカテゴリ分けされて表示されます。複数のカテゴリを登録することも可能です。

//複数カテゴリを登録する場合はカンマで区切る
"categories" => ["original", "button"],

ブロックパターンの登録

//2 ブロックパターンの登録
register_block_pattern('パターンの登録名', 'パターンのパラメータ');

register_block_pattern()でブロックパターンの登録を行います。

登録されるとエディタ画面のブロックの追加 > パターンに表示されます。

ブロックパターンの登録

登録したブロックパターンが正常に動くかどうか確認してください。

カテゴリーの登録

//3 カテゴリーの登録
register_block_pattern_category('カテゴリ名', ['label' => '表示名']);

register_block_pattern_category()でカテゴリを登録しています。カテゴリを登録しなければカテゴリ自体が表示されません。

登録するカテゴリ名にはパラメータの設定で登録した”categories”を使用します。

カテゴリーを登録するとブロックパターンがカテゴリ分けされて見やすくなります。

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

ブロックパターンを削除する

オリジナルのブロックパターンを使っているとWordPressデフォルトのパターンが邪魔になりることがあります。

必要ない場合は編集作業の手間を増やすだけなので消してしまいましょう。

WordPressデフォルトのブロックパターンを削除する
ブロックパターンは初期状態でいくつかのパターンが登録されていますが邪魔なので削除したい人もいるでしょう。この記事ではWordPressにデフォルトで追加されているブロックパターンとカテゴリをすべて削除する方法を紹介します。

ブロックパターンのエラー関連

ブロックパターンが表示されない

ブロックパターンはWordPress5.5で実装された機能です。WordPress5.5未満のバージョンでは使用できません。

もしバージョン5.5未満のWordPressに、この記事に記載しているコードを追加するとFatal Errorが起こって画面が表示されなくなります。注意してください。

カテゴリー分けされない

カテゴリー分けはWordPress5.6以降の機能です。WordPress5.5でもカテゴリー設定はできますが、上画像のようなドロップダウンは表示されません。

カテゴリーのドロップダウンを使用する場合はWordPressをアップデートする必要があります。

ブロックパターンのメリット

ブロックパターンのメリットは一度作ればずっと使い回せることです。

機能が充実したテーマであれば、ブロックパターンを使わなくても困らないでしょう。例えば、記事一覧を表示するためのショートコード・アイコンフォントが使えるリスト・テーマ独自のブロックなど。

しかしテーマはWordPressと異なりいつまでもサポートされるとは限りません。サポートが切れればWordPressのアップデートに対応できなくなり次第に壊れていきます。

それに対し、ブロックパターンはWordPressの機能です。一度パターンを作ればずっと使い続けることができます。テーマを変更しても使い回せます。

機能としての寿命が長く、オリジナルの資産をずっと使い回せるのがブロックパターンの大きなメリットです。

最後に

WordPressでオリジナルのブロックパターンを作成する方法を紹介しました。紹介したのは一例です。ブロックの組み合わせ次第で自由にパターンを作成できます。

ブロックパターンは出力したブロックを少し編集して使用する用途に最適です。特に複数のパラメータを設定する必要があるショートコードの雛形としてとても便利です。

ブロックパターンを使えば簡単に独自のブロックを作成できるので、こんなブロックが欲しいと思ったときはぜひブロックパターンを使って自分で作ってみてください。