Comment Créer un Thème Enfant WordPress et le Personnaliser

L’un des principaux atouts de WordPress est sa capacité de personnalisation, ce qui est également vrai pour les thèmes WordPress. Grâce à eux, les utilisateurs disposent d’une grande flexibilité pour créer et modifier l’apparence de leur site.

Cependant, la création d’un thème complet à partir de la base peut être une tâche difficile et chronophage. C’est pourquoi la plupart des gens préfèrent créer des thèmes enfants pour leurs sites Web WordPress.

Ce tutoriel explique pourquoi cette pratique est nécessaire et vous guide dans la création et l’édition de votre premier thème enfant WordPress.

L’utilisation d’un thème enfant est l’un des moyens les plus efficaces de créer un nouveau thème WordPress basé sur un thème existant tout en conservant la plupart de ses caractéristiques. Comme il utilise les fonctionnalités et les éléments de son thème parent, il n’est pas nécessaire de tout coder à partir de zéro.

Étant donné qu’un thème enfant hérite des caractéristiques d’un thème maître ou parent, il est possible de personnaliser son code sans rompre les fonctionnalités de l’original. Ainsi, si un thème reçoit une mise à jour, toutes les modifications que vous avez apportées ne seront pas écrasées.

La création d’un thème enfant est également relativement facile puisque vous n’avez pas à creuser trop profondément dans les fichiers racines de votre site web. Des tâches telles que le transfert de fichiers et la personnalisation des fichiers CSS peuvent être effectuées à l’aide du gestionnaire de fichiers de votre panneau de contrôle et du tableau de bord de WordPress.

Les thèmes enfant vous permettent également de conserver certains aspects visuels du thème parent et de les uniformiser sur plusieurs domaines.

Les aspects essentiels, notamment les mises à jour et les correctifs de sécurité constants, seront également pris en charge, surtout si vous choisissez un thème parent d’un développeur réputé.

Une autre raison d’utiliser un thème enfant est qu’il offre une solution de sécurité si jamais vous le configurez mal. De plus, il vous permet de suivre efficacement les parties que vous avez modifiées puisque les fichiers d’un thème enfant sont séparés de son parent.

Comment fonctionnent les thèmes enfant WordPress

Un thème enfant est stocké dans un répertoire distinct de son thème parent avec ses propres fichiers style.css et functions.php. Ces deux fichiers de base du thème sont nécessaires pour faire fonctionner votre thème WordPress, mais le dossier peut également contenir d’autres fichiers.

En utilisant les fichiers .css et .php correspondants, vous pouvez tout modifier, des paramètres de style de la mise en page au code et aux scripts utilisés par un thème enfant, même si les attributs ne sont pas présents dans son thème parent.

Lorsqu’un visiteur accède à votre site Web, WordPress chargera d’abord le thème enfant, puis remplira les styles et fonctions manquants en utilisant des éléments d’un thème existant.

Ainsi, vous pourrez tirer le meilleur parti de votre conception personnalisée sans sacrifier les fonctionnalités de base du thème parent.

Comment créer un thème enfant dans WordPress

Avant de commencer à créer un thème enfant WordPress, n’oubliez pas qu’il est essentiel d’avoir des connaissances de base en HTML, CSS et PHP, car le processus implique un certain codage. De nombreux thèmes parents étant disponibles, il est également important de choisir celui qui correspond à vos besoins.

Il existe deux méthodes courantes pour créer un thème WordPress. Les utilisateurs peuvent soit utiliser des extensions, soit créer un thème enfant en utilisant un code personnalisé. Chaque option a ses propres forces et faiblesses. Dans ce tutoriel, nous allons nous concentrer sur la création manuelle d’un thème enfant de base.

Nous vous recommandons d’installer WordPress en local lorsque vous développez un thème enfant. Cela vous permettra d’apporter des modifications à votre site WordPress sans risquer d’endommager la version en ligne.

Cela vous permet également de créer un thème enfant sans avoir à acheter un nom de domaine ou un plan d’hébergement web. Les instructions suivantes utilisent Twenty Seventeen comme thème parent, mais il est possible d’en utiliser un autre si vous le préférez. Nous allons également utiliser le gestionnaire de fichiers de Hostinger pour ajouter et modifier des fichiers, mais le FTP fonctionne également.

Jetons un coup d’œil au guide étape par étape sur la façon de créer un thème enfant WordPress :

1. Accédez à hPanel et ouvrez le gestionnaire de fichiers.

