{"id":4678,"date":"2022-09-02T15:12:00","date_gmt":"2022-09-02T15:12:00","guid":{"rendered":"https:\/\/blog.hostinger.io\/tutoriels\/?p=4678"},"modified":"2025-03-03T23:40:55","modified_gmt":"2025-03-03T23:40:55","slug":"theme-enfant-wordpress","status":"publish","type":"post","link":"\/fr\/tutoriels\/theme-enfant-wordpress\/","title":{"rendered":"Cr\u00e9er un th\u00e8me enfant WordPress et le personnaliser"},"content":{"rendered":"

Si vous souhaitez personnaliser votre site web WordPress, l’utilisation de thèmes enfants est une excellente option à envisager. Un thème enfant WordPress vous permet d’apporter des modifications sans affecter le thème original ou parent. Cela garantit que vos personnalisations restent inchangées même lorsque le thème parent reçoit une mise à jour. <\/p>

Dans cet article, nous expliquerons ce qu’est un thème enfant et en quoi il diffère d’un thème parent. Nous vous montrerons également comment créer un thème enfant dans WordPress, manuellement ou à l’aide d’un plugin, et comment le personnaliser selon vos propres spécifications.<\/p>

\"\"<\/a><\/figure>

\n\n\n\n\n\n

\n \n \n <\/svg>\n

\n Qu'est-ce qu'un thème enfant WordPress ?\n <\/p>\n <\/div>\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><\/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>

<\/a>Comment créer un thème enfant dans WordPress<\/strong><\/h2>

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>

Comment créer manuellement un thème enfant<\/h3>

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>

\n
\"\"<\/a><\/figure>\n<\/div>

Voici les étapes de la création d’un thème enfant de base :<\/p>

    \n
  1. Connectez-vous à votre hPanel,<\/a> puis naviguez vers Fichiers → Gestionnaire de fichiers<\/strong>.<\/li>\n<\/ol>
    \n
    \"Dans<\/figure>\n<\/div>

    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>

    \"Le<\/figure>

    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>

    \/*\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>
    6. Dans le répertoire du thème enfant, créez un nouveau fichier nommé functions.php<\/strong>.<\/p>
    \"Le<\/figure>
    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>
    <?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>
    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>
    \n
    \"Activation<\/figure>\n<\/div>
    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
    \n            \n                \n                    \n                <\/svg>\n                Important\n            <\/span>\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>\n            <\/p><\/div>\n\n\n<\/p>
    \n
    \"\"<\/a><\/figure>\n<\/div>
    Comment créer un thème enfant à l’aide d’un plugin<\/h3>
    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>
      \n
    1. Naviguez vers Extensions → Ajouter<\/strong> dans votre tableau de bord WordPress.<\/li>\n\n\n\n
    2. Entrez Child Theme Configurator<\/strong> dans la barre de recherche.<\/li>\n\n\n\n
    3. Cliquez sur Installer maintenant<\/strong>, puis sur Activer<\/strong> une fois l’installation du plugin<\/a> terminée.<\/li>\n<\/ol>
      \"Activation<\/figure>
        \n
      1. Accédez à la page de configuration du plugin Child Theme Configurator en allant dans Outils → Thèmes enfants<\/strong>.<\/li>\n\n\n\n
      2. Dans l’onglet Parent\/Enfant<\/strong>, sélectionnez Créer un nouveau thème enfant<\/strong>.<\/li>\n\n\n\n
      3. Dans la liste déroulante, choisissez le thème parent pour lequel vous souhaitez créer un thème enfant.<\/li>\n<\/ol>
        \"Page<\/figure>
          \n
        1. Cliquez sur Analyser<\/strong> pour permettre à ce plugin de thème enfant d’examiner la configuration du thème parent.<\/li>\n\n\n\n
        2. Après analyse, le plugin proposera un nom de dossier de thème enfant, que vous pourrez accepter ou modifier.<\/li>\n\n\n\n
        3. Fournir des informations sur le thème enfant, y compris son nom, sa description et, éventuellement, les détails de l’auteur et de la version.<\/li>\n<\/ol>
          \"Personnalisation<\/figure>
            \n
          1. Décidez si vous souhaitez copier les menus, les widgets et les autres options du thème parent.<\/li>\n\n\n\n
          2. Cliquez sur le bouton Créer un nouveau thème enfant<\/strong> pour finaliser le processus de création.<\/li>\n<\/ol>
            \"Création<\/figure>
              \n
            1. Activez votre nouveau thème enfant via Apparence → Thèmes<\/strong> pour commencer à l’utiliser.<\/li>\n<\/ol>
              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>
              Comment personnaliser votre thème enfant<\/strong> WordPress<\/strong><\/h2>
              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>
              Modification de la couleur d’arrière-plan<\/h3>
              Vous pouvez personnaliser la couleur d’arrière-plan dans le style de votre thème enfant en quelques étapes simples :<\/p>
                \n
              1. Naviguez vers Apparence → Thèmes<\/strong> dans votre tableau de bord WordPress.<\/li>\n\n\n\n
              2. Cliquez sur Personnaliser <\/strong>dans votre thème enfant actif.<\/li>\n\n\n\n
              3. Sélectionnez CSS additionnel<\/strong> dans le Personnalisateur de thème<\/strong>.<\/li>\n<\/ol>
                \n
                \"Accès<\/figure>\n<\/div>
                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>
                body {\n    background-color: #f3f3f3; \/* Change #f3f3f3 to your chosen color code *\/\n}<\/pre>
                  \n
                1. Cliquez sur Publier <\/strong>pour enregistrer les modifications apportées au fichier CSS et appliquer la nouvelle couleur d’arrière-plan à l’aide du CSS personnalisé de votre thème enfant.<\/li>\n<\/ol>
                  L’arrière-plan de votre site web affichera désormais la nouvelle couleur.<\/p>
                  \"Personnalisation<\/figure>
                  Modifier la couleur de la barre latérale<\/h3>
                  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>
                  .sidebar {\n    background-color: #dddddd; \/* Replace #dddddd with your desired color *\/\n}<\/pre>
                  Votre barre latérale devrait maintenant refléter la nouvelle couleur, comme indiqué ci-dessous :<\/p>
                  \"Personnalisation<\/figure>
                  Modifier les types, tailles et couleurs de police<\/h3>
                  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>
                  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>
                  Une fois les modifications appliquées, votre site web reflétera vos nouveaux paramètres de style.<\/p>
                  \"Personnalisation<\/figure>
                  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>
                  .entry-title {\n    font-size: 24px;\n    color: #000000; \/* Modifier selon les besoins *\/\n}<\/pre>
                  En-têtes (H1, H2, etc.)<\/strong><\/p>
                  h1 { font-size: 2em; }\nh2 { font-size: 1.5em; }\n\/* Continuer pour h3, h4, etc., avec des variations de taille *\/<\/pre>
                  Menu de navigation<\/strong><\/p>
                  .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>
                  Contenu de l’article<\/strong><\/p>
                  .entry-content {\n    font-size: 18px; \/* Ajustez la taille de la police ici *\/\n}<\/pre>
                  Widgets<\/strong><\/p>
                  .widget {\n    font-size: 14px;\n    color: #2a2a2a; \/* Personnaliser la couleur *\/\n}<\/pre>
                  Pied de page<\/strong><\/p>
                  .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>
                  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>
                    \n
                  1. Dans le tableau de bord de WordPress, naviguez vers Apparence →<\/strong> Editeur de fichiers des thèmes<\/a>. Cette section vous permet de gérer les fichiers de modèles de votre thème enfant.<\/li>\n<\/ol>
                    \n
                    \"Sélection<\/figure>\n<\/div>
                      \n
                    1. Pour modifier une mise en page, vous devez copier le fichier de modèle correspondant du thème parent dans votre thème enfant, s’il ne s’y trouve pas déjà. Par exemple, si vous modifiez la mise en page d’un article unique, dupliquez le fichier single.php<\/strong>.<\/li>\n\n\n\n
                    2. Pour des modifications plus importantes, telles que la création d’une mise en page unique pour une page spécifique, envisagez de créer un template de page WordPress personnalisé. Pour ce faire, dupliquez le fichier page.php<\/strong> dans votre thème enfant et renommez-le en custom-layout.php<\/strong>.<\/li>\n\n\n\n
                    3. Dans l’éditeur de thème<\/strong>, ouvrez le fichier de modèle nouvellement dupliqué. Ajustez les balises HTML pour modifier la présentation de la page, par exemple en repositionnant les barres latérales, en réorganisant les éléments ou en ajoutant de nouvelles sections personnalisées.<\/li>\n<\/ol>
                      \n
                      \"Édition<\/figure>\n<\/div>
                        \n
                      1. Pour affiner davantage l’apparence, il peut être nécessaire d’ajouter des règles CSS personnalisées. Ces règles vous permettent d’ajuster les largeurs, les marges et d’autres aspects stylistiques afin d’obtenir l’aspect souhaité.<\/li>\n\n\n\n
                      2. Une fois que vous avez mis à jour le fichier de modèle de page personnalisé, vous pouvez le sélectionner lors de la modification d’une page. Recherchez la section Attributs de la page<\/strong> et choisissez votre modèle personnalisé dans le menu déroulant Modèle<\/strong>.<\/li>\n\n\n\n
                      3. Prévisualisez et testez sur différents appareils pour confirmer la conception et la fonctionnalité de l’application.<\/li>\n<\/ol>
                        Modifier les styles globaux à l’aide d’un fichier theme.json<\/h3>
                        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>
                          \n
                        1. Trouvez le fichier theme.json<\/strong> dans le répertoire d’installation de votre thème<\/a>.<\/li>\n\n\n\n
                        2. Ouvrez le fichier et commencez à personnaliser les styles. Cette structure JSON<\/a> vous permet de définir des styles pour la typographie, les couleurs et les mises en page. Par exemple, pour modifier la palette de couleurs par défaut du thème, ajoutez :<\/li>\n<\/ol>
                          {\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>
                          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>
                          Ajout et suppression de fonctions<\/h3>
                          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>
                          function custom_dashboard_greeting() {\n    echo \"Bienvenue sur votre site ! Bonne journée\";\n}\nadd_action('admin_notices', 'custom_dashboard_greeting');<\/pre>
                          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>
                          function remove_parent_styles() {\n    wp_dequeue_style('parent-style-handle');\n}\nadd_action('wp_enqueue_scripts', 'remove_parent_styles', 20);<\/pre>
                          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>
                          Pourquoi utiliser les thèmes enfants de WordPress<\/h2>
                          Utiliser un thème enfant peut faciliter la personnalisation et la maintenance des thèmes WordPress. Voici quelques avantages des thèmes enfants :<\/p>