Magento: ブロックを使ってみよう

こんにちは！
Nishiです。前回はMagentoのPage Builderについての記事を書きました。

今回は、Magentoの「ブロック」について書いていきたいと思います。

ブロック（Block）とは

ブロックは、特定の場所にコンテンツを挿入できる機能です。
HTMLやテキスト、画像などを自由に組み合わせた内容を、ページビルダーやウィジェットを通じてサイト内の任意の位置に配置できます。

ブロックの作成方法

それでは、実際に管理画面で「ブロック」を作成してみましょう。
まず、ブロック一覧画面を開くには、コンテンツ > ブロックをクリックします。
このブロック一覧画面で作成済みのブロックを管理したり、新しくブロックを追加したりできます。
画像1-1
※本記事の手順は、日本語に翻訳されています。
　日本語化する方法については、以前の記事「Magento: 日本語に翻訳してみよう」に記載しています。

①ブロック一覧画面の「新規ブロックを追加」をクリックします。
画像2-2

②各項目に任意の値を入力
・ブロックを有効化
　ブロックの公開/非公開を選択することができます。
　ブロックを公開したい場合は「有効」に設定し、非公開にしたい場合は「無効」に設定します。

・ブロックタイトル
　管理画面での識別用名称で、重複していても保存可能です。

・識別子
　呼び出しに使用する一意の値を入力します。他と重複すると保存できないので、重複しないように注意してください。

・ページビルダー
　ページビルダーで作成した内容が、他のページビルダーやウィジェットを通じて表示されます。
　ページビルダーの使用方法については、前回の記事「ページビルダーの使い方」に記載しています。
画像3-2
③「保存」ボタンをクリックします。
画像4-1
これで、新しいブロックが追加されました。

ブロックの呼び出し方法

作成したブロックは、主に以下の４つの方法で呼び出す事ができます。

・ページビルダーで呼び出す
・ウィジェットで呼び出す
・テンプレートファイル（.phtml）で呼び出す
・レイアウトXMLで呼び出す

今回はこの中から、ページビルダーとレイアウトXMLで呼び出す方法を紹介します。

ページビルダーで呼び出す方法

ページの「ページビルダー」を使って、先ほど作成したブロックを呼び出してみます。

①ページビルダーを開く
ページ作成画面の「ページビルダーで編集」をクリックし、ページビルダーを開きます。
画像5-1
②「ブロック」要素を設置
ページビルダー内で「Add Content > ブロック」要素をページ上にドラッグ＆ドロップします。

③「ブロック」の詳細設定を変更
設置したブロックにマウスを重ねて表示された歯車アイコンをクリックします。
次に、「ブロックを選択」をクリックし、先ほど作成したブロックを選びます。
他の設定はデフォルトのまま進めます。
画像6-1
設定が完了したら、画面右上の「保存」ボタンをクリックして適用します。

④ページの保存
ページ作成に必要な他の項目を入力し、「保存」をクリックします。

ユーザー画面を確認してみましょう。
作成したブロックがページ上に表示されています。
画像7-1

レイアウトXMLで呼び出す方法

次に、トップページレイアウトXMLファイルを使って、先ほど作成したブロックを呼び出してみます。

※変更をすぐに反映させるため、Developerモードに切り替えておきましょう。

$ rm -rf  /generated/metadata/* /generated/code/*
$ bin/magento deploy:mode:set developer

①XMLファイルの作成
まず初めに独自テーマ下にcms_index_index.xmlファイルを作成します。

$ mkdir -p app/design/frontend/Test/CustomTheme/Magento_Cms/layout
$ touch app/design/frontend/Test/CustomTheme/Magento_Cms/layout/cms_index_index.xml

※上記のパスにある Test/CustomTheme は、現在使用しているカスタムテーマのベンダー名（Test）とテーマ名（CustomTheme）です。
ご自身の環境に合わせて、適切なテーマ名に置き換えてください。

②cms_index_index.xmlにコードを記述
次に、以下のコードを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">
<arguments>
<argument name="block_id" xsi:type="string">test_block</argument>
</arguments>
</block>
</referenceContainer>
</body>
</page>

[補足]
・block_id には、ブロック作成時に入力した識別子を入力してください。（例：test_block）
・referenceContainer name="content" は、トップページのメインエリア（コンテンツ部分）を意味します。

③キャッシュのクリア
XMLファイルの変更を反映させるため、以下のコマンドでキャッシュをクリアします。