WordPress Gutenbergの再利用ブロックを効率的に使うテクニック

再利用ブロックの登場で記事を書く効率が大幅にアップしました。

ブロックエディター(Gutenberg)登場当時はビジュアルエディター(クラシックエディター)と比べ操作し辛い!わかりにくい!と声を上げる方も多かったですが、今や多くの方がブロックエディターへ移行しています。

そこで更に再利用ブロックを効率的に使うべく、ブロックのショートカット呼び出しを効率的に行いましょう!

スポンサーリンク
スポンサーリンク

Gutenbergのショートカット入力

まず初めに抑えておきたい事、Gutenbergは/ブロック名という形式を段落ブロックに入力するとブロックが呼び出せる点です。

ブロック名呼び出せるブロック
/heading見出しブロック
/listリストブロック
/image画像ブロック
/tableテーブルブロック
/quote引用ブロック
WordPress標準ブロック

その他にも使っているテーマ側で用意されている専用ブロックも呼び出すことができます。

以下は日本国内で人気が高いGutenberg対応テーマの専用ブロックまとめです。

ブロック名 呼び出せるブロック
/boxシンプルボックスブロック
/box-with-headline見出し付きボックスブロック
/icon-boxアイコンボックスブロック
/simple-buttonシンプルボタン
/rich-buttonリッチボタン
/chat-block吹き出し
/blank-space余白
/blog-cardブログカード
/border区切り線
/rankingランキング
/two-buttons横並びボタン

ブロック名 呼び出せるブロック
/timelineタイムライン
/comment-boxコメントボックス
/hukiふきだし
/qa-boxQ&A
/double-buttonダブルボタン
/ab-testA/Bテスト
/title-boxタイトルボックス
/link内部/外部リンク
/buttonASP広告ボタン
/rankingランキング
/accordionアコーディオン
/boxesメリット・デメリット
ブロック名 呼び出せるブロック
/block-simpleタイトル付ボックス
/headingsSANGO見出し
/say吹き出し
/timelineタイムライン
/accordionアコーディオン
/postsSANGO記事一覧
/messageメッセージ
/boxSANGOボックス
/btnSANGOボタン
/sanko参考リンク
/rateレビューボックス
/tabSANGOタブ
/kanren関連記事
/senSANGO線
/listSANGOリスト
/codeboxSANGOコード
/faqSANGO FAQ
/heroSANGOヒーロー
/conditionalSANGO条件
/sliderSANGOスライダー
/full-bgフルサイズ背景
ブロック名呼び出せるブロック
/icon-boxアイコンボックス
/info-box案内ボックス
/blank-box-1白抜きボックス
/sticky-box付箋風ボックス
/tab-box-1タブボックス
/balloon-ex-box-1吹き出し
/blogcardブログカード
/button-1ボタン
/button-wrap-1囲みボタン
/toggle-box-1アコーディオン(トグル)
/search-box検索案内
/timelineタイムライン
/iconlist-boxアイコンリスト
/faqFAQ(寄付特典)
/caption-box-1見出しボックス
/tab-caption-box-1タブ見出しボックス
/label-box-1ラベルボックス
/micro-balloon-2マイクロバルーン
/micro-textマイクロテキスト
/column-22カラム
/column-33カラム

再利用ブロックも同じように呼び出せる

実はこのショートカット入力、標準のブロックやテーマ専用のブロックを呼び出すように再利用ブロックを呼び出すこともできます。

やり方はとても簡単、/再利用ブロックのタイトルという形で呼び出します。

再利用ブロックのタイトルにブロック名を入力して管理すると呼び出しが楽

/再利用ブロックのタイトル形式で呼び出せる便利な再利用ブロックですが、いちいち名前を覚えているのがとても大変。

5個10個ぐらいならなんとか覚えておけそうですが、本当にたまにしか使わない再利用ブロックを延々と覚えているのは少しつらいですよね。

そこで再利用ブロックのタイトルに構成されるブロック名をカテゴリーとして登録しておくととても入力が楽になるので僕が採用している方法をご紹介します。

再利用ブロックを構成するブロック名を付与する

再利用ブロックとして登録してあるが、通常ブロックに変換して使用するというテンプレート代わりの利用をされている方は多いと思います。

例えば上記の動画は以下のブロックを組み合わせて作られており、通常ブロックに変換して記事作成を進める前提です。

  • Cocoonの2カラムブロック
  • 画像ブロック
  • Cocoonのアコーディオン(トグル)ブロック
  • アコーディオンの中にリストブロック
  • Cocoonのボタンブロック
  • Rinkerブロック

この再利用ブロックは「2カラムの画像・アコーディオン(リスト)・ボタン・Rinker付評価レイアウト」というタイトルをつけてありますが、その後ろに「2column image accordion list button rinker layout」という英単語を続けて付与してあります。

ポイント

「名前 構成するブロック名」の形式でタイトル付けする

こうすることで、例えば/layout/2column/rinkerとどれを打ってもこの再利用ブロックが候補として表示されるようになります。

同じようなブロックが増えてきたら半角スペースや半角ハイフン区切りで「/button 2column」や「/rinker-layout」のように絞り込み検索を行うこともできます。

「あのブロックの名前なんだったかな・・・」と覚えておく必要がないんです、作成段階で構成するブロック名を入れておくだけ。

必要な時に「あのボタンを使ったレイアウト・・・/buttonって入力すれば出てくるな」と覚えておけばOK。

だいぶハードル下がりましたよね笑。

/(スラッシュ)が半角入力なので僕は全て構成するブロック名を英単語で入力していますが、もちろん日本語でもOK!

「商品紹介レイアウト 画像 ボタン アイコンボックス」と登録しておけば

  • /レイアウト
  • /画像
  • /ボタン
  • /アイコンボックス

