Mise en place d’un thème enfant (child theme)
Quoi de plus pénible, lorsque l’on personnalise un thème, d’avoir à rééditer tous ses fichiers à chaque mise à jour. Certains ont trouvé la parade ; ne jamais le mettre à jour. Lorsque la mise à jour se limite à l’ajout d’un fichier de langue, ce n’est pas un catastrophe, mais lorsque cela corrige un bug, voir une faille de sécurité dans le fichier de fonctions, cela devient une très mauvaise idée. Rechercher les différences des fichiers entre l’original, la mise à jour et le thème personnalisé relève du calvaire d’autant qu’il y a moyen d’éviter tous ces problème en utilisant les thèmes enfants.
Le concept est simple ; une page ne vous plait pas ? Vous en faîtes en copie dans le thème enfant que vous modifiez à votre guise. WordPress, lorsqu’il utilise un thème enfant va prendre en priorité les fichiers qu’il contient. S’il ne trouve pas le fichier dans ce sous-thème, il prend le fichier du thème parent. Quand une mise à jour intervient, seul le thème parent est mis à jour, ce qui évite de massacrer vos modifications (présentes dans le thème enfant). Dans la majorité des cas, les modifications sont mineures et n’impacteront pas vos changements.
Voyons comment le mettre en place. En premier, je dirais allez voir le codex sur le sujet, il y a plein d’informations et de réponses. Ce n’est pas une traduction de la page, c’est simplement un retour d’expérience personnel.
- La première étape consiste à créer dans le répertoire wp-contentthemes, un nouveau répertoire. Vous devez lui donner exactement le même nom que celui du thème d’origine auquel vous aurez ajouté -child. Dans mon cas, le répertoire du thème d’origine s’appelle blackcurrant, celui du thème enfant s’appelle donc blackcurrant-child. Attention à la casse !!!
- Ce qui créé véritablement le thème enfant, c’est le fichier style.css. Pour être plus précis, ce sont les en-têtes contenues dans le fichier. Toutes les informations soulignées ont fait l’objet d’une modification.
/*
Theme Name: blackcurrant-child
Version: 2.2 - juin 2010
Theme URI: http://www.quirm.net/
Description: Child theme for BlackCurrant.
Author: fge
Template: blackcurrant
*/
Les seules informations obligatoires sont le nom du thème enfant (Theme Name) et du thème d’origine (Template).
- Je conseille ce niveau là, de tenter l’activation de ce nouveau thème. En cas de problème avec le fichier, dans votre interface de gestion des thèmes vous aurez un message indiquant que le thème est corrompu. si c’est le cas, il ne vous reste plus qu’à rependre votre fichier style.css. Si tout fonctionne bien, vous verrez votre nouveau thème. Une fois activé vous n’avez plus de style (c’est normal, c’est la nouvelle feuille de style qui s’applique et elle est vide).
- C’est donc dans cette feuille css que commence la personnalisation. À vous de copier, personnaliser, ajouter les règles qui vous intéressent dans ce nouveau fichier. Dans mon cas, le style me convient parfaitement, et je ne souhaite pas le changer. Je copie donc le contenu de mon fichier dans le nouveau. Mais je suis dans un cas particulier, puisque mon fichier style.css d’origine ne contient que des imports. Pour éviter des copier/coller inutiles, j’ai simplement modifié le chemin d’import pour qu’il aille les chercher dans le thème parenet.
@import url(« ../blackcurrant/layout.css »);
Magique, notre site retrouve sa tête d’origine !!!! - Maintenant, j’ai envie d’ajouter la date de dernière modification sur mes articles. Rien de plus simple, je copie donc ma page single.php qui contient un article du répertoire thème parent, vers le thème enfant. Dans ma page single.php enfant, il me reste à ajouter <?php the_modified_date(); ?> à l’endroit voulu. Une fois les modifications enregistrées, il ne vous reste plus qu’à rafraîchir votre page pour vérifier en direct que la modification vous convient.
À ce stade, vous avez toutes les bases nécessaires pour personnaliser votre thème. Il vous suffit d’appliquer la méthode à toutes les pages que vous souhaitez modifier.
Bon, je sais, je suis pénible, cela ne me suffit pas, je veux plus. Mon thème contient un système de traduction avec les fichiers *.po/*.mo (je ne détaillerai pas leur fonctionnement ici) que j’aimerais bien pouvoir utiliser dans mon nouveau thème. Pour conserver le concept parent/enfant, il n’est pas concevable que j’utilise les fichiers parents, les modifications seraient perdues lors de la prochaine mise à jour.
- Je dois donc faire un nouvel espace de traduction (blackcurrant-child) dans mon thème enfant. Cela se passe dans le fichier functions.php pour ceux ou celles qui ne sauraient pas. Petite particularité de ce fichier, sa présence dans le répertoire enfant n’écrase pas, comme cela se passe pour les autres fichiers, celui du père, mais il ajoute les fonctions à celle existantes. Je créé donc dans mon répertoire enfant, un nouveau fichier functions.php vide dans lequel je définis mon nouvel espace en précisant le chemin de mon nouveau fichier de langue :
load_theme_textdomain ('blackcurrant-child', get_template_directory() . '-child/langs');
- Il ne me reste plus qu’à ajouter mon texte, dans les règles de l’art, et de mettre à jour mes nouveaux fichiers. Tous mes appels de texte des fichiers du thème enfant doivent avoir la tête suivante :
<?php _e('Last update: ','blackcurrant-child');?>
- La dernière opération, est donc la création du fichier *.po/*.mo à l’aide de PoEdit pour le fichier fils afin d’ajouter/supprimer les chaînes.
Vous avez désormais un thème personnalisé, qui vous sera possible de mettre à jour sans tout casser.