Take a fresh look at your lifestyle.

Comment créer un thème enfant WordPress : un guide étape par étape

5

Un thème WordPress modifie le design de votre site Web. Lors de la création ou de la sélection d’un thème, vous avez le choix entre de nombreuses options. Par exemple, votre thème peut avoir une mise en page à une ou deux colonnes. Il peut spécifier quels appareils ou actions de l’utilisateur rendent le contenu visible. Il peut avoir une typographie personnalisée et des éléments de conception. Il peut afficher du contenu, y compris des images et des vidéos, où vous le souhaitez.

Mais les thèmes WordPress ne concernent pas seulement la mise en page et la typographie. Les meilleurs thèmes sont beaux et rendent votre contenu plus attrayant pour les visiteurs.

Pour vous assurer que vous concevez pour l’expérience utilisateur, vous devrez peut-être créer un thème enfant. Un thème enfant vous permet de modifier l’apparence de votre site WordPress sans modifier directement vos fichiers de thème.

Pour comprendre pourquoi cela est précieux, il est important de comprendre d’abord la relation entre les thèmes parent et enfant.

Qu’est-ce qu’un thème parent dans WordPress ?

Un thème parent est un thème complet. Cela signifie qu’il inclut les fichiers de modèle WordPress et les ressources nécessaires au fonctionnement du thème.

Les fichiers index.php et style.css (les principaux fichiers de modèle et de style, respectivement) sont les seuls fichiers de modèle requis. Cependant, la plupart des thèmes incluront également des fichiers PHP, des fichiers de localisation, des graphiques, du Javascript et/ou des fichiers texte.

Tous les thèmes sont considérés comme des thèmes parents, à l’exception des thèmes enfants. Examinons de plus près ce qu’est un thème enfant et les avantages qu’il offre aux propriétaires de sites WordPress ci-dessous.

Qu’est-ce qu’un thème enfant dans WordPress ?

Un thème enfant est un sous-thème qui hérite de l’apparence, de la convivialité et des fonctions du thème parent. Lorsque vous apportez des modifications au thème enfant, elles sont séparées des fichiers du thème parent.

Avantages de la création d’un thème enfant

Tout d’abord, et surtout, la création d’un thème enfant vous permet de mettre à jour le thème parent sans perdre vos personnalisations. Sans thème enfant, vous devrez modifier directement vos fichiers de thème et chaque fois que vous mettrez à jour le thème, vos personnalisations seront perdues. De ce fait, vous seriez face à un choix impossible : soit ne pas maintenir votre thème à jour, ce qui représente un énorme risque de sécurité, soit perdre vos personnalisations et le temps que vous avez investi à les créer.

Les deux autres avantages de la création et de la personnalisation d’un thème enfant sont liés au premier. Conserver ces modifications dans un dossier séparé de votre thème facilite leur réplication ou leur déplacement d’un site à l’autre.

Il vous permet également de commencer à vous familiariser avec le développement de thèmes et à vous y essayer dans un environnement à faible risque. Si vous commencez à personnaliser votre thème enfant et que quelque chose ne va pas ou si vous n’êtes pas satisfait, vous pouvez simplement désactiver le thème enfant. Cela restaurera le thème parent et votre site Web tels qu’ils étaient.

Cependant, créer un thème enfant n’est pas toujours la meilleure option. Si vous ajoutez principalement du CSS personnalisé, la création d’un thème enfant est idéale. Mais si vous apportez des personnalisations étendues aux fonctionnalités du thème, vous feriez mieux de créer un thème parent ou de sélectionner une option qui a un thème enfant existant que vous pouvez ensuite modifier immédiatement.

Maintenant que nous comprenons les avantages et les cas d’utilisation idéaux pour créer et personnaliser un thème enfant, passons en revue le processus ci-dessous.

Comment créer un thème enfant dans WordPress, étape par étape

Créer un thème enfant dans WordPress ne prend que quelques étapes. Ci-dessous, nous couvrirons chacun en profondeur afin que vous puissiez suivre. Cette démo utilisera le thème WordPress par défaut Twenty Twenty-One comme exemple.

Étape 1 : Créez un dossier de thème enfant.

Tout d’abord, vous souhaiterez créer un dossier dans lequel vous pourrez placer tous les fichiers de modèle et les actifs de votre thème enfant. Pour créer ce dossier, vous utiliserez Gestionnaire de fichiers dans le panneau de configuration de votre hébergeur WordPress.

Utilisateur cliquant sur le gestionnaire de fichiers dans cPanel du fournisseur d'hébergement WordPress

