![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/public\")
<\/a><\/figure>\n\n\n\n\n\n
Qu'est-ce qu'un thème enfant WordPress ?<\/h2>\n
Un thème enfant WordPress est un sous-thème qui hérite des fonctionnalités, des caractéristiques et du style d’un autre thème, appelé thème parent. Il vous permet de modifier et d’améliorer le design et les fonctionnalités sans altérer le thème original.<\/p>\n <\/div>\n\n\n\n<\/p>
Un thème enfant est la méthode la plus efficace et la plus sûre pour modifier un thème existant. Il s’agit d’une couche transparente qui se superpose au thème parent. Alors que le thème parent fournit les fonctionnalités et l’esthétique de base, le thème enfant permet aux développeurs WordPress de mettre en œuvre des changements sans modifier directement le code du thème parent.<\/p>
Cette séparation garantit que vos personnalisations sont préservées lors des mises à jour puisqu’elles ne s’appliquent qu’au thème parent. Par essence, les thèmes enfants héritent de tous les points forts du thème complet tout en offrant des possibilités de personnalisation illimitées.<\/p>
Comment fonctionnent les thèmes enfants de WordPress ?<\/h3>
Lorsque vous créez un thème enfant, vous créez un répertoire séparé du thème parent. Ce dossier contient les fichiers style.css<\/strong> et functions.php<\/strong>, qui sont des éléments essentiels à la fonctionnalité de tout thème WordPress. Bien que le thème enfant puisse contenir des fichiers supplémentaires, l’accent est mis sur ces deux fichiers essentiels.<\/p> Grâce aux fichiers CSS et PHP<\/a> dédiés du thème enfant, vous pouvez tout modifier, du style visuel du site à sa base de code sous-jacente, et même remplacer des éléments du thème parent.<\/p> Lorsqu’un visiteur arrive sur votre site web, WordPress charge d’abord le thème enfant. Si WordPress trouve des personnalisations spécifiques ou des modifications de style dans le thème enfant, il leur donne la priorité sur le thème parent. Inversement, si le thème enfant ne comporte pas de modifications pour certaines fonctionnalités, WordPress se réfère au style et aux fonctions du thème parent.<\/p> Cette méthode présente plusieurs avantages. Elle protège vos personnalisations contre la perte lors des mises à jour du thème, éliminant ainsi la nécessité d’une nouvelle application. En outre, elle constitue une mesure de sécurité : en cas d’erreur, vous pouvez désactiver le thème enfant et votre site reviendra de manière transparente au cadre fiable du thème parent.<\/p> Après avoir compris le fonctionnement des thèmes enfants, nous allons apprendre à créer des thèmes enfants pour votre site web WordPress.<\/p> La création manuelle d’un thème enfant est simple. Ce tutoriel vous guidera à travers chaque étape, en utilisant le thème classique Twenty Twenty-One comme exemple. Les clients de l’hébergement WordPress d’Hostinger<\/a> peuvent accéder au Gestionnaire de fichiers<\/strong> dans hPanel<\/strong> pour effectuer cette méthode.<\/p> Voici les étapes de la création d’un thème enfant de base :<\/p> 2. Dans le gestionnaire de fichiers<\/a>, allez dans le dossier public_html <\/strong>-> wp-content <\/strong>-> themes<\/strong>. C’est là que se trouvent les répertoires de votre thème parent et de votre thème enfant.<\/p> 3. Créez un nouveau dossier de thème enfant. Nommez-le twentytwentyone-enfant<\/strong> ou quelque chose de similaire pour indiquer qu’il s’agit d’un enfant du thème Twenty Twenty-One.<\/p> 4. Dans le répertoire twentytwentyone-enfant<\/strong>, créez un nouveau fichier CSS nommé style.css<\/strong>.<\/p> 5. Modifiez ce fichier et ajoutez les informations suivantes, en remplaçant les espaces réservés par vos données réelles :<\/p> 6. Dans le répertoire du thème enfant, créez un nouveau fichier nommé functions.php<\/strong>.<\/p> 7. Insérez le code suivant dans ce fichier PHP. Cela garantit que votre premier thème enfant hérite de tous les styles du thème parent :<\/p> 8. Accédez à votre tableau de bord WordPress<\/a>, puis naviguez vers Apparence → Thèmes<\/strong>. <\/p> 9. Vous devriez voir votre nouveau thème enfant listé ici. Cliquez sur Activer<\/strong> pour passer au thème enfant.<\/p> Toute modification CSS ou PHP supplémentaire doit être effectuée dans les fichiers style.css<\/strong> et functions.php<\/strong> de votre thème enfant. Cela garantit que vos modifications sont conservées lors des mises à jour du thème parent.<\/p> \n\n\n Pour les thèmes plus récents qui utilisent un fichier theme.json<\/b>, le processus est légèrement différent car vous devez mettre en file d’attente le theme.json<\/b> au lieu du functions.php<\/b><\/p><\/div>\n\n\n<\/p> Vous pouvez également créer un thème enfant à l’aide d’un plugin WordPress<\/a>. Pour ce guide, nous utiliserons le plugin Child Theme Configurator, connu pour son approche simple et pratique. Suivez les étapes ci-dessous :<\/p> Avec un thème enfant actif, vous pouvez maintenant commencer à le personnaliser via Apparence → Personnaliser<\/strong>. Le plugin Child Theme Configurator garantit que tous les styles et scripts du thème parent sont transférés de manière transparente dans le thème enfant nouvellement créé.<\/p> Pour personnaliser votre thème enfant et obtenir l’aspect souhaité, vous devez comprendre comment fonctionnent les règles CSS et comment inspecter les éléments que vous souhaitez styliser.<\/p> Il existe plusieurs façons de personnaliser un thème enfant. Vous pouvez ajouter des fichiers de modèles au dossier du thème enfant pour modifier la mise en page de vos pages, ce qui vous permet de mieux contrôler la structure du contenu. En outre, vous pouvez affiner le style du thème enfant en ajoutant un code CSS personnalisé pour une apparence visuelle distincte.<\/p> Pour appliquer un CSS personnalisé dans WordPress<\/a>, naviguez jusqu’au fichier style.css<\/strong> dans le répertoire de votre thème enfant. Insérez ici vos règles CSS personnalisées – elles précéderont naturellement les styles du thème parent. L’utilisation des feuilles de style du thème enfant pour vos modifications garantit que la conception reste intacte lors des mises à jour du thème.<\/p> Explorons les éléments essentiels de la personnalisation d’un thème enfant.<\/p> Vous pouvez personnaliser la couleur d’arrière-plan dans le style de votre thème enfant en quelques étapes simples :<\/p> 4. Identifiez le sélecteur CSS approprié pour l’arrière-plan de l’élément que vous souhaitez modifier. En règle générale, pour l’arrière-plan général du site web, utilisez le sélecteur body<\/strong>.<\/p> 5. Saisissez le code CSS suivant, en remplaçant #f3f3f3<\/strong> par la couleur de votre choix :<\/p> L’arrière-plan de votre site web affichera désormais la nouvelle couleur.<\/p> Pour personnaliser la couleur de la barre latérale à l’aide de la feuille de style de votre thème enfant, collez le code CSS suivant, en remplaçant #dddddd<\/strong> par la couleur hexagonale de votre choix :<\/p> Votre barre latérale devrait maintenant refléter la nouvelle couleur, comme indiqué ci-dessous :<\/p> Pour redonner de l’allure à votre site web, pensez à modifier les polices de caractères. Heureusement, c’est simple avec les règles CSS. Voici comment mettre à jour les polices de l’ensemble de votre site :<\/p> Une fois les modifications appliquées, votre site web reflétera vos nouveaux paramètres de style.<\/p> Si vous souhaitez personnaliser les types, tailles et couleurs des polices pour des zones spécifiques, utilisez cet aide-mémoire :<\/p> Titre<\/strong><\/p> En-têtes (H1, H2, etc.)<\/strong><\/p> Menu de navigation<\/strong><\/p> Contenu de l’article<\/strong><\/p> Widgets<\/strong><\/p> Pied de page<\/strong><\/p> La modification de la mise en page des articles et des pages peut rafraîchir l’aspect de votre site web et offrir une expérience utilisateur personnalisée. Ce processus consiste à modifier les fichiers de modèles qui font partie intégrante des thèmes WordPress.<\/p> Les fichiers modèles combinent PHP et HTML. Si vous ne les connaissez pas, soyez prudent. Des modifications incorrectes peuvent entraîner des erreurs sur le site.<\/p> Voici comment procéder :<\/p> Vous pouvez modifier les styles globaux de votre site à l’aide d’un fichier theme.json.<\/strong> Cette nouvelle fonctionnalité puissante est principalement associée aux thèmes de blocs, ce qui permet un contrôle centralisé de la conception.<\/p> Les thèmes classiques ne sont pas nécessairement accompagnés d’un fichier theme.json<\/strong>, car ils s’appuient généralement sur styles.css<\/strong> et functions.php<\/strong> pour les règles de style. Toutefois, les développeurs peuvent intégrer un fichier theme.json<\/strong> dans les thèmes classiques pour gérer les styles globaux, bien que ce processus implique des étapes supplémentaires.<\/p> Pour utiliser un fichier theme.json<\/strong> dans un thème en bloc, suivez ces instructions :<\/p> Gardez à l’esprit que si theme.json<\/strong> gère les styles, la sortie est contrôlée par les fichiers PHP. Assurez-vous que vos fichiers de modèles sont configurés pour afficher les classes correspondantes définies dans les styles theme.json.<\/strong> <\/p> La personnalisation de votre site WordPress nécessite parfois l’ajout ou la suppression de fonctions afin d’adapter l’expérience à vos besoins spécifiques. Vous pouvez le faire en insérant ou en supprimant du code dans le fichier functions.php<\/strong> de votre thème enfant.<\/p> N’oubliez pas de sauvegarder votre site WordPress<\/a> avant d’effectuer de telles modifications.<\/p> Ajout de fonctions<\/strong><\/p> L’insertion de fonctions dans le fichier functions.php<\/strong> à l’intérieur de la balise PHP d’ouverture vous permet d’étendre les capacités de votre site. Par exemple, si vous souhaitez inclure un message d’accueil personnalisé dans votre tableau de bord, ajoutez le code suivant au fichier :<\/p> Suppression de fonctions<\/strong><\/p> Pour omettre une fonction d’un thème parent, localisez-la d’abord dans le fichier functions.php<\/strong> du thème parent. Ensuite, dans le fichier functions.php<\/strong> de votre thème enfant, utilisez les fonctions remove_action()<\/strong> ou remove_filter()<\/strong> avec le bon crochet et le bon nom de fonction.<\/p> Par exemple, pour supprimer un style en file d’attente du thème parent, procédez comme suit :<\/p> En fixant la priorité à 20<\/strong>, vous vous assurez que votre fonction s’exécute après que le style parent a été mis en file d’attente. <\/p> Utiliser un thème enfant peut faciliter la personnalisation et la maintenance des thèmes WordPress. Voici quelques avantages des thèmes enfants :<\/p> Malgré ses avantages, un thème enfant peut présenter des difficultés spécifiques qu’il convient de connaître. Faites attention à ces problèmes potentiels lorsque vous utilisez des thèmes enfants sur des sites web WordPress.<\/p> Temps de chargement des pages plus lent<\/strong><\/p> Si les thèmes enfants constituent un outil robuste pour personnaliser un site WordPress, ils présentent un inconvénient potentiel : ils ralentissent le temps de chargement des pages. Cela peut se produire parce que les thèmes enfants s’appuient sur les fichiers du thème parent. Lorsqu’une page se charge, le serveur doit encore accéder au dossier du thème parent pour récupérer tous les fichiers nécessaires, ce qui peut allonger le temps de chargement total.<\/p> Pour atténuer ce problème, veillez à ce que seuls les fichiers essentiels soient appelés à partir du thème parent et que les fichiers du thème enfant soient optimisés pour la vitesse. Par exemple, évitez de dupliquer la feuille de style CSS du thème parent dans la feuille de style du thème enfant. Au lieu de cela, n’incluez que les styles que vous modifiez.<\/p> En outre, les fonctions du thème enfant doivent être réduites au minimum et ne pas dupliquer celles qui se trouvent déjà dans le thème parent. En gérant soigneusement ces aspects, vous pouvez réduire l’impact sur le temps de chargement et maintenir les performances de votre site web WordPress.<\/p> Courbe d’apprentissage<\/strong><\/p> La mise en œuvre d’un thème enfant peut présenter une courbe d’apprentissage, en particulier pour ceux qui apprennent à coder<\/a>.<\/p> La maîtrise de PHP, CSS et HTML est essentielle pour une personnalisation efficace, car les thèmes enfants peuvent remplacer les fichiers du thème parent. Il est essentiel de comprendre comment mettre en file d’attente les scripts et les feuilles de style, ainsi que la hiérarchie des fichiers de modèle, pour appliquer correctement les modifications.<\/p> Pour surmonter ces difficultés, commencez par des modifications simples et améliorez progressivement votre compréhension de l’interaction entre les fichiers de thème enfant et parent. En outre, de nombreux tutoriels et ressources WordPress adaptés à différents niveaux de compétence sont disponibles pour vous aider.<\/p> Le soutien de la communauté WordPress est également un atout précieux. Grâce à leurs connaissances et à leurs conseils utiles, même les personnalisations complexes peuvent devenir plus accessibles.<\/p> Dépendance à l’égard du thème parent<\/strong><\/p> Une autre considération à prendre en compte lors de l’utilisation de thèmes enfants est leur dépendance à l’égard du thème parent. Comme nous l’avons vu, le thème enfant est lié aux fichiers du thème parent et hérite de toutes ses caractéristiques et fonctionnalités.<\/p> Si un thème parent particulier n’est pas entretenu ou mis à jour par ses développeurs, il peut présenter des risques de sécurité ou devenir incompatible avec les nouvelles versions de WordPress. Cela peut affecter le thème enfant.<\/p> Il est donc essentiel de choisir un thème parent provenant d’une source réputée qui fournit des mises à jour et une assistance régulières, car cela peut protéger votre site à long terme.<\/p> Le fait de dépendre de la feuille de style du thème parent signifie également que vous devez maintenir un équilibre prudent entre les fichiers du thème enfant et ceux du thème parent. Cela garantit que le thème enfant peut être indépendant du thème parent afin d’éviter tout problème lorsque vous supprimez ou changez le thème parent<\/a>.<\/p> Lorsque vous personnalisez les thèmes enfants de WordPress, vous pouvez rencontrer des problèmes. Il est essentiel de savoir comment résoudre ces erreurs pour assurer le bon fonctionnement de votre site. Voici quelques méthodes pour identifier et résoudre les problèmes les plus courants :<\/p> Lorsque vous entreprenez la création d’un thème enfant pour votre site WordPress, quelques conseils essentiels peuvent garantir un processus fluide et efficace. Tenez compte des meilleures pratiques suivantes en matière de thème enfant pour un développement optimal du thème :<\/p><\/a>Comment créer un thème enfant dans WordPress<\/strong><\/h2>
Comment créer manuellement un thème enfant<\/h3>
![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/public\")
<\/a><\/figure><\/div>\n
![\"Dans](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/06\/hpanel-files-filemanager-sidebar-fr.png\/public\" "\\"gestionnaire-de-fichiers-hpanel\\"")
<\/figure><\/div>![\"Le](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/12\/creer-dossier-theme-enfant-.png\/public\" "\\"dossier-twentytwentyone-enfant\\"")
<\/figure>\/*\nTheme Name: Twenty Twenty-One Child\nTheme URI: http:\/\/example.com\/twenty-twenty-one-child\/\nDescription: Twenty Twenty-One Child Theme\nAuthor: Your Name\nAuthor URI: http:\/\/example.com\nTemplate: twentytwentyone\nVersion: 1.0.0\n*\/\n\n\/* Add your custom styles here *\/<\/pre>
![\"Le](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/12\/fichier-functions-dans-dossier-theme-enfant.png\/public\" "\\"fichier-functions-php\\"")
<\/figure><?php\n\/\/ Your code to enqueue parent theme styles\nfunction enqueue_parent_styles() {\n wp_enqueue_style( 'parent-style', \nget_template_directory_uri() . '\/style.css' );\n}\n\nadd_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );\n?><\/pre>![\"Activation](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/12\/theme-enfant-tableau-de-bord-wordpress.png\/public\" "\\"Activation-du-thème-enfant-Twenty-Twenty-One\\"")
<\/figure><\/div><\/a><\/figure><\/div>Comment créer un thème enfant à l’aide d’un plugin<\/h3>
\n
![\"Activation](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/12\/plugin-child-theme-configurator.png\/public\" "\\"Activation-du-plugin-Child-Theme-Configurator-dans-le-tableau-de-bord-WordPress\\"")
<\/figure>\n
![\"Page](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/12\/creer-un-nouveau-theme-enfant-avec-le-plugin-child-theme-configurator.png\/public\" "\\"Page-de-tableau-de-bord-du-plugin-Child-Theme-Configurator\\"")
<\/figure>\n
![\"Personnalisation](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/05\/image-114.png\/public\" "\\"Personnalisation-des-informations-du-thème-enfant\\"")
<\/figure>\n
![\"Création](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/12\/bouton-creer-un-nouveau-theme-enfant.png\/public\" "\\"Création-d'un-nouveau-thème-enfant-dans-le-tableau-de-bord-du-Child-Theme-Configurator\\"")
<\/figure>\n
Comment personnaliser votre thème enfant<\/strong> WordPress<\/strong><\/h2>
Modification de la couleur d’arrière-plan<\/h3>
\n
![\"Accès](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/12\/Personnalisez-Site-web-1-.png\/public\" "\\"option-CSS-additionnel\\"")
<\/figure><\/div>body {\n background-color: #f3f3f3; \/* Change #f3f3f3 to your chosen color code *\/\n}<\/pre>\n
![\"Personnalisation](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/12\/arriere-plan-site-modifie.png\/public\" "\\"Personnalisation-de-la-couleur-de-fond-du-site-avec-CSS-personnalisé\\"")
<\/figure>Modifier la couleur de la barre latérale<\/h3>
.sidebar {\n background-color: #dddddd; \/* Replace #dddddd with your desired color *\/\n}<\/pre>![\"Personnalisation](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/12\/barre-laterale-modifiee.png\/public\" "\\"Personnalisation-de-la-couleur-de-fond-de-la-barre-latérale-du-site-avec-CSS-personnalisé\\"")
<\/figure>Modifier les types, tailles et couleurs de police<\/h3>
body {\n font-family: 'Arial', sans-serif; \/* Update to your chosen font *\/\n font-size: 16px; \/* Set your desired size *\/\n color: #333333; \/* Choose your color *\/\n}<\/pre>![\"Personnalisation](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/12\/Personnaliser-fonts.png\/public\" "\\"Personnalisation-de-la-taille-et-de-la-couleur-de-la-police-du-site-avec-CSS-personnalisé\\"")
<\/figure>.entry-title {\n font-size: 24px;\n color: #000000; \/* Modifier selon les besoins *\/\n}<\/pre>h1 { font-size: 2em; }\nh2 { font-size: 1.5em; }\n\/* Continuer pour h3, h4, etc., avec des variations de taille *\/<\/pre>.menu-item {\n font-family: 'Times New Roman', serif; \/* Ou toute autre police que vous préférez *\/\n color: #1a1a1a; \/* Choisir la couleur *\/\n}<\/pre>.entry-content {\n font-size: 18px; \/* Ajustez la taille de la police ici *\/\n}<\/pre>.widget {\n font-size: 14px;\n color: #2a2a2a; \/* Personnaliser la couleur *\/\n}<\/pre>.site-footer {\n font-size: 14px;\n color: #3a3a3a; \/* Personnalise la couleur du pied de page *\/\n}<\/pre>Modifier la mise en page des articles et des pages<\/h3>
\n
![\"Sélection](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/12\/editeur-de-fichiers-de-themes-wordpress.png\/public\" "\\"Sélection-du-menu-de-l'éditeur-de-fichiers-de-thème-dans-le-tableau-de-bord-WordPress\\"")
<\/figure><\/div>\n
![\"Édition](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/05\/image-115.png\/public\" "\\"Édition-du-fichier-custom-layout.php-dans-l'éditeur-de-fichiers-de-thème-WordPress\\"")
<\/figure><\/div>\n
Modifier les styles globaux à l’aide d’un fichier theme.json<\/h3>
\n
{\n \"version\": 2,\n \"settings\": {\n \"color\": {\n \"palette\": [\n {\n \"slug\": \"foreground\",\n \"color\": \"#ffffff\",\n \"name\": \"Foreground\"\n },\n {\n \"slug\": \"background\",\n \"color\": \"#a88f32\",\n \"name\": \"Background\"\n },\n {\n \"slug\": \"primary\",\n \"color\": \"#fffb00\",\n \"name\": \"Primary\"\n },\n {\n \"slug\": \"secondary\",\n \"color\": \"#6fff00\",\n \"name\": \"Secondary\"\n },\n {\n \"slug\": \"tertiary\",\n \"color\": \"#000000\",\n \"name\": \"Tertiary\"\n }\n ]\n }\n }\n}<\/pre>Ajout et suppression de fonctions<\/h3>
function custom_dashboard_greeting() {\n echo \"Bienvenue sur votre site ! Bonne journée\";\n}\nadd_action('admin_notices', 'custom_dashboard_greeting');<\/pre>function remove_parent_styles() {\n wp_dequeue_style('parent-style-handle');\n}\nadd_action('wp_enqueue_scripts', 'remove_parent_styles', 20);<\/pre>Pourquoi utiliser les thèmes enfants de WordPress<\/h2>
\n
<\/a><\/figure><\/div>Problèmes potentiels liés à l’utilisation d’un thème enfant<\/h2>
Comment résoudre les erreurs du thème enfant de WordPress<\/h3>
\n
Conseils utiles pour la création d’un thème enfant<\/h2>
\n