Créer et personnaliser un thème enfant WordPress

🎨🖌 Créer un thème enfant sur WordPress est une étape essentielle pour ceux qui souhaitent personnaliser leur site sans risquer de perdre leurs modifications lors des mises à jour du thème principal. 🛠️💡 Cet article vous guidera à travers les étapes de création et de personnalisation d’un thème enfa

Objectif

Le but de cet article est de fournir une méthode claire et détaillée pour créer et personnaliser un thème enfant WordPress. Vous apprendrez à installer et à configurer votre thème enfant, ce qui vous permettra de réaliser des personnalisations avancées tout en préservant la capacité de mettre à jour le thème parent sans interférences.

Pré-requis

• Avoir une installation de WordPress active.
• Accès à l’éditeur de fichiers ou à l’accès FTP pour ajouter des fichiers au répertoire de votre thème.
• Connaissance de base en CSS pour les personnalisations de style.

Les Raisons d’utiliser un thème enfant WordPress

Le thème enfant est l’une des manœuvres les plus efficaces dans la création d’un nouveau thème WordPress fondé sur un thème déjà existant. Il permet de créer un nouveau thème tout en gardant la plupart des caractéristiques de base du thème parent. De ce fait, vous ne seriez pas obligé de tout coder à partir de zéro.
Étant donné que le thème enfant tire ses caractéristiques de base d’un thème maître, il est devenu plus facile et possible de personnaliser le code sans pour autant casser les diverses fonctionnalités de l’original. De cette manière, les mises à jour ne pourront pas effacer les modifications que vous avez apportées.

La construction d’un thème enfant se fait aisément puisqu’il n’est pas nécessaire de creuser profondément dans les fichiers racine de votre site. Le transfert de fichiers et la personnalisation des fichiers CSS peuvent se faire dans le gestionnaire de fichiers de votre panneau de contrôle et du tableau de bord WordPress.
Utiliser les thèmes enfants permet également de garder quelques aspects visuels du thème parent.
Les aspects importants, entre autres, les mises à jour et les correctifs de sécurité du thème d’origine, seront aussi pris en charge.
En plus de sa praticité, l’utilisation d’un thème enfant est une conception de sécurité. Vous ne risquez pas de perturber le bon fonctionnement du site, comme dans le cas d’une mauvaise configuration. Aussi, il vous permet le bon suivi des parties modifiées, car les fichiers d’un thème enfant sont séparés de son origine.

Mode de fonctionnement des thèmes enfants WordPress

Il faut d’abord savoir que le thème enfant possède son propre stockage, entre autres, son répertoire est séparé du thème parent et il dispose de ses propres fichiers (style.css et functions.php). Les fichiers des deux thèmes sont nécessaires pour le bon fonctionnement de votre thème WordPress, mais le dossier enfant peut contenir d’autres fichiers en plus. Grâce aux fichiers .css et .php pertinents, il est possible de tout modifier. Les paramètres de style de mise en page aux codes et aux scripts utilisés par un thème enfant WordPress peuvent être différents des attributs dans son thème parent. Quand quelqu’un accède à votre site, que se passe-t-il ? WordPress charge d’abord le thème enfant et après il remplit les styles et fonctions qui manquent en utilisant des parties d’un thème existant.

Une solution clés en main pour créer un site WordPress ?

LWS vous conseille sa formule d’hébergement WordPress en promotion à -20% (offre à partir de 3,99€ par mois au lieu de 4,99 €). Non seulement les performances sont au rendez-vous mais vous profitez en plus d’un support exceptionnel.

Découvrir l'offre

Création d’un thème enfant dans WordPress

La création d’un thème enfant dans WordPress nécessite une bonne compréhension de base de HTML, CSS et PHP. En effet, le processus de création comprend quelques codages. Pour le thème, vous devez choisir parmi les thèmes parents disponibles qui convient le plus à vos besoins. Vous avez à votre disposition deux méthodes courantes pour créer un thème WordPress. Vous pouvez soit utiliser un plug-in ou extension, soit vous recourir à un code personnalisé. 

Pour créer le thème enfant, vous devez d’abord vous connecter en FTP à votre hébergement web. 

Pour cela, utilisez un logiciel de transfert FTP de type FileZilla ou utilisez le gestionnaire de fichiers qui se trouve dans votre espace d’administration LWS Panel.

Dans le dossier « wp-content », accédez au dossier « themes ». Vous trouverez le répertoire de votre thème parent et de votre thème enfant.

Créez un nouveau répertoire pour le thème enfant, en cliquant sur l’icône indiquant la création d’un nouveau dossier se trouvant dans le menu supérieur.

Puis entrez le nom de ce dossier. Lors de la création du fichier, veillez à remplacer les espaces par « – (6) »

Créez un fichier « style.css » et un fichier « functions.php ».

Complétez le fichier ‘« style.css » avec :

/*Nom du thème : Votre nom de thème enfant
URI du thème: https: //votresite.com
Description: Enfant Ashe
Auteur du thème: votre nom
URI de l'auteur: https: //votresite.com
Template: ashe
Version: 0.1.0
*/

