Comment créer un thème enfant pour WordPress?

À quoi sert un thème enfant et comment procéder pour en créer un sur WordPress? Ce sont là des questions très intéressantes, auxquelles nous apporterons des réponses dans cet article.

Quand vous avez des exigences spécifiques, choisir un thème WordPress qui convient n’est pas une tâche facile. Votre choix doit correspondre à vos besoins et inclure toutes les fonctions dont vous avez besoin. Dans certains cas, quelques compromis sont presque inévitables.

Vous pouvez alors contourner ce problème en personnalisant le thème choisi. Peu importe le thème sélectionné, il devra toutefois être mis à jour périodiquement. Lors de sa mise à jour à une nouvelle version, toutes vos personnalisations risquent alors d’être réinitialisées.

Il existe toutefois une solution à ce problème. Vous pouvez créer un thème enfant qui hérite des fonctionnalités du thème d’origine mais auquel vous apportez des modifications de style. Même si vous mettez à jour votre thème, les personnalisations apportées à ce thème enfant resteront intact.

Dans cet article, nous regarderons de plus près les thèmes enfants WordPress. Nous verrons tout d’abord les avantages liés à leur utilisation, et aborderons ensuite la façon de créer vos propres thèmes enfant.

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

WordPress permet de facilement faire une copie de n’importe quel thème à des fins de personnalisation. Le thème d’origine est alors qualifié de thème parent, alors que la copie est connue comme un thème enfant.

Cet enfant dépend de son parent, et s’appuie sur les fonctions et le design du thème d’origine. Chaque fois que le thème parent reçoit une mise à jour, celle-ci s’applique aussi à l’enfant.

Le thème enfant jouit toutefois d’une certaine indépendance, plutôt à l’image d’un adolescent. Quand vous personnalisez le thème enfant, les modifications sont appliquées sur le thème parent d’origine. Ces éléments de personnalisation restent inchangés, même lorsque le thème parent est mis à jour ou modifié.

Il faut aussi noter que les personnalisations de votre thème enfant n’affectent pas directement le thème parent. En fait, elles sont stockées de manière totalement séparées.

Vous pouvez donc expérimenter, sans risquer de causer des problèmes au code sous-jacent. En fait, même la suppression de votre thème enfant et n’a aucun effet sur le thème parent d’origine.

Un thème enfant peut ainsi faciliter l’entretien et les mises à jour de votre site web. Il peut aussi vous aider à éviter de modifier directement le thème parent, qui s’avère un choix assez risqué.

Différences entre les thèmes enfant et parent

Il existe plusieurs différences techniques qui distinguent un thème parent d’un thème enfant. Par exemple, un dossier de thème parent comprend généralement :

• Un fichier style.css qui détermine l’apparence du site web.
• Un fichier functions.php qui détermine les fonctionnalités et le comportement par défaut de WordPress.
• Divers fichiers de modèle qui précisant les paramètres d’affichage des différentes pages de votre site web.

Le dossier d’un thème enfant ne nécessite que les deux fichiers essentiels que sont style.css et functions.php. Ces fichiers doivent être ajouté dans le répertoire /wp-content/themes/.

Le thème enfant peut être utilisé pour apporter des modifications au style de votre site web. On peut notamment penser à des modification au niveau de la palette de couleurs, des polices et des mises en page.

Par exemple, supposons que vous souhaitez modifier la palette de couleurs de votre site. Plus spécifiquement, changer la couleur d’arrière-plan et la couleur des titres H1.

Vous pouvez 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

}

Ces modifications remplaceront le style du thème parent et mettront à jour les couleurs sur votre site. Vous pouvez ainsi apporter autant de modifications que voulu dans le fichier style.css du thème enfant.

Par défaut, un thème enfant hérite de tous les éléments du thème parent. Il inclut tous les élément de design, les fonctionnalités et les fichiers.

Pour apporter des modifications à ces éléments, vous devez d’abord les copier dans le répertoire du thème enfant. Vous pouvez ensuite les modifier, pour que les changements s’appliquent au thème parent.

Pourquoi utiliser un thème enfant ?

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

• Sauvegarde les personnalisation de thème au moment des mises à jour.
• Permet d’ajuster sans risque les éléments visuels de votre thème.
• Offre une solution plaisante pour apprendre à éditer des thèmes, afin de mieux les adapter à vos besoins.

