Gutenbergブロックパターン

Gutenbergブロックパターン

WordPress5.5から追加された、ブロックパターンを自由に追加できる機能を実装しました。

ブロックパターン

再利用ブロックと仕様が似ているように見えますが、大きな違いがあり使い分けすることで記事作成がもっと楽になるでしょう。

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

以前パターンブロックがなかった場合、同じレイアウトで別のコンテンツを追加しようとしたら以下のようにやりました。

  1. 使い回したいレイアウトを「再利用ブロック」に登録
  2. 別の記事で再利用ブロックを追加
  3. 追加した再利用ブロックを「通常ブロックに変換」する(変換しないと他のブロックも変わってしまう)

このようにレイアウトは同じで、別内容を入れる時は結構面倒な流れをしないといけません。

しかし「ブロックパターン」が追加されたことで、再利用ブロックを使わなくてもレイアウトを保存して別の内容に設定することができます!

ブロックパターン設定

今回のアップデートにより、管理画面メニューに「Gutenbergパターン」が追加されました。

この「Gutenbergパターン」は、使い方として既存の投稿(記事)作成と変わりはありません。

管理画面「Gutenbergパターン」一覧ページ

以下のイメージのように既存の記事を作るように作ればいいです。

ただ記事を書くわけではなく、よく使うレイアウトを作るようにします。だから特にテキストなどを追加する必要はありません。

Gutenbergパターンの設定

パターン分類

パターン分類

パターン分類は、ブロックパターンのカテゴリーとして利用できます。

パターンカテゴリーは、以下のイメージのようにブロックパターン選択画面に表示されます。

カテゴリーの表示場所

ブロックパターンの使用

ブロックパターンを追加したら、次は以下のように追加してみましょう。

ブロックパターン追加
  1. ブロック追加から「すべて表示」もしくは、左上のブロック追加をクリック
  2. 「パターン」をタブを選択
  3. セレクターより「パターン分類」で追加したものを選択
  4. 作ったブロックパターンが表示される
  5. 追加したパターンを選択
  6. 反映されたパターンの内容を変更する

Writer Profile

donyのサムネイル

WEB関連の営業から制作まで幅広く経験したフロント・バックエンジニア。
今までのクライアントの要望や制作者としてのノウハウをまとめて「DG-STYLE」を開発しました。

Recommend Post

簡単デザイン機能を使ってみよう!

簡単デザイン機能を使ってみよう!

DG-STYLE 3.0.0から実装された「簡単デザイン」の使い方を説明します。※Ver3.1.0でさらにパワーアップし

2021-06-20
検索順位を上位にしたい

検索順位を上位にしたい

「DG-STYLE」では、検索順位が上位になりやすいように、内部SEO対策と運営者がSEO対策するための機能を実装してお

2021-06-20
アフィリエイトサイトを作りたい

アフィリエイトサイトを作りたい

「DG-STYLE」を開発したきっかけが、「複数のアフィリエイトサイトをオリジナルデザインで作りたい!」を実現するために

2021-06-20
CSSだけでサイトを作りたい

CSSだけでサイトを作りたい

「DG-STYLE」は、CSSさえ分かればJavascriptやPHPの知識がなくても自由度の高いサイトを作ることができ

2021-06-20
オリジナルGutenbergブロック

オリジナルGutenbergブロック

会話式ブロックDonyDG-STYLEオリジナルGutenbergブロックを紹介します。まずは最近流行りの会話式コンテン

2020-12-26
独自サイトビルダーとは

独自サイトビルダーとは

「DG-STYLE」の最大の特徴と言える機能の「サイトビルダー」を紹介します。サイトビルダー例上記イメージで表示されてい

2020-10-11
TOP