前回の記事でMagento2のインストールまでを行いました。
サイトコンテンツの更新は管理画面からもできるのですが、テーマの作成や更新を管理画面から行うことはできません。
そこで、Magento2のテーマがどのようになっているかを見てみたいと思います。
Magento2はMVCモデルを採用
MVCはプログラムを3つのレイヤーに分割する考え方です。
Model：ビジネスルールやアプリケーションデータの操作
View：情報をユーザへ適した形で画面に表示
Controller：アクションやリクエスト、レスポンスをModelに伝える
Magento2のテーマはこのViewにあたります。
レイアウトはxmlファイルで定義
xml形式でパラメータを指定することで、ページや各要素を操作することができます。
ページがブラウザに表示される時に、このxmlファイルがViewの挙動やパフォーマンスに影響を与えます。
テーマファイルを触って見る前に
Developer Modeにしておきます。
Developer Modeにしておけば、静的ファイルはキャッシュされなくなり、エラーがあった場合に画面に表示されるようになります。
php bin/magento deploy:mode:set developer
更にそれ以外にもキャッシュされている部分があるので、それもコマンドから操作してキャッシュされないようにします。
php bin/magento cache:disable
下記でキャッシュ状態を確認することもできます。
php bin/magento cache:status
テーマを作成する
キャッシュの設定が完了して、いよいよテーマを作っていきます。
まずはVendorディレクトリを作成します。
Vendorの中に複数のテーマが入るイメージなので、ディレクトリ名は店名が一般的でしょうか。
下記のようになります。
/app/design/frontend/（Vendor）/
次にテーマディレクトリを作成します。
/app/design/frontend/（Vendor）/（Theme）
仮に下記のように作成しました。
/app/design/frontend/nextpage/hello/
テーマディレクトリが作成できたら、テーマ作成に必要なファイルを作成していきます。
/app/design/frontend/nextpage/hello/theme.xml
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Hello theme</title>
<parent>Magento/blank</parent>
</theme>
titleにテーマ名、parentに親テーマを設定します。
/app/design/frontend/nextpage/hello/registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
‘frontend/nextpage/hello',
__DIR__
);
テーマディレクトリへのパスを記述します。
テーマファイルのロゴを差し替えてみる
これでテーマの設定ファイルが作成できました。簡単ですね。
ただこれだけでは、親テーマと何も変わらないので変更を加えていきます。
まずロゴのような静的なファイルをWebディレクトリを作成して配置します。
/app/design/frontend/nextpage/hello/web/images/logo.png
cssやjsファイルも同様になります。
次にレイアウトを制御するxmlファイルを作成します。
Magento_Theme/layoutディレクトリを作成して、その中にファイルを作成します。
/app/design/frontend/nextpage/hello/Magento_Theme/layout/default.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string”>web/images/logo.png</argument>
<argument name="logo_img_width" xsi:type="number">251</argument>
<argument name="logo_img_height" xsi:type="number”>84</argument>
</arguments>
</referenceBlock>
</body>
</page>
最後に管理画面からテーマを選択したら、完了です。
テーマは「CONTENT」「Design」「Configuration」から設定できます。
テーマを変更して、ロゴが差し替わったことが確認できました。
テーマのデバッグモードについて
テーマファイルはレイアウトと要素を管理するファイルが別になっており、それぞれが入れ子になっていたりと複雑な作りになっています。
そのため慣れていないと、編集したい箇所のファイルが見つからなかったり、自分が触っている部分がどこなのか分からなくなったりします。
そうした時のためにデバッグモードが用意されています。
管理画面の「STORES」「Settings」「Configuration」「ADVANCED」「Developer」の中の
「Debug」Enabled Template Path Hints for StorefrontをYesに変えると、
サイトのどの箇所にどのファイルが使用されているかを見ることが出来ます。
ファイルのパスが表示されますが、画面が真っ赤になってしまうのであまり頻繁には使用したくないですね…
まとめ
前々回、前回とMagento２について書きました。
Magentoは日本でも実績は増えていますが、認知度という点ではまだまだなのかと思います。
要因としてはプロダクトの質が良くない為というよりも、使いこなせる開発者が国内では少ないのかなという印象です。
私もまだまだテーマを触るだけで精一杯で、なかなかコアの部分までは詳しく見ることができていませんが、これから実績を増やしていきたいと考えています。
ネクストページではECサイトの制作も可能です。
ご相談からでもお気軽にお問い合わせください。
