Magento2 themeの作成 †
見た目を変更するにはテーマを作成します。
管理画面は app/design/adminhtml 以下に
フロント画面は app/design/frontend 以下に作成することでテーマを作成できるようです。
管理画面側のテーマはMagento2 管理画面themeの作成を参照して下さい。
設定ファイルの作成 †
app/design/frontend/VendorName/ThemeName/ の構成になります。
VendorName = Yassujp
ThemeName = blank とします。
app/design/frontend/Yassujp/blank/theme.xml
parent は引き継ぐテーマを指定
Magento/blank であれば vendor/magento/theme-frontend-blank/
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Yassu Blank</title>
<parent>Magento/blank</parent>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>
app/design/frontend/Yassujp/blank/media/preview.jpg にテーマのイメージファイルを設置します。
app/design/frontend/Yassujp/blank/registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/Yassujp/blank',
__DIR__
);
画像の設定 †
画像についての設定を定義します。
app/design/frontend/Yassujp/blank/etc/view.xml
静的ファイルを設置するフォルダを作成する †
cssなどの静的ファイルを置くフォルダを含めた構成は以下のようになります。
app/design/frontend/VendorName/
└──ThemeName/
├── etc/
│ └── view.xml
├── media/
│ └── preview.jpg
├── web/
│ ├── css/
│ │ └ source/
│ ├── fonts/
│ ├── images/
│ │ └ logo.png
│ └── js/
├── registration.php
└── theme.xml
ロゴを変更する †
Magento_Theme/layout/default.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="header.panel">
<block class="Magento\Framework\View\Element\Html\Links" name="header.links">
<arguments>
<argument name="css_class" xsi:type="string">header links</argument>
</arguments>
</block>
</referenceContainer>
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/logo.png</argument>
<argument name="logo_img_width" xsi:type="number">148</argument>
<argument name="logo_img_height" xsi:type="number">43</argument>
</arguments>
</referenceBlock>
<referenceContainer name="footer">
<block class="Magento\Store\Block\Switcher" name="store_switcher" as="store_switcher" after="footer_links" template="switch/stores.phtml"/>
</referenceContainer>
<referenceBlock name="report.bugs" remove="true"/>
<move element="copyright" destination="before.body.end"/>
</body>
</page>
images/ 以下に logo.png を設置します。
レビューフォームに文言を追加する †
以下からテンプレートをコピーしてきます。
vendor/magento/module-review/view/frontend/templates/form.phtml
コピー先は以下。
app/design/frontend/Yassujp/blank/Magento_Review/templates/form.phtml
<div class="block review-add">
<div class="block-title"><strong><?php /* @escapeNotVerified */ echo __('Write Your Own Review') ?></strong></div>
<div class="block-content">
<?php if ($block->getAllowWriteReviewFlag()): ?>
<!-- 追加ここから -->
<p>レビュー投稿お待ちしております。</p>
<!-- 追加ここまで -->
<form action="<?php /* @escapeNotVerified */ echo $block->getAction() ?>" class="review-form" method="post" id="review-form" data-role="product-review-form" data-bind="scope: 'review-form'">
...
作成したテーマへ変更する †
管理画面にて CONTENT - Configuration から Edit をたどり、新しく作成したテーマを選択します。
キャッシュをクリアしてフロント画面にてロゴが変わっていることと、レビュー投稿画面で追加した文言が表示されていることを確認します。
