Un des gros avantages d’utiliser un CMS comme WordPress vient du fait que le système tout entier (thèmes et plugins compris) sont régulièrement mis à jour et sont suivis par une très grande communauté. Aujourd’hui il devient compliqué de ne pas faire appel à un thème afin de ne pas avoir à réinventer la roue à chaque nouveau projet ! Le revers de la médaille est que les modifications qui sont apportées directement sur le thème sont automatiquement supprimées lors de ces mises à jour. Pour ne pas être condamnés à subir le même sort que Pénélope et sa tapisserie qui attendait Ulysse, il est intéressant de mettre en place un thème enfant ! Voyons comment créer, charger et activer ce fameux thème enfant.

Créer un thème enfant

Un thème enfant qu’est-ce que c’est ?

 

WordPress étant un CMS (Content Management System) à la base, il a été conçu pour gérer des contenus et présenter des blogs et des articles au départ. Puis il a évolué pour devenir un outil puissant et incontournable dans la création de sites web. (30% des sites dans le monde sont fait avec WordPress qui détient 60% de part de marché sur la création de nouveaux sites).

 

Afin de rendre les sites web créés avec WordPress plus professionnels, jolis, fonctionnels et accessibles, de nombreux éditeurs (à commencer par WordPress lui-même) ont créé des « thèmes » afin d’avoir des sites prêts à l’emploi rapidement. Boutiques en ligne, restaurants, cabinet d’architectes ou micro-entreprise : rien n’a échappé aux yeux attentifs des éditeurs qui ont ratissé large pour proposer des thèmes sur mesure adaptés à tout type d’activité. Et je ne parle même pas de ceux qui ont fait leur propre thème pour des besoins spécifiques car il est également possible de créer un thème de A à Z (à condition d’avoir de solides bases en développement cependant…). Le thème enfant est donc une solution à mi-chemin entre ces 2 solutions (thème éditeur et thème « fait maison »). Il permet de modifier le thème parent sans tout casser et sans avoir à tout refaire à chaque fois que le thème est mis à jour.

 

Avoir un thème qui correspond à son activité, c’est bien ! Pouvoir le modifier pour qu’il corresponde à nos attentes, c’est mieux ! Et pour une fois que le mieux n’est pas l’ennemi du bien, voyons ensemble comment faire !

dépôt thèmes gratuits WordPress

« Un thème enfant c’est le moyen de personnaliser un thème WordPress »

Un thème enfant : pour quoi faire ?

 

Pour avoir la garantie que la mise à jour du thème principal de votre site ne supprime pas les modifications que vous y avez apportées

 

Si vous utilisez un thème et que vous y apportez des modifications vous allez sûrement changer quelques éléments dans le CSS ou dans les fonctions php. Vous allez donc modifier un des fichiers de votre thème WordPress. Mais que va-t-il se passer quand la prochaine mise à jour du thème qui sera disponible va arriver ? Ce même fichier que vous avez modifié sera remplacé par le nouveau et vous serez obligés de tout refaire…ça serait ballot…

 

Pour pouvoir modifier et gérer de façon plus simple et plus claire l’apparence de votre site dans sa globalité (les boutons d’action, les paragraphes, les titres… si tout est au même endroit vous pourrez plus facilement les changer tous en une seule fois)

 

Depuis quelques années certains éditeurs ont mis en place ce que l’on appelle des « builders visuels » (constructeurs visuels) qui permettent de faire des modifications sur la page directement dessus en sélectionnant l’élément à modifier. Une fois fait, tout un tas d’options pour arriver à ce que l’on veut est ensuite mis à disposition. Donc vous allez faire une dizaine de pages (ou 20 ou 50…) et arrivé à la fin vous vous rendez compte que votre bouton d’action n’a pas la bonne couleur… vous allez devoir repasser sur toutes les pages… Alors que si vous aviez eu un thème enfant avec une feuille de style CSS perso, vous auriez pu généraliser l’aspect du bouton et juste modifier la couleur pour une application immédiate à toutes les pages en cas d’erreur…

 

Pour pouvoir utiliser les hooks WordPress, bien utiles pour modifier certaines fonctionnalités et ajouter des scripts personnalisés

 

Que ce soit pour ajouter des fonctionnalités supplémentaires (limiter le nombre de révisions de chaque page/article, supprimer des fonctions automatiques de WordPress, ajouter des scripts javascript ou envoyer des données à un tiers, modifier l’aspect de la page de connexion WordPress…) ou pour modifier des aspects du site de façon dynamique avec javascript ou jQuery, il devient important de bien séparer les éléments afin d’éviter les conflits entre les fonctions du thème parent et les fonctions du thème enfant…

