Le guide ultime des thèmes enfants WordPress

Avez-vous déjà trouvé un thème WordPress proche de la perfection pour votre site Web, mais avez-vous décidé de ne pas l'utiliser à cause d'un élément de conception minuscule et angoissant que vous ne pouviez pas ignorer ? C'est le style de police, la palette de couleurs ou le placement des éléments de conception, peut-être ?

Le marché des thèmes WordPress est saturé de tant de grands thèmes, gratuits et premium, mais à moins d'engager un développeur pour créer un thème sur mesure pour votre site, il y a peu de chances que vous en trouviez un qui soit parfait jusqu'au dernier pixel.

Les thèmes enfants WordPress permettent aux webmasters de modifier les fichiers d'un thème tout en gardant ses fonctionnalités de base en place sans risquer de perdre les modifications chaque fois que le thème est mis à jour. Ils vous donnent le pouvoir de modifier l'apparence d'un thème à partir de quelque chose d'aussi petit qu'un appel à l'action d'un bouton pour changer complètement chaque élément de conception.

Cet article couvrira tout ce que vous devez savoir sur les thèmes enfants, de ce qu'ils sont à pourquoi ils sont si importants. Nous terminerons par un didacticiel sur l'utilisation des thèmes enfants sur votre site WordPress - de la bonne manière.

Ça sonne bien ? Commençons!

Thèmes enfants WordPress : les bases

Les thèmes enfants sont des thèmes distincts qui héritent activement des fonctionnalités de leurs thèmes parents. La fonctionnalité d'un thème enfant remplace celle du thème parent, ce qui signifie que la fonctionnalité du thème enfant sera appliquée à votre site Web. Une fois que vous activez un thème enfant, WordPress vérifiera s'il a une fonctionnalité particulière. Cependant, si la fonctionnalité n'existe pas, elle examinera les fichiers du parent et ira avec celui qui y est codé.

En anglais simple, les thèmes enfants sont des fichiers de thème en double et chaque fois que vous ressentez le besoin de modifier des aspects de conception ou certaines fonctionnalités, vous le modifiez dans les fichiers du thème enfant. C'est une fonctionnalité intéressante car elle permet aux webmasters d'apporter des modifications au thème sans craindre de gâcher les fichiers d'origine.

De nos jours, la plupart des thèmes WordPress sont livrés avec des thèmes enfants (ou des variantes de leurs thèmes enfants) dès la sortie de la boîte.

Pourquoi devriez-vous utiliser des thèmes enfants ?

Apporter des modifications et des altérations à votre thème via des thèmes enfants est une pratique exemplaire largement acceptée (et recommandée). Pensez-y de cette façon : si vous vous trompez la première fois, vous pouvez toujours réessayer. Outre cet avantage important, les thèmes enfants sont importants pour la maintenance et le développement de votre site WordPress.

Éliminer le risque de perdre des modifications