L’utilisation d’un thème enfant nécessite un minimum de connaissances en codage. Il faut souvent ajouter quelques lignes de code au fichier style.css. Quelques connaissances techniques facilitent l’utilisation d’un thème enfant, même si vous n’êtes pas un développeur.

Ajouter de nouvelles fonctionnalités à votre thème enfant via un code personnalisé demande toutefois une compréhension plus approfondie, qui n’est pas à la portée de tous..

Comment créer un thème enfant WordPress à l’aide d’un plugin

Il existe différentes façons de créer un thème enfant pour WordPress. Comme c’est souvent le cas avec ce CMS, utiliser un plugin est probablement le moyen le plus simple.

Un plugin adapté peut vous guider à travers le processus en quelques étapes simples. Vous n’avez donc pas vraiment besoin de connaissances techniques.

Dans le cadre de cet article, nous vous présentons la manière de procéder avec le plugin Child Theme Configurator.

Cet outil convivial peut vous aider à analyser votre thème pour les problèmes, créer un thème enfant et le modifier pour répondre à vos spécifications de mise en page et de style de conception Web.

Étape 1 : Télécharger et installer le plugin

Pour commencer, vous devez télécharger et installer le plugin. Pour ce faire, vous pouvez chercher Child Theme Configurator dans le répertoire des extensions de WordPress. Vous pouvez accédez à la page du module et cliquez sur le bouton Installer.

Une fois le plugin installé, il vous faudra ensuite cliquer sur le bouton Installer qui apparaîtra à la place du précédent. Vous devrez aussi bien sûr choisir un thème WordPress pour lequel créer votre thème enfant.

Étape 2 : Analyser le thème parent

Ensuite, accédez à Outils > Thèmes enfants :

Le module vous explique les étapes à suivre pour créer un thème enfant. Il suffit de sélectionner le lien de la deuxième étape pour commencer :

Vous pouvez sélectionner le thème parent que vous désirez dans le menu déroulant. Assurez-vous de bien choisir le thème que vous souhaitez personnaliser.

Cliquez ensuite sur le bouton Analyser (étape 3) afin de lancer une vérification du thème pour tout problème de code potentiel.

Le plugin peut parfois trouver des problèmes de compatibilité ou de codage. Dans ce cas, il listera ses observations ici. Dans la plupart des cas, vous verrez une confirmation de réussite vous indiquant qu’il est possible de procéder à la création du thème enfant.

Étape 3 : Nommez votre thème enfant

Vous serez maintenant invité à créer un nom de répertoire pour votre thème enfant. Ce nom sera celui du dossier dans lequel seront stocké les fichiers du thème.

Vous pouvez bien sûr lui donner le nom que vous souhaitez. Il faut toutefois qu’il soit unique et ne contienne que des caractères permis.

Nommer le répertoire de thème ne correspond pas à nommer ou décrire votre thème enfant lui-même. Ces étapes viendront plus tard.

Étape 4 : Sélectionnez les feuilles de style du thème enfant et parent

Vous devrez ensuite choisir la nouvelle feuille de style pour le thème de votre enfant. Si vous sélectionnez la feuille de style principale (style.css), les styles CSS personnalisés du thème enfant remplaceront le contenu du thème parent.

Il s’agit de l’option par défaut. Nous vous recommandons donc de la choisir si vous n’êtes pas particulièrement familier avec les thèmes enfants.

Vous devrez aussi choisir une méthode de gestion de feuille de style de thème parent. Il existe diverses options, mais nous vous recommandons de vous en tenir à la file d’attente de style pour la plupart des cas d’utilisation.

Il est préférable d’utiliser l’option par défaut jusqu’à ce que vous soyez familier avec la façon dont le thème parent gère la feuille de style. Les autres options souffrent parfois de problèmes de compatibilité avec certains thèmes.

Étape 5 : Nommez votre thème enfant

L’étape suivante consiste à nommer votre thème enfant. Du même coup, vous pouvez également écrire une description à y associer.

Le configurateur de thème enfant extrait les informations par défaut de votre thème parent. Si vous créez votre thème enfant pour un usage personnel, vous pouvez bien sûr laisser les données telles quelles.

Si votre thème parent sert de base à un nouveau projet que vous développez, il peut être approprié d’inclure une brève description et un nom unique.

Étape 6 : Copier les paramètres parents sur le thème enfant