Pourquoi aider WordPress avec un thème enfant

« Indispensable pour les mises à jour, la maintenabilité et la modification du site  »

Créer un thème enfant, comment faire alors ?

 

Un thème enfant pour fonctionner a besoin au minimum de 2 fichiers  pour faire simple :

  • style.css => la feuille de style CSS qui va permettre de conserver toutes vos merveilleuses modifications concernant l’aspect de votre site mais aussi les informations indispensables pour que WordPress comprenne que c’est un thème enfant
  • functions.php => les fonctions supplémentaires à ajouter à votre site pour améliorer celui-ci et modifier le comportement de WordPress.

 

Afin de créer un thème enfant on va commencer par créer un dossier qui le contiendra et le placer dans le dossier wp-content/themes, juste en dessous du thème parent avec l’ajout de « -child » à la fin pour éviter de s’emmêler les pinceaux  :

Dossier thème wordpress dans ftp filezilla

Une fois le dossier créé il est temps d’ouvrir son éditeur de texte préféré (Dreamweaver, notpad++, sublime text, atom…) et de commencer à donner les indications nécessaire au bon fonctionnement de tout ceci.

 

STYLE.CSS

On va commencer par le fichier style.css qui est le plus important, le reste ira tout seul !

Une fois devant votre éditeur de texte il suffira d’entrer ces quelques lignes tout en haut du document. Il faut que le document commence par ces lignes et uniquement par ces lignes ! Il ne faut strictement rien avant ces lignes sous peine de s’arracher quelques cheveux !

/*
 Theme Name:   Divi Child
 Theme URI:    http://exemple.com/divi-child/
 Description:  Divin Child Theme
 Author:       Hop Pop Up
 Author URI:   https://hop-pop-up.com
 Template:     divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         (Succesion de mots clés pour définir le thème)
 Text Domain:  divi-child
*/

 

Quelques explications :

 

Ces lignes sont ce que l’on appelle en programmation des « commentaires ». Elles sont lues par les applications mais n’ont pas d’incidence sur le fonctionnement du programme en lui-même. Ces lignes sont en général faites pour que les développeurs puissent se noter des informations importantes directement dans le code sans que cela ne casse tout le code, et permet comme ici également de donner des informations aux programmes concernés afin qu’ils sachent…. ce qu’ils ont besoin de savoir !

 

Afin de fonctionner, ce document n’a besoin en réalité que d’une seule ligne : « Template » à la ligne 7 ! Et oui, le reste n’est pas indispensable et pourrait être effacé sans que cela affecte le fonctionnement du thème enfant. Mais ces informations peuvent avoir leur importance par la suite donc toujours essayer d’être le plus rigoureux et exhaustif possible.

Pour l’exemple j’ai utilisé mon thème fétiche qu’est Divi mais bien penser évidement à modifier les différentes lignes avec le nom de votre thème (et surtout avec son nom à la ligne 7 « Template » qui est le lien que va utiliser WordPress pour « attacher » le thème enfant au bon thème parent !)

 

Voilà, nous avons donc un fichier nommé « style.css » qui sera prêt à recevoir tout le code CSS que l’on souhaitera mettre pour modifier l’aspect de notre site web. Pour ajouter le CSS il suffira juste de sauter une ligne après le « */ » à la ligne 13 et commencer à se faire plaisir. Mais pas si vite, comment faire comprendre à WordPress qu’il va devoir charger cette feuille de style CSS APRÈS celle du thème parent pour que cette dernière ne vienne pas écraser la nôtre ? Et comment signaler à WordPress qu’on utilise un thème enfant d’ailleurs ?

FUNCTIONS.PHP

Ce second fichier, qui viendra rejoindre style.css dans le thème enfant, est le fichier de fonctions PHP qui va être chargé en premier avant celui du thème parent, ce qui est idéal si on veut faire des modifications à ces dernières avant qu’elles ne soient chargées ! Et c’est précisément dans ce fichier que l’on va expliquer à WordPress de charger, et surtout dans quel ordre, les différentes feuilles de style CSS présentes dans les thèmes.

 

On va donc créer un nouveau fichier dans son éditeur de texte préféré et l’enregistrer sous le nom de « functions.php » en pensant bien à faire terminer le nom du fichier avec l’extension : « .php » !

 

