Qu'est-ce qu'un thème enfant et comment en créer un dans WordPress ?

Introduction

Les thèmes WordPress enfants sont des thèmes qui fonctionnent avec un véritable thème WordPress (parent) et qui héritent de toutes ses fonctionnalités, propriétés et style. Les thèmes enfants WordPress sont la méthode principale de personnalisation des thèmes.

Le concept de thème parent-enfant a été développé par le thème central de WordPress afin de permettre aux utilisateurs de personnaliser leurs thèmes de manière efficace et sûre. Comme nous le savons tous, les thèmes WordPress sont régulièrement mis à jour. Lorsqu'un thème est mis à jour, toutes les modifications personnalisées effectuées précédemment sont écrasées. Jusqu'à présent, il n'était pas possible de mettre à jour un thème WordPress sans perdre ces modifications personnalisées. Les utilisateurs avaient deux possibilités : soit gaspiller leurs efforts et perdre leur travail, soit exposer leur site à un risque d'exploitation en raison des failles de sécurité du thème obsolète. Contrairement aux thèmes parents, les thèmes enfants permettent aux personnalisations d'être conservées séparément et sans être influencées par la mise à jour du thème parent.

Quand faut-il utiliser un thème enfant WordPress ?

Tout d'abord, il faut savoir que tous les thèmes WordPress ne sont pas développés selon le concept de thème parent-enfant. Les thèmes WordPress parents sont souvent appelés des frameworks de thèmes, qui contiennent leurs propres hooks et filtres. Vous devez choisir soigneusement le thème parent et vous assurer qu'il est facile à utiliser et qu'il fonctionne correctement lorsqu'il est configuré en tant que thème enfant.

Deuxièmement, vous devez déterminer l'objectif de la création d'un thème secondaire. Dans certaines situations, ce n'est pas la solution la plus efficace, en fonction de l'objectif que vous souhaitez atteindre.

Si vous utilisez un thème personnalisé conçu spécialement pour vous, il n'est pas nécessaire de créer un thème enfant, car il n'y a aucun risque de perdre vos modifications. Ne considérez pas cela comme une recommandation de ne pas utiliser de thème enfant, mais comme une option possible. Si vous ne souhaitez pas modifier directement vos fichiers de thème, vous pouvez opter pour un thème enfant si votre thème personnalisé autorise une telle configuration. En outre, la modification des fichiers de thème comporte toujours un certain risque, surtout si vous n'êtes pas un développeur expérimenté.

Si votre objectif est d'ajouter une fonctionnalité spécifique plutôt que de procéder à des ajustements liés à la conception, l'utilisation d'un plugin ou le codage d'un plugin pourrait être une approche plus appropriée. Dans un tel scénario, vous pouvez conserver la fonctionnalité si vous décidez un jour de passer du thème actuel à un autre. Toutefois, si la fonctionnalité est implémentée dans le thème enfant, elle sera perdue.

Comment fonctionne un thème enfant WordPress ?

Comme mentionné précédemment, le thème enfant hérite du design et des fonctionnalités du thème parent, mais comment cela fonctionne-t-il exactement ?

Le thème enfant contient des instructions spéciales qui indiquent à WordPress qu'il s'agit d'un thème enfant et quel est le vrai thème. Thème parent est de mise. WordPress utilise alors le code du thème parent et n'écrase que les parties nécessaires avec le code défini dans le thème enfant.

Chaque thème enfant doit disposer de deux fichiers nécessaires : un fichier de feuilles de style (style.css) et un fichier de fonctions (functions.php). Le fichier de feuille de style contient un texte commenté qui indique à WordPress qu'il s'agit d'un thème enfant et quel est le thème parent. Le fichier de fonction contient une fonction qui classe le fichier de feuille de style du thème parent, de sorte que la feuille de style du thème enfant soit chargée en premier. Il est également utilisé pour ajouter certaines fonctions en insérant le code nécessaire dans le fichier.

En fonction de ce que vous souhaitez réaliser, vous devrez peut-être créer des fichiers supplémentaires dans le thème enfant, par exemple des fichiers de modèle, des parties de modèle, des fichiers include, etc.

Le plus grand défi lorsque l'on travaille avec des thèmes enfants est probablement d'apprendre à les utiliser. Les frameworks robustes nécessitent un certain temps d'apprentissage, car chaque framework possède ses propres hooks et filtres.

Avant de vous lancer dans la création proprement dite d'un thème enfant, nous vous recommandons vivement de travailler sur un site de développement ou de staging. Heureusement, nous proposons ici, chez ORC Webhosting GmbH, un staging WordPress en un clic, ce qui vous permet de tout tester facilement avant de le transférer en direct sur votre site de production.

Création d'un thème enfant

Pour créer un thème enfant WordPress de base, vous devez créer les deux fichiers nécessaires mentionnés ci-dessus (fichier de feuille de style et fichier de fonction) dans un nouveau dossier indépendant.

