Bannière article comment créer un thème enfant Wordpress ? - Monsieur Site Web

Créer un thème enfant sur WordPress, une étape primordiale !

Ça y est, vous avez peut-être suivi mon article qui explique comment installer WordPress, et vous êtes prêts à créer votre propre site, à votre image. Il va falloir effectuer des modifications graphiques et donc créer un thème enfant WordPress !

Une des premières étapes de la création consiste à choisir un thème graphique pour son site.
Il en existe des milliers, gratuits ou payants, qui vous permettront de donner un style personnel à votre site.

Mais surtout, ces thèmes peuvent être modifiés à votre guise pour encore plus de personnalisation.
C’est la qu’il faut commencer à faire attention !

Pourquoi créer un thème enfant WordPress ?

Imaginez le cas de figure suivant :

Vous choisissez un thème qui vous plaît, vous l’installez et vous commencez à le personnaliser en effectuant des modifications.
Quelques temps plus tard, le créateur du thème propose une mise à jour du thème pour ajouter de nouvelles fonctionnalités et renforcer la sécurité du thème.
Vous voulez forcément être à jour niveau sécurité, et vous ne crachez pas sur de nouvelles fonctionnalité, alors vous mettez le thème à jour.

Et bam ! Toutes vos modifications ont disparues, et vous vous retrouvez au point de départ avec le thème de base, et tout est à refaire

Modifications perdues mise à jour thème enfant WordPress - Monsieur Site Web

Faut-il refuser les mises à jour du thème pour conserver ses modifications ?

C’est une solution en effet, mais je la déconseille fortement.
Un thème obsolète peut être une faille de sécurité importante pour votre site.

Alors comment conserver un thème à jour et les modifications effectuées ?

C’est la qu’intervient le concept de thème enfant, ou child theme pour les amateurs de la langue de Shakespeare.

C'est quoi ? - Monsieur Site Web

Un thème enfant est un thème qui va hériter de toutes les fonctionnalités de son thème parent, mais sur lequel on va pouvoir effectuer des modifications qui seront conservées en cas de mise à jour du thème parent.

Utile, non ?!

Comment créer un thème enfant ?

Allez, du concret, installons un thème enfant sur notre site WordPress.
Je vais vous montrer la méthode pour installer un thème enfant que votre site soit en local ou en ligne.

Pré requis:
Vous devez déjà avoir sélectionné le thème parent de votre site.

Vous pouvez conserver un des thèmes par défaut de WordPress (twentysixteen, twentyseventeen, twentynineteen), ou bien choisir un autre thème via le back-office ou via le site de WordPress en suivant ce lien.

Etape 1 : Créer le dossier du thème enfant

En local, accédez via votre ordinateur au répertoire de votre site et rendez-vous dans le dossier wp-content/themes .
Ce dossier contient l’ensemble des thèmes installés sur votre WordPress.

La « norme » veut que l’on donne au thème enfant le nom du thème parent, suivi de « -child ».

Si je souhaite créer le thème enfant du thème twentynineteen, je vais alors créer un dossier que je nomme «twentynineteen-child».

En ligne, c’est la même démarche, sauf qu’il faudra passer par un logiciel client FTP pour accéder aux fichiers présents sur votre hébergement Web. Je vous conseille d’utiliser le logiciel Filezilla pour gérer vos hébergements Web.

L’image vous montre l’hébergement Web du site www.monsieursiteweb.fr, pour lequel j’ai installé le thème sydney, et on voit bien que j’ai créé le thème enfant « sydney-child » pour pouvoir modifier sereinement mon thème.

Mais ajouter un dossier ne suffit malheureusement pas à faire fonctionner un thème enfant, ce serait trop simple !
Deux fichiers au minimum sont requis pour que le thème enfant soit fonctionnel, un fichier functions.php et un fichier style.css

Etape 2 : Créer un fichier functions.php

Ce fichier va nous servir (entre autres) à indiquer à WordPress de prendre en priorité les modifications de style effectuées sur le thème enfant. Ainsi, le thème enfant prendra le dessus sur le thème parent.

Ouvrez donc votre logiciel d’édition de code, le bloc-note pour les plus téméraires, ou sinon je vous conseille vivement d’installer le logiciel Notepad++ pour créer et/ou modifier du code source.

