Un petit tuto assez rapide, pour créer un thème enfant sur WordPress. Plus qu’un tutoriel, il s’agit surtout d’expliquer à quel point cela sera important pour la suite. Rien de très compliqué, et pourtant, ce tuto pourrait bien vous éviter pas mal de sueurs froides…
Un thème enfant, c’est quoi ?
Un thème-enfant, c’est simplement petit supplément au thème que vous utilisez (et qu’on appellera désormais « thème parent »). Le principe est simple : dès que vous allez modifier quelque chose sur votre site (style, fonctions etc.), on le fera sur les fichiers du thème enfant, plutôt que sur ceux du thème parent, ceci pour plusieurs raisons :
- Ça vous permet d’avoir une sauvegarde de votre thème (le thème parent)
- Ça évite de voir les changements sauter si votre thème doit être mis à jour
- Ça permet de se faire la main sur le CSS, le PHP et l’HTML
Je vous renvoie au codex de WordPress à ce sujet : Faire un thème enfant sur le codex de WP
Construire un thème enfant
Si vous utilisez un thème premium (un de ceux qu’on trouve chez envato ou template monster), dans la majorité des cas, l’éditeur du thème parent fournit un thème enfant prêt à l’emploi. Mais si vous souhaitez utiliser cette solution recommandée par tous les intégrateurs WP, il va falloir mettre les mains dans le code. Rassurez-vous, c’est simplissime.
D’abord, créez un répertoire nom-du-thème-parent-child dans wp-content/themes. Dans notre cas, ça sera twentyfifteen-child.
Dans ce répertoire, créez les fichiers suivants :
- style.css
- functions.php
Fichier style.css
C’est ici qu’on collera tout le style qu’on souhaite ajouter ou surcharger. Pour que le thème enfant soit reconnu comme tel, il faut ajouter un en tête commenté dans le fichier :
/* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child */
Attention de ne pas mettre d’espace avant les “: », sinon ça va merdouiller… Il ne vous reste plus qu’à adapter les données en fonction du thème que vous utilisez.
La ligne Template correspond au nom du thème parent, il faut donc la remplir bien consciencieusement…
Le fichier functions.php
Le fichier functions.php sert, de la même façon, à rajouter des fonctions personnalisées au thème. On reviendra dessus dans un autre tutoriel, car il y a ici beaucoup à dire. Pour l’instant, on va se contenter d’ajouter une fonction pour que la feuille de style du thème enfant soit ajoutée dans le head de la page, derrière la feuille de style du thème parent.
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );}
Pourquoi ce tuto ?
Dans les semaines à venir, je vais vous présenter le thème X, et son builder de page qu’on appelle Cornerstone. Ce thème vous fera économiser des dizaines d’heures de travail, et vous permettra de réaliser à peu près tout et n’importe quoi ! De tous les thèmes que j’ai testés, c’est celui qui est le plus complet, le plus agréable à travailler. Évidemment, il faudra mettre les mains dans le code pour optimiser tout ça, mais vous verrez que ça ne sera pas très compliqué. Et, bien entendu, on va surcharger le thème parent à gogo pour avoir un truc 100 % customisé et optimisé pour le référencement.
D’où la nécessité d’introduire les notions de thème enfant, de surcharge des fichiers de Templates, et de mise à jour des fonctions PHP. That’s all Folks ! 🙂
