Comment Créer Un Thème Enfant WordPress

Quand tu as des besoins spécifiques, choisir un thème WordPress n’est pas une tâche facile. Ton choix doit être à la hauteur et offrir toutes les fonctionnalités dont tu as besoin — Un compromis est presque inévitable.

Personnaliser ton thème choisi est une façon de contourner ce problème. Cependant, les thèmes WordPress doivent être mis à jour périodiquement. Lorsque le développeur de ton thème sort une nouvelle version, toutes tes personnalisations pourraient être réinitialisées.

La solution ?

Crée un thème enfant WordPress qui hérite de la fonctionnalité du thème original tout en conservant ton style. Même si tu appliques une mise à jour du thème, ton thème enfant personnalisé restera intact.

Dans cet article, nous allons examiner de plus près les thèmes enfant WordPress — de pourquoi tu en as besoin à comment créer le tien. Plongeons !

Qu’est-Ce Qu’un Thème Enfant ?

WordPress te permet de faire une copie légère de n’importe quel thème pour des besoins de personnalisation. Le thème original devient le thème parent, et la copie est connue sous le nom de thème enfant.

L’enfant dépend du parent, reprenant les fonctions et le design du thème original. Lorsque le thème parent est mis à jour, l’enfant l’est également.

Mais, un peu comme un adolescent, le thème enfant possède une certaine indépendance. Lorsque tu personnalises le thème enfant, les modifications sont appliquées par-dessus le thème parent original. Ces ajouts restent, même lorsque le thème parent est mis à jour ou modifié d’une autre manière.

Il convient également de noter que les personnalisations apportées à ton thème enfant n’affectent pas le thème parent. En fait, elles sont stockées séparément. Cela signifie que tu as la liberté d’expérimenter, sans craindre de briser le code sous-jacent. Tu peux même supprimer complètement ton thème enfant, et cela n’aura aucun effet sur le thème parent original.

Utiliser un thème enfant rend la maintenance et la mise à jour de ton site plus faciles. Cela t’aidera également à éviter le risque de modifier directement le thème parent, qui pourrait être écrasé et perdu.

Différences Entre Les Thèmes Enfant Et Parent

Il existe plusieurs différences techniques entre un thème parent et un thème enfant. Par exemple, un dossier de thème parent inclut généralement :

• Un fichier style.css qui détermine l’apparence et le ressenti de ton site web.
• Un fichier functions.php qui te permet d’ajouter des fonctionnalités ou de modifier le comportement par défaut de WordPress.
• Plusieurs fichiers de modèle qui définissent comment les différentes pages de ton site sont affichées.

En revanche, un dossier de thème enfant n’a besoin que de deux fichiers essentiels : style.css et functions.php. Tu ajouteras ces fichiers dans le répertoire /wp-content/themes/.

Tu peux utiliser un thème enfant pour apporter des modifications stylistiques à ton site web, telles que changer la palette de couleurs par défaut, les polices et les mises en page.

Par exemple, disons que tu veux changer le schéma de couleurs de ton site. Tu peux le faire en créant un nouveau fichier style.css dans le répertoire du thème enfant et en ajoutant le code suivant :

body {

background-color:#fff;

}

h1 {

color: #000

}

Nous avons changé la couleur de fond et la couleur du H1 dans le code ci-dessus. Ces modifications remplaceront le style du thème parent et mettront à jour les couleurs sur ton site. Tu peux effectuer autant de changements que nécessaire dans le fichier style.css du thème enfant.

Un thème enfant hérite de tout du thème parent. Cela inclut tous les fichiers de modèle, les fonctions et les ressources telles que les images et les fichiers JavaScript. Si tu veux apporter des modifications à ces éléments, tu dois les copier dans le répertoire du thème enfant depuis le thème parent. Tu peux ensuite modifier les fichiers.

Pourquoi Utiliser Un Thème Enfant

Il y a plusieurs avantages à utiliser un thème enfant sur ton site WordPress, y compris :