2. Allez dans le dossier public_html -> wp-content -> themes. C’est là que se trouvent les répertoires de votre thème parent et de votre thème enfant.

3. Créez le répertoire d’un thème enfant en cliquant sur l’icône Nouveau dossier dans le menu supérieur. Saisissez un nom pour votre thème enfant et cliquez sur Créer.

Important ! Remplacez les espaces dans le nom du dossier ou du fichier par des traits d’union (-) pour éviter les erreurs.

4. Créez un fichier style.css dans le dossier du thème enfant. Remplissez son contenu avec le code suivant :

/* 
Theme Name: Twenty Seventeen Child 
Theme URI: http://yourdomain.com
Description: Twenty Seventeen Child 
Theme Author: Your Name
Author URI: http://yourdomain.com
Template: twentyseventeen 
Version: 1.0.0
Text Domain: twentyseventeen-child
License: GNU General Public License or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
*/

Ce code contient des informations de base sur le thème enfant, comme son nom et le thème utilisé comme parent. Les détails supplémentaires comme l’auteur et la description sont principalement utilisés comme identifiants si vous décidez de publier le thème.

5. Modifiez toutes les valeurs en conséquence. Le champ le plus important est Template car il indique à WordPress sur quel thème parent votre thème enfant est basé. Une fois terminé, cliquez sur Enregistrer et fermer.

6. Dans cette étape, vous allez mettre en file d’attente les feuilles de style des thèmes parent et enfant. Créez un fichier PHP nommé functions.php dans le répertoire du thème enfant, mais ne le remplissez pas avec le code du fichier du thème parent car il doit rester séparé.

Important ! Sautez cette étape si vous utilisez WordPress 5.9 car le thème enfant héritera les styles globaux du fichier theme.json du thème parent.

Commencez le code par une balise PHP d’ouverture, puis incluez les fonctions qui mettront en file d’attente la feuille de style du thème parent. Regardez l’exemple ci-dessous :

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>

7. Visitez votre site Web et accédez à Apparence -> Thèmes. Activez le thème enfant que vous venez de créer, et vous remarquerez qu’il a le même aspect que le thème parent.

Comment personnaliser votre thème enfant WordPress

Pour personnaliser votre thème enfant, vous devez avoir une connaissance de base des règles CSS et savoir comment inspecter les éléments afin de repérer leur code CSS et la classe à laquelle ils sont affectés.

Il existe quelques méthodes pour personnaliser votre thème enfant. Les utilisateurs peuvent modifier la mise en page en ajoutant des fichiers de modèle dans le dossier du thème enfant. Il est également possible de modifier le style du thème enfant en ajoutant du code CSS personnalisé.

Enfin, les thèmes enfants peuvent également être dotés de nouvelles fonctionnalités qui remplacent leur thème parent.

Maintenant, voyons les bases de la personnalisation d’un thème enfant WordPress. Pour ce faire, accédez à Apparence -> Thèmes et cliquez sur Personnaliser sur votre thème enfant actif. Lorsque l’éditeur de thème s’ouvre, sélectionnez CSS additionnel.

Changer la couleur de l’arrière-plan

Insérez la règle CSS suivante si vous souhaitez modifier la couleur d’arrière-plan de votre thème enfant :

.site-content-contain {
    background-color: #DEF0F5;
    position: relative;
}

La valeur située à côté de background-color : correspond au code hexadécimal de la couleur que vous souhaitez. Dans cet exemple, nous passons du blanc au bleu clair, le résultat ressemble donc à ceci :

Changer la couleur de la barre latérale

Vous pouvez créer un affichage agréable de vos widgets en ajoutant de la couleur à la barre latérale avec le code CSS suivant :

.widget {
background: #B9EBFA;
padding: 25px;
}

Encore une fois, n’oubliez pas de modifier le code couleur en conséquence. Vous devriez obtenir un résultat comme celui-ci :

Modifier les types, les tailles et les couleurs de police

Pour modifier le type, la taille et la couleur de la police de votre thème enfant WordPress, insérez le code ci-dessous :

p {
color: teal;
}
p {
font-family: Georgia;
font-size: 18px;
}

La balise p signifie paragraphe. Comme vous pouvez le voir ci-dessous, la règle ci-dessus a modifié l’aspect des polices du paragraphe en fonction des valeurs spécifiées.

Pour modifier la police d’autres parties de texte, comme les titres ou les en-têtes, inspectez d’abord les éléments pour voir leurs paramètres CSS. Essayons de changer la couleur de la police du titre :