のような形で呼び出せます。

ブロック名を覚えるほうが遥かに簡単

「いや、それでも覚えられないよ!」って思うかも知れませんが、独自に付けたタイトルを覚えてるよりも構成するブロック名を覚えるほうが遥かに簡単です。

ぶっちゃけよく使うブロックなんて限られています。

  • 見出しブロック
  • 画像ブロック
  • リストブロック
  • ボタンブロック
  • Rinkerブロック
  • 2カラムブロック

ご自身がよく使われるブロックにもよりますが、僕の場合大体この辺のブロックが構成ブロックとして入っています。

こっちを覚えるほうが遥かに簡単です、どれもブロック名自体は単調ですからね。

Gutenbergのレイアウトは再利用ブロックよりパターンを使った方が良い?

WordPress5.5で新たにパターン機能が登場しました。

パターンは事前にレイアウトの枠組みを登録しておき好きな時に呼び出すことで簡単にレイアウトを再利用できることができます。

しかし僕は現状パターンの使い辛さから、基本的に再利用ブロックを通常ブロックに変換する方式を採用しています。

パターンを使ったレイアウト呼び出し

パターンは再利用ブロックのように通常ブロックに変換する必要がなく、パターンを編集しても既に記事内で使用しているレイアウトは影響を受けません。

そのため外側(レイアウト)だけ使いまわしたい、という場合はパターン機能が最適です。

しかしパターンの最大のデメリットは/パターン名という形式で呼び出すことができないこと。

パターン呼び出し手順
  1. 左上の+ボタンをクリック
  2. パターンタブを選択
  3. プルダウンからカテゴリを選択
  4. 目的のパターンをクリック

パターンを呼び出すために4つの手順が必要です。

再利用ブロックを使ったレイアウト呼び出し

一方再利用ブロックを使ったレイアウト呼び出しは先述したように/再利用ブロック名の形式で呼び出すことができます。

再利用ブロックのレイアウト呼び出し手順
  1. /再利用ブロック名を入力
  2. Enterキーで選択
  3. 通常ブロックへ変換ボタンをクリック

どう考えてもこっちの方が早いですよね。

再利用ブロック→通常ブロック化したものも、再利用ブロックを編集しても既に記事で利用している元再利用ブロックだったものは影響を受けません。

再利用ブロック名にプレフィックスを付与してレイアウト用だと明示する

より管理しやすくするために再利用ブロック名にプレフィックスを付与する方法もおすすめです。

プレフィックスは接尾辞のことで、再利用ブロックのタイトルに特定の文字列をつけておくことでそれがレイアウト専用、つまり通常ブロックへの変換が前提だと示すことができます。

【レイアウト】ボタンと評価スター

ボタンと評価スター

例えばこの場合、【レイアウト】がプレフィックスです。

こうする事で再利用ブロック選択時に「それがレイアウト用の再利用ブロックである」という事を思い出せます。

プレフィックスは記事におけるカテゴリー、もしくはタグのように扱うと便利です。

広告用の再利用ブロックには【広告】やASP名なんかをプレフィックスにしても良いですね。

記事内で再利用ブロックを編集すると通知される

再利用ブロックを記事中で通常ブロックに変換せずに変更しようとすると、記事公開時に通知が表示される

更に呼び出した側の記事から再利用ブロックの中身を変更する場合、現在記事公開時に「この記事を公開すると○○という再利用ブロックも同時に更新されるよ」という通知がサイドバーに表示されます。

レイアウトの再利用ブロックは100%通常ブロックへの変換が前提なので、そもそもこの通知が表示された時点でおかしいですよね。

ここで「あっ!通常ブロックへ変換する必要があったんだ!」と二重のチェックが行なえて便利です。

Gutenbergに再利用ブロックの背景色を設定する

エディター内の再利用ブロックのみ背景色を変えて視覚的にわかりやすくする

Gutenbergエディターで再利用ブロックを利用している時に限って背景色を設定するカスタマイズです。

通常ブロックに変換された瞬間に背景色が無くなるので、背景色がある状態で編集しようとする前に気づくことができて非常に便利です。

.is-reusable {
	background-color: hsla(286, 49%, 90%, .5);
}

is-reusableは再利用ブロックのラッパー(再利用ブロック全体を包んでいるdivタグ)に利用されているclassです。

このラッパーは通常ブロックに変換された時点で削除されるので、背景色も同時に消えるためニアミスをかなり減らすことができると思います。

is-reusableはエディター内のみで使われているclassなので、当然記事や固定ページでは背景色は変わりません。

そのため上記のCSSはeditor-style.cssに追記してもOKです。

再利用ブロックへワンクリックでアクセスできるようにする

通常再利用ブロックはGutenbergエディターのメニューからしかアクセスができません。

しかし「WordPressのメニューに再利用ブロックリンクを追加する」で解説しているカスタマイズを取り入れることで、再利用ブロックへのアクセスが大幅に向上します。

ぜひご利用ください!

WordPress Gutenbergの再利用ブロックを効率的に使うテクニック まとめ

再利用ブロックはGutenbergの目玉とも言える機能、再利用ブロックをいかに効率的に使うかによって記事を素早く執筆できるかが変わってきます。

しかし中々とっつきにくく、積極的に利用していない!という方も多いのが現状。

ほんの少し工夫するだけで大幅に利便性を向上できるので、ぜひこの機にGutenbergと再利用ブロックに触れて便利に使いこなしてください!

スポンサーリンク
WordPress
スポンサーリンク
\この記事いいね!と思ったらシェアしてね/
スポンサーリンク
L'7 Records

コメント

タイトルとURLをコピーしました