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.