Créer un thème enfant WordPress

Partagez si vous aimez ->

Découvrez la procédure pas-à-pas pour créer un thème enfant WordPress.

Utiliser un thème « tout fait » est un gros gain de temps quand on créé son site web avec WordPress. Après des heures de recherche, vous avez enfin trouvé votre bonheur…mais il lui manque quelques détails pour vous satisfaire complètement.

Dans ce cas, pour modifier un thème wordpress existant, vous devriez créer un thème enfant.

Ce « sous-thème », relié au thème principal (le thème « parent »), ne contiendra que les modifications apportées par vos soins. Vous pouvez ainsi modifier le thème wordpress existant sans prendre le risque de perdre l’ensemble du thème en cas d’erreurs.

Comment créer un thème enfant WordPress ?

1/ Présentation des thèmes WordPress

Le thème que j’utilise actuellement est Twentyeleven. Vous le connaissez sûrement ; c’est le thème par défaut de WordPress. Quand on installe un site, on arrive en fait avec ce thème-là. Dans le back-office, voilà, je suis dans « Apparence », « Thèmes ». Vous voyez donc Twenty Eleven qui apparaît par défaut. Et je voudrais également vous montrer les dossiers pour que vous voyez où se situe le thème sur le serveur puisque c’est là que nous allons créer le thème enfant.

Sur la gauche, « techniquefacile » ça représente en fait mon site Web et à l’intérieur, il y a l’arborescence habituelle de WordPress. Si on regarde dans la partie du bas, vous avez bien le wp-admin, le wp-content, le wp-includes, et en dessous les fichiers qui sont propres au fonctionnement de WordPress.

Si on va dans wp-content, on a un dossier qui s’appelle « themes ». Nous avons un dossier par thème. Ici, Twenty Eleven et Twenty Ten.

2/ Création du thème enfant

Pour créer un thème enfant, je vais créer un nouveau dossier dans le dossier « themes ». Je fais un clic droit, « New folder », et je vais lui donner en fait le même nom que son parent, twentyeleven-child. C’est une convention de nommage qui est assez fort répandue. Aussi, vous pouvez choisir de l’appeler autrement ; ça n’a pas d’importance.

Dans ce dossier, je vais créer le premier fichier qui est le fichier style. Il faut savoir qu’un fichier style, le fichier style.css, c’est un document de type texte. Donc je vais l’appeler « style.css ». Ici, je lui dis oui. Alors le fichier de style.css, il est très important puisqu’en fait, c’est celui-là qui va dire à WordPress qu’il y a un nouveau thème qui existe. Vous pourriez mettre tous les fichiers que vous voulez dans un thème, tant qu’il n’y a pas style.css dedans, WordPress ne le reconnaîtra jamais comme étant un thème.

Et pour être tout à fait précis, il faut inscrire quelques lignes dans ce style.css pour qu’il soit tout à fait reconnu par WordPress. Alors, les lignes, quelles sont-elles ? C’est tout simplement un commentaire avec la première partie. Vous allez indiquer en fait le nom de votre thème. C’est un nom complètement libre. On va marquer par exemple « Thème enfant de Twenty Eleven ». La ligne pour laquelle il faut être très attentif, c’est la suivante : vous pouvez écrire « Template » et en face de Template, vous allez renseigner le nom du dossier du thème parent, donc exactement comme il se présente dans votre arborescence. Ici, « twentyeleven » en minuscules, tout attaché (Template : twentyeleven). Si on compare avec le dossier themes ici, on voit bien que mon thème parent, c’est bien Twenty Eleven en minuscules, tout attaché. Donc c’est ce nom-là qu’il faut que je renseigne en face de « Template » pour que WordPress fasse le lien entre le thème enfant et le thème parent.

Je vais tout de suite placer un peu de style dans ce fichier pour que quand nous activerons le thème enfant, nous puissions voir une différence à l’œil nu. Donc je vais tout simplement mettre * { color:red; }. Qu’est-ce que ça va faire ? Eh bien, * en fait, ça indique n’importe quel élément HTML et « color:red; », ça va dire au navigateur d’afficher la couleur de la police en rouge.

