Comment créer et personnaliser un thème enfant

Si vous souhaitez apporter des modifications au thème de votre site WordPress, vous avez probablement vu des gens vous dire d'utiliser un thème enfant WordPress.

Mais qu'est-ce qu'un thème enfant et pourquoi les thèmes enfants sont-ils si importants ?

Dans cet article, nous vous donnerons les réponses à ces questions avec une introduction aux thèmes enfants et à leurs avantages.

Ensuite, nous vous montrerons étape par étape comment créer et personnaliser votre propre thème enfant à l'aide de plugins ou de code.

Creusons.

Un thème enfant WordPress n'est pas un thème autonome. C'est un « enfant » d'un thème parent existant, d'où le nom.

Vous l'installerez à côté de votre thème parent, mais cela vous donnera la possibilité d'apporter des modifications en toute sécurité à votre thème parent sans avoir à modifier le thème parent lui-même.

Le thème enfant tirera la plupart/tous ses paramètres de conception du thème parent. Cependant, dans les situations où vous apportez une modification au thème enfant, cette modification remplacera les paramètres du thème parent.

À ce stade, vous vous demandez peut-être pourquoi vous ne pouvez pas simplement apporter vos modifications directement au thème parent ?

La principale raison pour laquelle ce n'est pas une bonne idée est la mise à jour des thèmes .

Si vous souhaitez que votre site WordPress reste sécurisé et fonctionne correctement, vous devez appliquer rapidement les mises à jour au fur et à mesure de leur sortie, y compris les mises à jour de votre thème.

Si vous personnalisez votre site en modifiant directement votre thème (sans thème enfant), cela signifie que vous écraserez toutes vos modifications à chaque mise à jour du thème.

Cela signifie que vous :

• Mettez à jour votre thème et perdez votre travail. Pas une expérience très amusante, non?
• Ne mettez pas à jour votre thème pour ne pas perdre votre travail… ce qui n'est pas bon pour la sécurité et le fonctionnement de votre site.

Avec un thème enfant WordPress, vous pouvez effectuer toutes vos modifications dans le thème enfant. Ensuite, vous pourrez mettre à jour le thème parent sans rien perdre de votre travail.

Au-delà de vous aider à mettre à jour en toute sécurité, l'utilisation d'un thème enfant est également généralement pratique pour effectuer des personnalisations. Parce qu'il sépare toutes vos modifications en un seul endroit, il est facile de suivre toutes vos modifications et de les ajuster au besoin.

Cela permet également de faire marche arrière facilement. Par exemple, si vous souhaitez arrêter d'utiliser vos modifications et revenir au thème parent « vanille », il vous suffit de désactiver votre thème enfant.

Certains thèmes WordPress prêts à l'emploi utilisent même cette approche parent/enfant par défaut. Par exemple, si vous souhaitez utiliser Genesis Framework, vous aurez besoin à la fois du thème parent (le framework de base) et d'un thème enfant pour contrôler la conception.

À part quelques exceptions que nous énumérerons ci-dessous, vous devez toujours utiliser un thème enfant si vous prévoyez d'apporter vos propres modifications à un thème WordPress existant.

En général, l'utilisation d'un thème enfant est une bonne pratique lorsque vous personnalisez votre thème WordPress.

Cependant, il existe quelques exceptions à la règle où il pourrait y avoir une meilleure option que d'utiliser un thème enfant.

Tout d'abord, si vous voulez juste apporter quelques modifications CSS mineures, il peut être exagéré de créer un thème enfant juste pour quelques ajustements.

Au lieu de cela, vous pouvez ajouter votre CSS personnalisé à l'aide de la fonction CSS supplémentaire intégrée dans WordPress Customizer. Ou, vous pouvez utiliser un plugin gratuit tel que le plugin Simple CSS de Tom Usborne.

Deuxièmement, si vous apportez des modifications que vous souhaitez rendre indépendantes du thème, un thème enfant n'est peut-être pas la meilleure option.

Par exemple, si vous enregistrez une taxonomie personnalisée ou un type de publication personnalisé, vous ne voudrez probablement pas utiliser le fichier functions.php de votre thème enfant (car vous voudriez les conserver même si vous changez de thème). Au lieu de cela, vous devez simplement ajouter le code en dehors de votre thème entièrement avec un plugin tel que Code Snippets ou votre propre plugin personnalisé.

1. Utilisez un plugin gratuit de générateur de thème enfant WordPress.
2. Créez manuellement votre propre thème enfant.

Un plugin générateur de thème enfant vous permet de créer un thème enfant sans quitter votre tableau de bord WordPress.

L'option la plus populaire ici est le plugin gratuit Child Theme Configurator, qui est actif sur plus de 300 000 sites.

Le configurateur de thème enfant vous aide non seulement à créer les fichiers de thème enfant de base, mais il analysera également le thème que vous utilisez et mettra en file d'attente les feuilles de style de thème et de police si nécessaire.

Il comprend également d'autres fonctionnalités utiles si vous essayez de créer un thème enfant sur un site où vous avez déjà ajouté du contenu. Par exemple, il peut copier vos widgets et options de personnalisation existants dans le thème enfant.

Cependant, si vous prévoyez d'utiliser le plug - in sur un site Web en direct, nous vous recommandons d'effectuer une sauvegarde complète avant de continuer. Ou, idéalement, installez le tout sur un site de mise en scène.

Une fois que votre sauvegarde est prête, commencez par installer et activer le plugin gratuit Child Theme Configurator de WordPress.org. Ensuite, allez dans Outils → Thèmes enfants pour créer votre thème enfant.

