Drupal 9 Layout Builder をマスターする: Web サイトのデザインを簡単にカスタマイズするための総合ガイド

公開: 2023-03-14

ページ構築に関しては、サイトビルダー、コンテンツ作成者、およびコンテンツ編集者は、スムーズでユーザーフレンドリーなエクスペリエンスを常に求めています。ページを設計および構築する場合、ドラッグアンドドロップおよび CKEditor テクノロジを使用することを期待しています。この同一のエクスペリエンスは、Drupal コアの Drupal Layout Builder の単純なページ構成機能によって提供されます。

特徴的な Drupal Layout Builder は、コンテンツ作成者がコンテンツの表示方法を変更できる強力なビジュアルデザインツールを提供します。最新バージョンで Drupal コアに追加された Layout Builder である Drupal 9 では、セクションを追加/削除して、さまざまなレイアウトを使用してコンテンツを表示し、必要に応じてページをカスタマイズできます。 Drupal 9 の Layout Builder モジュールを使用すると、これらのセクションを組み合わせて完全に独自のページを作成できます。

Drupal 9 Layout Builder を使用するには、レイアウトデフォルト (コンテンツタイプのすべてのコンテンツのレイアウトを設計する) とレイアウトオーバーライド (特定のコンテンツアイテムのレイアウトを設計する) の 2 つの異なる方法があります。このブログの助けを借りて、Drupal 9 Layout Builder モジュールについてさらに学び、使い始めることができます。

このシリーズの次の記事では、レイアウトビルダーと Ctools モジュールを使用してビューモードパターンを適用する方法について詳しく説明します。

レイアウトビルダーの紹介

Drupal 9 Layout Builder モジュールを使用して、コンテンツタイプ、分類法、ユーザーなどのエンティティの外観を変更できます。サイトビルダーは、この機能を使用して、ブロック、フィールド、およびその他の要素を簡単にドラッグアンドドロップできます。

Drupal 9 のレイアウトビルダーモジュールは、レイアウトを設計するときに行った変更のプレビューを提供することで、レイアウト構築プロセスを容易にします。 Drupal 9 のレイアウトビルダーを使用すると、ユーザーがレイアウトに加えた小さな変更をすべて保存してフロントエンドで調べる必要がなく、スムーズなレイアウト作成エクスペリエンスのために行われた変更のプレビューが可能になります。

レイアウトビルダーには 2 つのモジュールがあります。

Layout Discovery - モジュールまたはテーマにレイアウトを登録する手段を提供します。

Layout Builder - ユーザーがコンテンツにブロックとコンテンツフィールドを直接追加して整理できるようにします。

レイアウトを設計するとき、Layout Builder は 2 つの重要なアイデアを使用します。

セクション- ブロックを配置できる列またはコンテナ。たとえば、2 列のレイアウトや 3 列のレイアウトなどです。

ブロック- セクションに配置できるコンテンツ要素。

Layout Builder モジュールのインストールと構成

Drupal 9 レイアウトビルダーモジュールをインストールして構成するには、Layout Builder および Layout Discovery モジュールの拡張とアクティブ化に移動します。

コンテンツタイプと分類法を変更する

モジュールがインストールされたら、[構造]、[コンテンツタイプ] に移動し、コンテンツタイプの [表示の管理] を選択します。この例では、「記事」コンテンツタイプを使用します。

下部にある [レイアウトオプション] ドロップダウンメニューをクリックして [レイアウトビルダーを使用] を選択し、[保存] をクリックします。

フィールドフォーマッタは、ビューモードで Layout Builder がアクティブ化された後、[レイアウトの管理] オプションに置き換えられます。使用可能な各表示モードは、Layout Builder で使用できます。

[レイアウトの管理] をクリックすると、記事のコンテンツタイプのレイアウトに移動します。

セクションをレイアウトに挿入する

レイアウトビルダーにさらにセクションを追加する前に、既定のセクションを削除します。 [閉じる] ボタンを選択します (下のスクリーンショットを参照)。また、デフォルトセクションを削除するボタンが画面の右側に表示されます。次に、「削除」を選択します。

「セクションの追加」オプションを選択して、レイアウトにいくつかのセクションを追加しましょう。画面の右側には、セクションのレイアウトを選択できるオプションも表示されます。ここでは、「2 列セクション」を選びましょう。

