Magento 2で子テーマを作成する方法

すぐに使用できるLumaテーマの特定の側面を変更したいのですが、元のファイルを保存し、Magentoを更新するたびに変更も保存されるようにしたいと考えています。

私はこれを子供のテーマとしてやりたいです。

Magento 2は子テーマをサポートしていますか？サポートしている場合、これを実現するためにディレクトリパスをどのように構成しますか？

magento2 parent-child-theme

— H.フェレンス
ソース

あなたがこの質問をしてくれたことに感謝しています。私は同じことを疑問に思っていました！

— カムディクソン16

回答:

子テーマを作成して、Magento 2のすべてのカスタムテーマをここに配置します。

app / design / frontend / company_name / theme_name

私たちの会社名はmycompanyで、テーマ名は基本的なものだと仮定しましょう。テーマ用に次のディレクトリ構造を作成する必要があります。

app
└────design
     └──────frontend
            └──mycompany
               └───basic
                   └──etc
                   └──Magento_Theme
                   │       └─layout
                   │             default.xml
                   └──media
                   │       preview.png
                   └──web
                   │  └─css
                   │  └─fonts
                   │  └─images
                   │  └─js
                   │ theme.xml
                   │ registration.php

我が社：-

テーマパッケージの名前

基本：- テーマの名前。mycompanyフォルダー内に複数の名前付きテーマを含めることができます。

etc / view.xml：-

このファイルは、製品画像の寸法、サムネイルなどを指定するために使用されます。

Magento_Theme：- このディレクトリは、既存のMagentoのテーマファイルをオーバーライドするために使用されます。

Magento_Theme / layout / default.xml：- デフォルトでは、Magento2はテーマのロゴファイルを次のように想定しています。ロゴ/web/media/logo.svg 用に他のファイルが必要な場合は、default.xmlファイルで宣言する必要があります。

このファイルは、デフォルトのテーマの設定を上書きするためにも使用されます。

media / preview.png：- 現在のテーマのプレビュー。

web：- このディレクトリには、画像、スタイル、javascript、フォントなど、テーマのすべての静的データが含まれます。

registration.php：- このファイルは、テーマをMagento2システムに登録するために必要です。

theme.xml：- これは、テーマ名、その親、およびオプションでテーマのプレビュー画像を定義する必須ファイルです。

テーマファイルを作成する

ファイルを1つずつ作成してみましょう。

theme.xml（app / design / frontend / mycompany / basic / theme.xml）

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
   <title>Basic</title> <!-- your theme's name -->
   <parent>Magento/blank</parent> <!-- the parent theme -->
   <media>
        <preview_image>media/preview.jpg</preview_image> <!-- theme's preview image -->
   </media>
</theme>

registration.php（app / design / frontend / mycompany / basic / registration.php）

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/mycompany/basic',
    __DIR__
);

default.xml（app / design / frontend / mycompany / basic / 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">images/my_logo.png</argument>
              <argument name="logo_img_width" xsi:type="number">200</argument>
              <argument name="logo_img_height" xsi:type="number">200</argument>
           </arguments>
        </referenceBlock>
    </body>
</page>

これで、テーマの準備ができました。キャッシュをクリアすると、管理者から新しいテーマが選択されます。

ここで、管理者にログインして次のパスに移動します。

Content -> Design -> Themes

リストにテーマが表示されます。

次に進みます：

Stores -> Configuration -> Design

左上のストアビューの前にあるメインWebサイトを選択します。今すぐクリック

Desgin -> Design Theme

[デフォルトを使用]チェックボックスをオフにして、テーマを選択します。[構成の保存]をクリックし、キャッシュをクリアすると、新しいテーマの準備ができました。ホームページを確認してください。

詳細については、こちらをご覧ください。

— アルネンドラ
ソース

詳細なステップバイステップガイド@Arunendraに感謝します。すぐに試して、投稿します。

— H. Ferrence

これは素晴らしい@Arunendraです。完璧に働きました。手順をスキップせずに完全にそれに従う必要があります。

— H.フェレンス

すばらしいステップバイステップの@Arunendra。誰かが私と同じ問題に遭遇した場合に備えて、登録したテーマを適用する場所がからDesign -> Design Themeに変更されましたContent/Design/Configuration。

— ケドマスターク

重要な注意：ファイルmedia/preview.pngが存在しないと、Magentoは例外をスローします。

— サルマンフォンアッバス

ディレクトリを作成します。

ルートディレクトリに移動し、app / design / frontendに移動して、ディレクトリDemoを作成します。

次に、app / design / frontend / DemoにMythemeディレクトリを作成します。

app / design / frontend / Demo / MythemeにMangento_Themeディレクトリを作成します。

app / design / frontend / Demo / Mytheme / Magento_Themeにレイアウトディレクトリを作成します。

app / design / frontend / Demo / Mythemeにメディアディレクトリを作成します。

app / design / frontend / Demo / MythemeにWebディレクトリを作成します。

app / design / frontend / Demo / Mytheme / webに画像ディレクトリを作成します。

テーマの宣言

app / design / frontend / Demo / Mythemeにtheme.xmlファイルを作成し、次のコードを貼り付けます。

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Mytheme</title>
<parent>Magento/blank</parent>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>

テーマの登録

app / design / frontend / Demo / Mythemeにregistration.phpファイルを作成し、次のコードを貼り付けます。

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/Demo/Mytheme', __DIR__
);

テーマのプレビュー画像をアップロード

app / design / frontend / Demo / Mytheme / mediaに移動して、プレビュー画像（preview.jpg）をここにアップロードします。

テーマロゴの宣言

app / design / frontend / Demo / Mytheme / 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">images/mytheme-logo.png</argument>
<argument name="logo_img_width" xsi:type="number">200</argument>
<argument name="logo_img_height" xsi:type="number">200</argument>
</arguments>
</referenceBlock>
</body>
</page>

テーマのロゴをアップロード

app / design / frontend / Demo / Mytheme / web / imagesに移動し、ここにロゴ（mytheme-logo.png）をアップロードします。

テーマを適用する

Magento 2の管理パネルを開き、コンテンツ→設定に移動します。
[編集]オプションをクリックします。
[適用テーマ]ドロップダウンメニューから[Mytheme]を選択し、[
構成の保存]をクリックします。

実行コマンド

SSHターミナルを開き、Magento 2のルートディレクトリに移動します。次に、これらのコマンドをすべて1つずつ実行します。

rm -rf var/di/* var/generation/* var/cache/* var/log/* var/page_cache/* var/session/* var/view_preprocessed/* pub/static/*
php bin/magento setup:upgrade
php bin/magento setup:db-schema:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento indexer:reindex
php bin/magento cache:clean
php bin/magento cache:flush

— Syed Muneeb Ul Hasan
ソース