Crée ton thème enfant sur WordPress

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é.

picto articles débutants
Débutant

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.

visuel Pinterest article WordPress thème enfant

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

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.

siteorign css

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”.

code snippet

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 :

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.

générateur thème enfant

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

télécharger thème enfant

Le plugin suivant suit la même logique.

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

Tu installes l’extension Child Theme Configurator.

extension child theme configurator

Outils > Thèmes enfants

menu thèmes enfants

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

child theme configurator analyse

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

message confirmation

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

création thème enfant

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

thème généré

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

twenty seventeen child

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

Installe ton thème enfant

Apparence > Thèmes

menu thème

Tu ajoutes un thème.

ajouter un thème

Tu télécharges le fichier Zip

téléverser thème
fichier thème enfant

et l’installes.

installer

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.

prévisualisation

Si le résultat te convient, tu actives.

activer enfant

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.

Migre les personnalisations déjà effectuées dans l’éditeur

Je te montre la procédure pour OceanWP.

Tu actives ton thème parent.

Theme Panel > Importer/exporter

importer exporter personnalisation thème oceanwp

Tu exportes les réglages.

exporter réglages

Tu actives ton thème enfant et importes.

importer réglages

Passons enfin à la mise en oeuvre.

Comment utiliser un thème enfant

Apparence > Editeur de thème

éditeur de thème

Tu sélectionnes ton thème enfant.

sélectionne thème enfant

Tu choisis le fichier à modifier.

selection fichier

Tu colles ton code à la suite après avoir passé une ligne.

ajout css

Tu enregistres.

mettre jour fichier thème

Conclusion

Tu as constaté qu’installer un thème enfant n’est pas compliqué.

WordPress : Découvre 3 méthodes simples pour créer ton thème enfant.

Tu as désormais toutes les cartes en main pour personnaliser ton thème.

signature de Jean du site pour pas un rond
portrait jean pourpasunrond

Jean

Fondateur, auteur et homme à tout faire


J’ai créé pour pas un rond pour que tu puisses réaliser seul ton site et le faire grandir avec des tutoriels pas à pas.

Les articles qui peuvent t’intéresser :

Retrouve tous les articles pour Créer seul ton site

bannière pour l'inscription à la newsletter
Résumé
WordPress : crée ton thème enfant facilement [Tuto]
Article
WordPress : crée ton thème enfant facilement [Tuto]
Description
Un thème enfant est l'étape indispensable avant de personnaliser ton thème sous peine de perdre tout ton travail pendant les mises à jour.
Auteur
Publié par
pour pas un rond
Logo

Cet article a 4 commentaires

  1. Bonjour,
    Peut-on créer un thème “enfant” après avoir déjà fait des modifications ?

    Cordialement,
    Pierrick.

    1. Bonjour Pierrick,

      Le fait que tu aies déjà modifié ton thème ne changera rien.

      Tu dois intégrer dans ton thème enfant toutes les modifications déjà apportées. Elles seront en doublon sur une petite période sans conséquence. A la prochaine mise à jour de ton thème, elles ne seront présentes que sur ton thème enfant.

      A bientôt,
      Jean

  2. merci Jean de donner de ton temps ! Très pédagogue en plus.

Laisser un commentaire

Fermer le menu
efficitur. nunc ut elit. fringilla elementum ut elit. Praesent quis, amet,