こんにちは！
Nishiです。前回はMagentoのインデックス（Indexer）についての記事を書きました。
今回は、Magentoの「Layout XML」について書いていきたいと思います。
Magentoの画面カスタマイズでは、Layout XMLを使用する機会が非常に多くあります。
Magento標準のLayout XMLを例にしながら、よく利用するタグの役割について確認していきます。
※本記事は、Magento Open Source 2.4.7-p3 を使用しています。
Layout XMLとは？
Magentoでは、画面のレイアウトをXMLで管理しています。
例えば、
・ヘッダー
・サイドバー
・コンテンツエリア
・フッター
など、どこに何を表示するかを定義しています。
Layout XMLを使用することで、
・Blockの追加
・Blockの移動
・Blockの削除
・テンプレートの変更
などを行うことができます。
Layout XMLの役割
Layout XMLはHTMLを直接記述するためのファイルではありません。
Layout XMLの主な役割は、
「どの要素を、どこに配置するかを定義すること」
です。
実際に画面へ表示されるHTMLは、Blockやテンプレートによって生成されます。
Magentoでは、Layout XML・Block・テンプレートが連携して画面を生成しています。
それぞれの役割は以下の通りです。
- Layout XML = 配置を定義する
- Block = 表示する要素を定義する
- テンプレート（phtml） = HTMLを生成する
Layout XMLの基本構造
今回はMagento標準で用意されているCMSページ用のLayout XMLを例に見ていきます。
vendor/magento/module-cms/view/frontend/layout/cms_page_view.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block class="Magento\Cms\Block\Page" name="cms_page"/>
</referenceContainer>
</body>
</page>
一見するとシンプルですが、Layout XMLでよく利用するタグが含まれています。
それぞれの役割を見ていきましょう。
page タグ
<page>
Layout XMLのルート要素です。
ページ用のLayout XMLではこの page タグから始まります。
body タグ
<body>
ページ内に配置するレイアウト要素を定義する領域です。
BlockやContainerなどの要素は、bodyタグの中に配置されます。
reference系 タグ
<referenceContainer name="content">
Layout XMLでは、既存のレイアウト要素を参照するためにreference系タグを使用します。
代表的なものとして、
・referenceContainer
・referenceBlock
があります。
今回のサンプルでは、contentというコンテンツエリアを参照するためにreferenceContainerを使用しています。
referenceContainer と referenceBlock の違いや使い分けについては、次回の記事で詳しく説明します。
block タグ
<block class="Magento\Cms\Block\Page" name="cms_page"/>
画面に表示する要素を定義するタグです。
blockタグで指定するclassによって、表示内容や動作が変わります。
Blockには大きく分けて、
・特定の表示内容があらかじめ決まっているもの
・自分でテンプレートを組み合わせて使うもの
の2種類があります。
よく利用されるBlockには、以下のようなものがあります。
Page Block
<block class="Magento\Cms\Block\Page">
CMSページ本体を表示する役割を持っています。
「CMSページを表示する」という目的のために用意された専用のBlockです。
CMS Block
<block class="Magento\Cms\Block\Block">
管理画面で作成したCMSブロックを表示するためのBlockです。
共通バナーやお知らせなどを配置する際によく利用されます。
こちらも「CMSブロックを表示する」という目的のために用意された専用のBlockです。
Text Block
<block class="Magento\Framework\View\Element\Text">
テキストを直接出力するBlockです。
phtmlテンプレートを用意しなくても、表示したい文字列を自分で指定してそのまま出力できます。
Template Block
<block class="Magento\Framework\View\Element\Template">
phtmlテンプレートと組み合わせて使用するBlockです。
表示する内容が最初から決まっていない代わりに、自分で用意したphtmlを指定して画面を自由に作れます。
そのため、実際のカスタマイズ開発では、このTemplate Blockを利用するケースが多くあります。
Layout XMLを図で見る
今回の構造を図にすると、以下のようになります。
page
└─ body
└─ referenceContainer(content)
└─ block (Magento\Cms\Block\Page)
Layout XMLでは、このようにタグを階層的に組み合わせながら画面構成を定義していきます。
最後に
今回は、Layout XMLの役割と主要なタグについて確認しました。
Layout XMLはMagentoの画面カスタマイズを行う上で欠かせない仕組みです。
まずは、Layout XMLが「どの要素をどこに配置するか」を定義するための仕組みであることと、
page・body・blockなどの基本的なタグがどのような役割を持っているのかを知っておくと、
今後のカスタマイズも理解しやすくなります。
また、Layout XMLではBlockの移動や削除、テンプレート変更なども行うことができます。
これらについても、今後の記事で触れていきたいと思います。
次回は、今回登場した referenceContainer と referenceBlock の違いについて見ていきたいと思います。
