Pourquoi Tu As Besoin D’un Thème Enfant Et Comment Créer Le Tien

Imagine cela : tu as trouvé le thème parfait pour ton blog WordPress. Enfin, presque parfait. Après avoir modifié la police du menu de Times New Roman à Open Sans et changé la couleur de fond de la barre latérale de vert à bleu vert de l’œuf de merle, il correspond exactement à ta vision. Jusqu’à deux semaines plus tard, lorsque le créateur du thème sort une nouvelle version avec une mise à jour de sécurité essentielle. Tu mets à jour ton thème seulement pour remarquer que — pouf ! — tes modifications personnalisées ont toutes disparu.

Heureusement, tu n’as pas à passer tes journées à réimplémenter tes modifications et à redouter les nouvelles mises à jour. Il existe une manière plus simple de personnaliser ton blog tout en conservant la plupart de l’aspect et de la sensation que tu aimes : tu peux créer un thème “enfant”, qui hérite de la fonctionnalité du thème “parent” tout en ajoutant ces modifications de style qui te sont propres. Même si tu mets à jour le thème parent, le thème enfant conserve tes modifications aussi longtemps que tu le souhaites.

Il suffit d’un seul fichier .css pour transformer un thème WordPress ordinaire en un thème enfant personnalisé, et cela nécessite moins de code que tu ne le penses. Voici un guide étape par étape pour créer un thème enfant à partir de n’importe quel thème WordPress ordinaire que tu as déjà en tête.

Note : Ceci est un tutoriel intermédiaire qui suppose que tu connais un peu le HTML et le CSS. Tu n’as pas besoin d’être un expert, mais nous allons modifier le code d’un thème. Si cela ne te semble pas encore confortable, tu pourrais consulter le tutoriel CSS gratuit de W3Schools ou t’inscrire au parcours web HTML/CSS gratuit de Codecademy.

1. Commencez Avec Un Thème Parent Et Planifiez Vos Modifications

Ceci est Twenty Sixteen, le thème que WordPress.org a créé et publié pour cette année. Si tu cherches un thème de base sur lequel apporter des modifications, envisage de consulter leurs sorties annuelles, comme Twenty Fifteen, Twenty Fourteen, et ainsi de suite.

J’aime bien dans l’ensemble, mais je veux apporter quelques modifications. Cette bordure noire est trop dure pour moi, et je préférerais qu’elle soit bleue. J’aimerais aussi changer la police.

Tout d’abord, j’ouvre les outils de développement Chrome en allant dans Afficher → Développeur → Outils de développement dans le menu du navigateur Chrome. (Si tu préfères Firefox, tu peux aller dans Outils → Développeur Web → Inspecteur dans le menu Firefox.)

Les outils de développement me permettent d’inspecter le thème et de voir d’où viennent les « règles ». En manipulant la bonne classe CSS, je peux déterminer ce que je devrai mettre dans mon thème enfant pour apporter mes modifications. Par exemple, tu peux voir qu’en modifiant la couleur d’arrière-plan en #0099ff, je peux changer la bordure de noir à bleu. Bien sûr, les outils de développement sont juste pour jouer temporairement, et quand je rafraîchis cette page, la bordure sera de nouveau noire.

2. Crée Ton Dossier De Thème Enfant Et Tes Fichiers

Il est important d’étiqueter ton thème enfant avec soin, en commençant par le nom du dossier dans lequel tu le places. De cette façon, WordPress sait comment l’identifier automatiquement. Ajouter « -child » à la fin du nom du thème original est la meilleure pratique. Donc, dans mon cas, puisque Twenty Sixteen est dans un dossier nommé « twentysixteen », je nomme mon dossier « twentysixteen-child ».

Le premier fichier que je dois créer est style.css, un fichier css qui inclut des informations pertinentes sur mon thème et le style personnalisé que je souhaite ajouter à son apparence.

