WordPress : créer un thème enfant

0
59

Ah ! La joie des thèmes premium WordPress ! Le design qui va bien, les nombreuses zones de widget, l’interface d’administration en béton, les mises à jour inclues, la maintenance, la sécurité et l’accès direct aux développeurs via leurs forums ou une adresse dédiée…

Ce n’est pas moi qui vais vous dire le contraire, et Alexandre a déjà pu vous présenter certains de mes sites ou ceux de mes clients, le choix d’un thème premium pour WordPress comporte de nombreux avantages par rapport à des solutions plus risquées, moins robustes ou tout simplement “vues et revues” sur le web.

Personnellement, ou dans le cadre de nos activités d’agence web, nous avons fait le choix de nous orienter quasi exclusivement sur ce type de solution.

Sauf que voilà, dans la très grande majorité des cas, l’utilisation “pure et dure” d’un thème premium ne suffit pas.

Le client a des demandes particulières, chaque projet est unique, et il est important d’apporter une touche personnelle qui va pouvoir faire transpirer l’identité d’une marque ou permettre de mettre en oeuvre des fonctionnalités que le thème WordPress n’incluait pas à la base.

Dans cette situation, il existe deux approches possibles : prendre une hache et commencer à charcuter son thème OU prendre le temps de créer un thème enfant WordPress (« child theme WordPress » en anglais) et apporter les modifications sur celui-ci.

Pourquoi créer un thème enfant WordPress ?

Si vous vous y connaissez un peu, vous savez tout comme moi qu’il est particulièrement facile d’entrer dans le code de son thème et de commencer à apporter les modifications voulues directement sur celui-ci…

Bref, c’est facile et cela permet d’être rapidement opérationnel. Sauf que voilà :

Charcuter directement son thème WordPress est une très mauvaise pratique.

Et ceci une raison essentielle : vous pouvez dire adieu aux mises à jour !

Un thème Premium est généralement suivi par celui qui vous l’a vendu. Que ce soit pour apporter de nouvelles fonctionnalités, corriger des erreurs de jeunesse, adapter le thème avec les montées de version de WordPress ou bien tout simplement pour combler des failles ou au sein des ressources utilisées par celui-ci, votre thème va évoluer et il y aura des mises à jour !

Si vous n’appliquez pas ces mises à jour, cela présente un risque. Or quand on modifie son thème de manière importante, si il y a bien une chose que l’on fuit : ce sont les mises à jour. Car en effet, en cas de mise à jour, il faut refaire toutes les modifications de A à Z.

Voici une petite histoire personnelle qui devrait vous convaincre (je l’espère) :

Il y a un peu plus d’un an et demi, j’utilisais le thème Webly de chez ElegantThemes pour un de mes sites.

Ce thème utilisait le script PHP timthumb pour manipuler les images et les redimensionner. Or, une très grosse faille de sécurité a été découverte pour timthumb en aout 2011, et euh… Je dois avouer qu’à l’époque, je ne m’intéressais pas vraiment à tout cela par manque de temps.

Bref, j’avais vu la mise à jour disponible pour mon thème dans l’interface WordPress, mais… ne sachant pas de quoi il en retournait, et surtout avec toutes les modifications et adaptations que j’avais réalisé sur celui-ci, j’avais la flemme de le mettre à jour.

Il est arrivé ce qui devait arriver : je me suis fait hacker.

Et bien en plus… Une belle backdoor sur mon site et du jour au lendemain : Pouf ! Plus d’articles, plus de contenus…

Galère. Heureusement, ce n’est pas parce que je ne m’intéressait pas au sujet que je n’avais pas de sauvegardes. J’ai pu remettre mon site rapidement debout, éliminer la backdoor, remettre tout en ligne et corriger la faille de sécurité sur le thème…

Enfin, quand je dis rapidement… 2 ou 3 jours passés sur le sujet quand même. Il aurait suffit d’une simple mise à jour pour m’épargner ces ennuis. Gloups. Donc voilà, charcuter un thème : c’est maaaaal !

C’est mal, car à un moment ou à un autre, vous ferez l’impasse sur les mises à jour de celui-ci. Et celles-ci peuvent être mineures… ou critiques.

A vous de juger si le risque en vaut la chandelle.

Personnellement, je ne le pense pas.

Et cela tombe bien car il existe une alternative : la création d’un child theme WordPress !

Un thème enfant, c’est quoi ?

Un thème “enfant” WordPress, c’est un thème qui va reprendre exactement les fonctionnalités, le design et la mise en page d’un thème “parent” et permettre d’apporter des modifications à celui-ci sans s’attaquer à son intégrité.