Dans la liste déroulante Sélectionner un thème parent , sélectionnez le thème pour lequel vous souhaitez créer votre thème enfant. Ensuite, cliquez sur Analyser :

Le plugin analysera ensuite votre thème parent pour toutes les dépendances.

Une fois cela fait, vous verrez quelques options supplémentaires pour configurer comment créer votre thème enfant. Si vous n'êtes pas sûr de la signification d'un paramètre spécifique, vous pouvez simplement le laisser par défaut :

Une fois que vous avez terminé vos choix, cliquez sur le bouton en bas pour créer un nouveau thème enfant .

Et c'est tout! Le plugin créera ensuite le thème enfant pour vous. Cependant, il n'activera pas le thème enfant.

Pour l'activer :

• Allez dans Apparence → Thèmes.
• Prévisualisez à quoi ressemble votre site avec votre thème enfant (pour vous assurer qu'il fonctionne - si votre site semble étrange, c'est probablement à cause d'un problème CSS).
• Activez votre thème enfant comme vous le feriez pour tout autre thème WordPress. Assurez-vous de laisser votre thème parent installé, cependant.

Une fois que vous avez activé votre thème enfant, le plugin Child Theme Configurator inclut également d'autres outils utiles pour vous aider à gérer votre thème enfant. Par exemple, si vous accédez à l'onglet Fichiers des paramètres du plug-in, vous pouvez afficher tous les fichiers associés à la fois dans votre thème parent et dans votre thème enfant.

Ensuite, vous pouvez copier des fichiers du thème parent vers le thème enfant.

Par exemple, si vous souhaitez apporter des modifications à single.php , vous pouvez copier ce fichier dans votre thème enfant afin de pouvoir le modifier en toute sécurité :

Vous trouverez également de nombreux autres outils pour vous aider à travailler avec CSS.

Nous verrons pourquoi ces outils sont utiles plus tard.

Pour cette section, nous supposerons que vous connaissez un peu PHP et CSS. Si vous vous sentez dépassé par les instructions ici, nous vous recommandons de vous en tenir au plugin gratuit de la section précédente.

Pour créer manuellement un thème enfant, vous devez créer deux fichiers (c'est le strict minimum pour un thème enfant) :

• style.css - au début, tout ce que vous devez ajouter est un code passe-partout.

• functions.php - cela vous permet de mettre en file d'attente la feuille de style du thème parent. Sans cela, votre thème enfant ne pourrait pas appliquer le CSS de votre thème parent, ce qui rendrait votre site super moche !

Tout d'abord, créez un fichier nommé style.css et ajoutez le code suivant :

/*

Nom du thème : Bonjour Elementor Child

URI du thème : https://github.com/elementor/hello-theme/

Description: Hello Elementor Child est un thème enfant de Hello Elementor, créé par l'équipe Elementor

Auteur : Elementor Team

URI de l'auteur : https://elementor.com/

Modèle : hello-elementor

Version : 1.0.1

Domaine du texte : hello-elementor-child

Licence : Licence publique générale GNU v3 ou ultérieure.

URI de la licence : https://www.gnu.org/licenses/gpl-3.0.html

*/

Assurez-vous de remplacer tout ce qui vient après les deux points par vos informations réelles :

• Nom du thème – le nom de votre thème enfant.

• URI du thème – le site Web de votre thème et sa documentation.

• Description – une brève description du thème.

• Auteur – le nom de l'auteur du thème.

• URI de l'auteur : – le site Web de l'auteur du thème.

• Modèle – le nom du dossier de votre thème parent (tel qu'il est nommé dans votre dossier wp-content/themes). C'est la ligne la plus importante car votre thème enfant ne fonctionnera pas sans cela.

• Version – le numéro de version de votre thème enfant.

• Domaine de texte – utilisé pour l'internationalisation. Vous pouvez simplement ajouter "-child" à la fin du nom du modèle.

• Licence - laissez cette valeur par défaut.

• URI de licence - laissez-le par défaut.

À l'exception de la ligne Template , ce que vous entrez n'est pas vraiment important, alors ne stressez pas trop. Assurez-vous simplement d'entrer correctement le nom du dossier de votre thème parent pour le modèle .

Si vous souhaitez ajouter vos propres styles personnalisés à l'avenir, vous pouvez l'ajouter à cette feuille de style sous le code passe-partout.

Ensuite, vous devez créer le fichier functions.php pour votre thème enfant. Encore une fois, c'est ce qui vous permet de mettre en file d'attente la feuille de style CSS complète de votre thème parent.

Dans le fichier functions.php , ajoutez le code suivant :

<?php

/* Fonction pour mettre en file d'attente la feuille de style du thème parent */

function child_enqueue__parent_scripts() {

wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );

}

add_action( 'wp_enqueue_scripts', 'child_enqueue__parent_scripts');

Une fois que vous avez votre fichier style.css et votre fichier functions.php , vous devez les télécharger sur votre site WordPress en tant que nouveau thème.

Pour ce faire, connectez-vous à votre site WordPress via FTP.

Ensuite, accédez au répertoire du thème de votre site ( wp-content/themes ) et créez un nouveau dossier pour votre thème enfant.

Par exemple, si le dossier de votre thème parent est hello-elementor , vous pouvez nommer le dossier du thème enfant hello-elementor-child pour vous aider à vous en souvenir.

Ensuite, téléchargez votre fichier style.css et functions.php dans ce dossier :

Une fois que vous avez téléchargé les deux fichiers, vous pouvez aller dans Apparence → Thèmes et activer votre thème enfant comme vous le feriez avec n'importe quel autre thème WordPress.