Il vous faudra maintenant confirmer que le plugin peut copier les paramètres du thème parent dans le thème de votre enfant.

Ces paramètres permettront à votre thème enfant de tirer ses fonctionnalités et son apparence du thème parent. Si vous travaillez avec un thème premium ou restreint, il est possible que vous ne puissiez pas effectuer cette étape.

Étape 7 : Créez votre nouveau thème enfant et prévisualisez-le

La dernière étape consiste à créer votre thème enfant. Cliquez sur le bouton Créer un nouveau thème enfant et attendez que le plugin accomplisse votre requête. 

Vous devriez voir s’afficher un message indiquant que votre thème enfant a été créé avec succès.

Nous vous recommandons de le prévisualiser avant de l’activer sur votre site Web. Cette étape vous permet de vérifier que tout fonctionne correctement. Si c’est le cas, vous pouvez ensuite appuyer sur Activer pour mettre en place votre thème enfant.

Comment personnaliser votre thème enfant ?

Une fois que vous avez activé votre nouveau thème enfant, il est temps d’en tirer partie. Il existe plusieurs façons de personnaliser le design et les fonctionnalités.

Notez que WordPress recherche automatiquement les fichiers dans le répertoire du thème enfant avant de faire de même dans les fichiers de thème parent. Cela signifie que tout élément que vous ajoutez à votre thème enfant aura la priorité sur le même élément du dossier parent.

Ce système « enfant-avant-parent » offre donc une foule d’opportunités de personnalisation.

Création de styles personnalisés

Vous pouvez modifier certains éléments du design de base qui ne sont pas normalement couverts dans les options du thème. Pour ce faire, vous devez créer vos propres styles personnalisés.

Dans la plupart des cas, vous pouvez simplement copier les règles de style existantes du thème parent dans une nouvelle feuille de style.

Pour trouver le CSS que vous voulez modifier, le plus simple est d’utiliser les outils d’inspection dans votre navigateur. Vous pouvez alors regarder le CSS et le HTML derrière n’importe quelle page web.

Pour ce faire, vous n’avez qu’à faire un clic droit sur un élément d’une page web et sélectionner l’option Inspecter l’élément.

Vous trouverez le code de la page au bas ou à la droite de votre écran. Il est alors possible de naviguer et surligner le code HTML dans les sections.

Lors du survol du code, l’outil d’inspection affiche également les règles CSS. Vous pouvez même modifier le CSS directement avec les outils de développement pour voir à quoi ressemblerait le changement.

La modification s’applique alors instantanément, mais elle n’est pas permanente. Vous devez copier la règle CSS et l’ajouter au fichier style.css de votre thème enfant pour que le changement s’applique.

Le processus peut nécessiter plusieurs essais et des erreurs, il faut prévoir un certain temps pour perfectionner le style.

Outrepasser les modèles du thème parent

Il est possible de remplacer les divers modèles du thème parents par du nouveau contenu. Vous pouvez ainsi apporter des modifications au design de certaines parties de votre site Web. Celles-ci incluent notamment l’en-tête, le menu de navigation, le pied de page ou les modèles de publication.

Par exemple, vous pouvez modifier la mise en page des articles de blog dans votre thème enfant. Ici, nous ferons en sorte que le titre de chaque article apparaisse au-dessus de l’image en vedette.

La structure de cette section de votre site est contrôlée par le fichier content.php du modèle. Pour y apporter des modifications, téléchargez une copie de content.php dans le répertoire du thèeme enfant.

Ouvrez ensuite le modèle enfant dans votre éditeur de texte. Vous devriez y trouver un texte ressemblant à ceci :

twentytwentyfour_post_thumbnail();

<header>
<!-- Title and other header info here -->
</header>

Pour ajuster la disposition de votre en-tête, le code peut être modifié pour inverser l’ordre des éléments:

<!-- Title and other header info here -->
</header>

// Post thumbnail
twentytwentyfour_post_thumbnail();

Il faut ensuite enregistrer le fichier dans le dossier du thème enfant. Il est essentiel de conserver le nom d’origine du fichier, sinon WordPress ne pourra l’associer au fichier original.

Modèles de page personnalisés

Vous pouvez aussi ajouter de tout nouveaux modèles à votre thème enfant, qui n’ont pas d’équivalent chez le parent.

Le processus est identique au développement de modèles pour un thème régulier. La seule différence est qu’il faut parfois créer des modèles d’en-tête et de pied de page personnalisés.