• Protéger les modifications de thème contre les mises à jour automatiques.
• Ajuster les éléments visuels de ton thème.
• Apprendre à modifier les thèmes, ce qui est un pas vers le développement de ton propre thème.

Utiliser un thème enfant nécessite également une expérience minimale en codage. Dans la plupart des cas, tu as juste besoin d’ajouter quelques lignes de code au fichier style.css. Cela rend facile le démarrage avec un thème enfant, même si tu n’es pas un développeur de thèmes.

Si tu souhaites approfondir, tu peux ajouter de nouveaux éléments et fonctions à ton thème enfant via code personnalisé.

Comment Créer Un Thème Enfant WordPress À L’aide D’un Plugin

Utiliser un plugin est probablement la manière la plus simple de créer un thème enfant WordPress. Le plugin peut te guider à travers tout le processus en étapes simples, ce qui signifie que tu n’as pas besoin de connaissances techniques.

Dans ce tutoriel, nous allons travailler avec le plugin Child Theme Configurator. Cet outil convivial peut t’aider à analyser ton thème pour y détecter des problèmes, créer un thème enfant et le modifier pour répondre à tes spécifications de mise en page et de style de design web.

Étape 1 : Télécharge et installe le plugin Child Theme Configurator

Pour commencer, tu auras besoin de télécharger et d’installer Child Theme Configurator. Tu peux faire cela en naviguant vers la page du plugin et en cliquant sur le bouton Télécharger :

Ton ordinateur téléchargera les fichiers du thème dans un fichier ZIP. Ensuite, navigue vers ton tableau de bord WordPress et va à Plugins > Add New pour télécharger les fichiers.

Cliquez sur Upload Plugin > Choose File, et sélectionnez le dossier téléchargé :

Une fois le plugin installé, tu n’auras qu’à l’activer. Garde en tête que tu devras aussi choisir un thème WordPress à partir duquel créer ton thème enfant.

Étape 2 : Analyser Le Thème Parent

Ensuite, navigue vers Outils > Thèmes enfant:

Le plugin te guidera à travers les étapes pour créer un thème enfant. Sélectionne simplement CRÉER un nouveau Thème Enfant pour commencer :

Tu seras invité à sélectionner ton thème parent dans le menu déroulant. Si tu as plusieurs thèmes sur ton site WordPress, assure-toi de choisir celui que tu souhaites personnaliser :

Maintenant, clique sur Analyser pour vérifier le thème parent pour d’éventuels problèmes de code :

Si le plugin détecte des problèmes de compatibilité ou de codage, il les listera ici. Sinon, tu verras un message de succès vert te disant que tu peux procéder à la création du thème enfant :

Une fois que tu as déterminé que ton thème parent conviendra pour un thème enfant, tu peux passer à l’étape suivante. (Tu peux également afficher une analyse de données brutes ou soumettre des demandes de support au créateur du plugin depuis cette page.)

Étape 3 : Nomme Ton Répertoire De Thème Enfant

Ensuite, tu seras invité à créer un nom de répertoire pour le thème enfant. C’est le nom du dossier dans les fichiers de ton site.

Tu peux le nommer comme tu veux tant que c’est unique à ton site et contient des caractères acceptables. Nous utilisons “twentytwentyfour-child” pour simplifier les choses :

Garde à l’esprit que nommer le répertoire du thème n’est pas la même chose que nommer ton thème enfant ou ajouter une description du thème. Ces étapes viendront plus tard.

Étape 4 : Sélectionnez Les Feuilles De Style Des Thèmes Enfant Et Parent

Ensuite, tu devras choisir la nouvelle feuille de style pour ton thème enfant. Si tu sélectionnes la feuille de style principale (style.css), tes styles CSS personnalisés remplaceront le contenu du thème existant.

C’est l’option par défaut, et nous te recommandons de la choisir si tu es nouveau aux thèmes enfant :

Tu seras maintenant invité à choisir ta méthode de gestion de feuille de style pour le thème parent. Il existe différentes options, mais nous recommandons de rester avec Utiliser la file d’attente de styles de WordPress pour la plupart des cas d’utilisation :

