こんにちは、長友です。
今月からMagento2で変更になった項目について少しずつ解説していきたいと思います。
今回はテーマの作成方法についてです。
テーマのディレクトリを作成する
Magento2からappディレクトリとskinディレクトリがappディレクトリに統一されました。
テーマを作成するには、[app/design/frontend/]以下にベンダーディレクトリとテーマディレクトリを作成する必要があります。
app/design/frontend/＜Vendor name＞/＜theme name＞
＜Vendor name＞と＜theme name＞に任意の名前のディレクトリを作成します。
例：app/design/frontend/Flatz/kage2
theme.xmlを追加する
「テーマのディレクトリを作成する」で作成したテーマディレクトリに、テーマの情報を記述した[theme.xml]を追加します。
theme.xmlに記述する内容：
＜theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
＜title>Flatz Kage2＜/title>
＜parent>Magento/luma＜/parent>
＜/theme>
theme.xmlの記述内容
titleにテーマ名を記述します。ここで記述した名前が管理画面に表示されます。
parentには継承元のテーマ名を記述します。
今回はMagento2で使用されている[テーマ：luma]を継承したtheme.xmlを作成しました。
registration.phpを追加する
テーマをMagentoに登録するために、テーマディレクトリに次の内容のregistration.phpファイルを追加します。
＜?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/＜Vendor name＞/＜theme name＞',
__DIR__
);
例）
＜?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/Flatz/kage2',
__DIR__
);
registation.phpの記述内容
イメージを構成する
製品画像サイズや店頭で使用される他のプロパティは、 view.xml設定ファイルで設定されています。
継承元のテーマ内の設定をそのまま使用する場合はview.xmlを追加する必要はありません。
view.xmlを追加する場合
app/design/frontend/＜Vendor name＞/＜theme name＞ に、[etc]ディレクトリを作成し、その中にview.xmlを追加します。
例）app/design/frontend/Flatz/kage2/etc/view.xml
view.xmlは既存のテーマ（例えば[テーマ：luma]）からコピーして画像サイズを変更します。継承元のテーマ内の設定をそのまま使用することとして詳細は省きます。
静的ファイル用のディレクトリを作成する
テーマディレクトリにスタイル、フォント、 JavaScriptと画像用のディレクトリを作成します。
静的ファイル用のディレクトリ構成
テーマのロゴを設定する
Magento2では、ロゴ・イメージのデフォルト・フォーマットと名前は、logo.svgとなります。
＜Vendor name＞/＜theme name＞/web/images にlogo.svgを置いた場合はテーマ・ロゴと自動的に認識されます。
別の名前とフォーマットを使用する場合は、XMLで設定が必要になります。
テーマ・ロゴの設定
テーマのロゴを設定をするには、＜Vendor name＞/＜theme name＞/Magento_Theme/layout/default.xml を追加します。
例えば、ロゴ・ファイルが300x300pxのlogo.pngであるならば、それを以下のように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">images/my_logo.png＜/argument>
＜argument name="logo_img_width" xsi:type="number">300＜/argument>
＜argument name="logo_img_height" xsi:type="number">300＜/argument>
＜/arguments>
＜/referenceBlock>
＜/body>
＜/page>
default.xmlの記述内容
ここまでがMagento2でテーマを作成する時の基本的な流れになります。
次回は作成したテーマをMagentoで使用するために必要な作業と、管理画面での設定方法について解説したいと思います。
