Au fil des années, WordPress a évolué : d’un simple système de blogging, cette solution est devenue un véritable CMS convivial et un acteur in­con­tour­nable du World Wide Web. Grâce à sa po­pu­la­rité, de nombreux pro­fes­sion­nels de WordPress se sont spé­cia­li­sés dans la mise à dis­po­si­tion de thèmes WordPress, qui sont autant de modèles pour créer des sites Internet. Ces thèmes intègrent presque toutes les fonc­tion­na­li­tés possibles et cor­res­pon­dent même aux attentes es­thé­tiques ap­proxi­ma­tives des gérants de sites Internet, mais seulement ap­proxi­ma­ti­ve­ment. Il faut en effet adapter le code ici et là ou modifier la structure pour que les pages cor­res­pon­dent à l’identité visuelle de l’en­tre­prise. Mais qu’arrivera-t-il à ces mo­di­fi­ca­tions lorsque le thème sera mis à jour ? C’est là que les thèmes enfant de WordPress entrent en jeu.

Qu’est-ce qu’un thème enfant WordPress ?

Afin d’éviter qu’une mise à jour du thème n’écrase vos mo­di­fi­ca­tions, vous avez tout intérêt à créer un thème WordPress enfant. Un thème WordPress enfant, comme son nom l’indique, cor­res­pond à « l’enfant » d’un thème parent dans l’ar­bo­res­cence. Il reprend l’apparence et les fonc­tion­na­li­tés du thème parent. Si vous apportez vos propres mo­di­fi­ca­tions au thème enfant WordPress, celles-ci écrasent au­to­ma­ti­que­ment les ins­truc­tions du thème parent. Ces mo­di­fi­ca­tions n’ont aucun effet sur le thème parent. Si le thème parent dispose d’une mise à jour, les mo­di­fi­ca­tions du thème enfant WordPress seront con­ser­vées.

Conseil

Lorsque vous apportez des mo­di­fi­ca­tions con­sé­quentes ou que vous lancez des mises à jour, votre site Internet peut afficher des messages d’erreur. Pour ne pas brusquer les uti­li­sa­teurs, activez le mode main­te­nance de WordPress.

De quoi se compose un thème WordPress enfant ?

Un thème enfant WordPress peut se composer de plusieurs éléments. Le plus important, ce sont les mo­di­fi­ca­tions que vous apportez et à quels fichiers vous les appliquez. Il existe cependant des fichiers spé­ci­fiques dont n’importe quel thème enfant WordPress a im­pé­ra­ti­ve­ment besoin pour assurer son fonc­tion­ne­ment optimal :

À quoi servent ces trois fichiers dans un thème enfant WordPress ?

Comment fonc­tionne un thème enfant WordPress ?

Comme évoqué pré­cé­dem­ment, un thème enfant WordPress fonc­tionne uni­que­ment lorsqu’il contient les fichiers listés ci-dessus. Ces fichiers ont les fonctions suivantes :

  • style.css contient toutes les règles et dé­cla­ra­tions CSS qui encadrent l’apparence du thème. Sa partie la plus im­por­tante est l’en-tête : c’est là que le fichier CSS indique à WordPress qu’il s’agit d’un thème su­bor­donné à un thème parent par­ti­cu­lier, tout en four­nis­sant d’autres in­for­ma­tions fon­da­men­tales.
  • function.php précise l’ordre selon lequel sont chargées les feuilles de style du thème parent et du thème WordPress enfant. Pour que les mo­di­fi­ca­tions du thème enfant écrasent les ins­truc­tions du thème parent, le na­vi­ga­teur doit charger la feuille de style du thème enfant en res­pec­tant la feuille de style du thème parent.
  • screen­shot.png n’est pas obli­ga­toire, mais re­com­mandé pour re­con­naître im­mé­dia­te­ment le thème enfant WordPress dans le back-office. WordPress affiche au­to­ma­ti­que­ment les fichiers screen­shot.png dans le menu du thème selon la pré­sen­ta­tion cor­res­pon­dante.
Note

