Aujourd’hui j’ai décidé de créer une nouvelle catégorie dans ce blog : la catégorie “coder soi-même”. N’ayez pas peur, je ferais en sorte que cette catégorie soit accessible à tous ! 😉 Et si vous avez la moindre question ou s’il y a quelque chose que vous ne comprenez pas sur ces articles, je vous laisserais mettre un commentaire ou me contacter ! 🙂
Dans le premier article de cette catégorie, nous allons voir pourquoi et comment
créer un thème enfant !
Pourquoi créer un thème enfant
Lorsque vous souhaitez apporter des modifications au thème que vous utilisez sur WordPress, il est fortement conseillé de lui créer un thème enfant. Pourquoi ? Tout simplement pour qu’à la prochaine mise à jour de votre thème, toutes vos modifications ne disparaissent pas ! Sinon, vous n’aurez plus qu’à tout recommencer 😉 (Erreur de débutante et croyez-moi je rigolais pas ce jour-là 😛 ).
Mais vous me direz, “ben au pire, y’a qu’à pas faire les mises à jour!”. Mauvaise idée aussi 😉 . En effet, lorsqu’il y a des mises à jour de thèmes ou d’extensions, c’est souvent que des failles ont été détectées et qu’elles sont maintenant corrigées. Donc il ne faut surtout pas hésiter à faire les mises à jour afin de garder un site WordPress le plus protégé possible 🙂 .
Qu’est-ce qu’un thème enfant au fait ?
En fait, un thème enfant reprend toutes les fonctionnalités et le visuel du thème parent mais peut-être modifié sans abîmer le thème initial. Et du coup toutes les mises à jour faites sur le thème parent ne toucheront pas à vos modifications faites sur le thème enfant 😉 (Je suis assez claire ? 😮 )
Et comment le créer ce thème enfant ?
Pour y arriver, vous allez avoir besoin d’un serveur FTP (File Transfer Protocol). Le plus connu sous Windows est Filezilla (moi, c’est celui que j’utilise). Et si vous travaillez sur Mac, vous pouvez utiliser Cyberduck. Quelques conseils d’accès sont présents dans cet article si vous le souhaitez.
1ère étape : création du dossier themeparent-child
Vous allez commencer par vous connectez à votre FTP en entrant votre nom d’hôte, votre identifiant et votre mot de passe. Vous avez dû recevoir toutes ces informations de la part de votre hébergeur lors de l’achat de votre hébergement.
Une fois que vous êtes connecté, vous verrez à droite de votre écran (sur Filezilla) tous les dossiers présents sur votre hébergement. Pour accéder aux thèmes de votre WordPress vous devrez aller dans wp-content et themes.
Dans ce dossier themes, vous allez créer un nouveau dossier qui s’appellera themeparent-child. Par exemple, si mon thème parent s’appelle Divi, mon thème enfant s’appellera divi-child.
2ème étape : création du fichier style.css
Ensuite, vous allez avoir besoin d’un éditeur de texte. Je conseille Sublime Text aux débutants, Atom aux plus expérimentés et PHPStorm pour ceux qui sont prêts à payer 🙂 . Dans votre éditeur, vous allez créer un fichier style.css et vous allez écrire à l’intérieur :
/*
Theme Name: Mon thème enfant
Theme URI: https://monsite.com/themeparent-child
Description: Description de mon thème enfant
Author: Votre nom
Author URI: https://monsite.com/
Template: themeparent
Version: 1.0.0
*/
Vous adapterez bien-sûr chaque ligne en fonction de votre thème 🙂 . Et pour Template, mettez bien le nom exact du dossier du thème parent. Par exemple pour moi ce sera Divi.
Enregistrez ce fichier et importez-le dans votre dossier themeparent-child grâce à Filezilla.
3ème étape : créer le fichier functions.php
Comme pour votre fichier style.css, vous allez créer un fichier functions.php à l’aide de votre éditeur de texte.
Vous allez écrire à l’intérieur :
<?php
function wpm_enqueue_styles(){
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘wpm_enqueue_styles’ );
Enregistrez ce fichier et importez-le lui-aussi dans le répertoire themeparent-child.
Ce fichier va permettre de lier le thème parent et le thème enfant et de donner au thème enfant le même visuel que le thème parent.
Dernière étape :
Retournez sur votre site WordPress, allez dans apparence et thèmes et là, sélectionnez et activez le thème enfant que vous venez de créer !
Vous pourrez ainsi lui apporter toutes les modifications que vous souhaitez sans craindre qu’elles soient effacées lors de la prochaine mise à jour du thème 😀
Dans cet article, je ne vous parle que de l’utilisation du thème enfant pour la modification du visuel de votre site. Mais dans le dossier de votre thème enfant vous pourrez aussi créer de nouvelles fonctions ou modifier les fichiers existants dans le thème parent. En effet, si vous modifiez par exemple le fichier footer.php de votre thème parent. Il suffit ensuite de l’enregistrer dans le dossier du thème enfant et ce fichier prendra le dessus sur celui du thème parent. Pas mal non ? 😉
Voilà ! Vous avez maintenant votre thème enfant. Si vous avez la moindre question sur cet article ou le moindre soucis lors de la création de votre thème enfant, n’hésitez pas à m’envoyer un message ou à me laisser un commentaire sous cet article 😀
Belle semaine à tous et à très vite pour de nouveaux articles !
PS : Cet article a été écrit grâce aux ressources :
https://codex.wordpress.org/fr:Th%C3%A8mes_Enfant
https://wpmarmite.com/child-theme-wordpress
et à mon expérience personnelle 😉
Maintenant que vos fichiers du child theme sont crees, vous devez les copier dans le dossier du theme enfant que vous avez creez a l’etape 1 via votre client FTP (Filezilla).
Bonjour et merci,
Je suis nul mais j’apprends…
pour de petites modifications du type changer l’aspect d’une zone de texte. est ce que cela est aussi correct de sauvegarder son site sur son ordinateur en l’extrayant directement depuis Filezila ?… et modifier directement le theme principal ?
Bonjour Vidamino !
Il faut bien commencer quelque part et ne pas se décourager 😉
C’est une manière de faire seulement si les modifications sont apportées au thème enfant. Si tu les apportes directement sur le thème parent, elles vont disparaître à la prochaine mise à jour de ton thème.
Après il faut faire très attention avec cette manipulation de ne pas « casser » son site en n’enlevant pas de code fonctionnel. Pour être sûr de ne pas faire de bêtise, n’hésite pas à conserver le code original en le mettant en commentaire entre /* */ ou // ce qui le désactive mais te permet d’en garder la trace.
N’hésite pas si tu as plus de question 🙂
Bonjour et merci pour cet article très clair ! Je viens d’installer le thème enfant et j’ai un petit souci, en effet lorsque je me rend sur mon site, la « disposition » je dirais, n’est plus la même, par exemple je viens de télécharger un modèle de mise en page et au lieu d’avoir les 3 fenêtres les unes à cotés des autres sur la largeur de l’écran, elles s’affichent les unes en dessous des autres tout à gauche de mon site. Auriez-vous une idée d’ou cela peut venir ?
J’espère avoir été clair 🙂
Bonjour Maximilien, Merci beaucoup ! Pour votre problème, c’est comme s’il y avait un soucis de marge qui les fait aller les unes en dessous des autres parce qu’elles serait trop large pour se disposer les unes à côtés des autres. C’est la première chose qui me vient en tête. Après il y a certains modules qui passent aussi les uns en dessous des autres suivant la taille de l’écran sur lesquels vous les regardez (exemple smartphone ou tablette). J’espère avoir pu vous aider ! Sinon n’hésitez pas à m’envoyer un message via mon formulaire pour que l’on en discute 🙂 Belle fin de journée !
Bonjour
Merci pour le tuto ! Je rencontre néanmoins un problème quand j’active le thème enfant, ma mise en page est décalée de partout.. Mon thème parent est divi.
Une idée d’où cela pourrait venir ?
Merci !!
Bonjour Myrièm,
Malheureusement je n’ai jamais rencontré ce cas de figure. Aviez-vous déjà apporté des modifications à votre thème parent ? Peut-être que cela peut venir de là.
Si vous n’arrivez pas à régler le problème, n’hésitez pas à m’envoyer un message via mon formulaire de contact et j’essaierais de regarder plus précisément avec vous ce qui se passe.
Belle journée !
Merci 1000 fois pour cet article ! J’ai bien réussi à créer mon thème enfant 😀
Super ! Merci à vous Claire 😀 Contente d’avoir pu vous aider !
Bonjour,
J’ai suivi la procédure jusqu’à créer le fichier style.css et le php que j’ai déposé dans le dossier theme via filezilla mais quand je veux activer le theme dans WordPress, il me dit : Thèmes endommagés
Les thèmes suivants sont installés mais incomplets.
Nom Description
envo eCommerce-child Le thème parent est manquant. Merci d’installer le thème parent « envo eCommerce ».
Voici le code du style. css : /*
Theme Name: envo eCommerce-child
Theme URI: https://www.comptoirdesecoliers.com/envo-eCommerce
Description: Ceci est mon thème enfant
Author: prénom nom
Author URI: https://mon site avec les 3w/
Template: envo eCommerce
Version: 1.0.13
*/
Pourriez vous m’aider s’il vous plait ?
Bonjour,
Le message d’erreur parle de votre thème parent. Avez-vous bien installé le thème parent dans vos thèmes (Apparence, thème lorsque vous êtes sur votre partie admin) ?
Si oui et que le problème persiste, je vous laisse me contacter via mon formulaire de contact pour que l’on voit ce problème plus précisément. 🙂
Belle journée
Bonjour,
Tout a bien fonctionné jusqu’à l’activation du thème enfant qui me change toute la présentations de mon site en front office ?
Bonjour,
Cela est surprenant. L’activation du thème enfant devrait donner la même présentation que le thème parent.
A moins que de grosses modifications aient été apportées au thème parent au préalable.
Si le problème persiste, n’hésitez pas à me contacter via mon formulaire de contact afin que nous regardions ce problème plus précisément.
Belle journée 🙂
Bonjour,
Tout d’abord, un grand merci pour cet article clair et précis, j’ai tout bien suivi et tout a quasi marché 🙂
Je dis quasi car, comme cpolman, quand j’ai activé le thème enfant lié au thème parent, tout le front a été perturbé (comme s’il n’y avait pas de police spécifique présente dans le thème, blocs éclatés un peu partout sur la page…).
J’ai inspecté un peu le code css du thème parent et j’ai vu que ce thème était lui-même basé sur un autre thème (il y a écrit dans mon thème parent : » Styles based on normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css » ) : je n’y connais rien mais peut-être que le lien ne se ferait pas entre le 1er thème (le « grand-parent » en quelque sorte ^^) et le 3e thème qui serait mon thème enfant du coup ? Je ne sais pas si je suis claire.
Pour l’instant j’ai réglé le problème en :
– activant mon thème enfant
– copiant tout le code css de mon thème parent dans le bloc « CSS additionnel » en bas du volet de personnalisation et en faisant toutes mes modifications dans ce bloc (font size, etc.).
Est-ce que dans ce cas mon thème enfant suivra bien les mises à jour du thème parent tout en conservant mes modifications dans CSS additionnel, comme décrit en début d’article ? (sécurité + garantie des modifs)
Merciii !!! Encore pour l’article et pour votre aide! C’est génial d’avoir des gens qui prennent le temps d’expliquer aux autres :).
Bonjour Charlotteg,
Merci pour votre retour !
Alors normalement il n’y a aucun lien avec ce grand parent. Cette ligne signifie seulement que le créateur s’est basé sur les normes normalize qui permettent d’avoir une base de site identique aux autres. C’est un peu les règles de base si on peut dire.
Vous avez bien fait de faire comme ça. Normalement tout sera bien conservé lors de la mise à jour de votre thème parent. Je vous conseille cependant de faire une sauvegarde de votre site avant de tester la 1ère mise à jour de votre thème parent, histoire de ne pas perdre vos modifs au cas où.
Autre possibilité pour vos fonts (taille, couleur, police, etc), vous devez avoir des paramétrages qui puissent se faire dans Apparence – Personnaliser de votre partie admin avec une partie dédiée à la typo. Je préfère passer par là en général pour faire mes modifs de typo. Parce que je trouve qu’on peut facilement casser des choses en intervenant directement dans la feuille css du thème. J’espère avoir pu vous aider.
Merci à vous, et c’est avec grand plaisir !
Amélie
Vous êtes ma grande découverte du jour! Vos explications sont très claires. Vous avez toute ma gratitude pour votre aide et votre générosité!
Oh merci Anne. Votre commentaire me touche énormément ! Je suis heureuse d’avoir pu vous être utile.
Yes, je confirme la nécessité d’avoir un thème enfant lorsqu’on apporte beaucoup de changements persos sur son site avec son propre CSS. J’ai pleuré quand j’ai perdu mes premières optimisations sur mon site.
Installez le thème enfant les Zamis!!! 😉
Merci pour ton témoignage Denis 🙂