Il s’agit d’un code qui se compose des informations de base sur le thème enfant. Vous pouvez indiquer son nom, le thème utilisé comme parent. Des détails supplémentaires comme l’auteur et la description sont principalement utilisés comme identifiants dans le cas où vous aimeriez publier le thème. Parmi tous les champs à remplir, il ne faut surtout pas oublier le Template, son rôle est d’indiquer à WordPress le thème parent de ce thème enfant. Surtout faites bien attention à l’orthographe, respectez les minuscule et majuscule du nom. Quand vous avez terminé, cliquez sur « Enregistrer les modifications » et fermer.

Ensuite complétez le function.php en commençant par une balise PHP d’ouverture, puis incluez les fonctions qui mettront en file d’attente la feuille de style du thème parent.

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

Une fois terminé, enregistrer le function.php et fermer le fichier. Puis connectez-vous à votre site Web et accédez à Apparence, puis Thème. Normalement, vous trouverez le thème que vous venez de créer parmi les thèmes. Activer le.

Si votre thème ne se trouve pas dans l’apparence de WordPress, il se peut que les informations fournies ont une erreur. Veillez à ce que le template soit parfaitement rempli. Si cette case est mal informée, vous aurez une indication comme celui-ci en bas de votre thème dans WordPress.

Si c’est le cas, vérifiez que vous n’avez pas fait de faute d’orthographe ou mal écrit le mot. Si c’est bien correcte, changer les majuscules en minuscules et réactualiser votre tableau de bord. Veillez à nommer correctement tous vos fichiers et documents. Avant modification, prenez le temps de bien comprendre le style et éléments qui constituent le thème parent de votre nouvel thème.

Personnalisation du thème enfant

Vous avez le choix entre diverses méthodes pour personnaliser votre thème enfant WordPress. Vous pouvez modifier la mise en page en ajoutant des fichiers modèles au dossier du thème enfant ou de changer le style en ajoutant un code CSS personnalisé. Ce nouveau thème peut aussi acquérir de nouvelles fonctionnalités qui remplacent leur thème parent.

Bases de la personnalisation

Pour personnaliser votre thème enfant WordPress, accédez au menu « Apparence » puis « Thèmes » et cliquez sur le bouton « Personnaliser » sur votre thème enfant actif. Dans l’éditeur, sélectionnez « CSS additionnel ».

Changer la couleur de fond

Pour modifier la couleur, cliquez sur le bouton « Personnaliser », ensuite choisissez le bouton « Couleur » puis « Arrière-plan de l’en-tête » ou « Body Background ». Vous pouvez y sélectionner une couleur de fond ou une image de fond. Il existe deux moyens de changer la couleur, actionner la barre des couleurs ou entrer le code hexadécimal de la couleur.

Vous pouvez également utiliser le code ci-dessous à insérer dans le CSS additionnel pour changer la couleur de fond quand le menu cité plus haut n’est pas valable dans votre thème enfant.

.site-content-contain {
    couleur de fond : #DEF0F5 ;
    position: relative;
}

Modifier la couleur de la barre latérale du menu de WordPress

Il est possible de créer un affichage plaisant à vos widgets en ajoutant de la couleur à la barre latérale avec un code CSS. Il suffit d’ajouter :

.widget {
arrière-plan : #B9EBFA ;
rembourrage : 25px ;
}

Modifier les types, tailles et couleurs de police

Pour personnaliser votre site, utilisez le menu « Afficher » sur le côté gauche une fois que l’éditeur s’affiche. Dans le cas où vous ne trouvez pas le menu que vous souhaitez changer, utilisez le CSS additionnel, vous pouvez y placer des codes comme :

p {
couleur sarcelle;
}
p {
font-family: Georgia;
taille de police : 18 px ;
}

Ce code sert à modifier le type, la taille et la couleur de la police de votre paragraphe (p). Pour changer la police des autres parties de texte, par exemple, les titres ou les en-têtes, il faut d’abord inspecter les éléments afin de connaître leurs paramètres CSS. Pour modifier le titre, il faut cliquer avec le bouton droit sur le texte et sélectionnez Inspect. 

Par exemple pour H2, le code est

h2  {
affichage : bloc ;
taille de police : 1.5em ;
marge-bloc-début : 0.83em ;
margin-block-end : 0.83em ;
margin-inline-start : 0px ;
margin-inline-end : 0px ;
font-weight : gras ;
}

Conclusion

Maintenant que vous connaissez la méthode pour créer et personnaliser votre thème enfant WordPress, vous êtes prêt à explorer de nouvelles possibilités de design sans compromettre la fonctionnalité de votre site. 🌟🔧 Gardez vos modifications sûres et intactes à travers les mises à jour, et donnez à votre site un look unique et personnalisé ! Des questions ? N’hésitez pas à les poser en commentaires !

Besoin d'un hébergement web au meilleur prix ?

LWS vous conseille sa formule d’hébergement en promotion à -25% (offre à partir de 1,49€ par mois au lieu de 1,99 €). Non seulement les performances sont au rendez-vous mais vous profitez en plus d’un support exceptionnel.

Découvrir l'offre