Comment créer un thème enfant dans Magento 2

18

Je souhaite modifier certains aspects du thème Luma prêt à l'emploi, mais je voudrais le faire en préservant le ou les fichiers d'origine et en veillant également à ce que chaque fois que je mets à jour Magento, je conserve mes modifications.

Je veux le faire au moyen d'un thème enfant.

Magento 2 prend-il en charge les thèmes enfants et, dans l'affirmative, comment structurer mon chemin de répertoire pour que cela se produise?

magento2 parent-child-theme H. Ferrence
la source
1
Je vous suis reconnaissant d'avoir posé cette question. Je me demandais la même chose!
camdixon

Réponses:

26

Nous permet de créer un thème enfant afin que tous nos thèmes personnalisés dans Magento 2 se trouvent ici:

app / design / frontend / nom_entreprise / nom_thème

Supposons que le nom de notre société est mycompany et que le nom de notre thème soit basique. Nous devons créer la structure de répertoires suivante pour notre thème:

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

mon entreprise :-

Le nom du package thématique

basique: - Le nom du thème. Nous pouvons avoir plusieurs thèmes nommés dans le dossier mycompany.

etc / view.xml: -

Ce fichier est utilisé pour spécifier les dimensions de l'image du produit, les vignettes, etc.

Magento_Theme: - Ce répertoire est utilisé pour remplacer les fichiers de thème de Magento existants.

Magento_Theme / layout / default.xml: - Par défaut, Magento2 suppose que le fichier de logo de votre thème doit être: /web/media/logo.svg Si vous voulez un autre fichier pour le logo, vous devez le déclarer dans le default.xmlfichier.

Ce fichier est également utilisé pour remplacer les paramètres du thème par défaut.

media / preview.png: - L'aperçu du thème actuel.

web: - Ce répertoire contient toutes les données statiques du thème comme les images, les styles, le javascript, les polices, etc.

registration.php: - Ce fichier est requis pour enregistrer notre thème sur le système Magento2.

theme.xml: - Il s'agit d'un fichier obligatoire qui définit le nom de notre thème, son parent et éventuellement l'image d'aperçu du thème.

Création de fichiers de thème

Créons maintenant nos fichiers un par un.

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 (application / 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>

À ce stade, notre thème est prêt. Videz votre cache et nous allons maintenant sélectionner notre nouveau thème depuis admin.

Maintenant, connectez-vous à admin et passez au chemin suivant:

Content -> Design -> Themes

Vous devriez voir votre thème répertorié.

Allez maintenant à:

Stores -> Configuration -> Design

Choisissez le site Web principal devant la vue du magasin en haut à gauche. Cliquez maintenant

Desgin -> Design Theme

Décochez la case Utiliser par défaut et choisissez votre thème. Cliquez sur Enregistrer la configuration, videz votre cache et votre nouveau thème est prêt. Vérifiez votre page d'accueil.

Pour plus de détails, voir ici.

Arunendra
la source
Merci pour le guide détaillé étape par étape @Arunendra. Je vais l'essayer sous peu et je reviendrai.
H.Ferrence
C'est excellent @Arunendra. Fonctionne parfaitement. Il suffit de le suivre complètement sans sauter aucune étape.
H.Ferrence
1
Grande étape par étape @Arunendra. Juste au cas où quelqu'un rencontrerait les mêmes problèmes que moi, l'emplacement où vous appliquez votre thème enregistré est passé de Design -> Design Themeà Content/Design/Configuration.
Kedmasterk
Remarque importante: le fichier media/preview.pngdoit exister, sinon Magento lèvera une exception.
Salman von Abbas
5

Créez des répertoires:

Accédez à root dans le répertoire racine et accédez à app / design / frontend , créez le répertoire Demo .

Créez maintenant le répertoire Mytheme dans app / design / frontend / Demo.

Créez le répertoire Mangento_Theme dans app / design / frontend / Demo / Mytheme.

Créez un répertoire de disposition dans app / design / frontend / Demo / Mytheme / Magento_Theme.

Créez un répertoire multimédia dans app / design / frontend / Demo / Mytheme.

Créez un répertoire Web dans app / design / frontend / Demo / Mytheme.

Créez un répertoire d' images dans app / design / frontend / Demo / Mytheme / web.

Déclaration de thème

Créez un fichier theme.xml dans app / design / frontend / Demo / Mytheme et collez-y le code suivant:

<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>

Enregistrement du thème

Créez maintenant le fichier registration.php dans app / design / frontend / Demo / Mytheme et collez-y le code suivant:

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

Télécharger une image d'aperçu du thème

Allez dans app / design / frontend / Demo / Mytheme / media et téléchargez votre image d'aperçu (preview.jpg) ici.

Déclaration du logo du thème

Accédez à app / design / frontend / Demo / Mytheme / Magento_Theme / layout et créez un fichier default.xml. Collez-y le code suivant:

<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>

Télécharger le logo du thème

Allez dans app / design / frontend / Demo / Mytheme / web / images et téléchargez votre logo (mytheme-logo.png) ici.

Appliquez votre thème

  • Ouvrez le panneau d'administration de votre Magento 2 et allez dans Contenu → Configuration.

  • Cliquez sur l'option Modifier.

  • Sélectionnez Mytheme dans le menu déroulant Applied Theme et cliquez sur
    Save Configuration.

Exécuter les commandes

Ouvrez le terminal SSH et accédez au répertoire racine de votre Magento 2. Maintenant, exécutez toutes ces commandes une par une:

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
la source