[Magento 2] Créer un thème enfant du thème Blank, astuces et bonnes pratiques

Astuces éprouvées sur un Magento 2 CE, version 2.4.
Billet qui sera probablement encore mis à jour.

Architecture de votre thème

Architecture globale d’un thème Magento 2 enfant de Blank

A partir de app/code/design/frontend/Vendor/theme/

composer.json
registration.php
requirejs-config.js
theme.xml

composer.json

{
    "name": "Vendor/theme",
    "description": "N/A",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        "magento/theme-frontend-blank": "*",
        "magento/framework": "100.0.*"
    },
    "type": "magento2-theme",
    "version": "1.0.0",
    "license": [

    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

{

"name": "Vendor/theme",

"description": "N/A",

"require": {

"php": "~5.5.0|~5.6.0|~7.0.0",

"magento/theme-frontend-blank": "*",

"magento/framework": "100.0.*"

"type": "magento2-theme",

"version": "1.0.0",

"license": [

"autoload": {

"files": [

"registration.php"

]

}

registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Vendor/theme',
    __DIR__
);

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::THEME,

'frontend/Vendor/theme',

__DIR__

);

requirejs-config.js

Pas obligatoire…

theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Mon thème enfant de Blank</title>
    <parent>Magento/blank</parent>
</theme>

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">

<title>Mon thème enfant de Blank</title>

<parent>Magento/blank</parent>

</theme>

Les styles/fichiers LESS

Ressources en ligne:

Working with CSS in your first Magento 2 project et version PDF pour la postérité: inchoo.net-Working with CSS in your first Magento 2 project

Dans les thèmes Magento 2, certains fichiers LESS (_extend.less, _theme.less, critical.css, …),ont des noms/libellés et des fonctions prédéfinies qu’il convient de conserver. Le développeur de thèmes n’est pas obligé de tous les avoir dans son thème. Mais dès qu’il à recours à l’une ou l’autre des fonctionnalités que ces fichiers couvrent, il faut utiliser ces derniers.

A partir de app/code/design/frontend/Vendor/theme/web/css/

source/
- _extend.less Doit contenir tous les @import vers les fichiers LESS spécifiques au thème que vous allez créer. Vous pouvez organiser ces fichiers comme bon vous semble.
- _theme.less Doit contenir uniquement des surcharges de variables déjà déclarées précédemment dans les thèmes parent ou dans le dossier lib de Magento. Ce fichier écrase le fichier du même nom situé dans le thème parent (Blank dans notre exemple).
- _variables.less Doit contenir uniquement des variables propres au thème auquel ce fichier appartient. Ce fichier écrase le fichier du même nom situé dans le thème parent (Blank dans notre exemple).

Mediaqueries

Pour des recettes qui fonctionnent: [Magento 2] Mediaqueries LESS avec les mixins du core.

Articles récents

Catégories

Archives

Méta