Thème enfant WordPress
Qu’est ce qu’un thème enfant ?
Un thème enfant est un thème qui fonctionne en binôme avec un autre (appelé thème parent) dont il a hérité toutes les fonctionnalités et le style (comme dans la vraie vie ;-)) sans jamais le modifier.
Pourquoi l’utiliser ?
Les thèmes WordPress sont par nature modifiables quand on connaît un peu le code. Cependant, les modifications seront perdues lors des mises à jour de votre thème, il est donc essentiel d’utiliser un thème enfant à partir du moment où vous voulez commencer à modifier votre thème par le code…
Comment créer un thème enfant WordPress ?
Plusieurs moyens s’offrent à nous !
Le premier, peut-être le plus simple, il vient de wpmarmite qui génère les thèmes enfants automatiquement. Il vous suffit de renseigner l’URL de votre site et après vous le téléchargez !
Une fois le thème enfant WordPress téléchargé, il vous suffit de l’ajouter dans Apparence -> Thèmes.
Une autre manière plus technique
La création d’un thème enfant n’est pas fondamentalement compliquée en soi, mais il vous faut connaître un minimum ce dans quoi vous allez mettre les mains.
Avant de démarrer
Si on s’attarde un peu sur la structure de votre site et que vous allez jeter un coup d’oeil à votre FTP, vous savez que vos thèmes sont situés dans le répertoire suivant : /wp-content/themes/
Dans cet exemple, nous allons identifier le thème parent fictif positionné dans : /wp-content/themes/leparent/ et qui s’appelera “Le Parent”.
Ce thème contient tous les fichiers d’un thème “normal”, c’est à dire au minimum une feuille de style (style.css), les fichiers modèles (index.php, page.php, etc…), le fichier des fonctions (functions.php) et éventuellement d’autres fichiers comme des ressources (images, librairies, etc…).
Etape 1 – Créer le répertoire du thème enfant
La première étape pour créer votre thème enfant est de créer un répertoire pour celui-ci. Avec l’aide d’un client FTP, vous allez devoir créer un nouveau répertoire qui, dans notre cas, portera le nom : “monthemeenfant”.
Ce répertoire va devoir être créé ici : /wp-content/themes/monthemeenfant/
Une fois le répertoire créé, on passe à l’étape suivante.
Etape 2 – Créer une feuille de style “enfant”
La deuxième étape pour créer votre thème enfant est de générer une feuille de style qui va indiquer que ce nouveau thème est… justement un thème “enfant” de votre thème “parent”.
Voici le code à utiliser pour cette feuille de style :
Et voilà ! Vous venez de créer le fichier style.css de votre premier thème enfant. Qu’avons-nous fait exactement ?
- Theme Name : Le nom du thème que vous allez créer.
- Theme URI : L’adresse où l’on peut télécharger celui-ci si vous faites une release.
- Description : La description du thème.
- Author : L’auteur du thème… y mettre votre nom.
- Author URI : L’adresse où l’on va retrouver des infos sur l’auteur.
- Template : Le thème parent qui va être utilisé. Il faut y mettre le nom du répertoire de celui-ci.
- Version : Si vous tenez des numéros de version (c’est mieux), c’est par ici que cela se passe.
Note : Pour créer des fichiers sur votre serveur, vous pouvez soit :
- les créer sur votre ordinateur et les envoyer sur votre serveur à l’aide de votre client FTP
- les créer directement sur votre serveur à l’aide de votre client FTP puis les éditer avec un éditeur de code.
Etape 3 – Importer le style du thème parent
Une solution est recommandée, c’est un peu technique. Pour cela vous allez devoir créer un fichier « functions.php ».
À l’intérieur, entrez le code suivant :
<?php function wpm_enqueue_styles(){ wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ ); } add_action( ‘wp_enqueue_scripts’, ‘wpm_enqueue_styles’ );
Étudions ces lignes de code.
À première vue, nous pouvons voir qu’une fonction `wpm_enqueue_styles()`est déclarée et associée au hook action « wp_enqueue_scripts » (un hook est un moyen de modifier WordPress).
Pour vous en dire un peu plus, ce hook permet de dire à WordPress de charger des styles CSS ou scripts Javascript dans le thème.
Dans notre cas, il s’agit de charger le fichier « style.css » du thème parent.
En effet, charger ce fichier est indispensable sinon le thème enfant ne pourra pas reprendre les styles CSS du parent et donc s’afficher correctement.
L’avantage avec cette méthode est qu’il n’y a rien à modifier. Cela fonctionnera pour n’importe quel thème enfant (vous pouvez néanmoins changer le nom de la fonction « wpm_enqueue_styles() » si le coeur vous en dit).
Sauvegardez le tout pour finaliser la création de votre thème enfant.
Si vous activez maintenant ce nouveau thème, vous pourrez voir que rien ne change.
Bref, les réglages sont justes et l’appel du thème “parent” est fonctionnel.
Voici donc 2 manières pour créer un thème enfant. Si vous avez besoin d’aides, n’hésitez pas à me contacter !
