Vous cherchez à créer un theme enfant dans WordPress ?

Une fois que vous aurez appris les bases de WordPress, vous voudrez probablement apprendre à personnaliser votre site WordPress. un thème enfant wordpress est un excellent point de départ pour quiconque cherche à personnaliser des thèmes WordPress.

Dans cet article, nous allons vous montrer comment créer un thème enfant WordPress.

Qu’est-ce qu’un thème parent WordPress ?


Un thème parent est un thème complet. Cela signifie qu’il inclut les fichiers de modèle WordPress et les ressources nécessaires au fonctionnement du thème.

Les fichiers index.php et style.css sont les seuls fichiers de modèle requis. Cependant, la plupart des thèmes incluront également des fichiers PHP, des fichiers de localisation, des graphiques, du Javascript et/ou des fichiers texte.

Tous les thèmes sont considérés comme des thèmes parents, à l’exception des thèmes enfants. Examinons de plus près ce qu’est un thème enfant et les avantages qu’il offre aux propriétaires de sites WordPress ci-dessous.

Qu’est-ce qu’un thème enfant WordPress ?

Un thème enfant est un thème WordPress qui hérite des fonctionnalités, des caractéristiques et du style d’un autre thème WordPress, le thème parent. Vous pouvez ensuite personnaliser le thème enfant sans apporter de modifications au thème parent.

Pourquoi avez-vous besoin d’utiliser un thème enfant ?

Les thèmes enfants sont le meilleur moyen de personnaliser un thème WordPress car ils permettent de gagner du temps et des efforts. Le thème parent contient déjà beaucoup de formatage et de fonctionnalités, vous n’avez donc pas à tout coder à partir de zéro.

Ils permettent également de mettre à jour vos thèmes WordPress en toute sécurité. Sans thème enfant, vous devrez modifier directement vos fichiers de thème et chaque fois que vous mettrez à jour le thème, vos personnalisations seront perdues. De ce fait, vous seriez face à un choix impossible : soit ne pas maintenir votre thème à jour, ce qui représente un énorme risque de sécurité, soit perdre vos personnalisations et le temps que vous avez investi à les créer. Étant donné que vous avez modifié le thème enfant et non le theme parent, vous ne perdrez aucune personnalisation lorsque vous mettrez à jour le thème parent.

Une fois que vous êtes satisfait de votre thème enfant, vous pouvez même l’utiliser sur un autre site WordPress.

Avant de commencer à créer un thème enfant


Pour créer un thème enfant, vous devez savoir que vous allez travailler avec du code. Vous aurez besoin d’une compréhension de base du HTML et du CSS pour comprendre les modifications que vous devez apporter au code pour atteindre vos objectifs.

Une certaine connaissance de PHP est également utile. Vous devez au moins être familiarisé avec le copier-coller d’extraits de code provenant d’autres sources.

Nous vous recommandons de vous entraîner sur votre environnement de développement local. Vous pouvez déplacer un site WordPress sur un serveur local à des fins de test ou utiliser un contenu factice pour le développement de thèmes.

Enfin, vous devez choisir un thème parent. Vous devez choisir un thème parent dont l’apparence et les fonctionnalités sont similaires à votre objectif final. Le but est de faire le moins de changements possible.

Dans cet article, nous utiliserons le thème Twenty Twenty-One, qui est l’un des thèmes WordPress par défaut.

comment créer un thème enfant wordpress

Vous pouvez créer un theme enfant wordpress manuellement en créant le dossier et les fichiers nécessaires. Ou vous pouvez créer un thème enfant à l’aide d’un plugin.

La méthode manuelle est utile car elle vous aidera à vous familiariser avec les fichiers avec lesquels vous devrez travailler plus tard dans le didacticiel. La méthode du plugin peut être utilisée si vous rencontrez des difficultés pour créer ces fichiers.

Vous n’avez besoin d’utiliser qu’une seule méthode et vous pouvez passer à la méthode que vous préférez en utilisant les liens ci-dessous.

  • Méthode 1 : Création d’un thème enfant wordpress à l’aide de code
  • Méthode 2 : Création d’un thème enfant wordpress à l’aide d’un plugin

Méthode 1 : Création d’un thème enfant wordpress à l’aide de code

Étape 1 : Créez le dossier du thème enfant.

Tout d’abord, vous devez ouvrir le répertoire /wp-content/themes/ dans votre dossier d’installation WordPress et créer un nouveau dossier pour votre thème enfant. Vous pouvez nommer ce dossier comme bon vous semble. Pour ce tutoriel, nous le nommerons theme-yestuto.

creer-dossier-theme-enfant-wordpress-
creer-dossier-theme-enfant-wordpress-

Étape 2 : Créez une feuille de style pour votre thème enfant wordpress.

Ensuite, vous devez créer les deux premiers fichiers pour votre thème enfant. Commencez par ouvrir un éditeur de texte comme Notepad. Ensuite, vous devez coller le code suivant dans un document vide.

