Le guide ultime des thèmes pour enfants WordPress

Avez-vous déjà trouvé un thème WordPress presque parfait 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, à la fois gratuits et premium, mais à moins d'embaucher 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 conservant ses fonctionnalités de base sans risquer de perdre les modifications à chaque mise à jour du thème. Ils vous donnent le pouvoir de modifier l'apparence d'un thème, de quelque chose d'aussi petit qu'un appel à l'action sur un bouton à changer complètement chaque élément de conception.

Dans cet article, nous couvrirons tout ce que vous devez savoir sur les thèmes pour enfants, de ce qu'ils sont à pourquoi ils sont si importants. Nous terminerons avec un tutoriel sur la façon d'utiliser les thèmes enfants sur votre propre site WordPress – de la bonne manière.

Ça sonne bien ? Commençons!

Thèmes WordPress pour enfants : les bases

Les thèmes enfants sont des thèmes distincts qui héritent activement des fonctionnalités de leurs thèmes parents. Une fois que vous avez activé un thème enfant, WordPress vérifiera s'il contient une fonctionnalité particulière codée. 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. 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 les 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 leurs 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 modifications à votre thème via des thèmes enfants est une bonne pratique 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. Mis à part cet avantage important, les thèmes enfants ont une grande importance pour la maintenance et le développement de votre site WordPress.

Éliminez le risque de perdre les modifications

Apporter des modifications à votre thème parent (les fichiers de thème d'origine) signifie que lorsque vous mettez à jour le thème, les modifications seront perdues. Cela vous laisse en quelque sorte dans une 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.

On peut soutenir que vous pouvez simplement 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 le moment sera venu 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 (à la fois en termes de temps et de budget).

Comme nous l'avons vu ci-dessus, les thèmes enfants sont activement hérités de leurs thèmes parents. Toutes les modifications que vous apportez au thème enfant restent là (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) quelques milliers.

Comme vous pouvez probablement le constater maintenant, il n'y a aucun inconvénient à utiliser des thèmes enfants. En réalité, ils protègent votre site des 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 convient pas, créer vous-même un thème enfant n'est pas difficile. Je vais faire la démonstration du 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 . C'est une bonne pratique de donner à votre thème enfant le même nom que le parent avec -child ajouté à la fin.

Nous ajouterons tous les fichiers du thème enfant à 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 /wp-content/themes/sparkling-child 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 :

https://gist.github.com/rafaysansari/59ab402cffc540d050ed

Dans le code donné ci-dessus, les lignes les plus importantes sont celles commençant par Theme Name , Template et @import . Il est très important que vous remplissiez correctement ces lignes 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é, pas de style.

Si votre thème parent a plusieurs feuilles de style, ignorez cette étape. Nous allons vous montrer 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 Sparkling-child .
2. Créez un fichier .php et nommez-le functions.php .
3. Ajoutez le code suivant au fichier functions.php :

https://gist.github.com/rafaysansari/6c3cc1606823d56388f4

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é est livré avec plusieurs feuilles de style, les importer dans votre thème enfant à l'aide de @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 <?php ouverture <?php :

https://gist.github.com/rafaysansari/9535343506d670226f4e

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 pour créer des thèmes enfants suggèrent que, quel que soit le nombre de feuilles de style de votre thème parent, vous devez toujours les importer à l'aide du code donné ci-dessus.

É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.

   

4. Cliquez sur le bouton Télécharger le thème pour continuer.

   

5. Recherchez le fichier .zip de votre thème enfant et téléchargez-le.
6. Une fois le thème enfant téléchargé, cliquez sur Activer .

Vous pouvez également télécharger le thème enfant via votre client FTP en copiant directement le fichier .zip dans le répertoire des thèmes. Si vous créez un thème enfant pour un autre thème, assurez-vous d'apporter les modifications nécessaires au code indiqué 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 passer du temps à créer le vôtre.

Personnaliser le thème de votre enfant

En supposant que tout se soit déroulé comme prévu, lorsque vous activez le thème enfant, votre site Web doit avoir exactement le même aspect que lorsque le thème parent est activé. Mais accrochez-vous ! L'intérêt de créer un thème enfant n'est-il pas de 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 à peu près tous les aspects 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 avec 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 du 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 ( Appearance > Editor ) et ajouter du code CSS directement à partir de là.

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 faire passer les choses au niveau supérieur et peut-être ajouter de nouvelles fonctionnalités personnalisées au thème enfant, alors c'est là que les choses deviennent sérieuses. Il existe différents types de modifications que vous pouvez apporter (en plus de changer les éléments de conception) tels 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 des fonctions WordPress natives.
• Modifiez les fichiers modèles. Si style.css et functions.php ne suffisent pas et que vous devez toujours modifier le thème, vous pouvez copier-coller les fichiers modèles du thème parent et les modifier en conséquence.
• Ajoutez de nouveaux fichiers de modèle. Si vous avez trouvé des modèles que vous aimez 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 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 avec le code ne va pas, vous saurez exactement où l'erreur s'est produite et serez en mesure de la corriger. (Indice : 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 plus tard 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 présenté un didacticiel détaillé sur la façon de 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!