「2 列レイアウト」の幅を選択するオプションが表示されます。ここでは、「67%/33%」を選択しましょう。次に、「セクションの追加」を選択します。

追加後、各セクション領域には「ブロックの追加」リンクが表示されます。

ブロックをセクション領域に挿入する

レイアウト用に選択した後、ブロックをエリアに追加できます。「ブロックを追加」をクリックするだけで、ブロックを追加するときに「ブロックを選択」オプションが右側からスライドします。

ブロックの選択

右側の列のブロックをクリックするだけで選択できます。「ブロック名でフィルター」テキストフィールドを使用すると、名前に基づいて検索をフィルター処理してブロックを見つけることもできます。
ここでは、「本文」コンテンツフィールドを選択します。

フィールドフォーマッタを使用すると、追加するブロックをクリックして変更を加えることができます。フォーマッタを設定したら、「ブロックを追加」をクリックします。

ブロックの左側には、「本文」コンテンツ領域があります。

「本文」フィールドが追加されました。変更を保存します。 Drupal 9 レイアウトページの上部にあるメニューから [レイアウトを保存] を選択すると、セクションに加えたすべての変更を保存できます。

レイアウトビルダーをさらにパーソナライズするために、さらにいくつかのフィールドをデザインに追加してみましょう。

このレイアウトを保存した後、記事コンテンツタイプのページにアクセスすると、作成したばかりのレイアウトのプレビューが表示されます。

レイアウトのオーバーライド:

作成したばかりのレイアウトは、すべての記事で機能します。 Drupal には、特定の記事のカスタムレイアウトを作成するために有効にする必要がある設定がいくつかあります。これを行うには、 [各コンテンツアイテムのレイアウトをカスタマイズできるようにする]を選択します。

このオプションを有効にした後に記事にアクセスすると、[レイアウト] タブのボタンが表示されます。

同じインターフェースで、レイアウトを変更できるようになりました。ただし、これはこの 1 つのコンテンツのデザインを変更するだけです。

次に、このページにブロックを追加しましょう。新しい 1 列のセクションを作成し、[ブロックの追加] ボタンをクリックします。このページで他のユーザーから最近編集されたコンテンツを表示したい場合を考えてみましょう。新しいブロックを追加するときに「最近のコンテンツ」ブロックを除外し、レイアウトを保存する前に必要に応じてカスタマイズします。

最終的に、最新の記事ブロックを含めると、ページは次のようになります。

重要: 1 つのエンティティのレイアウトを変更した場合、レイアウトビルダーを無効にすることはできません。

変更したすべてのレイアウトを元の設定にリセットした後でのみ、レイアウトオプションを更新できます。

コードからのレイアウトビルダー

GUI 管理に関して言えば、Drupal Layout Builder は間違いなく素晴らしいものです。ただし、ツールを定期的に使用しているときに対処するプログラミングの問題は、もう少し難しい場合があります。ここで、コードを使用して Layout Builder を使用する方法を尋ねるかもしれません。

1 つのエンティティのテンプレートを有効または無効にするのはかなり簡単であることがわかりました。

次のコードを使用してディスプレイをロードするだけです。

 $entityViewDisplay = \Drupal::entityTypeManager- >getStorage('entity_view_display')- >load('ENTITY_TYPE.ENTITY_BUNDLE.VIEW_MODE');

次に、タイプLayoutBuilderEntityViewDisplayのオブジェクトを返します。これを次のように変更する必要があります。

 $entityViewDisplay->enableLayoutBuilder();

フラグを追加で設定したり、特定のビューモードのレイアウトビルダーを有効にしたい場合:

 $entityViewDisplay->setOverridable(TRUE);

単一のエンティティに固有のレイアウトを作成できるようにします。

その後、すべてを保存する必要があります。

 $entityViewDisplay->save();

バックグラウンドで実際に行われるのは、レイアウトビルダーモジュールが特定のエンティティタイプのthird_party_settingsにlayout_builder_keyを追加し、上記のパラメーターの値(有効、カスタムを許可)を追加し、このタイプのエンティティのデフォルトレイアウトを以下に保存することです。セクション。