Apporter des modifications à votre thème parent (les fichiers de thème d'origine) signifie que les modifications seront perdues lorsque vous mettrez à jour le thème. Cela vous laisse dans une sorte d'impasse; si vous mettez à jour le thème, vous perdez toutes les modifications, mais si vous ne mettez pas à jour le thème, vous aurez des bogues résidant sur votre site qui pourraient l'affecter négativement.

Vous pouvez copier-coller le code associé aux modifications dans votre thème parent une fois la mise à jour terminée. Bien que cela soit tout à fait possible, pourquoi passer du temps à localiser les modifications que vous avez apportées et les copier-coller dans les fichiers de thème mis à jour chaque fois que vous mettez à jour votre thème ? C'est un processus facile mais faillible.

C'est là que l'importance des thèmes enfants est d'abord réalisée. En utilisant des thèmes enfants, vous pouvez conserver toutes les modifications et mettre à jour en toute sécurité le thème de votre site.

Maintenir l'organisation du code

Un thème WordPress est généralement composé de quelques milliers de lignes de code et de plusieurs fichiers différents – HTML, CSS, PHP, JavaScript, etc. Et à cause de cela, toute légère modification apportée ici et là devient difficile à suivre. Lorsque viendra le temps de revenir en arrière et de modifier le thème ou de corriger des bogues imprévus, cela s'avérera assez coûteux (en temps et en budget).

Comme indiqué ci-dessus, les thèmes enfants sont activement hérités des thèmes parents. Toutes les modifications que vous apportez au thème enfant y restent (ce qui se passe dans les thèmes enfants reste dans les thèmes enfants !) et sont plus faciles à suivre car il n'aura que quelques centaines de lignes de code (dans les circonstances les plus agressives) par opposition à un quelques milliers.

Comme vous pouvez le constater maintenant, il n'y a aucun inconvénient à utiliser des thèmes enfants. En réalité, ils protègent votre site contre les bogues accidentels.

Comment créer un thème enfant dans WordPress

La plupart des thèmes sont livrés avec des thèmes enfants, mais si vous en trouvez un qui ne vous plaît pas, créer un thème enfant par vous-même n'est pas difficile. Je vais démontrer le didacticiel en créant un thème enfant pour notre thème Sparkling.

Étape 1 : Créez un répertoire pour le thème enfant dans votre installation WordPress.

1. Accédez au répertoire des thèmes de votre site WordPress ( /wp-content/themes ).
2. Créez un nouveau dossier et nommez-le mousseux-enfant . Il est recommandé de donner à votre thème enfant le même nom que le parent avec -child ajouté à la fin.

Nous allons ajouter tous les fichiers du thème enfant dans ce dossier. Cela dit, le seul fichier dont un thème enfant a besoin pour fonctionner correctement est le fichier style.css .

Étape 2 : Créez un fichier style.css pour votre nouveau thème enfant.

1. Accédez au répertoire du thème enfant créé à l'étape 1, c'est-à-dire /wp-content/themes/sparkling-child .
2. Créez un nouveau fichier .css dans le répertoire et nommez-le style.css .
3. Copiez et collez le code suivant dans le nouveau fichier style.css :

Dans le code ci-dessus, les lignes les plus importantes sont celles commençant par Theme Name , Template et @import . Vous devez remplir ces lignes correctement si vous créez un thème enfant pour un autre thème parent. La ligne @import garantit que vous n'avez pas à réécrire les règles CSS du thème parent à partir de zéro. Sans la ligne @import , le nouveau site n'aura que le contenu chargé dessus, pas de style.

Si votre thème parent a plusieurs feuilles de style, ignorez cette étape. Nous vous montrerons comment importer plusieurs feuilles de style à l'aide d'une fonction WordPress native dans les étapes suivantes.

Étape 3 : Créez le fichier functions.php (facultatif).

Le fichier functions.php permet aux développeurs Web d'ajouter des fonctionnalités à leurs sites Web WordPress en utilisant des fonctions WordPress natives et du code PHP.

1. Accédez au dossier de votre thème enfant, c'est-à-dire mousseux-enfant .
2. Créez un fichier .php et nommez-le functions.php .
3. Ajoutez le code suivant au fichier functions.php :

Il est important de noter qu'un thème enfant ne nécessite pas de fichier functions.php pour fonctionner. En fait, vous ne devez ajouter ce fichier que si vous avez l'intention de modifier les fonctionnalités du thème parent. Dans la plupart des cas, une feuille de style suffit mais si votre thème parent a plusieurs feuilles de style alors vous devrez créer un fichier functions.php .

Étape 4 : importez plusieurs feuilles de style (facultatif).

Si, par exemple, le thème parent que vous avez sélectionné contient plusieurs feuilles de style, les importer dans votre thème enfant @import ralentira votre site Web de quelques secondes, ce qui n'est pas bon. Vous ne voulez pas augmenter le temps de chargement des pages de votre site si cela peut être évité avec quelques lignes de code.

1. Accédez au répertoire de votre thème enfant et ouvrez le fichier functions.php dans un éditeur de texte.
2. Ajoutez les lignes de code suivantes au fichier functions.php sous la balise d'ouverture <?php :

La fonction wp_enqueue_style() utilisée dans le code ci-dessus importera plusieurs feuilles de style dans votre thème enfant sans ralentir votre site.

Remarque : Les meilleures pratiques de création de thèmes enfants suggèrent que vous devez toujours les importer à l'aide du code indiqué ci-dessus, quel que soit le nombre de feuilles de style de votre thème parent.

Étape 5 : Téléchargez le thème enfant.

Maintenant que vous avez créé avec succès le thème enfant, il est temps de le télécharger sur votre site WordPress et de l'activer.

1. Compressez le répertoire du thème enfant dans un fichier .zip .
2. Connectez-vous à votre panneau d'administration WordPress et accédez à Apparence > Thèmes .
3. Cliquez sur le bouton Ajouter nouveau sur l'écran suivant.

Vous pouvez également télécharger le thème enfant via votre client FTP en copiant-collant directement le fichier .zip dans le répertoire des thèmes. Si vous créez un thème enfant pour un autre thème, apportez les modifications nécessaires au code ci-dessus.

Ce didacticiel est uniquement destiné à montrer comment un thème enfant est créé. Nous avons créé un thème enfant pour Sparkling que vous pouvez télécharger directement si vous préférez ne pas perdre de temps à créer le vôtre.

Personnalisation de votre thème enfant

En supposant que tout se passe comme prévu, lorsque vous activez le thème enfant, votre site Web doit avoir le même aspect que lorsque le thème parent est activé. Mais attendez ! L'intérêt de créer un thème enfant n'est-il pas important pour rendre votre site Web différent ?

Dans cette section, nous allons vous montrer comment vous pouvez commencer à personnaliser le thème enfant pour apporter des modifications.

Application de styles personnalisés

Étant donné que le premier fichier (et le fichier obligatoire) que nous avons créé était , style.css , il est logique de commencer par ajouter des styles personnalisés au thème enfant qui l'utilise. En ajoutant du code CSS personnalisé à la feuille de style, vous pourrez remplacer la feuille de style du thème parent.

Avec CSS, vous pouvez modifier chaque aspect de conception et de style du thème activé, des couleurs et des boutons aux dimensions et aux styles de police. Les développeurs Web ayant un vrai talent pour CSS modifient toute la mise en page du thème enfant pour le rendre unique en son genre.

Tout ce que vous avez à faire est d'ajouter un code CSS personnalisé au bas du fichier style.css de votre thème enfant et vous êtes prêt à partir. Ceux d'entre vous qui ne souhaitent pas accéder au client FTP de leur site chaque fois qu'une simple modification doit être apportée peuvent accéder à l'éditeur par défaut de WordPress ( Apparence > Éditeur ) et ajouter du code CSS directement à partir de là. Accédez à Apparence> Éditeur et ajoutez du code CSS directement à partir de là.

Tout ce que vous avez à faire est d'ajouter un code CSS personnalisé au bas du fichier de votre thème enfant et vous êtes prêt à partir.

Techniques alternatives de modification de thème

L'ajout de code CSS au fichier style.css est le moyen le plus simple d'effectuer des modifications dans le thème enfant. Cependant, si vous voulez passer au niveau supérieur et peut-être ajouter de nouvelles fonctionnalités personnalisées au thème enfant, c'est là que les choses deviennent sérieuses. Il existe différents types de modifications que vous pouvez apporter (en plus de modifier les éléments de conception), telles que :

• Ajoutez de nouvelles fonctions au fichier functions.php . Nous avons déjà créé le fichier functions.php pour votre thème enfant, il ne vous reste donc plus qu'à y ajouter des fonctions personnalisées en fonction de la fonctionnalité que vous souhaitez obtenir. Vous pouvez coder en PHP ou utiliser les fonctions natives de WordPress.
• Modifier les fichiers de modèle. Si style.css et functions.php ne suffisent pas et que vous devez toujours modifier le thème, vous pouvez copier coller les fichiers de modèle à partir du thème parent et les modifier en conséquence.
• Ajoutez de nouveaux fichiers modèles. Si vous avez trouvé des modèles qui vous plaisent ailleurs (pas dans le répertoire du thème parent) ou si vous souhaitez créer vos propres modèles, vous pouvez les ajouter directement au thème enfant et partir de là.

Vous pouvez être assuré que votre site Web WordPress sera à l'abri des bogues nuisibles et involontaires, quelle que soit la ou les méthodes que vous adopterez pour apporter des modifications à votre thème activé. Si par hasard, quelque chose ne va pas avec le code, vous saurez exactement où l'erreur s'est produite et pourrez la corriger. (Astuce : c'est généralement dans les dernières lignes que vous avez ajoutées !)

