Magento2 themeの作成のバックアップ(No.2)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
Magento2 themeの作成へ行く。
- 1 (2017-02-13 (月) 05:56:45)
- 2 (2017-02-13 (月) 08:42:34)

Magentoめも

Magento2 themeの作成 †

見た目を変更するにはテーマを作成します。

管理画面は app/design/adminhtml 以下に
フロント画面は app/design/frontend 以下に作成することでテーマを作成できるようです。

↑

設定ファイルの作成 †

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 をたどり、新しく作成したテーマを選択します。

キャッシュをクリアしてフロント画面にてロゴが変わっていることと、レビュー投稿画面で追加した文言が表示されていることを確認します。

Magento2 themeの作成 のバックアップ(No.2)