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
- nom_du_vendor
- frontend
- design
- app
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
- css
- nom_du_theme
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.
Commentaires
Bonjour,
M’autorisez-vous à faire ici la promotion d’un article que je viens de rédiger et qui pourra très certainement intéresser votre auditoire car il traite en des différences au niveau du layout entre Magento 1 et Magento 2 . C’est donc un complément intéressant à votre article.
L’article en question est ici : https://digitalcommerce.kaliop.com/magento-2-magento-1-les-layouts/
Bonsoir,
Je vous informe que j’ai publié votre commentaire, je vous remercie d’avoir pris le temps de lire mon article.
Nicolas Béjean.
Les commentaires sont fermés.