Création d’un thème personnalisé sous Magento 2

Pré-requis

• Disposer d’un site Magento 2
• Avoir accès aux fichiers et dossiers du site Magento 2

Objectifs

Créer et activer un thème personnalisé dans Magento 2 basé sur le thème Magento/Luma

Tutoriel

Création de l’arborescence

Accéder au dossier dossier_magento/app/design/frontend et créer les dossiers du vendor et du thème. Le résultat obtenu doit être le suivant :

•   dossier_magento
  •   app
    •   design
      •   frontend
        •   nom_du_vendor
          •   nom_du_theme

Au sein de l’arborescence, créer les fichiers suivants :

•   nom_du_vendor
  •   nom_du_theme
    •   etc
    •   Magento_Theme
      •   layout
    •   media
    •   web
      •   css
        •   source
      •   fonts
      •   images
      •   js

Chaque dossier à un rôle qui lui est propre :

• etc : Contient le fichier de configuration view.xml
• Magento_Theme : Contient le fichier de configuration view.xml
• media : Contient le fichier image de prévisualisation du thème
• web : Contient les dossiers et fichiers statiques du thème

Création des fichiers

Au sein de l'arborescence du thème, créer les fichiers preview.jpg, registration.php et theme.xml suivant l'exemple ci-dessous :

  nom_du_vendor
    

      
  nom_du_theme
            

                
  media
                    

                        
  preview.jpg
                    
                
                
  registration.php
                
  theme.xml
            
      
    

Le fichier de prévisualisation du thème, preview.jpg, est un fichier image de 588 pixels de largeur et de hauteur.

Intégrer le code suivant dans le fichier registration.php pour permettre de déclarer le thème dans Magento :

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

Ensuite, éditer theme.xml. Le fichier comporte :

  
le titre du thème
  
la dépendance à un thème parent
le chemin d'accès au fichier image de prévisualisation
Dans le cas du tutoriel, le thème héritera du thème  Magento/luma. Hériter d'un thème permet de modifier uniquement les fichiers nécessaires lors de la phase d'intégration.
Intégrer le code suivant dans le fichier theme.xml :
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
 <title>nom_du_vendor nom_du_theme</title>
 <parent>Magento/luma</parent>
 <media>
 <preview_image>media/preview.jpg</preview_image>
 </media>
</theme>
La balise parent permet à Magento de l'informer que nous hériterons du thème de base Magento/luma.

Déclaration du thème dans l’interface d’administration
Ouvrir la page Content/Themes de l'administration de la boutique pour vérifier que le thème précédemment créé est bien pris en compte.
Ouvrir ensuite la page Content/Design, éditer le Default Store View et sélectionner le thème.
Enregistrer la configuration afin qu'il soit pris en compte.