Si vous souhaitez réaliser votre premier site avec WordPress, il existe une fonctionnalité particulièrement intéressante pour les débutants et pour les autres : le thème enfant. Le principe du thème enfant est aussi simple que puissant puisqu’il permet de créer son propre thème (le template du site) à partir d’un thème existant.
L’objectif est donc de réaliser son propre environnement graphique et technique tout en s’appuyant sur un squelette solide. L’avantage de cette approche est qu’elle permet d’obtenir très vite un résultat tout en autorisant un grand nombre de modifications. Qu’il est possible de faire à son rythme, en fonction de ses connaissances et de ses besoins qui sont amenés à évoluer.
Avant de vous montrer la procédure de création d’un thème enfant il est utile de faire un petit rappel sur la définition et le principe de fonctionnement d’un thème WordPress et d’un site WordPress en général.
WordPress est un CMS – un outil de gestion de contenu – et son principal intérêt comme celui de tous autres CMS est de vous proposer gratuitement un outil de publication de contenu robuste. En clair, un back-office vous permettant de saisir des contenus grâce à votre navigateur et un éditeur « WYSIWYG ». Nativement – c’est à dire hors développement spécifique ou recours à une extension – WordPress permet de saisir (et stocker) différents types de contenu : notamment des articles, des pages, des commentaires, des médias et des menus. Ce qui convient à la plupart des usages. Pour ce qui est de l’organisation des contenus eux-mêmes vous avez là aussi plusieurs options : ranger les articles dans des catégories ou des étiquettes, appliquer une hiérarchie à vos pages ou encore disposer vos différents contenus à l’intérieur d’un ou plusieurs menus. Toutes ces opérations sont réalisées dans le back-office par un ou plusieurs utilisateurs connectés ( via l’url /wp-admin/ ) mais ne déterminent pas ou peu le design de votre site. Car l’apparence de votre site web et la manière dont les contenus sont proposés aux visiteurs sont entièrement de la responsabilité du thème. Dans les faits, certaines extensions ou plugins peuvent être amenées à modifier l’apparence de votre site mais cela est rendu possible grâce … au thème.
Ce qui nous ramène au coeur du sujet et à la création de notre premier thème enfant. Avec l’appui du thème principal, il sera en charge de gérer l’apparence de votre site WordPress. Pour fonctionner, votre thème enfant n’aura besoin que de deux fichiers (au moins) : style.css et functions.php.
Le système de « thème enfant » fonctionnant uniquement sur des conventions de nommage, il faudra donc impérativement respecter cette arborescence.
Bon à savoir.
Lorsque vous téléchargez puis « dézippez » WordPress il vous faudra repérer le dossier wp-content. C’est dans ce dossier et uniquement celui-là que vous allez travailler. Le reste des fichiers constituant le « coeur » du CMS. Dans ce dossier wp-content on retrouvera les plugins, les « uploads » (fichier média) et aussi les thèmes (wp-content/themes). Notamment le thème par défaut « Twenty Seventeen » visible dans le dossier twentyseventeen.
Avant toute chose, un thème WordPress est simplement un dossier, placé dans le dossier wp-content/themes/.
Il est désormais temps de créer son premier thème enfant en créant un dossier vide nommé « mytheme » (choix du nom arbitraire) dans le dossier wp-content/themes/ et d’y placer à l’intérieur deux fichiers vides : style.css et functions.php. Ce qui donne l’arborescence finale suivante :
- wp-content/themes/mytheme/style.css
- wp-content/themes/mytheme/functions.php
Ensuite, à l’aide d’un éditeur de texte il vous faudra simplement appliquer les deux conventions qui s’imposent à ce stade en suivant scrupuleusement la documentation officielle. Dans le fichier style.css les quelques lignes suivantes suffiront :
/* Theme Name: My Theme Template: twentyseventeen Version: 1.0.0 */
Et pour le fichiers functions.php ces quelques lignes vous permettront de finaliser la mise en place de votre thème enfant :
<?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' ); } ?>
Après avoir sauvegardé les deux fichiers, votre nouveau (et premier) thème est désormais disponible dans le back-office (Apparence > Thèmes ) et peut-être activé, magique !
Concrètement, la feuille de style créée ci-dessus comporte les indications nécessaires à rendre notre thème « lisible » (déclaration du Theme Name sur la première ligne ) et déclare de manière explicite le thème « parent » (ligne 2 Template, dont la valeur correspond au nom du dossier du thème à étendre). Puisque notre feuille de style est vide à ce stade, nous nous servons du fichier functions.php pour charger la feuille de style du thème parent. A ce stade, le site n’a pas changé d’apparence. Mais il charge désormais un fichier supplémentaire à l’affichage : votre propre feuille de style. Et exécute tout le PHP contenu dans votre fichier functions.php.
Et après ?
Une fois que votre thème enfant est activé vous avez désormais tout le loisir de modifier l’apparence de votre site en ajoutant vos propres déclarations CSS dans votre feuille de style. Mais également apporter des modifications plus importantes au comportement de WordPress via le fichiers functions.php ce qui fera l’objet d’un prochain article. Et ce n’est pas tout, sachez que vous pouvez copier n’importe quel fichier du thème parent dans votre thème enfant pour le remplacer. WordPress chargera en effet en priorité le fichier de votre propre thème si il porte le même nom que celui présent dans le thème de base. Pour bien comprendre ce fonctionnement, la « template hierarchy » est un bon début pour en savoir plus 🙂
En attendant vous avez évidemment la possibilité d’étendre un thème un peu plus fun que le thème par défaut de WordPress, la procédure fonctionnant parfaitement avec tous les thèmes.
De nombreux thèmes gratuits sont disponibles directement depuis le back-office de WordPress. Pour des thèmes « premium » (comprendre payant …) je vous invite à découvrir sélection de thèmes WordPress.
Chose importante, la création d’un thème enfant vous permet de mettre à jour le thème principal de votre site sans perdre vos modifications. C’est pour cela qu’il est indispensable de passer par cette procédure si vous souhaiter mettre en place un site WordPress sans code entièrement votre propre thème. Par ailleurs, si vous voulez faire le plein de bonne pratiques dans la création de thèmes WordPress je vous invite à découvrir le projet « underscores » ici : https://underscores.me/
Et enfin si vous avez l’âme d’un ecommerçant, le thème StoreFront est fait pour vous : https://woocommerce.com/storefront/