En tant que débutant, il vaut mieux utiliser l’option par défaut jusqu’à ce que tu sois plus familier avec la manière dont le thème parent gère la feuille de style. Les autres options ne sont pas toujours compatibles avec tous les thèmes.

Étape 5 : Nomme Ton Thème Enfant

La prochaine étape consiste à nommer ton thème enfant et à rédiger une description pour celui-ci.

Le configurateur de thème enfant extraira les informations par défaut de ton thème parent et les affichera ici. Si tu crées simplement un thème enfant pour un usage personnel, tu peux laisser les données telles quelles.

Cependant, si ton thème parent va servir de base pour un nouveau thème que tu développes, tu pourrais vouloir ajouter une brève description et un nom unique.

Étape 6 : Copier Les Paramètres Du Thème Parent Vers Le Thème Enfant

Le plugin va maintenant te demander de confirmer qu’il peut copier les paramètres du thème parent sur ton thème enfant :

Cette étape garantira que ton thème enfant tire sa fonctionnalité et son apparence du thème parent. Note que si tu travailles avec un thème premium ou restreint comme thème parent, il se peut que tu ne puisses pas effectuer cette étape.

Étape 7 : Crée Ton Nouveau Thème Enfant Et Prévisualise-Le

L’étape finale consiste à créer ton thème enfant. Clique sur le bouton Créer un nouveau thème enfant et attends que le plugin fasse son travail :

Tu devrais recevoir une notification indiquant que ton thème enfant a été créé avec succès :

Toujours prévisualiser ton thème enfant avant de l’activer sur ton site web. Cette étape t’aidera à vérifier que tout fonctionne comme prévu. Ensuite, clique sur Activer & Publier pour commencer avec ton thème enfant.

Comment Créer Manuellement Un Thème Enfant WordPress

Si tu préfères ne pas utiliser un plugin pour créer ton thème enfant, tu peux utiliser la méthode manuelle. Cette option peut t’intéresser si tu utilises déjà trop de plugins sur ton site web.

De plus, créer manuellement un thème enfant WordPress te permet de réaliser tous les changements que tu souhaites à un niveau granulaire. Garde juste à l’esprit que tu auras besoin d’une connaissance intermédiaire du code CSS.

Voici un guide étape par étape :

Étape 1 : Développe Un Plan Pour Tes Modifications

Tout d’abord, trouve un thème parent qui te plaît et liste les modifications que tu souhaites apporter. Tu peux consulter les outils de développement et voir le code du thème pour effectuer les modifications correctes.

Pour voir les outils de développement, clique droit n’importe où sur ton site pendant l’exécution du thème et sélectionne Inspecter l’élément. Tu verras ensuite une page de données qui ressemble à ceci :

Ici, tu peux rechercher les couleurs de fond, les informations sur les polices, la taille des marges, et plus encore. Ensuite, tu peux faire une liste des fonctionnalités que tu aimerais ajuster dans ton thème enfant.

Étape 2 : Sauvegardez Votre Site

Il est essentiel de sauvegarder ton site actuel avant de faire des modifications pour éviter de perdre tes paramètres. Tu peux toujours revenir à cette sauvegarde si nécessaire. Tu pourrais également envisager d’utiliser un site provisoire au cas où tu ferais des erreurs critiques.

Il existe plusieurs méthodes pour sauvegarder ton site. Tu peux le faire manuellement en utilisant un plugin de sauvegarde, ce qui est probablement la méthode la plus facile pour la plupart des gens.

Alternativement, tu peux t’associer avec un fournisseur d’hébergement WordPress qui s’occupe des sauvegardes de site web. Nos plans d’hébergement géré DreamPress incluent des sauvegardes automatiques et sur demande pour protéger tes données.

Étape 3 : Créer Un Dossier Pour Ton Thème Enfant

Tu devras créer un dossier pour stocker tes fichiers de thème enfant. Pour ce faire, accède d’abord à tes fichiers via un client Secure File Transfer Protocol (SFTP) tel que Filezilla et navigue jusqu’au dossier des thèmes :