Le thème “parent” reste complètement d’origine, toutes les modifications sont apportées sur le thème “enfant”. Le principal avantage de cette pratique est de rendre les mises à jour du thème “parent” (la plupart du temps) transparentes pour votre site.

Je dis la plupart du temps, car tout dépend des modifications que vous apportez à votre thème enfant. En termes de design, c’est souvent le cas.

Par contre, si vous apportez des modifications importantes dans les fonctions du thème et que vous chamboulez complètement les modèles de pages… bref, il faudra sans doute passer par une petite phase de debuggage. Mais cela reste exceptionnel.

En tous cas, ce qu’il faut retenir, c’est que si vous vous y connaissez, un thème “enfant” vous permet de modifier radicalement votre thème en appliquant des modifications sur la partie “enfant” sans toucher à aucun moment au code du “parent”.

L’est pas belle la vie ?

Comment créer un thème enfant ?

Si vous n’y connaissez rien coté édition de thème WordPress, je vous conseille de plutôt déléguer cette action à une agence web.

La création d’un thème enfant n’est pas fondamentalement compliquée en soi, mais il vous faut connaître un minimum ce dans quoi vous allez mettre les doigts.

Avant de démarrer

Si on s’attarde un peu sur la structure de votre site, vous savez que vos thèmes sont situés dans le répertoire suivant : /wp-content/themes/

Dans cet exemple, nous allons identifier le thème parent fictif positionné dans : /wpcontent/themes/leparent/ et qui s’appelera “Le Parent”.

Ce thème contient tous les fichiers d’un thème “normal”, c’est à dire au minimum une feuille de style (style.css), les fichiers modèles (index.php, page.php, etc…), le fichier des fonctions (functions.php) et éventuellement d’autres fichiers comme des ressources (images, librairies, etc…).

1°) étape : Créer le répertoire du thème enfant

La première étape pour créer votre thème enfant est de créer un répertoire pour celui-ci. Avec l’aide d’un client FTP ou directement sur votre serveur si vous l’administrez à la “mano”, vous allez devoir créer un nouveau répertoire qui, dans notre cas, portera le nom : “monthemeenfant”.

Ce répertoire va devoir être créé ici : /wp-content/themes/monthemeenfant/

Une fois le répertoire créé, on passe à l’étape suivante.

2°) étape : Créer une feuille de style “enfant”

La deuxième étape pour créer votre thème enfant est de générer une feuille de style type qui va indiquer que ce nouveau thème est… justement un thème “enfant” de votre thème “parent”.

Voici le code à utiliser pour cette feuille de style :

/*
Theme Name: Mon Theme Enfant
Theme URI: http: //example.com/
Description: Thème enfant du thème Le Parent
Author: Votre nom ici
Author URI: http: //example.com/about/
Template: leparent
Version: 0.1.0
*/
@import url("../leparent/style.css");

Et voilà ! Vous venez de créer avec amour votre premier thème enfant. Mais euh… Qu’avons-nous fait exactement ?

  • Theme Name : Le nom du thème que vous allez créer.
  • Theme URI : L’adresse où l’on peut télécharger celui-ci si vous faites une release.
  • Description : La description du thème.
  • Author : L’auteur du thème… y mettre votre nom.
  • Author URI : L’adresse où l’on va retrouver des infos sur l’auteur.
  • Template : Le thème parent qui va être utilisé. Il faut y mettre le nom du répertoire de celui-ci.
  • Version : Si vous tenez des numéros de version (c’est mieux), c’est par ici que cela se passe.
  • @import : votre thème “enfant” importe toute la feuille de style du thème “parent”.

Nous avons donc créé une feuille de style WordPress standard qui déclare son “parent” et qui importe la feuille de style de celui-ci. Si vous activez maintenant ce nouveau thème, vous pourrez voir que… rien ne change. Génial, non ? ^^

Bref, les réglages sont justes et l’appel du thème “parent” est fonctionnel.

3°) étape : Adapter le thème enfant

Bien ! C’est maintenant que tous vos talents de développeur et webdesigner vont être mis à rude épreuve… Car vous pouvez maintenant apporter toutes les modifications que vous souhaitez.

Quelles sont les actions que vous aller pouvoir mener ?

Apporter des modifications à la feuille de style

En ajoutant vos modifications à la suite de l’import de la feuille de style parente (après @import …), vous allez pouvoir modifier la mise en forme de l’ensemble des éléments graphiques du site.

Que ce soit les couleurs, les positionnements, les tailles des textes, les polices… bref, vous avez la main.

Personnellement, j’ai pris l’habitude de tester en live mes modifications en utilisant les outils pour les développeurs intégrés à Google Chrome accessibles en faisant un clic droit sur l’élément qui vous intéresse, puis en cliquant sur “Procéder à l’inspection de l’élément”.