setOverridableオプションがTRUEに設定されている場合、 layout_builder__layoutという名前の新しいエンティティフィールドが作成され、この特定のエンティティの更新されたレイアウトを保持するために使用されます。

逆に、コードを使用してセクションを作成し、関連するコンテンツを入力するには、もう少し手間がかかります。

まず、新しいセクションを追加しましょう。これを実現するには、 \Drupal\layout_builder\Sectionクラスの新しいインスタンスを作成するときに、レイアウト識別子として機能するlayout_idパラメーターを含める必要があります。

ヒント:レイアウト検出モジュールには、デフォルトのテンプレートが含まれています。レイアウトは*.layouts.ymlファイルで定義されます。より詳細な情報については、drupal でカスタムレイアウトを作成する方法に関する次の記事を参照してください。

次に、新しい要素をセクションに直接追加するのが最も簡単な方法です。これを行うには、 \Drupal\layout_builder\SectionComponentクラスのインスタンスを引数として受け入れるappendComponentメソッドを使用します。それでも、このようなセクションコンポーネントを開発する前に、まずいくつかのことを調整する必要があります。開始するには、次のものが必要です。

埋め込まれた要素の uuid、
セクション内の地域の名前、
プラグイン構成。

このチュートリアルでは、 Entity Blocks が提供するプラグインを使用して、単一列セクションにサンプルノードを埋め込みます。

 $section = new Section('layout_onecol'); $uuid = $node->uuid(); $region = 'content'; $pluginConfiguration = [ 'id' => 'entity_block:node', 'provider' => 'entity_block', 'label_display' => FALSE, 'view_mode' => 'default', 'entity' => $node->id(), ]; $component = new SectionComponent($uuid, $region, $pluginConfiguration); $section->appendComponent($component);

レイアウトはサードパーティの設定またはフィールドに保存されることに常に注意してください。 したがって、セクションを保存するには、これらの場所のいずれかに保存する必要があります。

この場合、フィールドが使用されているため、次のようになります。

 $entity->layout_builder__layout->setValue($section); $entity->save();

これらのすべての手順に従って、単一の列セクションをエンティティに追加し、その中にサンプルノードを表示しました。

Drupal の Layout Builder エクスペリエンスの改善にも興味があるかもしれません。

レイアウトビルダーの長所と短所

以下に、Layout Builder の長所と短所の簡単なリストをまとめました。

長所：

モジュールはすでにコアに含まれているため、新しいエンティティタイプを追加する必要がないため、デプロイは簡単です。
ドラッグアンドドロップ機能を備えたユーザーフレンドリーな UI。
個々のエンティティのカスタマイズの選択肢。
参照フィールドを追加する必要なく、フィールドを他のエンティティと組み合わせる簡単な方法。
エンティティブロックを活用して既存のエンティティを埋め込む簡単な方法。

短所：

新しいエンティティタイプと埋め込み可能な要素が Web サイトのサイズに追加され、すべてのアイテムの読み込みにかかる時間が大幅に長くなります。
このモジュールは UI に重点を置いているため、新しいレイアウトの作成がより簡単になる場合があります。現時点では、generate.yml ファイルとテンプレートを作成するコードを作成する必要があります。
レイアウトに多くのパーツがある場合、セクション間で要素をドラッグするのは少し難しい場合があります。
Twig の名前には uuid というサフィックスが付いているため、指定されたセクションのレンダリングが難しくなり、セクションへのアクセスが制限されます。

最終的な考え

Drupal Layout Builder は、ユーザーインターフェイスとコードの両方を介してレイアウトを管理するための幅広い興味深い可能性への扉を開きます。現在のすべてのソリューションに取って代わるものですか?
私の意見では、大規模なレイアウトの問題に対処するための理想的なツールです。 Paragraphs や Field Group などの広く使用されているモジュールを使用して閉じたコンポーネントを作成し、次に Layout Builder を使用してこれらのコンポーネントで構成される既製のレイアウトを作成するのが最善の方法のようです。

Layout Builder には、他のすべての Drupal モジュールと同様に、独自の目的があります。その結果、ある状況ではパフォーマンスが常に向上する一方で、他の状況ではパフォーマンスが大幅に低下します。自分でチェックしてください！

Drupal に関するあらゆることを手伝ってくれる専門家をお探しなら、メールでお知らせします。