Ici, tu peux créer un nouveau répertoire pour ton thème enfant. Crée un nouveau dossier qui porte le nom du thème parent et ajoute « -child » à la fin.

Par exemple, si le répertoire de ton thème parent est nommé “twentytwentyfour”, ton répertoire de thème enfant sera appelé “twentytwentyfour-child”.

Étape 4 : Créer Une Feuille De Style Pour Ton Thème Enfant

Maintenant, tu devras créer un nouveau fichier texte et le nommer « style.css ». Ce fichier constituera la base de ton thème enfant. Il aura besoin de quelques informations de base dans l’en-tête, y compris son nom, URL, description, et plus :

Maintenant, sauvegarde et ajoute le fichier style.css au dossier du répertoire que tu viens de créer.

Étape 5 : Mettre En File D’attente Les Feuilles De Style

Ensuite, tu devras mettre en file d’attente les feuilles de style des thèmes parent et enfant.

La fonction enqueue garantit que ton thème enfant prendra ses données de style du thème parent. Elle te permet également de modifier le thème enfant sans affecter son parent.

Crée un nouveau fichier de fonctions dans ton répertoire de thème enfant et nomme-le « functions.php ». Tu peux ensuite indiquer à ton thème enfant de se référer au thème de base en ajoutant le code suivant :

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {

wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );

}

?>

Enregistre le fichier texte et navigue vers ton tableau de bord WordPress pour activer le thème.

Étape 6 : Activer Le Thème Enfant

Enfin, il est temps d’activer ton thème enfant. Tu peux le télécharger manuellement en allant dans Apparence > Thèmes > Télécharger. Ensuite, choisis une version .zip de ton répertoire de thème enfant :

Active ton thème enfant. Il devrait maintenant être actif !

Comment Personnaliser Ton Thème Enfant

Une fois que tu as activé ton nouveau thème enfant, il est temps de le tester. Il existe plusieurs façons de personnaliser le design et la fonctionnalité.

Un principe à garder à l’esprit est que WordPress recherche automatiquement les fichiers dans le répertoire enfant avant de scanner les fichiers du thème parent. Cela signifie que toute feuille de style ou modèle que tu ajoutes à ton thème enfant aura la priorité sur le même fichier dans le dossier parent.

Le système enfant-avant-parent nous offre beaucoup d’options.

Création De Styles Personnalisés

Pour des modifications de conception de base qui ne sont pas couvertes par le panneau Theme Options, tu peux créer tes propres styles personnalisés. Dans la plupart des cas, tu peux simplement réécrire les règles de style parent existantes dans une nouvelle feuille de style.

La meilleure façon de trouver le CSS que tu souhaites modifier est d’utiliser les Outils d’inspection dans ton navigateur. Tu peux examiner le CSS et le HTML derrière n’importe quelle page web en faisant un clic droit dessus et en sélectionnant Inspecter l’élément.

En bas ou à droite de ton écran, tu trouveras le code de la page. Passe ta souris sur le code et surligne le HTML par sections :

Lorsque tu passes la souris, cela affichera également les règles CSS. Tu peux modifier le CSS directement avec les outils de développement pour voir à quoi cela ressemble.

Dans cet exemple, nous avons changé la couleur de fond de “#9888fd” à “#9888fe” pour voir comment cela se présenterait. La couleur de fond changera instantanément, mais ce n’est pas permanent.

Tu dois maintenant copier la règle CSS et l’ajouter au fichier style.css de ton thème enfant comme ceci :

body {

Background-color: #9888fe;

}

Enregistre ces modifications dans le fichier style.css et retourne à ton tableau de bord WordPress pour prévisualiser le thème. Ce processus peut nécessiter des essais et des erreurs, donc prends ton temps pour perfectionner le style.

Remplacer Les Modèles Parent

Tout comme nous pouvons créer une nouvelle feuille de style pour du CSS personnalisé, il est possible de remplacer les modèles parent avec du nouveau contenu. Cela te permet de faire des modifications globales à la structure de parties spécifiques de ton site web — telles que l’en-tête et le menu de navigation, le pied de page, ou le modèle de publications individuelles.