L'une des meilleures choses à propos des thèmes enfants est qu'ils permettent aux utilisateurs de personnaliser entièrement le thème parent pour qu'il corresponde à la marque de leur site, ce qui est particulièrement utile pour les entreprises nouvelles et établies. Et si vous souhaitez re-concevoir complètement votre site ultérieurement sur la base du même thème parent ou d'un nouveau thème parent, vous pouvez toujours créer un nouveau thème enfant et partir de là !

Envelopper

Les thèmes enfants sont la méthode recommandée pour apporter des modifications à un thème WordPress. Ils évitent aux utilisateurs de commettre des erreurs potentiellement dangereuses dans leurs fichiers de thème d'origine et risquent de perdre les modifications à chaque mise à jour du thème.

Nous avons couvert tout ce que vous devez savoir sur les thèmes enfants dans WordPress, expliqué pourquoi ils sont si importants et vous avons expliqué en détail comment créer votre propre thème enfant à partir de zéro. Pour vous aider à commencer à apporter des modifications, nous avons conclu avec une brève section sur la façon dont vous pouvez commencer à personnaliser le thème enfant.

Êtes-vous d'accord pour que toutes les modifications de conception et de fonctionnalité soient effectuées via des thèmes enfants ? Avez-vous pu créer un thème enfant et l'activer avec succès sur votre site WordPress ? Nous aimerions connaître votre expérience, alors faites-le nous savoir en commentant ci-dessous!