S Si tu personnalises ton thème au-delà des fonctionnalités de l’éditeur, tu installes un thème enfant.

L’autre option est de ne jamais mettre à jour ton thème et d’ouvrir tes portes en grand aux pirates.

Cela ne prend que quelques minutes et t’évitera de perdre des heures de travail à la prochaine mise à jour.

Je te présente également des alternatives pour personnaliser ton thème en toute sérénité.

Sommaire

Cet article prend environ 5 minutes à lire. Si tu n’as pas le temps, tu peux l’épingler sur Pinterest pour le lire plus tard.

Si tu souhaites comprendre comment fonctionne un thème enfant, je te présente une synthèse rapide. Sinon, tu passes directement à la pratique.

Quelle est l’utilité d’un thème enfant ?

Un thème enfant est une surcouche de code qui modifie l’apparence et les fonctionnalités de ton thème.

rôle thème enfant — Dans les faits, le thème enfant se charge en premier.

C’est une coquille quasiment vide qui n’attend que tes instructions.

Il est composé de deux fichiers l’un pour le style (CSS) et le second pour les fonctionnalités (PHP). Tu peux également avoir un visuel qui illustrera ton thème enfant.

L’inconvénient : Quand tu ne travailles pas directement sur le thème enfant, la personnalisation effectuée dans l’outil du thème n’est pas prise en compte. Certains thèmes présentent des fonctionnalités d’export comme nous le verrons par la suite.

Il existe d’autres solutions qui peuvent remplacer son utilisation.

Une alternative pour les CSS

Tu peux utiliser les CSS additionnels présents dans la majorité des thèmes. Comme ici pour Twenty Seventeen.

Apparence > Personnaliser > CSS additionnel

Attention : A ne pas confondre avec l’éditeur de thème.

Tu peux également installer l’extension SiteOrigin CSS. Elle héberge ton code. Celui-ci n’est pas affecté par les mises à jour.

Elle offre de nombreuses autres fonctionnalités qui simplifient l’ajout de CSS en particulier pour les polices.
Le tutoriel : Modifie ton thème avec SiteOrigin CSS.

Une alternative pour les fonctions

Code Snippets sert de librairie de codes PHP.

Son mode d’emploi par Pascal Cescato : Centralisez vos bouts de code avec « Code Snippets ».

Je suis persuadé que cette question t’a traversé l’esprit.

Pourquoi ne pas modifier directement le thème parent ?

Cela fonctionne parfaitement jusqu’à la prochaine mise à jour.

Quand ton thème se met à jour, l’ancien code est remplacé par le nouveau. Tout ton travail de personnalisation a disparu. C’est le drame.

Je te montre maintenant à quoi cela ressemble en pratique.

Les composantes du thème enfant

Les deux exemples suivants sont issus d’un thème enfant de Twenty Seventeen généré automatiquement par WPMarmite. Les explications sont dans le paragraphe suivant.

Le fichier CSS

/*
Theme Name: Twenty Seventeen Enfant par WP Marmite
Description: Theme enfant du theme Twenty Seventeen. Vous pouvez désormais le personnaliser sans risquer de perdre vos modifications
Author: WPMarmite
Author URI: https://wpmarmite.com
Template: twentyseventeen
Version: 1.0
*/

Il comprend le nom du thème, sa description, l’auteur et l’url de l’auteur, le thème d’origine et la version.

Le fichier fonctions

<?php
/* Chargement de la feuille du style du theme parent */
add_action( 'wp_enqueue_scripts', 'wpchild_enqueue_styles' );
function wpchild_enqueue_styles(){
  wp_enqueue_style( 'wpm-http://mysterious-wombat.w5.poopy.life-style', get_template_directory_uri() . '/style.css' );
}

Pour l’instant, il indique uniquement de charger le thème parent après l’enfant.

La grande question : tu l’obtiens comment ton thème ?

Comment récupérer ton thème enfant

Je te présente trois méthodes pour créer ton propre thème enfant par ordre de préférence.

Utilise celui fourni par le créateur de ton thème

De nombreux créateurs de thèmes proposent des thèmes enfants prêts à l’emploi. L’avantage est qu’ils intègrent souvent des fonctionnalités spécifiques qui garantissent le parfait fonctionnement.

Tu installes uniquement les thèmes récupérés directement sur le site de l’éditeur. Tu verras que je fais une exception à la première ligne car Pascal est 100 % digne de confiance.

9 thèmes populaires :

Twenty Nineteen (par Pascal Cescato)
OceanWP
Hello Elementor (trouvé sur la page du thème)
Astra

Storefront
Neve
Hestia
Sydney
Zakra (en bas de page)

Si tu ne trouves pas ton thème, tu recherches dans ton moteur préféré :

thème enfant + ton thème
child theme + ton thème

Tu peux également utiliser cet excellent générateur.

Génère ton thème en 2 secondes

WPMarmite a réalisé un excellent travail avec ce générateur de thèmes enfants simplissime à utiliser.

Tu renseignes l’url de ta page d’accueil sans / à la fin.

Il ne te reste plus qu’à le télécharger.

Le plugin suivant suit la même logique.

Configure ton thème à l’aide d’une extension

Tu installes l’extension Child Theme Configurator.

Outils > Thèmes enfants

Tu sélectionnes le thème parent dans le menu déroulant et analyse.

Tu obtiens un message de validité du thème.

Tu sautes à l’étape 9 et génères ton thème.

En haut de la page, tu as désormais un message qui t’indique que le thème enfant est généré.

Ton thème enfant est directement disponible dans les thèmes.

Tu supprimes l’extension et passes directement à l’activation.

Installe ton thème enfant

Apparence > Thèmes

Tu ajoutes un thème.

Tu télécharges le fichier Zip

et l’installes.

Active ton thème enfant

Il est recommandé de prévisualiser le résultat avant d’activer pour s’assurer que tout fonctionne parfaitement.

Tu survoles ton thème pour faire apparaître les boutons. Tu cliques sur Prévisualisation en direct pour valider le bon fonctionnement.

Si le résultat te convient, tu actives.

Tous les thèmes ne présentent pas cette option. Si tu as déjà commencé la personnalisation dans l’éditeur, elle évite de recommencer la configuration.