Magento: テーマを作成してみよう

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

今回は、Magentoの「テーマ」とは何か、そして実際にテーマの作成やテーマを使用して、
ユーザー画面の一部をカスタマイズしてみたいと思います。

テーマについて

Magentoでサイトをカスタマイズする場合、本体のファイルやコードを直接修正するのではなく、
まず最初にオリジナルのテーマを作成する必要があります。

テーマとは？

Magentoのテーマは、サイトの見た目を整えるためのテンプレートやCSS、JS、画像がセットになったものです。

テーマ開発の特徴

既存のテーマを元にカスタマイズできるため、Magentoのアップデートがあってもメンテナンスがしやすくなります。
また、カスタマイズの際は、既存ファイルをコピーして書き換えるのではなく、必要な部分だけを上書きしたり、新たにファイルを追加することで、効率的かつ柔軟に対応できます。

テーマの継承は「フォールバックメカニズム」という仕組みで動いており、カスタマイズしたファイルが見つからない場合、親テーマやベーステーマを順に遡ってファイルを探します。これにより、テーマフォルダには必要な部分だけを用意すればよく、足りない部分は自動的に継承元のテーマから補われます。

この方法によって、テーマ開発は効率的かつ保守性が高くなります。

テーマの作成方法

それでは、実際にテーマを作成していきたいと思います。
bin/magento コマンドはMagentoのディレクトリで実行する必要がありますので、事前にMagentoのディレクトリに移動しておいてください。
以前のインストール記事の場合は、public_html/magentoがMagentoのディレクトリになります。

テーマを作成する場合、動作モードをdeveloperモードにしておく事が推奨されています。
developerモード以外の場合は下記コマンドを実行して、developerモードに変更しておいてください。

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

① テーマディレクトリの作成

まず初めに、Magentoのテーマディレクトリを作成します。
Magentoのテーマは以下のディレクトリに保存され、<Vendor> は開発者のベンダー名、<ThemeName> は作成するテーマの名前を示します。

app/design/frontend/<Vendor>/<ThemeName>

今回は、「Test」というベンダー名と「CustomTheme」というテーマ名で作成します。

$ mkdir -p app/design/frontend/Test/CustomTheme

② theme.xml ファイルの作成

次に、先ほど作成したCustomThemeディレクトリの下に、theme.xml ファイルを作成します。

$ touch app/design/frontend/Test/CustomTheme/theme.xml

このファイルには、テーマのタイトルや親テーマ（継承するテーマ）を定義します。
現時点で使用できるテーマは Magento Blank と Magento Luma のどちらかになり、２つの違いは以下になります。

以下のように、theme.xmlファイルに追記します。
今回は、タイトルにCustom Theme、親テーマはLumaを使用しています。

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
  <title>Custom Theme</title> <!-- テーマタイトル -->
  <parent>Magento/luma</parent> <!-- 親テーマ -->
</theme>

③ registration.php ファイルの作成

次に、theme.xml ファイルと同様に、CustomThemeディレクトリの下に registration.phpファイルを作成します。

$ touch app/design/frontend/Test/CustomTheme/registration.php

このファイルは、Magentoに作成したテーマを認識させるためのもので、テーマが正しくMagentoのシステムに登録されるようになります。
以下のように、registration.phpファイルに追記します。

<?php
use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
  ComponentRegistrar::THEME,
  'frontend/Test/CustomTheme',
  __DIR__
);

ここまで完了すると、管理画面の CONTENT > Design > Themes を開くと、テーマが追加されているのが確認できます。

④ テーマを適用する

次に、作成したテーマを適用していきます。

CONTENT > Design > Configuration を開きます。
今回はDefault Store Viewに作成したテーマを適用したいので、Default Store Viewの「Edit」をクリックします。

Default Store View詳細画面の、Applied Theme のプルダウンを「Custom Theme」に変更し、
「Save Configuration」をクリックします。

続いて、キャッシュ削除をおこないます。
SYSTEM > Tools > Cache Management を開き、「Flush Magento Cache」をクリックします。

これで、Default Store ViewにCustom Themeが適用されました。
ユーザー画面を確認してみましょう。

ユーザー画面を確認すると、トップページの画像等が表示されていません。
これは、トップページで使用しているウィジェットが、前のテーマ「Magento Luma」に設定しているからです。
ウィジェットについては、改めて記事にしたいと思いますので、今回はこのままで進めたいと思います。

⑤カスタマイズしてみよう

先ほど作成したCustom Themeを使用して、カスタマイズしてみたいと思います。
今回は、分かりやすいように、ヘッダーのウェルカムメッセージ「Default welcome msg! 」を削除します。

まず初めに、作成したテーマのディレクトリ下に header.phtml を作成します。

$ mkdir -p app/design/frontend/Test/CustomTheme/Magento_Theme/templates/html
$ touch app/design/frontend/Test/CustomTheme/Magento_Theme/templates/html/header.phtml

header.phtml作成後、
元のテンプレートの内容をコピーしてきて、デフォルトのウェルカムメッセージ部分を削除します。
元のテンプレートは、以下にあります。

vendor/magento/module-theme/view/frontend/templates/html/header.phtml

また、
app/design/frontend/Test/CustomTheme/Magento_Theme/templates/html/header.phtmlの内容は以下になります。

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/**
 * @var \Magento\Theme\Block\Html\Header $block
 * @var \Magento\Framework\Escaper $escaper
 */
?>
<?php if ($block->getShowPart() == 'welcome'): ?>
    <li class="greet welcome" data-bind="scope: 'customer'">
        <!-- ko if: customer().fullname  -->
        <span class="logged-in"
              data-bind="text: new String('<?= $escaper->escapeHtml(__('Welcome, %1!', '%1')) ?>').
              replace('%1', customer().fullname)">
        </span>
        <!-- /ko -->
        <!-- ko ifnot: customer().fullname  -->
        <?= $block->getBlockHtml('header.additional') ?>
        <!-- /ko -->
    </li>
    <?php // phpcs:ignore Magento2.Legacy.PhtmlTemplate ?>
    <script type="text/x-magento-init">
        {
            "*": {
                "Magento_Ui/js/core/app": {
                    "components": {
                        "customer": {
                            "component": "Magento_Customer/js/view/customer"
                        }
                    }
                }
            }
        }
    </script>
<?php elseif ($block->getShowPart() == 'other'): ?>
    <?= $block->getChildHtml() ?>
<?php endif ?>

保存後、キャッシュ削除コマンドを実行します。

$ bin/magento c:c

ユーザー画面を確認すると、ヘッダーのウェルカムメッセージ「Default welcome msg! 」が削除されています。

また、Default Store Viewのテーマを「Magento Luma」に戻すと、
ヘッダーのウェルカムメッセージ「Default welcome msg! 」が表示されており、Custom Themeのみでカスタマイズできている事が確認できます。

最後に

今回は、テーマとは何か、そしてテーマの作成からカスタマイズ方法までご紹介しました。
初めはテーマの作成やカスタマイズが難しく感じるかもしれませんが、
テーマを利用することで、ストアビューごとに一部の表示を変えるなど、柔軟なカスタマイズが可能です。
ぜひ、今後のテーマ利用の参考にしていただければと思います。