5
COMM.

Pérenniser vos modifications de thèmes WordPress via un thème enfant

A l’occasion de la sortie du nouveau thème par défaut de WordPress 3.5, Twenty Twelve, nous allons nous pencher sur la notion de thème enfant. Si ce thème est plutôt minimaliste, les couleurs de survol (hover ) des éléments notamment sont un brin spéciales, vous aurez donc peut-être envie de changer ça.

Un thème enfant, quésaco ?


Réalisation d'un thème enfant

Dans le vocabulaire WordPress, un thème enfant ( Child Theme en anglais ) est un thème qui hérite des caractéristiques et fonctionnalités d’un autre thème appelé thème parent. Par défaut, cet enfant sera un clone de son parent, mais il ne tient qu’à peu de choses de le modifier et de le personnaliser à sa guise en changeant par exemple sa gamme de couleur ou en y ajoutant des fonctionnalités.

Pourquoi faire un thème enfant ?

Si vous prévoyez de modifier votre thème WordPress, vous devriez le faire avec un thème enfant. C’est très pratique pour pérenniser des modifications apportées à un thème. En effet, si vous modifiez directement les fichiers de modèles de votre thème, il est fortement probable qu’à la prochaine mise à jour de votre thème, vos modifications soient écrasées lors du remplacement du fichier par sa version plus récente.

Thème enfant, la recette

Pour réaliser votre premier thème enfant, vous avez besoin :

  • D’un site ou blog sous WordPress,
  • D’un accès FTP au serveur hébergeant ce site, via Filezilla par exemple ( Les identifiants d’accès sont généralement indiqué dans le mail de votre hébergeur reçu à la création de l’hébergement)
  • D’un éditeur de texte (Le bloc note fera l’affaire dans un premier temps mais je vous conseille vivement Notepad++ qui apportera de la couleur bien utile pour s’y retrouver)
  • De ne pas avoir peur d’un peu de technique (Des connaissances de base en CSS, HTML ou PHP peuvent être par la suite nécessaire suivant le type de modifications que vous souhaitez réaliser mais là ce n’est vraiment pas le cas, un peu de curiosité suffit).

Le plus simple des thèmes enfant se compose d’un dossier ( d’un nom cohérent avec l’action réalisée ou le nom du thème) contenant un seul fichier nommé style.css.
Ce dossier se place comme les autres thèmes dans le sous-répertoire themes du répertoire wp-content sur votre serveur.

Voici une structure classique de ce fichier:

On distingue dans ce fichier deux parties :

  • La partie encadrée par /* et */ comporte des indications pour le moteur de thèmes de WordPress comme le nom du thème (Theme Name), son auteur ( Author), le thème parent ( Template)
  • La seconde partie où l’on trouve le @import comporte elles les directives CSS. C’est à cet endroit que l’on va écrire les propriétés que l’on veut ajouter ou modifier. Attention à bien écrire les nouvelles règles en dessous de l’import pour ne pas nuire à celui-ci et le rendre inopérant.

Si vous voulez donc faire un thème enfant pour votre thème, vous devez donc créer un fichier style.css similaire dans un nouveau dossier en indiquant le nom de votre thème dans Template et en réalisant un import de la feuille de style principale de votre thème.

Exemple de modification

Je n’ai pas une bonne vue. J’aime donc bien que la couleur de mon texte et celle du fond soit très contrastée. Je souhaiterais donc que la couleur par défaut du texte dans mon Twenty Twelve personnalisé soit désormais noire au lieu du gris foncé d’origine.
Pour cela, je vais donc redéfinir la propriété gérant la couleur du texte pour la balise body :

Ce n’est donc plus la caractéristiques du thème parent qui est prise en compte mais celle du thème enfant.

Pour la petite histoire, la couleur de survol des liens est régie par :

Pour les fichiers de modèles ( index.php, header.php, footer.php…) , cela fonctionne de la même façon, si le fichier n’est pas défini dans le thème enfant alors ce sont les fichiers du thème parent qui sont utilisés.

Si je veux modifier l’entête de mon site, je copie le fichier header.php du thème parent dans le thème enfant et j’y applique mes modifications.

L’exception qui confirme la règle

Un seul fichier n’obéït pas à ce système de remplacement, il s’agit du fichier contenant les fonctions propres au thème functions.php. Le fichier functions.php enfant est chargé en plus, avant pour être précis, de celui du thème parent. Il faut donc faire attention aux re-déclarations de fonctions. Si pour les propriétés de style ( CSS ) , une redéclaration « sauvage » a pour effet de supplanter les propriétés précédentes, pour les fonctions ça peut planter tout court. ( function_exists permet en PHP de vérifier si la fonction n’est pas déjà déclarée ).

La structure du fichiers functions.php est la suivante :

Ce n’est donc pas bien plus compliqué que d’ouvrir directement le fichier functions.php du thème parent et au moins on la conserve en cas de mise à jour 🙂

A vous de mettre en place votre thème enfant!

bigarow

Tags:

Laisser un commentaire

Laisser un commentaire

( 5 commentaires )

  1. Bonjour,

    J’ai créé un thème-enfant et je voudrais changer la couleur de mon entête (header) qui est actuellement noir (#33363c) et le mettre en rouge (#DF103A).

    Mon thème enfant dispose des fichiers suivants :

    style.css

    functions.php

    Je crois faire une mauvaise de syntaxe dans mon style.css de mon thème enfant.

    Merci pour votre aide

    • Cyrille #

      Bonjour,

      Activez la console de votre navigateur (f12 ou f11 généralement), pour afficher le code source et les styles. Recherchez la partie où se trouve votre header (il suffit de parcourir le code avec votre souris, la bonne partie se mettra en surbrillance). A droite, jouez avec les styles pour trouver celui correspondant à la couleur de l’entête. En général : color ou background ou background-color. Une fois que c’est fait, il suffit de modifier la même ligne dans votre « style.css » du thème enfant. Si cela ne marche toujours pas, rajoutez « !important » à la fin de la ligne, pour forcer le style à être pris en compte en priorité. Exemple : background-color:#DF103A!important;

      A bientôt

  2. Très utile en effet le thème enfant. Indispensable pour pouvoir continuer à mettre un site à jour 🙂

  3. Merci pour ces conseils, je n’avais pas tout à fait saisi ce qu’était un « thème-enfant »!