Vous êtes conscient de l’importance de créer un thème enfant pour votre site WordPress dès l’installation de votre thème, ne serait-ce que pour éviter d’avoir à faire des backups à l’arrache parce que vous avez perdu vos modifications CSS notamment.
Cela dit, vous n’avez peut-être pas envie de passer par le tutoriel que nous vous avons proposé sur ce site, à la mano. Il existe plusieurs plugins très configurables mais nous apprécions particulièrement Child Theme Configurator. Ce dernier est simple d’exploitation et à l’avantage de vous éviter de passer par le FTP ; un petit plus qui, nous en sommes sûrs, ravira plusieurs d’entre vous. Au besoin, voici la vidéo (en anglais) des éditeurs de l’extension :
Comment fonctionne Child Theme Configurator, cette extension gratuite ?
Tout d’abord, rendez-vous dans votre back-office de WordPress à la section « Extensions » ou « Plugin » en anglais, Cliquez sur « Ajouter des extensions » et dans la barre de recherche, tapez le mot « Child ». Vous constatez immédiatement que le plugin voulu et en bonne position et qu’il est particulièrement téléchargé :
Constatez également qu’il y a de nombreuses installations actives ; pas grâce à nous, on vous explique pourquoi ensuite. Installez et activez le plugin.
Retrouvez la configuration du plugin dans outils de WordPress
Pour commencer, rendez-vous sur « Outils -> Child Themes ». Un menu avec huit onglets vous y attend :
- Parent/child
- Query/selector
- Property/value
- Web Fonts
- Baseline Styles
- Child Styles
- Files
- Upgrade
L’onglet parent/child
C’est l’onglet qui vous permet de faire la première configuration. En Haut à droite, vous trouvez un module d’aide en vidéo mais également une aide contextualisée par onglet, dont le premier ici traité :
Select an action : Nous y voilà, pré-coché, vous pouvez simplement créer un nouveau thème enfant. Ce faisant, Child Theme configurator détecte automatiquement le thème actuellement sur votre WordPress (ici Twenty Seventeen). Cliquez sur Analyse si c’est le bon thème parent. La page se déroule pour vous proposer plusieurs options :
Partie 4 : L’analyse faite, le thème enfant apparaît ici comme valide. Le point 4 vous propose de donner un nom au dossier de votre thème enfant, pas de le nommer.
Partie 5 : En laissant sélectionné « Primary Stylesheet (style.css), vous aurez l’avantage de n’avoir qu’une seule feuille de style pour votre thème enfant. Par défaut, procédez en laissant coché ainsi.
Partie 6 : Laissez coché également la première option. L’affichage des CSS parent seront chargées par défaut si vous ne faites aucune modification. L’import @import n’a pas d’intérêt aujourd’hui sur les thèmes modernes et cela constitue une faille de sécurité: on fait son propre thème enfant auquel on intègre les modifications du premier thème. Vous avez également la possibilité d’ignorer les css du parent (option 3).
Partie 7 : Vous souhaitez customiser un peu le nouveau thème dans les apparences ? C’est ici :
Créez ainsi une version plus professionnelle de votre thème si vous l’exploitez pour un client.
Partie 8 : Nous vous invitons à cocher pour la première fois cette case afin de récupérer les éléments particuliers du thème parent comme les barres latérales et menus.
Partie 9 : Créez maintenant votre thème enfant en cliquant sur le bouton.
Voici votre nouveau thème créé que vous pouvez prévisualiser et activer ensuite dans Apparence -> Thème
Configurer l’envoi des fichiers nécessaires pour le thème enfant
Allons dans Apparence Editeur après avoir activé le thème enfant. Vous devriez trouver quelque chose ressemblant à ceci :
Le minimum requis, à savoir la feuille de styles apparaît à droite, ainsi que le fichier function.php de votre thème enfant. Le tour est joué mais vous souhaitez également envoyer d’autres modèles WP ? Voyons comment faire mais avant d’aller dans Outils – > Child Themes ; Pensez à activer de nouveau le thème parent dans les apparences -> Thèmes (ici Twenty Seventeen).
L’onglet Query/Selector, anticiper vos règles css
Cet onglet vous permet d’anticiper les règles de css que vous voudriez implanter à votre thème enfant. Le champ @media Query permet de sélectionner le type de média en fonction de la taille et ainsi de créer des règles css pour la partie responsive de votre site. Le Selector vous permet de cibler l’élément à modifier, en fonction de ce dernier, plusieurs options s’offriront à vous. En voulant modifier par exemple les balises h2 des écrans de moins de 800px, vous pourrez ainsi influer sur la couleur, la taille etc.
Le champ Raw CSS permet simplement d’injecter des règles de style dans votre thème enfant. Dans son ensemble, cet onglet est totalement facultatif, vous pouvez en effet influer sur la feuille de style à tout moment une fois votre thème enfant créé.
L’utilisation de l’onglet files pour envoyer des fichiers vers le thème enfant
Si vous êtes encore sur votre thème parent activé, allez sur l’onglet « Files » de Child Themes Configurator:
Mettons que nous ayons besoin de modifier la 404, le footer, les articles (single.php) ou les pages, sélectionnons donc les fichiers trouvés sur le thème parent pour les copier sur le thème enfant. Le plugin s’en charge à notre place sans pour autant avoir besoin de passer par les FTP.
Dans ce même onglet, notez la possibilité de changer le screenshot (l’image) qui apparaît dans les apparences et le choix des thèmes. Voilà pour les configurations de base du plugin! A moins que vous ne souhaitiez utiliser ici les propriétés qui seront évoquées prochainement, notez que vous pouvez voir dans l’onglet Child CSS l’apparence de votre fichier styles.css
Une fois installé, une fois tous vos fichiers créés et exportés, il apparaît inutile de le garder dans vos extensions actives. Découvrez le plugin.
Et vous, l’installation d’un thème enfant, vous procédez comment ?