Si vous n’apportez que des mo­di­fi­ca­tions mineures à votre thème, vous pouvez aussi opter pour des solutions plus simples comme le plugin Simple Custom CSS Plugin ou le Cus­to­mi­zer, intégré dans WordPress depuis la version 4.7.

Avantages et in­con­vé­nients des thèmes WordPress enfant

En principe, utiliser un thème enfant dans WordPress offre de nombreux avantages. Cette solution n’est cependant pas sans in­con­vé­nients. Si vous envisagez uni­que­ment de petites mo­di­fi­ca­tions du CSS, prenez le temps de dé­ter­mi­ner s’il est vraiment in­té­res­sant d’installer un thème sup­plé­men­taire :

Stockage en ligne HiDrive Next
Vos données ac­ces­sibles partout et à tout moment
  • Modifiez, partagez et stockez vos fichiers
  • Data centers européens certifiés ISO
  • Sécurité élevée des données, conforme au RGPD
Avantages In­con­vé­nients
Lors de la mise à jour du thème parent, les mo­di­fi­ca­tions ne sont pas écrasées. La mise à jour du modèle d’origine résout uni­que­ment les failles de sécurité dans les fichiers template du dossier parent. Les fichiers template du thème enfant WordPress con­ser­vent ces failles.
Un thème enfant WordPress offre davantage de libertés que le back-office de WordPress. Par exemple, il vous permet d’adapter la dis­po­si­tion et la structure du site Internet ou de dé­ve­lop­per certaines fonctions du thème. Le site peut ren­con­trer des latences, car le na­vi­ga­teur doit charger deux feuilles de style.
Les mo­di­fi­ca­tions CSS con­sé­quentes restent visibles dans le fichier style.css, con­trai­re­ment aux mo­di­fi­ca­tions dans le Cus­to­mi­zer de WordPress.
Les thèmes enfant WordPress sont parfaits pour les débutants qui veulent se fa­mi­lia­ri­ser avec WordPress. En cas d’erreur, ils peuvent revenir à tout moment sur le thème parent.
Le temps de dé­ve­lop­pe­ment d’un site Internet peut être réduit grâce à un thème enfant WordPress.

Comment créer soi-même un thème WordPress enfant ?

Main­te­nant que nous avons vu la théorie, passons à la pratique pour créer un thème WordPress enfant fonc­tion­nel.

Étape 1 : préparer le dossier du thème enfant WordPress

À l’aide d’un client FTP, par ex. FileZilla, connectez-vous à votre serveur et, dans votre ins­tal­la­tion WordPress, ouvrez le dossier suivant :

Chemin-d-acces-a-votre-installation-wordpress/wp-content/themes/

Dans ce dossier, créez un dossier pour le thème WordPress enfant. Idéa­le­ment, nommez-le en reprenant le nom du thème parent et en ajoutant le mot « -child » à la fin.

Étape 2 : créer la feuille de style du thème enfant WordPress

Créez un fichier style.css et saisissez les in­for­ma­tions suivantes dans son en-tête à l’aide d’un éditeur de texte :

/*
 Theme Name:	[Nom du thème parent] Child
 Theme URI:	[http://example.fr/parent-theme/]
 Description:	Thème [Nom du thème parent] Child
 Author:	[Votre nom]
 Author URI:	[L’URL de votre site Internet]
 Template:	[Nom du dossier du thème parent]
 Version:	1.0.0
Text Domain:	[Nom du thème parent] -child
*/

Remplacez les in­for­ma­tions générales entre crochets par vos données. Il n’est pas né­ces­saire de compléter tous les points ; seules les deux in­for­ma­tions suivantes sont obli­ga­toires pour obtenir un thème enfant WordPress fonc­tion­nel :

  • Nom du thème : chaque thème doit porter un nom, le thème enfant WordPress ne fait pas exception. Ce nom doit être unique et ne doit pas déjà servir à un autre thème au sein de votre ins­tal­la­tion WordPress.
  • Template : ces in­for­ma­tions per­met­tent à WordPress de savoir qu’il s’agit d’un thème enfant du thème parent indiqué.