Une fois que vous avez ouvert le gestionnaire de fichiers, cliquez sur le dossier public_html. Cliquez ensuite sur le dossier wp-content.

Utilisateur naviguant vers le dossier wp-content dans cPanel d'un fournisseur d'hébergement WordPress

Recherchez le dossier intitulé « thèmes ». Puis clique +Dossier depuis la barre d’outils en haut de l’écran.

Création d'un dossier de thème enfant dans le cpanel d'un fournisseur d'hébergement WordPress

Nommez ce dossier en utilisant le nom du thème parent et ajoutez « -child » à la fin. Donc, si vous créez un thème enfant de Twenty Twenty-One, vous nommerez le dossier « twentytwentyone-child ».

Ce dossier sera le répertoire de votre thème enfant.

Étape 2 : Créez une feuille de style pour votre thème enfant.

Ensuite, vous devrez créer un fichier de feuille de style contenant toutes les règles et déclarations CSS de votre thème enfant. Pour ce faire, créez un nouveau fichier texte et nommez-le « style.css ».

Vous devrez ajouter un commentaire d’en-tête obligatoire tout en haut du fichier pour que la feuille de style fonctionne réellement. Ce commentaire contient des informations de base sur le thème enfant, y compris qu’il s’agit d’un thème enfant avec un thème parent particulier.

Vous n’avez vraiment besoin d’inclure que deux choses : le nom du thème et le modèle (c’est-à-dire le nom du thème parent). Vous pouvez inclure d’autres informations, notamment une description, le nom de l’auteur, la version et les balises. Ces détails supplémentaires sont importants si vous allez publier ou vendre votre thème enfant.

Voici un exemple de commentaire d’en-tête complet pour un thème enfant Twenty Twenty-One :

 
/* Theme Name: Twenty Twenty-One Theme URI: https://example.com/twenty-twenty-one-child/ Description: Twenty Twenty-One Child Theme Author: Anna Fitzgerald Author URI: https://example.com Template: twentytwentyone Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: two-column, responsive-layout Text Domain: twentytwentyonechild
*/

Remarquez les barres obliques et les astérisques. Cela signifie que ce code sera « commenté » dans CSS afin que WordPress n’essaie pas de l’exécuter.

Vous pouvez ajouter du CSS personnalisé plus tard lorsque vous êtes prêt à commencer à personnaliser votre thème enfant. Pour l’instant, cliquez sur Enregistrer pour que cette feuille de style soit enregistrée dans le répertoire de votre thème enfant.

Étape 3 : Mettez en file d’attente les feuilles de style des thèmes parent et enfant.

Il est maintenant temps de mettre en file d’attente les feuilles de style de vos thèmes parent et enfant. Cela garantira deux choses : premièrement, que le thème enfant hérite du style de son thème parent, de sorte que lorsque vous activez votre thème enfant, vous ne regardez pas seulement un tas de texte sans style.

Deuxièmement, que la feuille de style du thème enfant soit chargée avant celle du thème parent – sans la remplacer. De cette façon, une fois que vous avez ajouté du CSS personnalisé et modifié autrement votre thème enfant, ces modifications augmenteront ou remplaceront certains styles et fonctions du thème parent.

Pour cela, créez un autre fichier dans le répertoire de votre thème enfant. Nommez-le « functions.php » et ajoutez le code suivant :

 
<?phpadd_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );function enqueue_parent_styles() wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );?>

Étape 4 : Installez et activez votre thème enfant.

Vous installez un thème enfant de la même manière que vous installez n’importe quel thème. Vous avez deux options : vous pouvez copier le dossier sur le site via FTP, ou créer et télécharger un fichier zip du dossier du thème enfant.

Pour télécharger le fichier, rendez-vous sur votre tableau de bord WordPress et cliquez sur Apparence > Thèmes > Télécharger. Ensuite, choisissez le répertoire de votre thème enfant

Bouton Télécharger des thèmes dans le tableau de bord WordPress
Bouton Télécharger des thèmes dans le tableau de bord WordPress

Une fois téléchargé, cliquez sur Activer.

Bonne nouvelle : votre thème enfant est désormais en ligne ! Le seul problème est qu’il ressemble exactement à votre thème parent. Il est temps de personnaliser.

Étape 5 : Personnalisez votre thème enfant.