Imaginons que tu veux changer la disposition des articles de blog dans ton thème enfant, afin que le titre de chaque article apparaisse au-dessus de l’image à la une.

Cette section de ton site est contrôlée par le fichier de modèle content.php. Pour commencer à apporter des modifications, télécharge une copie de content.php depuis le dossier parent via SFTP.

Ensuite, ouvre le modèle enfant dans ton éditeur de texte. Tu pourrais voir quelque chose comme ceci :

twentytwentyfour_post_thumbnail();

<header>
<!-- Titre et autres informations d'en-tête ici -->
</header>

Pour ajuster la disposition de ton en-tête, tu pourrais modifier le code pour lire :

<header>
<!-- Titre et autres informations d'en-tête ici -->
</header>

// Vignette de l'article
twentytwentyfour_post_thumbnail();

Enfin, enregistre le fichier et télécharge-le dans le dossier du thème enfant. Assure-toi de conserver le nom original du fichier, sinon WordPress ne reconnaîtra pas ton modèle modifié.

Modèles De Pages Personnalisés

Veux-tu quelque chose de totalement différent ? Tu peux également ajouter de nouveaux modèles à ton thème enfant.

Le processus est exactement comme développer des modèles pour un thème régulier, sauf que tu devras peut-être aussi créer des modèles personnalisés pour l’en-tête et le pied de page. Ces fichiers doivent être référencés dans ton nouveau modèle personnalisé — et n’oublie pas d’ajouter du nouveau CSS via la feuille de style enfant existante.

Créer de Nouvelles Fonctions PHP

Si tu souhaites introduire de nouvelles fonctionnalités dans ton thème enfant, tu peux créer un fichier functions.php enfant. Celui-ci fonctionne en tandem avec le fichier de fonctions parent, au lieu de le remplacer.

Ainsi, tu n’as pas besoin de faire une copie du fichier original — il suffit simplement d’écrire tous les scripts supplémentaires que tu souhaites ajouter par-dessus. Le fichier de fonctions enfant s’exécutera en premier, suivi de la version parente.

Ajouter un fichier de fonctions à ton thème enfant ouvre un large éventail de possibilités. Par exemple, tu pourrais :

• Enregistrer de nouveaux widgets et shortcodes.
• Ajouter des types de posts personnalisés et des taxonomies.
• Créer de nouvelles options de thème.
• Connecter des feuilles de style et des fichiers JavaScript externes.
• Préparer les bases pour traduire et localiser le contenu.
• Remplacer certaines fonctions du thème parent.

Tu peux en apprendre plus sur la création de ces fonctions dans notre guide complet sur functions.php.

Utilisation Des Crochets De Thème

La manière la plus efficace d’ajouter des fonctionnalités à ton nouveau fichier de fonctions est d’utiliser des hooks.

Les hooks font partie de la fonctionnalité de base de WordPress. Ils te permettent de modifier diverses parties de ton site web sans avoir à éditer les modèles individuels.

Au lieu de cela, tu attribues simplement ton code au crochet pertinent dans le fichier des fonctions. WordPress appliquera alors automatiquement ce code aux éléments correspondants dans le thème parent.

Dans WordPress, les hooks se présentent sous deux formes :

• Action Hooks : Utilisés pour « accrocher » du code personnalisé dans des parties spécifiques de ton thème WordPress, comme une nouvelle zone de widget ou un message personnalisé à afficher après chaque article de blog.
• Filter Hooks : Utilisés pour modifier le contenu généré soit par WordPress, soit par un thème parent, avant qu’il ne soit envoyé à un navigateur ou stocké dans la base de données. En ce qui concerne les thèmes enfant, ils sont le plus souvent utilisés pour ajuster la longueur des extraits.

La plupart des hooks nécessitent seulement un petit extrait de code. Par exemple, voici le code dont tu aurais besoin pour ajouter du contenu au pied de page de ton site :

