Magento: moveタグでBlockを移動してみよう

こんにちは！
Nishiです。前回はMagentoの before・after・removeでレイアウトを変更する方法についての記事を書きました。

今回は、既存のBlockやContainerを別の場所へ移動する <move> タグについて書いていきたいと思います。

前回紹介した before・after は、同じ親要素の中でBlockやContainerの表示順序を変更するためのものでした。

今回の <move> を使うと、「フッターにある要素をコンテンツエリアへ持ってくる」といった、
親要素をまたいだ移動ができるようになります。

※本記事は、Magento Open Source 2.4.7-p3 を使用しています。

<move>タグとは？

<move>は、すでにレイアウトに存在しているBlockやContainerを、別の場所へ移動させるためのタグです。

before・afterとの違いは以下のとおりです。

before・after … 同じ親要素内での順番変更
<move> … 別の親要素へ移動（＋移動先での順番指定）

つまり、「順番だけ変えたい」場合はbefore・after、
「配置する場所そのものを変えたい」場合は<move>を使用します。

基本の書き方

<move>は以下のように書きます。

主な属性は以下のとおりです。

element … 移動させたい要素の名前
destination … 移動先の要素の名前
before・after … 移動先での表示位置

elementとdestinationは必須で、before・afterは必要に応じて指定します。

また、<move>は<referenceContainer>や<referenceBlock>の中に記述するのではなく、
<body>タグの直下に記述します。

このほかに as という属性もありますが、初めのうちは使う機会が少ないため、またの機会に書きたいと思います。

実際に移動させてみよう

それでは、実際に<move>を使ってみましょう。

今回は、Magento標準でフッターに表示されている「ニュースレター登録」フォームを、
トップページのコンテンツエリアへ移動してみます。

[補足]

前回の記事の下記removeが残っている場合は、コメントアウトや削除をしておいてください。
removeの設定が残っていると、ニュースレター登録フォームがレイアウトから除外された状態になり、<move>で移動先を指定しても表示されません。

app/design/frontend/Test/CustomTheme/Magento_Theme/layout/default.xml

cms_index_index.xmlにmoveを追記する

続いて、トップページ用のLayout XMLに <move> を記載します。
今回使用するファイルは以下です。

app/design/frontend/Test/CustomTheme/Magento_Cms/layout/cms_index_index.xml

ファイルを開き、以下のように記載します。

<?xml version="1.0"?>
<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\Block" name="custom.cms.block.a">
<arguments>
<argument name="block_id" xsi:type="string">test_block</argument>
</arguments>
</block>
</referenceContainer>

<move element="form.subscribe" destination="content"/>
</body>
</page>

今回追加したのは、以下の部分です。

elementには、移動させたいBlockの名前を指定します。
今回は、ニュースレター登録フォームのBlockに付けられているform.subscribeを指定しています。

element="form.subscribe"

そして、destinationには移動先を指定します。
今回はトップページのコンテンツエリアであるcontentを指定しています。

destination="content"

つまり、form.subscribe → content というように、
ニュースレター登録フォームをcontentへ移動しています。

キャッシュをクリアして、画面を確認してみましょう。

$ bin/magento c:c

フッターに表示されていたニュースレター登録フォームが、トップページのコンテンツエリアに表示されるようになります。
move_image

このように、<move>を使用することで、既存のBlockを別の場所へ移動することができます。

ただし、今回は cms_index_index.xml に記述しているため、この移動が反映されるのはトップページのみです。
他のページでは、ニュースレター登録フォームはフッターに表示されたままになります。

また、<move> はBlockだけでなく、Containerも移動することができます。

基本的な指定方法はBlockの場合と同じで、
element に移動させたいContainerの名前、destination に移動先を指定します。

移動先での表示順を指定する方法

<move>では、移動先だけでなく、移動先での表示位置もあわせて指定することができます。

書き方は以下のとおりです。いずれかを指定して、移動先での表示位置を調整します。


<move element="form.subscribe" destination="content" before="custom.cms.block.a"/>


<move element="form.subscribe" destination="content" after="custom.cms.block.a"/>


<move element="form.subscribe" destination="content" before="-"/>


<move element="form.subscribe" destination="content" after="-"/>

before・afterの詳しい使い方については、
前回の記事「Magento: before・after・removeでレイアウトを変更してみよう」で紹介しています。

<move> を使うときの注意点

<move> は「すでに存在している要素を動かす」ためのタグです。

存在しない要素名や destination を指定しても反映されないため、
移動が反映されない場合は、要素名と移動先の名前が正しいか確認してみましょう。

また、Layout XMLを変更した場合は、キャッシュクリアも忘れずに行います。