Et ensuite on va ajouter 5 caractères importantissimes au tout début de page pour signaler que les codes qui vont suivre vont être en PHP :

<?php

 

Un chevron vers la gauche, un point d’interrogation et les 3 lettres « php » à la suite ! Ces 5 caractères doivent impérativement débuter le document, avant quoi que ce soit, en faisant attention même à ne pas mettre d’espaces avant le chevron. Les 5 premiers caractères ne peuvent être rien d’autre que ceux-ci.

 

Et c’est tout ! Il n’y a besoin de rien d’autre pour que ça fonctionne. Bien sûr il faut ensuite y mettre les quelques fonctions (ou hooks WordPress) que l’on souhaite pour modifier son comportement. Et c’est ce que nous allons faire tout de suite avec notre première fonction (ou hook WordPress, j’insiste sur cette appellation car c’est le terme officiel pour décrire une fonction qui va modifier le comportement de WordPress grâce à une fonction qui vient s’accrocher (du mot hook en anglais => crochet) au code de WordPress pour le modifier). Cette fonction va nous permettre de dire à WordPress dans quel ordre charger les feuilles de style CSS pour que la nôtre soit chargée en dernier pour être prioritaire. (en CSS si il y a 2 couleurs de texte différentes pour le même élément sur 2 feuilles de styles différentes, celle sur la feuille de style chargée en dernière sera pris en compte pour schématiser).

 

Voici le code :

<?php

function divi_enqueue_styles() {


    wp_enqueue_style( 'parent_style', get_template_directory_uri() . '/style.css' );
    
}
add_action( 'wp_enqueue_scripts', 'divi_enqueue_styles' );

Quelques explications :

  • On a créé une fonction qui va mettre en attente et à la « queue-leu-leu » les styles différents (ligne 3)
  • On met à charger le style parent  qui se trouve dans le dossier « theme parent » (ligne 6)
  • Enfin, on ajoute l’action (add action) de déclencher la fonction au moment où wp_enqueue_scripts va chercher les fichiers à charger (ligne 9) !
  • Comme WordPress charge le style enfant automatiquement, il faut juste lui dire d’aller chercher aussi le style parent pour faire les choses dans l’ordre et ne pas l’oublier !

« 2 fichiers sont indispensables : style.css et functions.php »

Activer le thème enfant

 

Une fois les 2 fichiers créés et dans le bon dossier, vous devriez retrouver sur votre logiciel FTP préféré dans le dossier wp-content/themes/ »nom-de-mon-thème »-child, ceci :

Contenu du dossier thème enfant WordPress

On va maintenant aller sur le tableau de bord de wordpress (dans  Apparence -> thèmes) pour vérifier que le thème enfant est bien pris en compte et est activable :

chemin d'accès de l'activation du thème enfant WordPress

Une fois sur la page vous devriez avoir votre thème habituel avec à côté le thème enfant (qui pour le coup est quand même moyen niveau présentation…) :

 

Menu WordPress pour activer les thèmes et le thème enfant

Il ne reste plus qu’à cliquer sur « activer » sous le thème enfant et vous voilà fin prêt à conquérir le monde de la personnalisation de son site fait avec un thème WordPress !

Modifier le thème enfant facilement

 

Petite astuce pour éviter d’aller charger et décharger de manière intempestive vos fichiers sur votre logiciel FTP, vous pouvez passer directement par le tableau de bord WordPress !

Pour cela rendez-vous dans Apparence -> Éditeur et vous arriverez sur la page qui liste les fichiers et dossiers de votre thème enfant !

Éditeur de code interne WordPress pour modifier css et fonctions php

Comme vous pouvez le voir à droite vous retrouvez vos 2 fichiers durement créés (style.css et functions.php) que vous pouvez sélectionner en cliquant directement dessus et les modifier ensuite directement dans WordPress ! Juste bien penser à enregistrer les modifications en cliquant tout en bas sur « Mettre à jour le fichier » ! (Et pas de panique si vous n’avez pas les dossiers « animation » et « js » ils sont spécifique à mon site ! À ce stade vous devriez n’avoir que les 2 fichiers  dont nous avons parlé ).

Conclusion

 

Avec la multiplication des thèmes et plugins pour WordPress et l’augmentation croissante de leurs mises à jour, il devient indispensable de créer un thème enfant pour éviter que tout ce petit monde vienne se marcher les uns sur les autres. De manière générale, il vaut mieux séparer ses propres modifications du système WordPress, et les moutons seront bien gardés !

 

Pierre-Louis TOUCHARD

Share This