1. Tout d’abord, cliquez avec le bouton droit de la souris sur le texte et sélectionnez Inspecter. Dans ce tutoriel, nous recherchons ce code dans l’onglet Styles :

.entry-title a {
    color: #333;
    text-decoration: none;
    margin-left: -2px;
}

Ce code représente le titre de cet exemple d’article de blog, y compris sa couleur, sa décoration et sa marge.

2. Copiez et collez le code dans l’onglet CSS additionnel et modifiez les valeurs en conséquence. Dans cet exemple, nous avons changé la couleur de la police de noir à rouge en modifiant la valeur hexadécimale.

Ce processus est également applicable à tout autre élément que vous souhaitez modifier.

Modifier la mise en page des articles et des pages

De la même manière que le CSS personnalisé d’un thème enfant WordPress remplace le style de son thème parent, les fichiers de modèle vous permettent de créer vos propres mises en page.

Chaque thème WordPress a une mise en page et une structure différentes, mais la plupart d’entre elles sont constituées de sections telles que l’en-tête, le contenu, le pied de page et la barre latérale.

Ces sections sont contrôlées par des fichiers de modèle qui correspondent à leur fonction. Par exemple, la section en-tête est généralement gérée par le fichier header.php.

Les fichiers de modèle originaux sont situés dans le dossier du thème parent. Si vous souhaitez créer un modèle de page WordPress, il vous suffit de copier le fichier du modèle dans le dossier de votre thème enfant et de le modifier.

N’oubliez pas que votre nouveau fichier modèle doit porter le même nom et se trouver dans le dossier correspondant à l’original.

Twenty Seventeen divise ses fichiers de modèles en template-parts qui sont référencées dans le modèle principal à l’aide de la fonction WordPress get_template_part().

Par exemple, si vous souhaitez modifier page.php, vous pouvez commencer par localiser les parties du modèle pour voir si ce sont les parties que vous devez modifier. Dans notre fichier d’exemple, la ligne 28 indique :

get_template_part( 'template-parts/page/content', 'page' );

Comment lire cela ? template-parts/page/ est le chemin du dossier. Quant au contenu, il fait référence au caractère du nom de fichier avant le trait d’union, et la page après le trait d’union.

Ensemble, ils forment le chemin complet de :

wp-content/themes/twentyseventeen/template-parts/page/content-page.php

En suivant la structure, si vous souhaitez modifier la disposition de content-page.php, vous devez le copier dans le dossier de votre thème enfant et le placer à cet endroit :

wp-content/themes/twentyseventeen-child/template-parts/page/content-page.php

Modification des styles globaux dans WordPress 5.9

La personnalisation d’un thème enfant basé sur des blocs dans WordPress 5.9 est facile. Le panneau des styles globaux vous permet de modifier la palette de couleurs et la couleur d’arrière-plan du thème sans avoir à coder.

Si vous souhaitez coder les styles par défaut, créez un fichier theme.json pour le thème enfant contenant uniquement un bloc CSS personnalisé avec les définitions des styles et des paramètres.

Utilisation du panneau des styles globaux

Accédez à l’éditeur Gutenberg en naviguant dans Apparence -> Éditeur du site. Ensuite, cliquez sur l’icône noire et blanche dans le coin supérieur droit de l’écran pour ouvrir le panneau des styles globaux.

Le panneau des styles globaux apparaît sur le côté droit de l’écran. Allez dans Couleurs pour trouver les options de personnalisation de la couleur globale de l’arrière-plan, du texte et des liens.

Pour ajouter des couleurs personnalisées, allez dans le paramètre Palette et trouvez la section Personnalisée au bas du panneau. Cliquez sur l’icône Plus (+), et l’outil de sélection des couleurs apparaît. Vous pouvez ajouter autant de couleurs que vous le souhaitez sans affecter les paramètres de styles globaux du thème parent.

Création d’un fichier theme.json

La création d’un nouveau fichier theme.json remplacera la palette de couleurs par défaut du thème au lieu d’ajouter une couleur personnalisée.

Nous n’avons besoin que d’un petit bloc de code CSS pour le faire – cela n’affectera pas le thème parent.

Utilisez le gestionnaire de fichiers de votre panneau de contrôle pour ouvrir le répertoire du dossier du thème enfant et ajouter theme.json. Après cela, il suffit d’ajouter le code CSS personnalisé au fichier.