Ces fichiers doivent alors être référencés dans le nouveau modèle personnalisé. Il faut aussi ajouter de nouveaux éléments de code CSS via la feuille de style enfant existante.

Création de nouvelles fonctions PHP

Vous pouvez introduire de nouvelles fonctionnalités dans votre thème enfant. Pour ce faire, vous devez créer un fichier functions.php enfant. Celui fonctionne en tandem avec le fichier parent, plutôt que de totalement le remplacer.

Vous n’avez donc pas besoin de faire une copie du fichier original. Il suffit simplement d’écrire les scripts supplémentaires que vous souhaitez ajouter. Le fichier de fonctions du thème enfant s’exécutera en premier, suivi de la version parent.

L’ajout d’un fichier de fonctions à votre thème enfant ouvre toute une gamme de possibilités. Par exemple, vous pouvez :

• Créez de nouvelles options de thème.
• Remplacer certaines fonctions de thème parent.
• Enregistrez de nouveaux widgets et shortcodes.
• Ajoutez des types de publications et des taxonomies personnalisés.
• Connectez des feuilles de style externes et des fichiers JavaScript.
• Préparez le terrain pour la traduction et la localisation du contenu.
  

Utilisation des crochets thématiques

Le moyen le plus efficace d’ajouter des fonctionnalités à votre nouveau fichier de fonctions est d’utiliser des crochets.

Ces crochets font partie des fonctionnalités de base de WordPress. Ils permettent de modifier différentes parties d’un site sans avoir à changer les modèles individuels.

Il suffit d’affecter un code au crochet correspondant dans le fichier de fonctions. WordPress appliquera alors automatiquement ce code aux éléments correspondants dans le thème parent.

Dans WordPress, les crochets existent en deux variétés :

Crochets d’action : Utilisés pour accrocher du code personnalisé dans certaines parties spécifiques de votre thème WordPress. On peut penser à une nouvelle zone de widget ou un message personnalisé à afficher après chaque article de blog.
Crochets de filtre : Utilisé pour modifier le contenu généré par WordPress ou un thème parent. Cette modification s’applique avant qu’il ne soit envoyé à un navigateur ou stocké dans la base de données. Ils sont souvent utilisés pour ajuster la longueur des extraits affichés.

La plupart des crochets ne nécessitent qu’un petit extrait de code. Par exemple, le code suivant vous permet d’ajouter du contenu au pied de page de votre site :

function my_custom_footer_content() {
echo '<div>Custom footer content here</div>';
}
add_action('wp_footer', 'my_custom_footer_content');

Vous voyez le segment « wp_footer »? C’est le crochet associé au pied de page. Il indique à WordPress où ce code doit aller. Dans ce cas, la fonction personnalisée devrait venir directement après le modèle de pied de page. Et ce, peu importe où cet élément est invoqué dans le thème.

Protégez vos personnalisations et mises à jour de thème

L’utilisation d’un thème enfant vous aide à éviter certaines complications liées à l’édition directe d’un thème parent.

Un thème enfant est facile à ajuster, ce qui vous permet d’apporter des modifications importantes au design d’un site Web existant. De plus, il n’est pas affecté par les mises à jour automatiques des thèmes.

Pour conclure sur l’utilisation d’un thème enfant WordPress

Un thème enfant peut être un outil essentiel, si vous souhaitez apporter des modifications à votre thème WordPress. Il vous permet de sauvegarder ces changements à travers le temps, et vous évite que des mises à jour viennent remplacer vos paramètres personnalisés.

Vous pouvez facilement créer un thème enfant pour votre site WordPress, en utilisant un plugin. Il vous faudra toutefois un minimum de compréhension des éléments de style pour tirer pleinement profit des possibilités qu’il vous offre.

Nous espérons que cet article vous a plu et vous a éclairé sur comment créer un thème enfant. Si c’est le cas, nous vous invitons à consulter nos autres articles et tutoriels.

N’hésitez pas non plus à consulter notre base de connaissance qui contient sans doute des réponses pour toutes vos questions web

Si vous êtes à la recherche d’un hébergement web pour votre site WordPress, nous vous invitons à consulter les offres d’Ex2. Nos plans d’hébergement WordPress vert sont très complètes et performantes, incluant tout ce dont votre site a besoin pour réussir.