function my_custom_footer_content() {
echo '<div>Contenu personnalisé du pied de page ici</div>';
}
add_action('wp_footer', 'my_custom_footer_content');

Tu vois cette partie ‘wp_footer’ ? C’est le crochet, et cela indique à WordPress où ce code doit être placé. Dans ce cas, ta fonction personnalisée devrait venir juste après le modèle de pied de page — là où il est invoqué dans ton thème. Sympa, non ?

FAQ Sur Les Thèmes Enfant WordPress

Nous aimerions penser que ce guide a été assez complet jusqu’à présent. Mais si tu as encore des questions en suspens, nous avons des réponses :

Devrais-je activer le thème parent ou enfant dans WordPress ?

Il y a une règle simple ici : active le thème que tu souhaites utiliser.

Si tu souhaites revenir au design original comme thème actif, active le thème parent. Mais si tu veux activer ces personnalisations magnifiques, assure-toi d’activer le thème enfant.

Quels sont les inconvénients de l’utilisation d’un thème enfant ?

Il n’y a pas beaucoup d’inconvénients à utiliser un thème enfant. C’est un peu plus technique que de personnaliser ton site via le Tableau de bord. Pour effectuer des modifications plus importantes, tu auras besoin d’au moins quelques connaissances de base en HTML, CSS et PHP.

Il est également important de noter qu’un thème enfant mal optimisé peut ralentir ton site, et tu seras toujours dépendant du thème parent.

Un thème enfant peut-il exister sans un thème parent ?

Non, un thème enfant ne fonctionne pas sans un thème parent.

Le concept de thème enfant dépend intrinsèquement d’un thème parent. Souviens-toi que le parent fournit tout sauf les styles personnalisés et les modèles que tu ajoutes. De plus, toute la structure des dossiers de ton site serait désorganisée si tu supprimais le dossier parent.

Si tu veux séparer ton design enfant, envisage de le convertir en un thème autonome.

Peux-tu avoir plusieurs thèmes enfant pour un thème parent ?

Oui, tu peux. Cela signifie que tu peux créer plusieurs versions du même site pour convenir à différents publics. Tu pourrais même effectuer des tests A/B de cette manière.

Quels sont les meilleurs plugins créateurs de thèmes enfant WordPress ?

En plus du Child Theme Configurator, avec lequel nous avons travaillé auparavant, découvre WP Child Theme Generator et Child Theme Wizard.

WordPress.org possède également son propre plugin de thème enfant expérimental. Il s’appelle Create Block Theme.

Quelle est la différence entre un thème enfant et un thème personnalisé ?

La dépendance est probablement la plus grande différence. Un thème enfant repose sur les fichiers principaux d’un thème parent, tandis qu’un thème personnalisé est autonome.

Cette indépendance signifie que les développeurs de thèmes peuvent introduire de nouvelles fonctionnalités principales et plus de personnalisation. En revanche, tu dois être à l’aise avec le code pour créer et maintenir un thème personnalisé.

Il nécessite également beaucoup plus de temps de développement pour construire un thème complet à partir de zéro.

Protège Tes Personnalisations Et Mises À Jour De Thème

Utiliser un thème enfant t’évite les complications liées à la modification directe d’un thème parent. Un thème enfant est facile à ajuster, ce qui te permet de réaliser des changements de design importants sur un site existant. De plus, il n’est pas affecté par les mises à jour automatiques du thème.

Voici un rapide résumé de comment créer un thème enfant manuellement :

• Fais un plan.
• Sauvegarde ton site actuel.
• Crée un dossier pour ton thème enfant en utilisant un client SFTP.
• Crée une feuille de style et télécharge-la sur ton site.
• Enfile les feuilles de style du thème enfant et parent.
• Active et prévisualise ton thème enfant.
• Apporte des modifications en utilisant CSS.

Avoir un beau thème est juste une partie de la gestion d’un site web réussi. Tu auras également besoin d’un fournisseur d’hébergement qui correspond à tes besoins. Découvre les packages d’hébergement partagé de DreamHost pour des plans abordables qui priorisent la performance du site web, avec une garantie de disponibilité de 100% !