Par exemple, voici un extrait de code pour remplacer la palette de couleurs par défaut du thème :

En ouvrant le panneau des styles globaux, vous verrez que la palette de couleurs par défaut du thème a été modifiée en fonction du code CSS.

Utilisez cette méthode pour modifier d’autres styles par défaut, tels que le filtre bicolore et les styles de bloc.

Ajout et suppression de fonctions

Un autre avantage important de la création d’un thème enfant est la possibilité de disposer d’un fichier functions.php distinct, qui, tout comme lors de la création de plugins, est utilisé pour ajouter (ou supprimer) certaines fonctionnalités à l’aide de code PHP.

Le processus sera simple si vous souhaitez créer une nouvelle fonction qui n’interagit pas ou ne se rapporte en aucune façon à celles qui existent déjà dans le thème parent. Tout ce que vous avez à faire est d’ajouter le code à votre fichier function.php.

Cependant, le processus peut être légèrement plus compliqué si vous souhaitez remplacer ou modifier une fonction que le thème parent possède déjà. Vous devez alors remplacer manuellement les fonctions du thème parent. Il existe trois méthodes principales pour ce faire :

• Remplacez une fonction pluggable en ajoutant une nouvelle fonction du même nom au fichier function.php de votre thème enfant.
• Augmentez une fonction existante en écrivant une autre fonction avec un nom différent dans le fichier function.php du thème enfant et assurez-vous qu’elle s’exécute après celle du thème parent.
• Décrocher une fonction du thème parent pour empêcher WordPress de l’exécuter.

Par exemple, le code suivant désactivera la fonction de clic droit dans votre thème :

function your_function() {
   ?>
<script>
jQuery(document).ready(function(){
    jQuery(document).bind("contextmenu",function(e){
        return false;
    });
});
</script>
<?php
}
add_action('wp_footer', 'your_function');

Problèmes potentiels liés à l’utilisation d’un thème enfant

Même si l’utilisation d’un thème enfant peut être bénéfique, elle peut également s’accompagner de certains effets négatifs. Jetons un coup d’œil à trois problèmes potentiels que vous pourriez rencontrer en utilisant un thème enfant sur votre site Web WordPress.

Temps de chargement des pages plus lent

Lorsqu’un site utilise un thème enfant, il est possible qu’il se charge plus lentement. En effet, au cours du processus de chargement, WordPress accède d’abord à la feuille de style du thème enfant, puis à la feuille de style du thème parent lorsqu’il a besoin d’un code qui n’est pas disponible.

Ce processus d’accès à deux feuilles de style différentes peut avoir un impact négatif sur les performances du site. Toutefois, les modifications du temps de chargement des pages devraient être relativement faibles et passer inaperçues pour la plupart des utilisateurs et des robots d’exploration des moteurs de recherche.

Il est également possible de minimiser davantage ce temps de chargement en gardant le code du thème enfant propre. En résumé, n’oubliez pas de surveiller le temps de chargement de votre site si vous décidez d’utiliser un thème enfant et prenez les mesures nécessaires lorsque vous constatez une baisse significative de la vitesse.

Courbe d’apprentissage abrupte

Le processus d’apprentissage du fonctionnement du thème parent est probablement l’une des parties les plus difficiles de la création d’un thème enfant. Cela dit, c’est un investissement qui en vaut la peine.

Comprendre correctement la hiérarchie des modèles peut prendre du temps, surtout lorsque le thème parent a une structure complexe avec des crochets et des filtres uniques.

Certains thèmes parents sont également dotés de nombreuses fonctionnalités et options. Si cela peut constituer un avantage considérable pour votre thème enfant, le fait d’avoir à gérer un trop grand nombre de fonctionnalités peut être source de confusion et prolonger votre processus d’apprentissage.

Dans la plupart des cas, cela devient plus facile une fois que vous comprenez parfaitement les fichiers du thème parent et leur fonctionnement.

Dépendance à l’égard du thème parent

Il est possible que le développeur d’un thème parent cesse de travailler sur une fonctionnalité importante ou sur le thème lui-même. Il peut également décider d’apporter une modification importante au thème qui peut avoir un impact sur votre thème enfant d’une manière ou d’une autre.

Si un développeur abandonne un thème parent, votre thème enfant cessera de recevoir des mises à jour et des correctifs, ce qui l’exposera à diverses menaces de sécurité. Cela peut avoir un impact considérable sur tout site qui utilise votre thème enfant – il peut être nécessaire d’arrêter de l’utiliser, selon la gravité de la situation.

