Layout Builderモジュールを使ってみよう

Drupal 8.5から試験的に導入されているLayout Builderモジュールをご存知でしょうか。
Layout BuilderモジュールはコンテンツのレイアウトをGUI上から変更できるようにするモジュールです。今まではtwigテンプレート等の作成が必要なため、ユーザーがレイアウトを変更するにはハードルが高かったのですが、このモジュールによって管理画面上からユーザーがレイアウトを柔軟に変更することができます。

今回はこのLayout Builderモジュールの使い方について、簡単にご紹介します。

※2018年11月現在、Layout Builderモジュールは試験的モジュールです。今後変更される可能性がありますので、本番サイトではまだ使用しないでください。

Layout Builderモジュールの導入

モジュール本体はすでに最新版のコアに含まれているため、 /admin/modulesにてLayout Builderを有効化してください

Layout Builderモジュールの使い方

コンテンツタイプごとのレイアウトを作成する

コンテンツタイプごとに共通となるレイアウトを作成することができます。 例ではArticleコンテンツタイプのレイアウトを作成していきます

手順

1. レイアウトを設定したいコンテンツタイプの表示管理ページ(/admin/structure/types/manage/{コンテンツタイプの内部名称}/display)を表示
2. Use Layout Builderにチェックを入れて、保存をクリック
   
   
3. Manage Layoutボタンが表示されるので、クリック
   
   
4. レイアウト作成ページが表示されますので、好きなレイアウトを構築します
   1. Add Sectionをクリックすると、サイドバーからOne columnやTwo columnといったレイアウトを選択することができます
      
      
   2. ブロックを追加をクリックすると、サイドバーから配置したいブロックを選択することができます。/admin/structure/block で配置できるブロックはもちろん、コンテンツのフィールドも選択することができます
      
      
5. レイアウトの配置が終わったら、Save Layoutをクリックして保存します

ノードごとのレイアウトを作成する

コンテンツタイプ共通のレイアウトだけではなく、任意のノードに対してレイアウトを設定することも可能です。 前提として、対象ノードのコンテンツタイプについてUse Layout Builderが有効になっている必要があります。

手順

1. レイアウトを設定したいコンテンツタイプの表示管理ページ(/admin/structure/types/manage/{コンテンツタイプの内部名称}/display)を表示
2. Allow each content item to have its layout customizedにチェックを入れて、保存をクリック
   
   
3. レイアウトを設定したいノードの編集画面(/node/{nid}/edit)を開きます
4. レイアウトタブが表示されますので、クリックします
   
   
5. コンテンツタイプごとの時と同様、レイアウト作成ページが表示されますので、好きなレイアウトを構築します

まとめ

まだ試験的なモジュールではありますが、Layout BuilderモジュールによってGUI上で直感的にレイアウトを作成できるようになるのでとても便利ですね。コンテンツタイプごとだけでなくノードごとにもレイアウトを作成できるので、コンテンツの表示の変更がかなり柔軟に設定できるようになるのではないでしょうか。

今回ご紹介した内容では標準で用意されているレイアウトを使用しましたが、選択できるレイアウトを追加することも可能です。そのあたりについてはまた次回ご紹介できたらと思います。