Lorsque le fichier style.css est prêt, té­lé­char­gez-le sur le client FTP dans le dossier du thème enfant WordPress.

Étape 3 : charger cor­rec­te­ment la feuille de style dans le fichier function.php

Dans le meilleur des cas, le thème parent contient déjà des ins­truc­tions pour charger la feuille de style du thème enfant WordPress. Mais tous les modèles de pré­sen­ta­tion ne le proposent pas. Ainsi, il est important de regarder ce que fait le thème parent. Vous ren­con­tre­rez un des trois scénarios suivants :

  1. Le thème parent charge déjà les deux feuilles de style. Dans ce cas, le thème enfant WordPress ne doit rien faire de plus.
     
  2. Si le thème parent charge sa propre feuille de style avec get_template_directory() ou get_template_directory_uri(), le thème enfant WordPress doit charger uni­que­ment sa propre feuille de style en reprenant la commande du thème parent dans les pa­ra­mètres de function.php.
     
  3. Si le thème parent charge sa propre feuille de style avec get_sty­le­sheet_directory() ou get_stylsheet_directory_uri(), le thème enfant WordPress doit charger les deux feuilles de style dans le fichier function.php. Faites attention à recopier exac­te­ment le nom de la feuille de style du thème parent.

Si vous ren­con­trez le deuxième cas, le fichier function.php pré­sen­tera la structure suivante :

<!--?php</codesnippet-->
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
	wp_enqueue_style( 'child-style', get_stylesheet_uri(),
		array( 'Nom de la feuille de style du thème parent'),
		wp_get_theme()->get('Version') // Fonctionne uniquement si la version de ce point est également renseignée dans l’en-tête de la feuille de style
	);
}
?>

Si votre thème enfant WordPress doit charger les deux feuilles de style avec function.php, le code prendra la forme suivante :

<!--?php</codesnippet-->
function child_theme_styles() {
wp_enqueue_style( 'Nom de la feuille de style du thème parent', get_template_directory_uri() . '/style.css');
wp_enqueue_style( 'child-theme-css', get_stylesheet_directory_uri() .'/style.css' , array('Handle Nom de la feuille de style du thème parent));
}
add_action( 'wp_enqueue_scripts', 'child_theme_styles' );
?>

Chargez le fichier function.php au même endroit que le fichier style.css, dans le dossier du thème enfant WordPress.

Note

Vous avez aussi la pos­si­bi­lité de charger une image portant le nom screen­shot.png dans le dossier du thème enfant WordPress. WordPress affiche cette image dans le back-office pour illustrer votre thème et le classer plus fa­ci­le­ment.

Étape 4 : activer le thème enfant WordPress

Une fois le thème enfant créé, activez-le comme n’importe quel autre thème dans le back-office de WordPress. Il vous suffit de vous connecter, puis, dans Design > Thèmes, de sé­lec­tion­ner le thème enfant.

Note

Si vous avez déjà apporté des mo­di­fi­ca­tions à votre thème parent à l’aide du Cus­to­mi­zer de WordPress, celles-ci seront perdues lorsque vous activerez le thème WordPress enfant. Le plugin Cus­to­mi­zer Export/Import vous permet d’exporter les réglages du Cus­to­mi­zer puis de les réim­por­ter.

Votre thème enfant WordPress est désormais en­tiè­re­ment fonc­tion­nel. Si vous souhaitez modifier d’autres fichiers template, copiez ces fichiers depuis le thème parent vers le dossier du thème enfant. Veillez bien à faire cor­res­pondre exac­te­ment le chemin d’accès à celui présent dans le thème parent. Le fichier du thème parent sera au­to­ma­ti­que­ment écrasé par celui du dossier du thème enfant WordPress.

Conseil

Avec l’hé­ber­ge­ment WordPress chez IONOS, vous profitez d’une pla­te­forme spé­cia­le­ment optimisée pour WordPress qui vous fa­ci­li­tera la tâche pour réaliser votre propre site Internet avec WordPress.

Aller au menu principal