TREND最新トピック

MEMBERS ROOTS

ブロック・ブロックパターン・再利用ブロックを活用しよう①(基礎編)

ロック・ブロックパターン・再利用ブロックを-活用しよう①アイキャッチ

こんにちは、エンジニアの渡邊です。 

メンバーズでは数多くのWebサイト構築案件を添付担当してきましたが、最近はWordPressの構築案件を多く担当しています。 WordPress 5系で注目の機能といえばなんと言ってもブロックエディターですが、ブロックエディターを活用できている人は少ないのではないでしょうか。

そこで今回はブロックエディターの理解を深めるために、まず、基本要素である「ブロック」、「ブロックパターン」、「再利用ブロック」について紹介したいと思います。

この記事が想定する読者は以下のとおりです。

・ブロックエディターをなんとなく使っている人
・ 自作のブロックを作りたいと思っているが、作り方がわからない人
・ ブロックパターンや、再利用ブロックを使いこなしたい人

ブロックエディターのおさらい

WordPress5.0から導入された新しいエディターをブロックエディターと呼びます。ブロックエディターを開発するプロジェクト名は「Gutenberg=グーテンベルク」であり、Gutenbergと呼んでいる方も多いと思います。

ブロックエディターでは、「①ブロック」「②ブロックパターン」「③再利用ブロック」という大きく3つの種類のパーツをメインコンテンツエリアに設置することで、記事や固定ページのコンテンツを作成していきます(図1)。 WordPress5.7からは、メインコンテンツエリアにドラッグアンドドロップで設置できるようになりました。

 図1. ブロックエディター画面と3種類のパーツ
図1. ブロックエディター画面と3種類のパーツ

ブロック – 基本的な部品

「見出し」や、「画像」、「ボタン」といった基礎的なパーツのことを、ブロックと呼びます。 あなたがWeb製作者であれば、CSS設計のBEMでいうところのブロックを想像してもらえるとわかりやすいでしょう。 「カラム」などのレイアウトもブロックとして提供されます。ブロックを入れ子にしたり、複数のブロックをまとめてグループ化することもできます。ブロックエディターでは、これらのブロックを組み合わせることで、自由にコンテンツを作成することができます。

WordPressの標準機能としては、管理画面から新たなブロックを追加する機能は提供されておらず、 JavaScriptとPHPのコードを追加する必要があります(WordPress 5.7時点 )。

ブロックパターン – ブロックの組み合わせ

複数のブロックやグループ化したブロックなど「ブロックを組み合わせ」をパターンとして登録することができます。

ブロックパターンを投稿や固定ページに挿入すると、そのブロックパターンを構成するブロックのコピーが挿入されます。 挿入後のブロックを変種しても大元のブロックパターンには影響しないため、簡易的なテンプレートとして利用することができます。

WordPressの標準機能として、管理画面から新たなブロックパターンを追加する機能は提供されておらず、PHPとして追加する必要があります(WordPress 5.7時点)。

再利用ブロック – 変更が全ページ反映されるブロック

基本的にブロックパターンと同じブロックの組み合わせですが、一番の大きな違いとして再利用ブロックは「投稿や固定ページ間で共通化される」という特徴があります。 

具体的には、再利用ブロックを編集すると、編集した内容は、その再利用ブロックを挿入済みのすべての投稿や固定ページに反映されます(図2)。 一般の方でもわかり易いような例を上げると、Excelで他のシートのセルを参照して利用するイメージです(参照元のセルの値を編集すると、参照先に反映されます)。 

 図2. 再利用ブロックが全ページに反映されるイメージ
図2. 再利用ブロックが全ページに反映されるイメージ

再利用ブロックの活用例としては、「お問い合わせ」などのCTAボタンや、投稿内の広告などの設置が考えられます。CTAボタンなどを、ブロックエディターで見栄えを確認しながら、手軽に投稿内の任意の場所に設置できるようになります。

WordPressの標準機能として、管理画面から新たな再利用ブロックをブロックメニュー(インサーター)に追加することができます(図3)

 図3. 管理画面から再利用ブロックを追加する手順
図3. 管理画面から再利用ブロックを追加する手順

 追加した再利用ブロックの編集は、トップメニューの一番右のドロワーメニューから「すべての再利用ブロック管理」を選ぶことで利用できます(図4)。

なお、再利用ブロックとして挿入したあとに、通常のブロックに戻すこともできますが(図5)。 この機能を利用すれば、ブロックパターンの代わりのような使い方ができますが、この使い方は紛らわしく、混乱を招きやすいため、あまりおすすめできません。

 図4. 再利用ブロックの編集画面を利用する手順
図4. 再利用ブロックの編集画面を利用する手順

 図5. 再利用ブロックを通常のブロックに戻す手順
図5. 再利用ブロックを通常のブロックに戻す手順

再利用ブロックは、再利用ブロックを設置済みの投稿や固定ページから直接編集することもできます(図6)。 直接編集した場合、「更新」ボタンの左側に「●」が付きます。 

図6. 投稿や固定ページ内に設置した再利用ブロックを直接編集した場合
図6. 投稿や固定ページ内に設置した再利用ブロックを直接編集した場合

これまで紹介した3種類の分類の特徴をまとめると、表1.の通りになります。

表1. ブロック、ブロックパターン、再利用ブロックの特徴(WordPress 5.7時点)

ブロックブロックパターン再利用ブロック
ブロックの組み合わせを登録できる
元を編集すると挿入済みページに反映される※
標準で管理画面から登録することができる△(プラグイン導入で対応できる(次回に紹介))△(プラグイン導入で対応できる(次回に紹介))

※投稿保存時に内容が決定する静的ブロックの場合。

まとめ

WordPressのブロックエディターで利用可能な、ブロック、ブロックパターン、再利用ブロックについて紹介しました。それぞれの特徴を抑えておけば、新しくコンテンツを作る際に、適切な実装方法が選択できると思います。

次回はブロック、ブロックパターン、再利用ブロックをもっと便利するプラグインを紹介します。

SHARE
渡邊賢二

Profile

渡邊賢二

新卒で技術派遣会社に就職。そこから大手メーカー系情報システム会社に常駐しUnix/Linuxシステム開発のノウハウを習得。その後SIerに転職し、Androidの研究開発やオープンソース技術を活用したシステム開発に従事。 Web系を極めたいという気持ちから2014年にメンバーズ入社。メンバーズではWebサービス開発やWebサイトリニューアル案件に携わり、フロントエンドとバックエンドの両方に対応できるエンジニアとして案件を支える。自動化やWebサイト高速化が得意。

NEW POSTこのライターの最新記事

CONTACTお問い合わせ

お問い合わせ