wordpress_creer_un_theme_enfant_1

Un nouvel espace s’ouvre alors qui permet d’identifier les éléments de style (encadré à droite) liés à telle ou telle partie du site.

J’apporte ensuite les modifications “en live” pour tester les mises en forme de manière itérative.

wordpress_creer_un_theme_enfant_2

Quand celles-ci me conviennent, il suffit d’ajouter les éléments au thème enfant. Par exemple, ici, pour modifier la taille du texte sur la page d’accueil, il suffirait d’ajouter ce contenu à la feuille de style que je vous ai montré tout à l’heure :

/*
Theme Name: Mon Theme Enfant
Theme URI: http: //example.com/
Description: Thème enfant du thème Le Parent
Author: Votre nom ici
Author URI: http: //example.com/about/
Template: leparent
Version: 0.1.0
*/
@import url("../leparent/style.css");
.home-featured-left h2 { font-size: 48px;}

Et hop ! C’est fait !

Adapter le code d’un modèle de page à vos besoins

Le principe d’un thème “enfant” est le suivant : il est maître sur tous les modèles de page, sauf si ceux-ci n’ont pas été créés dans le thème “enfant”.

Hmm… Oui, c’est pas clair. En gros, les modèles de pages que vous allez créer dans votre thème enfant viendront écraser les modèles de pages du thème parent. Je m’explique avec un exemple :

Imaginons que vous souhaitez modifier la signature en footer de votre site pour y ajouter votre copyright ou ce que vous voulez.

Pour ce faire, il va falloir copier le fichier “footer.php” qui se trouve normalement dans votre thème “parent” puis le copier dans votre thème “enfant”.

Maintenant que ce fichier “existe” dans votre thème enfant, c’est lui qui est utilisé : il “écrase” le “footer.php” du thème parent. Pour les autres modèles (“header.php”, “page.php”, etc…) votre thème continuera d’utiliser les éléments présents dans le “parent”.

La prochaine étape est donc d’identifier la ligne dans le code qui correspond au copyright et d’y ajouter vos différentes mentions en modifiant le code HTML.

Attention, vous pourriez être tenté de copier “tous les fichiers” de votre thème parent pour pouvoir les modifier à loisir dans votre thème enfant. C’est tentant… Mais c’est aussi une très mauvaise pratique.

En effet, si vous faites cela, vos nouveaux fichiers auront toujours la main sur les fichiers du parent, et donc… les mises à jour des modèles de pages ne seront pas effectives sur votre site.

Ne copier les fichiers et modifiez QUE les éléments dont vous avez vraiment besoin et que vous ne pouvez pas impacter dans les feuilles de style.

Ajouter de nouvelles fonctions à votre thème

Pour les fonctions du thème (celles qui se trouvent dans le fichier “functions.php”), c’est l’exception qui confirme la règle. En effet, les fonctions du thème parent seront toujours chargées quoi qu’il arrive… même si vous créez un nouveau “functions.php” dans le thème enfant.

Les fonctions de votre fichier dans le thème “enfant” seront chargées juste avant celles du thème parent. L’avantage, c’est que vous pouvez apporter toutes les nouvelles fonctions que vous souhaitez en étant sûr, qu’au moins, le fichier d’origine ne sera pas cassé.

Par exemple, si vous souhaitez ajouter des dimensions d’images personnalisées pour vos imports d’images, et bien il suffira d’ajouter ceci dans votre fichier “functions.php” du thème enfant.

< ?php
// Ajout de tailles d’images personnalisées
add_image_size( 'taille-01', 580, 200 );
add_image_size( 'taille-thumb', 80, 80 );
?>

Si vous souhaitez en savoir plus sur cette fonction “add_image_size”, je vous invite à découvrir la page dédiée du Codex WordPress.

Voilà, je pense que nous avons à peu prêt fait le tour de cette épineuse question des thèmes enfants WordPress.

Comme vous avez pu le voir, ce n’est pas fondamentalement compliqué si on a l’habitude de déjà mettre un peu les mains dans le cambouis… et c’est surtout une excellente pratique à mettre en place sur vos sites dès que vous utilisez un thème premium et que vous avez des modifications à effectuer sur celui-ci !

Ainsi, lors des prochaines mises à jour de votre thème parent… vous aurez l’esprit (presque) tranquille et vous pourrez appuyer sans (trop de) craintes sur le bouton “mise à jour”. ^^

Maintenant, car cela vaut pour TOUTES les mises à jour WordPress, je vous invite vivement à effectuer des sauvegardes fréquentes (du site ET de la base de donnée) pour éviter les mauvaises surprises… on ne sait jamais.

Si vous avez des questions néanmoins, n’hésitez pas à les poser !



Source : wp-themes-pro.com

Articles similaires