Créez un fichier que vous appelez “functions.php” et enregistrez le dans le répertoire du thème enfant.

Ajoutons maintenant la fonction suivante à notre fichier :

<?php
// Fonction pour récupérer le fichier CSS du thème enfant

function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>

Cette fonction indique à WordPress l’emplacement du fichier de style CSS du thème enfant qui doit être pris en compte avant celui du thème parent.
Désormais, vous allez pouvoir modifier les règles CSS de votre thème dans le thème enfant sans que  vos modifications ne soient perdues.

Etape 3 : Créer un fichier style.css

Pour pouvoir modifier les règles CSS via votre thème enfant, il est logique de devoir créer un fichier CSS dans votre thème enfant.

Encore avec votre logiciel d’édition de code, créer un fichier appelé “style.css” et enregistrez le également dans le répertoire du thème enfant.

Avant toute modifications, ajoutons quelques lignes en commentaire pour rendre ce fichier fonctionnel :

/*
Theme Name: twentynineteen-child
Description: Ajoutez une petite description de votre thème
Author: Votre prénom et Nom (toute œuvre doit être signée :p)
Author URI: https://www.nom-de-votre-site.fr
Template: twentynineteen
Version: 1.0
*/

Légende

  •   Thème Name : Le nom de votre thème enfant.
  •   Description : La description de votre thème enfant (en sachant que cette description apparaîtra dans votre back office pour décrire le thème).
  •   Author : Nom et prénom de l’auteur du thème enfant.
  •   Author URI : L’url du site de l’auteur du thème enfant.
  •   Template : Le nom du thème parent (attention de bien respecter la casse en copiant exactement les majuscules et minuscules).
  •   Version : La version de votre thème enfant.
Si vous ne connaissez pas du tout le code CSS, voici un petit cours qui vous apprendra quelques bases pour avoir les capacités de personnaliser vous-même votre site.
  Et voila, vous avez réalisé toutes les démarches pour avoir un thème enfant correctement installé sur votre site. Il ne vous reste plus qu’à activer votre thème enfant pour pouvoir l’utiliser..

Activer un thème enfant sur WordPress

Pour procéder à l’activation de votre thème enfant, rendez-vous dans votre back-office, direction l’onglet apparence et le sous onglet thèmes.
Vous pouvez constater que votre thème enfant est désormais visible et disponible à l’activation.

Il ne vous reste plus qu’à cliquer sur le bouton “activer” de votre thème enfant.

Vous pouvez maintenant modifier le style de votre thème via le fichier “style.css” ou alors ajouter de nouvelles fonctions / réécrire les fonctions existantes via le fichier “functions.php”.

Et comme promis, vous pouvez désormais mettre à jour sereinement votre thème, aucune modification ne sera perdue ! 😀

Conclusion

Créer un thème enfant sur WordPress est une étape incontournable et très simple.

Cela dit, si cela vous fait peur de commencer à modifier les fichiers de WordPress, sachez qu’il existe des extensions capables de créer un thème enfant pour vous, comme Child Theme Configurator.

Pour ma part, je préfère réaliser cette étape moi-même, je trouve dommage d’installer des extensions et alourdir mes sites WordPress pour quelque chose qui prend 5 minutes à réaliser !

A bientôt pour de nouvelles astuces sur l’environnement WordPress ! 🙂

Vous avez aimé cet article ? N'hésitez pas à le partager avec vos contacts 😉

Pour être notifié de l'ajout d'un nouvel article sur ce blog, une seule solution :

Commentaires

4
4,0 rating
Moyenne de 4 sur 5 (1 avis)
Excellent0%
Très bien100%
Bien0%
Mauvais0%
Très mauvais   0%

votre thème enfant est désormais visible ? ?

4,0 rating
19 septembre 2020

Vous pouvez constater que votre thème enfant est désormais visible et disponible à l’activation
Question. Ou ? ?
La définition de la photo n’est pas. Assez bonne !
Proposition : utilisation de la loupe windows

Claudewi

Laisser un commentaire

Vous avez un projet ?

Je suis disponible à tout moment pour l’étudier et le réaliser. N’hésitez pas à me contacter.

Image de demande de devis - Monsieur Site Web