Pour personnaliser votre thème enfant, vous commencerez probablement par ajouter du CSS au fichier style.css dans le répertoire de votre thème enfant. C’est l’un des moyens les plus simples d’apporter des modifications à votre thème. Que vous souhaitiez personnaliser le jeu de couleurs, le rembourrage, la typographie ou d’autres éléments de conception fondamentaux du thème parent, ajoutez simplement du code à la feuille de style de votre thème enfant sous le commentaire d’en-tête. Ce code remplacera le code de la feuille de style de votre thème parent.

Pour modifier les fonctionnalités du thème parent, en revanche, vous devez ajouter des fonctions au fichier functions.php dans le répertoire de votre thème enfant.

Par exemple, si vous souhaitez autoriser les rédacteurs et les autres utilisateurs à formater leurs messages de différentes manières, vous pouvez utiliser la fonction add_theme_support(). Pour leur permettre de formater les publications sous forme de notes, de liens, d’une galerie d’images, de citations, d’une seule image ou d’une vidéo, vous devez ajouter ce qui suit à votre fichier functions.php dans le répertoire de votre thème enfant :

 
add_theme_support( 'post-formats', array ( 'aside', 'gallery', 'quote', 'image', 'video' ) );

Vous pouvez mettre autant ou aussi peu de fonctions que vous le souhaitez entre les balises PHP d’ouverture et de fermeture de votre fichier.

Achevé! Votre thème enfant est prêt à partir. Testez votre site dans un environnement de staging WordPress, puis mettez vos modifications en ligne.

Le thème enfant WordPress ne fonctionne pas

Votre thème enfant ne fonctionne pas ? Voici quelques éléments à vérifier.

1. Revérifiez votre fichier functions.php.

Assurez-vous d’avoir mis en file d’attente la feuille de style de votre thème enfant dans votre fichier functions.php. Si vous ne l’avez pas mis en file d’attente, votre thème enfant ne se chargera pas. Votre site restera sur le thème parent, donc tout ira bien ; le problème est que les modifications que vous apportez au thème enfant n’apparaîtront pas sur le front-end. Reportez-vous à l’étape 3 ci-dessus pour ajouter le code de mise en file d’attente à votre fichier PHP.

2. Assurez-vous d’avoir nommé la feuille « style.css ».

Vérifiez que vous avez bien nommé votre feuille CSS « ​​style.css », et non « stylesheet.css ». Étant donné que « style.css » est la convention de dénomination standard de WordPress, l’utilisation de ce nom de fichier permettra à votre fichier functions.php de savoir automatiquement qu’il s’agit de votre feuille de style. Si vous nommez votre feuille de style autrement, le fichier functions.php ne pourra pas la récupérer et la rendre à l’utilisateur final.

3. Videz votre cache.

Essayez de vider votre cache WordPress – votre navigateur peut vous montrer une ancienne version de votre site. Vous pouvez également ouvrir votre site Web dans une fenêtre de navigation privée pour consulter vos modifications publiées. Si vous avez installé un plugin de cache pour améliorer la vitesse de votre site Web, désactivez-le pendant que vous travaillez sur votre thème enfant.

4. Ajoutez !important à votre code CSS.

Si le thème parent écrase toujours le code CSS de votre thème enfant, ajoutez !important aux éléments que vous avez modifiés. Cela remplacera de force tout ce qui est écrit sur la feuille CSS du thème parent. Vous ajouteriez !important juste avant le point-virgule, comme ceci :

 p  background-color: gray !important; 

La règle !important peut être utilisée pour les identifiants, les classes CSS et les éléments HTML standard tels que les paragraphes, les tableaux, les en-têtes, etc.

Pour en savoir plus sur ce bien, consultez Comment utiliser la propriété !important en CSS.

5. Contactez le support de votre thème ou consultez le forum du thème.

Si vous avez suivi toutes ces étapes et que le CSS ne se charge toujours pas, il est temps de contacter l’équipe d’assistance de votre thème ou de consulter le forum du thème sur WordPress.org. Bien que cela devrait être votre dernier recours, cela a l’avantage de vous donner des réponses spécifiques à votre thème. Le développeur de votre thème WordPress peut avoir utilisé un code personnalisé ou implémenté un système de nommage différent pour les fichiers de thème.

Créez votre thème enfant WordPress

L’installation d’un thème WordPress est une excellente première étape dans la création d’un site Web WordPress. Pour le personnaliser, vous pouvez utiliser l’éditeur Gutenberg intégré ou votre générateur de thème (s’il en est fourni un). Mais pour aller encore plus loin et personnaliser non seulement son design mais aussi ses fonctionnalités, vous aurez envie de créer un thème enfant.

Note de l’éditeur : cet article a été initialement publié en octobre 2020 et a été mis à jour pour être complet.

Comments are closed.