Dans ce guide, un exemple est donné avec le thème standard de WordPress Twenty Twenty.

Créer un dossier pour un thème enfant

Il faut d'abord créer un nouveau dossier pour les fichiers du thème enfant. Ce dossier doit se trouver dans le répertoire des thèmes WordPress (wp-content/themes). Il est recommandé de nommer le dossier d'après le thème parent, suivi de "-child", par exemple "twentytwenty-child".

Vous pouvez créer un nouveau dossier avec le nom indiqué dans Gestionnaire de fichiers intégré cPanel ou avec votre client FTP préféré.

Création d'un fichier de feuille de style

Après avoir créé le nouveau dossier, vous devez y créer un fichier nommé style.css.

Ce fichier contient les règles CSS qui contrôlent l'apparence de votre thème. Vous devez insérer le commentaire d'en-tête suivant, qui contient des informations de base sur le thème et indique à WordPress qu'il s'agit d'un thème secondaire du thème parent défini.

/*
Nom du thème : Twenty Twenty Child
URI du thème : http://meinewebseite.ch
Description : Twenty Twenty Child Theme
Auteur : John Smith
Author URI : http://meinewebseite.ch
Modèle : twentytwenty
Version : 1.4
Licence : GPLv2 ou plus récente
License URI : http://www.gnu.org/licenses/gpl-2.0.html
Tags : blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
*/

Si vous placez le commentaire dans le fichier style.css assurez-vous de l'insérer tout en haut et de remplacer les détails par vos informations thématiques.

Voici les principaux détails auxquels il faut faire attention :

Nom du thème - Vous devez donner un nom unique au thème enfant.
Modèle - Vous devez indiquer le nom du répertoire de thèmes parent. Cette ligne n'existe que dans les thèmes subordonnés et ne fonctionnera pas correctement sans elle. Dans notre cas, le répertoire de thèmes est "twentytwenty". Si vous utilisez un autre thème, assurez-vous de remplacer cette ligne en conséquence. Vous pouvez le vérifier dans wp-content/themes.

Vous trouverez les autres détails dans votre Tableau de bord de l'administrateur WordPress > Affichage > Thèmes > Détails du thème.

Si vous modifiez les détails si nécessaire, assurez-vous d'enregistrer le fichier.

Créer un fichier de fonction

Pour que les styles du thème parent soient correctement intégrés, un nouveau fichier nommé functions.php doit être créé dans le répertoire du thème enfant. Dans le cas contraire, le thème enfant apparaît sans style et avec des erreurs.

La méthode idéale pour charger les feuilles de style enqueuteuses est que le thème parent charge les feuilles de style à la fois du thème parent et du thème enfant. Cependant, tous les thèmes WordPress ne le font pas. Il faut donc vérifier le code du thème parent pour savoir comment cela fonctionne et trouver le nom de handle utilisé par le thème parent. Le handle est le premier paramètre de la fonction wp_enqueue_style().

Si le thème parent charge le style avec une fonction commençant par get_template commence, le design enfant doit seulement charger les styles enfants via le handle de l'élément parent dans le paramètre de dépendance.

get('Version') // ceci ne fonctionne que si vous avez Version dans l'en-tête de style
    ) ;
}

Si le thème parent charge le style avec une fonction associée à get_stylesheet le thème enfant doit charger à la fois la feuille de style parent et la feuille de style enfant. Vous devez vous assurer que vous utilisez le même nom de poignée que celui utilisé par le thème parent pour les feuilles de style parentes.

parent()->get('Version')
    ) ;
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( $parenthandle ),
        $theme->get('Version') // ceci ne fonctionne que si vous avez Version dans l'en-tête de style
    ) ;
}

Si vous ajoutez le code correspondant dans le fichier functions.php n'oubliez pas d'enregistrer le fichier.

La création du thème enfant est ainsi terminée. Il ne reste plus qu'à l'activer.

Activer le thème enfant

La dernière étape consiste à activer le thème enfant. Pour ce faire, veuillez vous connecter à votre tableau de bord d'administration WordPress et naviguer via le menu de gauche vers Présentation > Thèmes.

Sur la page "Thèmes", vous trouverez votre nouveau thème subordonné parmi les autres Thèmes WordPress. Veuillez passer le curseur de la souris dessus et cliquer sur le bouton "Activer".

Une fois que vous avez fait cela, votre nouveau thème enfant fonctionnera.

Notez que vous ne constaterez aucune différence dans l'apparence et le comportement de votre site, car nous n'avons procédé à aucune adaptation stylistique ou fonctionnelle.

Vous pouvez maintenant commencer à faire toutes les adaptations souhaitées sans craindre de perdre votre travail lorsque le design sera mis à jour.

Toutes nos félicitations ! Dans ce guide, vous avez appris à créer des thèmes enfants WordPress et à appliquer en toute sécurité des modifications de conception et de fonctionnalité à votre site Web. Nous espérons que vous avez pu suivre nos instructions sans problème et obtenir le résultat souhaité.