thème enfant – devfrontend.info

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.

Le fait de pouvoir créer un thème enfant sous WordPress a déjà été abordé par de nombreux blogueurs. L’information est facilement accessible sur la toile, y-compris en français. Il suffit de taper les mots-clés « wordpress theme enfant » dans Google pour s’en rendre compte.

Pourquoi alors publier un énième billet sur le sujet? Parce que j’ai moi-même récemment cherché à rapidement (à mon sens, un truc aussi simple ne doit pas me faire perdre trois heures de mon temps) mettre en place un thème enfant sous WordPress. Parce qu’au bout du troisième tutoriel passé à copier/coller des lignes de code laissées en exemple qui ne fonctionnaient pas et parce qu’après avoir mis bout-à-bout des informations glanées sur différents forums d’entraide j’ai finalement trouvé la solution à un problème qui ne devrait vraiment pas en être un, j’ai décidé de tout remettre à plat.

En d’autres termes: si vous n’avez jamais mis en place de thème enfant sous WordPress et que vous choisissez de passer par du code plutôt que par un plugin, vous pouvez continuer la lecture de cet article.

Utilité de la création d’un thème enfant sous WordPress

L’un des nombreux avantages à utiliser WordPress reste la force de production de sa communauté. Vous n’avez pas l’âme d’un graphiste? Vous pourrez choisir parmi une multitude de thèmes payants ou gratuits mis à disposition sur de nombreux sites, sur GitHub et pour certains même, directement depuis l’interface d’administration de WordPress.

Dans certains cas, le thème choisi peut ne pas correspondre tout-à-fait à vos attentes et vous allez chercher à agir sur son code source pour en modifier l’affichage, les fonctionnalités, etc… Il faut, à ce moment là, ne pas perdre de vue le fait que le développeur de votre thème peut également le faire évoluer de son côté pour corriger des bugs ou apporter lui aussi de nouvelles fonctionnalités. Vous serez notifié des possibles mises à jour en vous connectant à votre interface d’administration. Si vous avez modifié, de votre côté, les fichiers source du thème et que vous effectuez une mise à jour de ce dernier, vos modifications seront écrasées et vous perdrez le bénéfice de votre travail de personnalisation.

Effectuer vos modifications de code dans un thème enfant va notamment vous permettre:

de bénéficier de toutes les fonctionnalités du thème que vous avez précédemment installé et activé (dit thème parent) sans jamais avoir à le modifier,
d’isoler totalement vos développements spécifiques,
de bénéficier des mises à jour du thème parent sans que celles-ci ne viennent écraser vos modifications et, ainsi, d’en conserver le bénéfice.

A l’exception du fichier functions.php, tous les fichiers surchargés (fichiers aux noms et aux fonctionnalités similaires dans les deux thèmes) dans votre thème enfant, prendront le dessus.

Cas pratique

Dans l’exemple qui va suivre, je choisis de partir du thème parent Wilson que vous pourrez ajouter à WordPress directement depuis l’interface d’administration.

Pour créer le thème enfant, nous allons ajouter un dossier wilson-child à la racine du dossier contenant l’ensemble des thèmes installés sur votre instance WordPress (wp-content/themes/).
Nous allons ensuite, à l’intérieur de ce nouveau dossier, créer 2 fichiers :

wp-content/themes/wilson-child/functions.php :

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {

wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );

}

wp-content/themes/wilson-child/style.css :

/*
 Theme Name:   Wilson Child
 Theme URI:    https://{mon-site.com}/themes/wilson-child/
 Description:  Child theme based on Wilson
 Author:       John DOE
 Author URI:   -
 Template:     wilson
 Version:      1.0.0
 Tags:         tag0, tag1, tag2
 Text Domain:  wilson-child
*/

Theme Name: Wilson Child

Theme URI: https://{mon-site.com}/themes/wilson-child/

Description: Child theme based on Wilson

Author: John DOE

Author URI: -

Template: wilson

Version: 1.0.0

Tags: tag0, tag1, tag2

Text Domain: wilson-child

Theme Name: Le nom de votre thème enfant
Theme URI: http://votre-site.com/url-de-votre-theme-enfant/
Description: Thème enfant basé sur {le thème parent}
Author: John DOE
Author URI: http://votre-site.com
Template: [le nom du dossier qui contient le thème parent]
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: [les mots clés pour décrire votre thème enfant]
Text Domain: [theme-parent-child]

Il est également possible d’ajouter un screenshot…

Pour activer notre thème enfant…

Articles récents

Catégories

Archives

Méta

Étiquette : thème enfant

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