Pré-requis :
Accès à votre serveur FTP
Un éditeur de texte (NotePad étant le plus intuitif et… gratuit ! )
Pourquoi créer un thème enfant ?
Si vous avez téléchargé un thème WordPress premium, c’est pour une bonne raison : code propre, nombreuses fonctionnalités, ergonomie soignée, design de la mort-qui-tue, référencement… mais aussi accès au forum du développeur, mises à jour… Et oui, car un thème WordPress évolue comme son CMS : réparation de certains bugs de la première version, mise à jour suite au passage à une nouvelle version de WordPress, évolution de certains plugins inclus… Il est également fort à parier que vous aurez apporté des modifications substantielles à ce thème premium. Le maître-mot ici étant forcément personnalisation. Histoire de ne pas avoir exactement le même site que le voisin, d’y introduire votre patte, vos couleurs, votre logo ou une fonctionnalité…
Sauf qu’une fois que vous avez bien charcuté la base de votre thème, que vous avez bidouillé votre feuille de styles CSS, introduit un petit script piqué sur le net, et changé deux ou trois ligne de HTML, quand survient la mise à jour du thème source : que faire ? L’installer et tout perdre ? Ne pas faire la mise à jour et prendre le risque de se faire hacker ou de ne pas être au top de la mode ? En fait, ni l’une, ni l’autre. La solution, c’est le thème enfant ou Child Theme !
Le principe du Child Theme WordPress
Comme en génétique, l’enfant va reprendre toutes les caractéristiques de son parent. Le code du thème parent n’est jamais modifié. L’enfant va simplement hériter des gènes (fonctionnalités, design…) de son parent. Vous pourrez alors apporter toutes sortes de modifications à l’enfant, sans en changer le cœur. C’est la solution idéale pour modifier un design notamment : vous ne modifiez que la feuille de style sur l’enfant, conservant ainsi toute la structure – solide – du parent. Mais vous pouvez également modifier tous les autres fichiers. Le principe est simple : les fichiers du thème enfant viennent écraser ceux du thème parent. Exemple, si vous créez un fichier header.php dans votre dossier enfant, ce dernier viendra à la place du fichier du même nom dans le dossier parent. Tant qu’un fichier homonyme n’est pas créé dans le dossier enfant, c’est celui du parent qui s’applique. Facile non ?
Créer votre thème enfant
- Première étape : accéder au serveur FTP.
Connectez-vous sur votre serveur, et accéder au contenu du répertoire /wp-content/theme, dans lequel vous créez un nouveau dossier (clic droit CRÉER UN DOSSIER pour ceux qui comme moi utilisent Filezila) On l’appellera ici BAMBIN. Vous venez donc de créer un nouveau répertoire dont le chemin est .. /wp-content/theme/bambin
- Deuxième étape : créer une feuille de style dans ce répertoire bambin
Ouvrez Notepad et créez un document dans lequel vous insérez le code suivant :
/*
Theme Name: bambin
Theme URI: http: //votresite.com/
Description: Thème enfant du thème Le Parent
Author: Votre nom ici
Author URI: http: //votresite.com/apropos/
Template: leparent
Version: 0.1.0
*/
@import url(« ../leparent/style.css »);
Dans lequel vous remplacer leparent par le nom de votre thème source.
Nommez-le style.css et aller le charger dans le dossier bambin sur le FTP. Et c’est tout !
Apporter des modifications à son thème
Voici la technique que j’utilise pour modifier mes lignes de CSS : je vais copier les lignes de codes qui m’occupent depuis la feuille de style du parent, et je viens les copier dans ma feuille de style enfant (après @import…) Et ensuite je modifie les éléments souhaités.
Exemple :
.mfp-title
line-height: 18px;
color: #f3f3f3;
word-break: break-word;
padding-right: 36px; }
Et je modifie le code couleur en autre chose qui correspond à ma charte graphique.
Si vous utilisez le navigateur Chrome, vous pouvez aussi jouer sur vos styles CSS grâce à un clic droit INSPECTER L’ELEMENT et voir ainsi en direct vos modifications. Un petit copier-coller dans la feuille de style enfant une fois votre choix arrêté et votre thème est modifié.
Maintenant, c’est à vous de jouer !
Note 1 : pour accéder au code sur l’admin wordpress, il suffit d’aller dans l’onglet (à gauche) APPARENCES puis le sous-onglet EDITEUR.
note 2 : certains thèmes premiums fournissent déjà un thème enfant déjà tout prêt. Que demander de plus. Usez et abusez-en !
The post Créer un thème enfant sur son site wordpress appeared first on Graphiste et designer graphique freelance sur Grenoble.