/*
Theme Name:   yes-tuto Theme enfant
Theme URI:    https://yestuto.com
Description:  theme enfant Twenty Twenty-Two 
Author:       yes tuto
Author URI:   https://yestuto.com/
Template:     twentytwentytwo
Version:      1.0.0
Text Domain:  twentytwentytwochild
*/

Vous devrez ajouter un commentaire d’en-tête obligatoire tout en haut du fichier pour que la feuille de style fonctionne. Ce commentaire contient des informations de base sur le thème enfant, y compris qu’il s’agit d’un thème enfant avec un thème parent particulier.

Vous n’avez vraiment besoin d’inclure que deux choses : le nom du thème et le modèle (c’est-à-dire le nom du thème parent). Vous pouvez inclure d’autres informations, notamment une description, le nom de l’auteur, la version et les balises. Ces détails supplémentaires sont importants si vous allez publier ou vendre votre thème enfant.

Voici un exemple de commentaire d’en-tête complet pour un thème enfant Twenty Twenty-Two :

Remarquez les barres obliques et les astérisques (*/). Cela signifie que ce code sera « commenté » dans le CSS afin que WordPress n’essaie pas de l’exécuter.

Vous pouvez ajouter du CSS personnalisé plus tard lorsque vous êtes prêt à commencer à personnaliser votre thème enfant. Pour l’instant, cliquez sur Enregistrer et nommez le fichier “style.css” pour que cette feuille de style soit enregistrée dans le répertoire de votre thème enfant.

Remarque:

Le nom du modèle ou Template (ici dans ce cas twentytwentytwo) doit correspondre au nom du dossier du thème parent et assurez-vous également qu’il n’y a pas d’espace vide après le nom.

Étape 3 : Importez les feuilles de style des themes parent et enfant.

La prochaine chose que vous devez faire est de créer un deuxième fichier qui importera, ou mettra en file , les feuilles de style du thème parent. Pour ce faire, créez un nouveau document dans votre éditeur de texte et copiez-y le code suivant.

/* enqueue scripts and style from parent theme */
    
function twentytwentytwo_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
    array( 'twenty-twenty-one-style' ), wp_get_theme()->;get('Version') );
}
add_action( 'wp_enqueue_scripts', 'twentytwentytwo_styles');

Ce code fonctionnera uniquement lorsque vous utiliserez Twenty Twenty-One comme thème parent. Si vous utilisez un thème parent différent, vous devez utiliser un code différent, comme décrit dans le manuel du thème WordPress.

Si vous rencontrez des difficultés pour modifier le code d’un thème parent différent, vous pouvez utiliser la méthode du plugin à la place.

Enregistrez maintenant ce fichier sous le nom functions.php dans le dossier de votre thème enfant.

Remarque : Auparavant, le thème parent était importé à l’aide de la commande @import dans style.css. Nous ne recommandons plus cette méthode car elle augmentera le temps nécessaire au chargement des feuilles de style.

Étape 4 : Installez et activez votre thème enfant.

Vous avez maintenant créé un thème enfant très basique, et lorsque vous accédez à Apparence » Thèmes, vous devriez voir le thème enfant yes-tuto. Vous devrez cliquer sur le bouton Activer pour commencer à utiliser le thème enfant sur votre site.

activer theme enfant wordpress

votre thème enfant wordpress est maintenant en ligne ! Le seul problème est qu’il ressemble exactement à votre thème parent. Il est temps de personnaliser.

Étape 5 : Personnalisez votre thème enfant.

Pour personnaliser votre theme enfant wordpress, vous commencerez probablement par ajouter du CSS au fichier style.css dans le répertoire de votre thème enfant. C’est l’un des moyens les plus simples d’apporter des modifications à votre thème. Que vous souhaitiez personnaliser les couleurs, le padding, la typographie ou d’autres éléments de conception fondamentaux du thème parent, ajoutez simplement du code à la feuille de style de votre thème enfant sous le commentaire d’en-tête. Ce code remplacera le code de la feuille de style de votre thème parent.

Exemple:

dans cet exemple on va modifier la couleur du body pour cela il faut juste ajouter le code dans le fichier style.css du thème enfant quand viens de créer.

body {
  background-color: #08a52f;
}

voici le résultat:

modifier theme enfant wordpress

Méthode 2 : Création d’un thème enfant wordpress à l’aide d’un plugin

Child Theme Configurator est un plugin WordPress facile à utiliser qui vous permet de créer et de personnaliser rapidement des thèmes enfants sans utiliser de code.

La première chose que vous devez faire est d’installer et d’activer le plugin Child Theme Configurator.

installer plugin pour cree un theme enfant wordpress

Lors de l’activation, vous devez accéder à Outils »Thèmes enfants dans votre tableau de bord WordPress.

Dans l’onglet Parent/Enfant, il vous sera demandé de sélectionner un thème parent dans un menu déroulant. Nous allons sélectionner le thème Twenty Twenty-One.

