Lorsque vous installez un thème sur votre site WordPress, il se peut que vous apportiez des modifications dans le fichier CSS ou dans les fichiers PHP du site. Le problème est que lorsque ce thème sera mis à jour par ses créateurs et que vous décidez de mettre ce thème à jour sur votre site, toutes les modifications seront perdues.
Il existe heureusement une alternative à cela, les thèmes enfant.
Il s’agit d’un thème que vous allez créer qui reprend l’ensemble des propriétés d’un thème existant dans lequel vous pourrez apporter toutes les modifications que vous voulez et qui ne seront jamais écrasées lorsque le thème principal (que l’on qualifie de thème parent) sera mis à jour.
Via FPT
Pour faire un thème enfant, vous aurez besoin du thème original et de 2 fichiers que vous allez créer.
- Choisir un thème et l’activer dans Apparence > Thèmes p.ex. Twenty Sixteen
- Se rendre dans le dossier wp-content/themes et y identifier le nom du thème actif, dans notre cas twentysixteen
- Dans de même dossier wp-content/themes, créer un nouveau répertoire p.ex. child-twentysixteen (par convention on peut reprendre le nom du répertoire du thème principal précédé de child- mais le nom du dossier est libre!)
- Dans le nouveau dossier (dans ce cas child-twentysixteen ) créer 2 fichiers
- functions.php
- style.css
- Dans le fichier functions.php copiez le code ci-dessous. Cela a pour effect de récupérer le style du thème parent et enfant NB: N’oubliez pas d’inclure ce code dans des balises PHP <?php code ici ?>
<?php add_action( "wp_enqueue_scripts", "my_theme_enqueue_styles", 100 ); function my_theme_enqueue_styles() { wp_enqueue_style( "parent-style", get_template_directory_uri() . "/style.css" ); wp_enqueue_style( "child-style", get_stylesheet_uri() ); } ?>
- Dans le fichier style.css, copiez le code ci-dessous
/* Theme Name: Mon site enfant de Twenty Sixteen Template: twentysixteen Author: Emmanuel Lemal Description: Thème enfant crée sur base du thème Twenty Fifteen Version: 1.0.0 */
Le plus important ici est la valeur attribuée à Template. Il doit impérativement s’agir du nom du dossier du thème parent !
- Une fois cela fait, envoyez tout vote nouveau dossier en FTP sur le serveur (pas nécessaire si vous travaillez en local)
- Si vous voulez, vous pouvez créer dans ce même dossier une image que vous appelez screenshot.png ou .jpg qui illustrera votre thème
- Allez dans Apparence > Thèmes et activez le nouveau thème
- Vous pouvez maintenant apporter toutes les modifications que vous désirez dans le fichier style.css
Via ZIP
Pour faire un thème enfant, vous aurez besoin du thème original et de 2 fichiers que vous allez créer.
- Choisir un thème et l’activer dans Apparence > Thèmes p.ex. Twenty Sixteen
- Identifier le nom du dossier du thème parent en allant sur le site
- afficher code source
- rechercher « themes »
- identifier le dossier (c’est la partie derrière /themes/nom-du-dossier/) dans ce cas-ci twentysixteen
- Nimpote où sur votre ordinateur, créer un nouveau répertoire p.ex. child-twentysixteen (par convention on peut reprendre le nom du répertoire du thème principal précédé de child- mais le nom du dossier est libre!)
- Dans le nouveau dossier (dans ce cas child-twentysixteen ) créer 2 fichiers
- functions.php
- style.css
- Dans le fichier functions.php copiez le code ci-dessous. Cela a pour effect de récupérer le style du thème parent et enfant NB: N’oubliez pas d’inclure ce code dans des balises PHP <?php code ici ?>
<?php add_action( "wp_enqueue_scripts", "my_theme_enqueue_styles", 100 ); function my_theme_enqueue_styles() { wp_enqueue_style( "parent-style", get_template_directory_uri() . "/style.css" ); wp_enqueue_style( "child-style", get_stylesheet_uri() ); } ?>
- Dans le fichier style.css, copiez le code ci-dessous
/* Theme Name: Mon site enfant de Twenty Sixteen Template: twentysixteen Author: Emmanuel Lemal Description: Thème enfant crée sur base du thème Twenty Fifteen Version: 1.0.0 */
Le plus important ici est la valeur attribuée à Template. Il doit impérativement s’agir du nom du dossier du thème parent !
- Si vous voulez, vous pouvez créer dans ce même dossier une image que vous appelez screenshot.png ou .jpg qui illustrera votre thème
- Une fois cela fait, zippez votre dossier nouvellement créé
- Allez dans Apparence > Thèmes > Ajouter un thème > Téléverser un thème et choisissez votre fichier .zip
- Vous pouvez maintenant apporter toutes les modifications que vous désirez dans le fichier style.css via Apparence > Editeur de fichiers et de thèmes
A noter:
- toutes les modifications que vous apporterez dans le style.css de votre thème enfant viendront s’ajouter au style principal tu thème parent
- En revanche, si vous désirez changer des éléments dans les fichiers PHP, vous devrez d’abord copier le fichier PHP que vous voulez éditer depuis le thème parent dans votre thème enfant avant d’y apporter des modifications. Car contrairement au style.css du thème enfant qui s’ajoute au style.css parent, les fichiers PHP remplacent les fichiers PHP du thème parent !