WordPress est un Système de Gestion de Contenus (SCG) développé et maintenu par une communauté. En conséquence les utilisateurs de WordPress reçoivent régulièrement de nouvelles versions et doivent procéder à des mises à jour. C’est pareil pour les thèmes et extensions installés : il faut constamment procéder à des mises à jour autant pour des raisons d’esthétique que pour des raisons de sécurité.
La mise à jour
C’est quoi une mise à jour ? En un mot, c’est une amélioration d’un produit. Quand on utilise un thème il peut arriver que le développeur ou bien l’équipe qui l’a mis au point décide de rajouter des fonctionnalités, de revoir le design ou de corriger des bugs. Après cette opération, une nouvelle version est déployée et les utilisateurs ont la possibilité de se mettre à niveau en téléchargeant la nouvelle version. C’est la mise à jour.
Mais le processus de mise à jour sur WordPress, implique que les anciens fichiers du thème, du plugin, ou du cœur de WordPress soient remplacés par de nouveaux. Cela signifie que si des modifications avaient été faites sur les fichiers, elles seront toutes perdues après une mise à jour. Imaginez que vous aviez rajouté votre propre code CSS dans le fichier style.css de votre thème, ou pourquoi pas dans les fichiers PHP, et qu’une mise à jour vienne tout remettre à zéro.
Que faire ? Dans ces cas il n’est absolument pas conseillé d’éviter les mises à jour, vu que parfois les bugs peuvent causer des dysfonctionnements sur la plateforme en plus des dangers pour la sécurité du site. La solution la plus efficace, c’est l’utilisation d’un thème enfant.
Un thème enfant ?
Oui, un thème enfant. Il s’agit d’un thème qui hérite de toutes les caractéristiques et de toutes les fonctionnalités d’un autre thème installé et qui permet que des modifications soient effectuées sur les fichiers sans risque d’être effacées par une mise à jour.
En général, les thèmes premium viennent déjà avec leur thème enfant prêt. Il suffit d’installer les deux versions du thème et d’activer le thème enfant (et non le thème parent), vu que toute modification faite sur les fichiers du thème enfant resteront tandis que celles faites sur les fichiers du thème parent seront effacées à la prochaine mise à jour.
Créer un thème enfant
Pour le cas où le thème enfant n’est pas fourni avec le thème parent (comme dans le cas de thèmes gratuits disponibles dans la bibliothèque de thèmes fournie par WordPress), il est possible de rapidement en créer un. Il existe deux méthodes pour créer un thème enfant, l’une étant plutôt facile quoique jugée obsolète, et l’autre, un peu plus technique mais tout aussi facile à mettre sur pied.
Avant d’entrer dans les différentes méthodes, il faut préalablement créer un fichier nommé style.css qui contiendra des informations permettant d’identifier le thème qu’on veut créer. Pour la suite créons un dossier que nous nommerons mon-theme-child, ‘mon-theme’ étant le nom du thème pour lequel on veut créer un thème enfant. Dans ce dossier, créons un fichier nommé style.css.
Le fichier style.css
C’est l’un des fichiers obligatoires pour la création d’un thème sur WordPress. Le fichier style.css contient un header : c’est une sorte d’en-tête qui contient les informations nécessaires à l’identification d’un thème, tels que le nom du thème, les informations sur l’auteur, la version du thème, etc. Pour créer un thème enfant, seul le fichier style.css est nécessaire.
Dans ce fichier, nous mettrons deux informations : le nom du thème (Theme Name) et l’identifiant du thème parent (Template). Voici à peu près à quoi va ressembler notre fichier :
/* Theme Name: Mon Theme Child Template: mon-theme */
À ce niveau, WordPress reconnaît déjà que le thème qu’on vient de créer est un thème enfant de Mon Theme. Pour tester, on peut s’amuser à installer ce thème sur notre site. Pour cela, il faut le compresser au format .zip et l’installer comme un thème normal. Il est presque fonctionnel, car nous pouvons même l’activer. Seulement, il n’a pas encore copié la mise en forme du thème parent. C’est ici qu’il faut faire le choix entre les deux méthodes que j’ai citées plus haut, la méthode facile et la méthode recommandée.
La méthode facile : utiliser le fichier style.css
Même si cette méthode est déconseillée parce que jugée obsolète, elle est la plus accessible pour les personnes qui ne sont pas habituées au développement web et encore moins sous WordPress.
Son implémentation est simple : dans le fichier style.css, en dessous de l’en-tête que nous venons de créer, nous allons rajouter une ligne de code qui permettra d’importer tous les styles contenus dans le fichier style.css du thème parent. Nous allons nous servir de l’instruction @import. Au fichier style.css, rajoutons la ligne suivante après le Header :
@import '../mon-theme/style.css'
C’est tout, notre thème enfant est prêt à être utilisé.
La méthode recommandée : utiliser le fichier functions.php
Cette méthode requiert que nous ajoutions un nouveau fichier dans notre dossier, que nous allons nommer functions.php. Ici nous nous servirons du langage de programmation PHP, pour inclure le fichier style.css de façon plus « propre ».
WordPress utilise des fonctions prédéfinies pour importer des fichiers, nous allons donc simplement utiliser ce qui est recommandé. Dans notre fichier functions.php, insérons le code suivant :
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
C’est tout… Le code PHP ci-dessus a fait exactement ce que nous avons fait plus haut avec le fichier style.css et quelle que soit la méthode utilisée, on arrive au même résultat.
Installer et activer le thème enfant
Une fois les fichiers créés, il faudra créer un fichier zip et installer manuellement le thème enfant tel que décrit dans cet article. Pensez également, si le cœur vous en dit, à rajouter dans le dossier du thème enfant une image que vous nommerez screenshot pour qu’elle serve d’image de couverture pour votre thème dans le tableau de bord WordPress.
Si tout s’est bien passé, vous verrez votre thème apparaître dans la liste des thèmes installés sur votre site. Vous pouvez enfin activer votre thème enfant et commencer à le personnaliser.
Utiliser un thème enfant
Utiliser un thème enfant nécessite des connaissances en programmation. Je ne vais pas m’étendre sur cet aspect, mais je vais cependant expliquer comment ça fonctionne.
D’abord il faut savoir que même sans avoir certains fichiers, le thème enfant fonctionne exactement comme le thème parent, simplement parce qu’il utilise les fichiers présents dans le dossier de son parent. C’est pour cela que, en nous servant uniquement du fichier style.css, on parvient à « cloner » le thème parent avec toutes ses fonctionnalités et tous ses styles.
Mais on peut aller plus loin, en modifiant le comportement du thème parent. On peut par exemple modifier les couleurs, changer le contenu de l’en-tête ou du pied de page (pour personnaliser le copyright, par exemple), supprimer un élément qui ne nous arrange pas, en rajouter un autre, etc.
Pour effectuer ces modifications, il suffit de copier le fichier qu’on veut modifier du dossier du thème parent, le coller dans le dossier du thème enfant, et d’effectuer les modifications voulues. S’il s’agit du design (une couleur à modifier par exemple), on devra simplement écrire la nouvelle règle dans le fichier style.css du thème enfant.
En fait le principe est simple : tout fichier présent dans le dossier du thème enfant sera chargé en priorité. Les fichiers qui ne s’y trouvent pas seront chargés depuis le dossier du thème parent. Ceci ouvre le champ des possibilités de personnalisation.