/*
Nom du Thème : Twenty Sixteen Child
URI du Thème : http://example.com/twentysixteen-child/
Description : Mon premier thème enfant, basé sur Twenty Sixteen
Auteur : Lauren Orsini
URI de l'Auteur : http://lorsini.com
Template : twentysixteen
Version : 1.0.0
Tags : deux-colonnes, bleu, barre latérale droite
Domaine de Texte : twentysixteen-child
*/

Je commence par remplir les détails nécessaires. Seuls le « Nom du Thème » et « Template » sont requis. WordPress doit connaître le nom du thème, et il doit également savoir quel thème il doit considérer comme le thème parent de ce thème, dans ce cas, Twenty Sixteen. Le reste, tu peux le remplir avec tes informations personnalisées, ou laisser vide. En fait, cette structure est devenue standard pour les personnes intéressées à publier leurs thèmes sur WordPress.org. Si tu construis juste ton thème enfant pour un usage personnel, tout ce dont tu as besoin est le nom du thème, la description, l’auteur, le template, et la version.

Maintenant, je dois ajouter les styles que je souhaite modifier. Je veux changer la bordure noire en bleu, et je veux changer la police des en-têtes en Georgia. La police des en-têtes est affichée dans trois endroits dans le thème—le titre du site, le titre de l’entrée, et le titre du widget, donc je dois m’assurer d’inclure les trois classes CSS dans mon style afin d’affecter les trois emplacements.

Après avoir terminé cela, mon thème enfant est fonctionnel. Je pourrais l’installer à cette étape, mais il n’aurait que deux styles et le reste serait par défaut. Ce n’est pas ce que je veux ; je veux que le thème hérite des styles de Twenty Sixteen. Donc, j’ai besoin d’un second fichier, intitulé functions.php.

Copie-colle simplement le code suivant dans le fichier functions.php :

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

Ceci est une fonction qui va mettre en file d’attente les fichiers style.css parent et enfant. Mettre en file d’attente signifie ajouter à la liste des éléments similaires à traiter par le navigateur. Cette fonction assure que les deux ensembles de styles sont chargés dans le bon ordre sur l’écran du spectateur.

Une dernière étape facultative consiste à créer une image de 880×660 (type de fichier PNG recommandé) à partir d’une capture d’écran de ton thème enfant. Ainsi, si tu as beaucoup de thèmes installés, tu pourras voir à quoi ressemble celui-ci en un coup d’œil.

3. Télécharge Ton Thème Enfant Sur WordPress

Maintenant, j’ai un dossier, intitulé twentysixteen-child, qui contient deux fichiers — style.css et functions.php. Il est temps de compresser ce dossier en un fichier zip et de le télécharger sur mon site.

Navigue vers Apparence → Thèmes et sélectionne « Ajouter Nouveau », ce qui te permettra de télécharger un fichier zip. WordPress vérifiera d’abord que le thème parent est installé, et si c’est le cas, tu devrais pouvoir télécharger ton thème. Si le thème parent n’est pas trouvé, cela ne fonctionnera pas.

Maintenant, tu devrais pouvoir voir ton thème dans la liste des thèmes téléchargés. Voici à quoi ressemble le mien lorsque je clique dessus. Remarque que je n’ai pas ajouté d’image de prévisualisation à mon thème, mais cela a tout de même fonctionné. Mais vois-tu comment il inclut toutes les informations que j’ai ajoutées à l’étape 2 ?

Active ton thème, et si tout s’est bien passé, tu devrais pouvoir voir tes modifications en direct. Et voilà ! J’ai la nouvelle couleur de bordure et les polices d’en-tête que je voulais. Mieux encore, même si WordPress met à jour le thème Twenty Sixteen, mes modifications ne bougeront pas.

J’espère que ce tutoriel t’a aidé à voir à quel point il peut être facile et utile d’avoir un thème enfant sur ton blog WordPress. C’est une excellente manière de protéger ton thème pour l’avenir afin qu’il reste beau et personnalisé, peu importe ce qui arrive.