Les thèmes authentiques et populaires sont toutefois moins susceptibles d’être abandonnés, de sorte que vous n’aurez peut-être pas à vous soucier de ce problème.

Comment résoudre les erreurs du thème enfant de WordPress ?

Il est possible que vous rencontriez des problèmes lors de la création et de la mise en œuvre d’un thème enfant WordPress. Jetons un coup d’œil à cinq solutions courantes à vérifier si votre thème enfant ne fonctionne pas correctement.

• Vérifiez le fichier function.php. Si vous ne mettez pas en file d’attente la feuille de style du thème enfant dans le fichier function.php, le site chargera le thème parent à la place. Par conséquent, assurez-vous de vérifier le fichier function.php après avoir apporté des modifications à un thème.
• Référencez le thème parent. Si vous rencontrez l’erreur « broken theme », c’est peut-être parce que WordPress traite votre thème enfant comme un thème autonome. Corrigez cette erreur en référençant la fonction du thème parent dans le fichier CSS de votre thème enfant.
• Utilisez la règle CSS !Important. Vous pouvez rencontrer un cas où certains éléments de votre thème enfant ne fonctionnent pas correctement parce que le code CSS du thème parent les écrase. La solution la plus courante pour résoudre ce problème consiste à ajouter des règles CSS telles que !important à la feuille CSS du thème enfant.
• Nommez correctement les fichiers du thème. Certaines erreurs peuvent être causées par des noms de fichiers erronés. WordPress exige un nom spécifique pour certains fichiers comme les feuilles de style. Si vous les nommez différemment de style.css, le système ne sera pas en mesure de les localiser et de les rendre à l’utilisateur final.
• Videz votre cache. La mise en cache peut amener votre navigateur Web à afficher le thème parent ou une version plus ancienne de votre thème enfant. La solution la plus simple pour résoudre ce problème est de vider le cache de WordPress et de désactiver les plugins de mise en cache si vous en utilisez.

Conseils et astuces supplémentaires pour la création d’un thème enfant

Le processus de création d’un nouveau thème enfant peut être compliqué, surtout pour les débutants. Voici sept conseils supplémentaires qui pourraient vous aider à créer un thème enfant plus facilement :

• Lorsque vous activez un thème enfant pour la première fois, pensez à le faire dans un environnement de test plutôt que sur un site Web réel.
• Les thèmes enfants doivent avoir la même arborescence de dossiers que leur thème parent. WordPress donnera la priorité au fichier qui vient en premier dans la hiérarchie des modèles, qu’il provienne du thème enfant ou du thème parent.
• Assurez-vous que votre nouvelle fonction porte le même nom que la fonction du thème parent que vous souhaitez remplacer.
• La meilleure approche lors de la création d’un répertoire de thème enfant est de lui donner le même nom que le thème parent avec l’ajout de -child à la fin.
• Le choix d’un framework de thème parent provenant d’un développeur réputé qui le met régulièrement à jour est important pour éviter les désagréments et les problèmes importants avec votre thème enfant.
• Pensez à consulter les nombreux thèmes enfants déjà créés pour le thème parent si possible. Cela peut vous donner une idée générale de la meilleure approche pour diverses tâches.
• N’oubliez jamais d’activer votre nouveau thème enfant une fois que vous l’avez téléchargé sur WordPress.
• Gardez à l’esprit qu’un thème enfant est fortement dépendant du thème parent, donc assurez-vous de conserver tous les fichiers du thème parent dans votre installation de thème WordPress.
• N’ayez pas peur de recommencer si vous rencontrez une erreur.

Conclusion

Un thème enfant WordPress permet aux utilisateurs de WordPress de créer un projet entièrement nouveau basé sur le thème parent existant sans rompre ses fonctionnalités de base.

Avec un peu de codage simple et une gestion des répertoires, il est possible de modifier le thème enfant autant que vous le souhaitez.

Dans cet article, nous avons appris les avantages de l’utilisation d’un thème enfant sur votre site WordPress et comment il fonctionne. Nous avons également examiné le guide étape par étape pour créer un thème enfant et comment le personnaliser.

Toutefois, avant d’utiliser un thème enfant, les utilisateurs doivent être conscients des problèmes potentiels liés à son utilisation sur leur site WordPress :

• Un temps de chargement des pages plus lent.
• Courbe d’apprentissage abrupte.
• Dépendance à l’égard du thème parent.