Je sauvegarde avec un « control + S » et nous allons aller dans le back-office pour activer le thème enfant.

3/ Activation du thème enfant

Vous voyez, dans les thèmes disponibles, il y a un nouveau thème qui est apparu qui s’appelle « Theme enfant de Twenty Eleven ». Et donc je vais l’activer. J’ai bien un message de succès en haut. Donc je vais aller voir sur le front et recharger (F5), pour voir si mon texte est bien apparu en rouge, si ça fonctionne comme nous le voulons.

Première chose que l’on voit : le texte est en effet en rouge. Par contre, on a un petit problème de mise en page. Elle ne récupère pas en fait la mise en page qui était déjà dans le parent.

4/ Pourquoi a-t-on perdu la mise en page (CSS) du thème parent ?

Tous les fichiers qui sont dans le thème enfant remplacent tous ceux du thème parent. Style.css qui est dans le thème enfant remplace le fichier style.css qui est dans le thème parent. Comment est-ce qu’on répare ça ? Bien, c’est très simple. On va se situer dans le style.css du thème enfant et on va importer les styles du parent. Vous allez voir : ce n’est qu’une petite ligne de code. Je me situe dans le style.css de l’enfant et je vais lui dire de faire un import et je lui donne l’URL du fichier à importer. Donc je sors de mon dossier avec le double point, je mets un slash pour dire que je vais rentrer dans un autre dossier, je rentre dans Twenty Eleven et je pointe vers style.css : @import url( »../twentyeleven/style.css ») ;

Cette ligne de code permet à mon thème enfant de récupérer le style de mon parent. Je sauvegarde avec Ctrl + S. Et nous allons le voir tout de suite en front ici si ça fonctionne. Nous avons bien notre style du thème parent qui a été importé et par contre, je surcharge bien la couleur de la police avec mon « *{color=red;} ». Donc j’ai bien un mix entre les fichiers du thème parent et les fichiers du thème enfant exactement comme je voulais l’avoir.

Si vous avez un thème parent qui utilise plusieurs feuilles de style, n’oubliez pas de toutes les importer.

5/ Comment travailler avec un thème enfant ?

Pour toutes les modifications CSS, vous allez venir dans style.css faire vos modifications. Pour tous les changements de fichiers, c’est-à-dire les templates PHP, vous allez copiez le template du thème parent dans l’enfant

Par exemple, si je voulais surcharger le fichier sidebar.php… Où est-ce qu’il est ? Donc le fichier sidebar.php sert à afficher la sidebar de votre blog. Si je voulais la modifier, je n’aurais qu’à copier dans le parent ce fichier-là, le coller dans mon thème enfant et puis ensuite l’éditer, faire les modifications que je veux, sauvegarder, alors automatiquement c’est cette version de ce fichier qui sera utilisée.

Et enfin, le troisième type de changement qu’on peut faire, c’est les ajouts de nouvelles fonctionnalités dans le fichier functions.php et là, bien, c’est encore plus simple puisque le fichier functions.php du thème enfant, c’est un petit peu l’exception qui confirme la règle. Au lieu d’écraser celui du thème parent, il va venir le compléter.

Donc si je veux utiliser un fichier functions.php, j’ai juste besoin de créer un nouveau fichier, de l’appeler « functions » — n’oubliez pas, il y a un « u » et il y un « s » à la fin —. php et dans ce fichier-là, je vais pouvoir faire toutes mes modifications, ajout de sidebar, ajouts de menu, ajouts de favicon, etc., etc. Il y a énormément de fonctionnalités que l’on peut ajouter grâce au fichier functions.php.

 

Partagez si vous aimez ->

Youcef

Concepteur de Sites Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Mon objectif est de vous aider à trouver la solution idéale pour créer votre propre Site Internet.

Vous aimerez aussi...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Simple Share Buttons