Créer un thème enfant WordPress : fonctionnement et mise en place
L'équipe éditoriale IONOS9 mins
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 incontournable du World Wide Web. Grâce à sa popularité, de nombreux professionnels de WordPress se sont spécialisés dans la mise à disposition de thèmes WordPress, qui sont autant de modèles pour créer des sites Internet. Ces thèmes intègrent presque toutes les fonctionnalités possibles et correspondent même aux attentes esthétiques approximatives des gérants de sites Internet, mais seulement approximativement. Il faut en effet adapter le code ici et là ou modifier la structure pour que les pages correspondent à l’identité visuelle de l’entreprise. Mais qu’arrivera-t-il à ces modifications 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 modifications, vous avez tout intérêt à créer un thème WordPress enfant. Un thème WordPress enfant, comme son nom l’indique, correspond à « l’enfant » d’un thème parent dans l’arborescence. Il reprend l’apparence et les fonctionnalités du thème parent. Si vous apportez vos propres modifications au thème enfant WordPress, celles-ci écrasent automatiquement les instructions du thème parent. Ces modifications n’ont aucun effet sur le thème parent. Si le thème parent dispose d’une mise à jour, les modifications du thème enfant WordPress seront conservées.
Lorsque vous apportez des modifications conséquentes ou que vous lancez des mises à jour, votre site Internet peut afficher des messages d’erreur. Pour ne pas brusquer les utilisateurs, activez le mode maintenance 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 modifications que vous apportez et à quels fichiers vous les appliquez. Il existe cependant des fichiers spécifiques dont n’importe quel thème enfant WordPress a impérativement besoin pour assurer son fonctionnement optimal :
- Une feuille de style CSS style.css
- function.php
- screenshot.png (optionnel)
À quoi servent ces trois fichiers dans un thème enfant WordPress ?
Comment fonctionne un thème enfant WordPress ?
Comme évoqué précédemment, un thème enfant WordPress fonctionne uniquement lorsqu’il contient les fichiers listés ci-dessus. Ces fichiers ont les fonctions suivantes :
- style.css contient toutes les règles et déclarations CSS qui encadrent l’apparence du thème. Sa partie la plus importante est l’en-tête : c’est là que le fichier CSS indique à WordPress qu’il s’agit d’un thème subordonné à un thème parent particulier, tout en fournissant d’autres informations fondamentales.
- 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 modifications du thème enfant écrasent les instructions du thème parent, le navigateur doit charger la feuille de style du thème enfant en respectant la feuille de style du thème parent.
- screenshot.png n’est pas obligatoire, mais recommandé pour reconnaître immédiatement le thème enfant WordPress dans le back-office. WordPress affiche automatiquement les fichiers screenshot.png dans le menu du thème selon la présentation correspondante.
Si vous n’apportez que des modifications mineures à votre thème, vous pouvez aussi opter pour des solutions plus simples comme le plugin Simple Custom CSS Plugin ou le Customizer, intégré dans WordPress depuis la version 4.7.
Avantages et inconvé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 inconvénients. Si vous envisagez uniquement de petites modifications du CSS, prenez le temps de déterminer s’il est vraiment intéressant d’installer un thème supplémentaire :
- Modifiez, partagez et stockez vos fichiers
- Data centers européens certifiés ISO
- Sécurité élevée des données, conforme au RGPD
| Avantages | Inconvénients |
|---|---|
| Lors de la mise à jour du thème parent, les modifications ne sont pas écrasées. | La mise à jour du modèle d’origine résout uniquement les failles de sécurité dans les fichiers template du dossier parent. Les fichiers template du thème enfant WordPress conservent 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 disposition et la structure du site Internet ou de développer certaines fonctions du thème. | Le site peut rencontrer des latences, car le navigateur doit charger deux feuilles de style. |
| Les modifications CSS conséquentes restent visibles dans le fichier style.css, contrairement aux modifications dans le Customizer de WordPress. | |
| Les thèmes enfant WordPress sont parfaits pour les débutants qui veulent se familiariser avec WordPress. En cas d’erreur, ils peuvent revenir à tout moment sur le thème parent. | |
| Le temps de développement 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 ?
Maintenant que nous avons vu la théorie, passons à la pratique pour créer un thème WordPress enfant fonctionnel.
É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 installation 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éalement, 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 informations 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 informations générales entre crochets par vos données. Il n’est pas nécessaire de compléter tous les points ; seules les deux informations suivantes sont obligatoires pour obtenir un thème enfant WordPress fonctionnel :
- 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 installation WordPress.
- Template : ces informations permettent à 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échargez-le sur le client FTP dans le dossier du thème enfant WordPress.
Étape 3 : charger correctement la feuille de style dans le fichier function.php
Dans le meilleur des cas, le thème parent contient déjà des instructions pour charger la feuille de style du thème enfant WordPress. Mais tous les modèles de présentation ne le proposent pas. Ainsi, il est important de regarder ce que fait le thème parent. Vous rencontrerez un des trois scénarios suivants :
- 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.
- 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 uniquement sa propre feuille de style en reprenant la commande du thème parent dans les paramètres de function.php.
- Si le thème parent charge sa propre feuille de style avec get_stylesheet_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 exactement le nom de la feuille de style du thème parent.
Si vous rencontrez le deuxième cas, le fichier function.php présentera 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.
Vous avez aussi la possibilité de charger une image portant le nom screenshot.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 facilement.
É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électionner le thème enfant.
Si vous avez déjà apporté des modifications à votre thème parent à l’aide du Customizer de WordPress, celles-ci seront perdues lorsque vous activerez le thème WordPress enfant. Le plugin Customizer Export/Import vous permet d’exporter les réglages du Customizer puis de les réimporter.
Votre thème enfant WordPress est désormais entièrement fonctionnel. 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 correspondre exactement le chemin d’accès à celui présent dans le thème parent. Le fichier du thème parent sera automatiquement écrasé par celui du dossier du thème enfant WordPress.
Avec l’hébergement WordPress chez IONOS, vous profitez d’une plateforme spécialement optimisée pour WordPress qui vous facilitera la tâche pour réaliser votre propre site Internet avec WordPress.