créer un theme enfant wordpress grece à un plugin

Une fois que vous avez cliqué sur le bouton Analyser, le plugin s’assurera que le thème convient à une utilisation en tant que thème parent. Twenty Twenty-One est OK.

Ensuite, il vous sera demandé de nommer le dossier dans lequel le thème enfant sera enregistré et de choisir où enregistrer les styles. Nous laisserons les paramètres par défaut.

Dans la section suivante, il vous sera demandé de choisir comment accéder à la feuille de style du thème parent. Encore une fois, nous allons utiliser le paramètre par défaut.

Lorsque vous arrivez à la section 7, vous devez cliquer sur le bouton intitulé « Cliquez pour modifier les attributs du thème enfant ». Vous pouvez ensuite renseigner les détails de votre thème enfant.

Lorsque vous créez un thème enfant manuellement, vous perdez les menus et les widgets du thème parent. Le configurateur de thème enfant peut les copier du thème parent vers le thème enfant. Cochez la case Section 8 si vous souhaitez le faire.

Enfin, cliquez sur le bouton pour créer votre nouveau theme enfant. Le plugin créera un dossier pour vos thèmes enfants et ajoutera les fichiers style.css et functions.php que vous utiliserez pour personnaliser le thème plus tard.

Avant d’activer le thème, vous devez cliquer sur le lien en haut de l’écran pour le prévisualiser et vous assurer qu’il a l’air bien et ne casse pas votre site.

Si tout semble fonctionner, cliquez sur le bouton Activer et publier et votre thème enfant sera mis en ligne.

créer un theme enfant wordpress à l'aide d'un plugin

À ce stade, le thème enfant ressemblera et se comportera exactement comme le theme parent. Ensuite, nous allons commencer à le personnaliser.

Le thème enfant WordPress ne fonctionne pas

Votre thème enfant ne fonctionne pas ? Voici quelques éléments à vérifier.

1- Revérifiez votre fichier functions.php

Assurez-vous d’avoir importer la feuille de style de votre thème enfant dans votre fichier functions.php. Si vous ne l’avez pas importer, votre thème enfant ne se chargera pas. Votre site restera sur le thème parent, donc tout fonctionnera correctement ; le problème est que les modifications que vous apportez au thème enfant n’apparaîtront pas sur le front-end. Reportez-vous à l’étape 3 ci-dessus pour ajouter le code d’importation à votre fichier PHP.

2- Assurez-vous d’avoir bien nommé la feuille « style.css ».

Vérifiez que vous avez nommé votre feuille CSS « style.css » et non « stylesheet.css » ou tout autre terme. Étant donné que « style.css » est la convention de dénomination standard de WordPress, l’utilisation de ce nom de fichier permettra à votre fichier functions.php de savoir automatiquement qu’il s’agit de votre feuille de style. Si vous nommez votre feuille de style autrement, le fichier functions.php ne pourra pas la récupérer et la rendre à l’utilisateur final.

3- Videz votre cache.

Essayez de vider votre cache WordPress – votre navigateur peut vous montrer une ancienne version de votre site. Vous pouvez également ouvrir votre site Web dans une fenêtre de navigation privée pour consulter vos modifications publiées. Si vous avez installé un plugin de cache pour améliorer la vitesse de votre site Web, désactivez-le pendant que vous travaillez sur votre thème enfant.

4- Ajoutez !important à votre code CSS.

Si le thème parent écrase toujours le code CSS de votre thème enfant, ajoutez !important aux éléments que vous avez modifiés. Cela va forcer le remplacement e tout ce qui est écrit sur la feuille CSS du thème parent. Vous ajouteriez !important juste avant le point-virgule, comme ceci :

p { background-color: gray !important; }

La règle !important peut être utilisée pour les identifiants « ID », les classes CSS et les éléments HTML standard tels que les paragraphes, les tableaux, les en-têtes, etc.

5 -Contactez le support de votre thème ou consultez le forum du thème.

Si vous avez suivi toutes ces étapes et que le CSS ne se charge toujours pas, il est temps de contacter l’équipe d’assistance de votre thème ou de consulter le forum du thème sur WordPress.org. Bien que cela devrait être votre dernier recours, cela a l’avantage de vous donner des réponses spécifiques à votre thème. Le développeur de votre thème WordPress peut avoir utilisé un code personnalisé ou mis en place un système de nommage différent pour les fichiers de thème.

FAQ

Quel est le meilleur un thème enfant wordpress ou bien un thème parent ?

Les thèmes enfants nécessitent un thème parent pour fonctionner correctement car ils héritent d’une partie de leurs fichiers. L’utilisation de thèmes enfants est la meilleure pratique lorsqu’il s’agit d’ajouter des fonctionnalités ou un style supplémentaires à un thème WordPress.

Ai-je vraiment besoin d’un thème enfant wordpress ?

Oui. Vous avez besoin d’un theme enfant si vous souhaitez modifier les fichiers de votre thème.