- 追加された行はこの色です。
- 削除された行はこの色です。
[[Magentoめも]]
*Magento2 themeの作成 [#f0312ccc]
見た目を変更するにはテーマを作成します。
管理画面は app/design/adminhtml 以下に~
フロント画面は app/design/frontend 以下に作成することでテーマを作成できるようです。
管理画面側のテーマは[[Magento2 管理画面themeの作成]]を参照して下さい。
*設定ファイルの作成 [#r93bbd04]
app/design/frontend/VendorName/ThemeName/ の構成になります。~
VendorName = Yassujp~
ThemeName = YassuTheme とします。
ThemeName = blank とします。
app/design/frontend/Yassujp/YassuTheme/theme.xml
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 theme</title>
<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__
);
*画像の設定 [#e54e916f]
画像についての設定を定義します。
app/design/frontend/Yassujp/blank/etc/view.xml
*静的ファイルを設置するフォルダを作成する [#vd283df1]
cssなどの静的ファイルを置くフォルダを含めた構成は以下のようになります。
app/design/frontend/VendorName/
└──ThemeName/
├── etc/
│ └── view.xml
├── media/
│ └── preview.jpg
├── web/
│ ├── css/
│ │ └ source/
│ ├── fonts/
│ ├── images/
│ │ └ logo.png
│ └── js/
├── registration.php
└── theme.xml
*ロゴを変更する [#f8f94f78]
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 を設置します。
*レビューフォームに文言を追加する [#uf6f097d]
以下からテンプレートをコピーしてきます。~
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'">
...
*作成したテーマへ変更する [#c54f8192]
管理画面にて CONTENT - Configuration から Edit をたどり、新しく作成したテーマを選択します。
キャッシュをクリアしてフロント画面にてロゴが変わっていることと、レビュー投稿画面で追加した文言が表示されていることを確認します。
