Accueil
Magento 2
Thème
Création d'un thème personnalisé sous Magento 2

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

Objectif

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 app/design/frontend et créer les dossiers du vendor et du thème. Le résultat obtenu doit être le suivant : app/design/frontend/vendor/theme.

Au sein de l'arborescence, créer les dossiers etc, Magento_Theme, media, web.

Dans le dossier Magento_Theme, créer le dossier layout.

Dans le dossier web, créer le dossier css, fonts, images, js. Et pour terminer, créer le dossier source dans le dossier css.

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, en suivant les explications ci-dessous :

preview.jpg doit être créé dans le dossier media
registration.php doit être créé à la racine du thème
theme.xml doit être également créé à la racine du thème

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.

Section title