Tutoriels WordPress de confiance, quand vous en avez le plus besoin.
Guide du débutant pour WordPress
WPB Cup
25 millions+
Sites web utilisant nos plugins
16+
Années d'expérience WordPress
3000+
Tutoriels WordPress par des experts

Comment créer un thème enfant WordPress (Guide pour débutants)

Les thèmes enfants font partie de ces termes WordPress qui sont souvent utilisés et qui laissent les débutants perplexes. Vous en avez peut-être même entendu parler et décidé de ne pas en créer un, tant cela semble compliqué.

Nous comprenons. Mais selon notre expérience, les thèmes enfants peuvent vous éviter bien des maux de tête par la suite. Ils protègent vos précieuses personnalisations, vous permettent d'expérimenter sans casser votre site, et rendent la mise à jour de votre thème un jeu d'enfant.

Si cela vous intéresse, nous avons détaillé dans ce guide pour débutants comment fonctionne un thème enfant, comment le personnaliser et comment y apporter des modifications.

Comment créer un thème enfant WordPress

Comment fonctionne un thème enfant et pourquoi en avez-vous besoin ?

Un thème enfant hérite de toutes les fonctionnalités, fonctions et styles d'un autre thème WordPress. Lorsque vous créez un thème enfant, le thème d'origine est appelé thème parent.

L'héritage inclut le fichier style.css du thème parent, qui définit le style principal du thème. Le thème enfant peut outrepasser ou étendre ses propriétés héritées en ajoutant ses propres fichiers ou en modifiant ceux existants.

Bien qu'il soit possible de personnaliser votre thème WordPress sans installer de thème enfant, il y a plusieurs raisons pour lesquelles vous pourriez en avoir besoin quand même :

  • Les thèmes enfants protègent vos personnalisations lors des mises à jour de thème, les empêchant d'être écrasées. Si vous modifiez directement le thème parent, ces modifications pourraient disparaître lors de la mise à jour.
  • Les thèmes enfants vous permettent d'essayer en toute sécurité de nouveaux designs ou fonctionnalités sans perturber le thème original du site, un peu comme un environnement de staging.
  • Si vous savez comment coder, les thèmes enfants peuvent rendre le processus de développement plus efficace. Les fichiers d'un thème enfant sont beaucoup plus simples que ceux d'un thème parent. Vous pouvez vous concentrer sur la modification uniquement des parties du thème parent que vous souhaitez changer ou développer.

Que faire avant de créer un thème enfant WordPress

Nous avons vu de nombreux utilisateurs WordPress enthousiastes à l'idée de se lancer dans des aspects techniques, pour ensuite se décourager lorsque des erreurs apparaissent. Nous comprenons. C'est pourquoi il est important de savoir dans quoi vous vous engagez avant de créer un thème enfant.

Voici quelques éléments que nous vous recommandons de faire avant de poursuivre ce guide étape par étape :

  1. Sachez que vous travaillerez avec du code. Au minimum, vous aurez besoin d'une compréhension de base de HTML, CSS, PHP et, éventuellement, JavaScript pour comprendre les modifications à apporter. Vous pouvez en savoir plus à ce sujet dans le manuel des thèmes WordPress.
  2. Choisissez un thème parent qui possède le design et les fonctionnalités souhaités pour votre site web. Si possible, trouvez-en un pour lequel vous n'avez besoin de faire que quelques modifications. Vous pouvez suivre notre liste de contrôle des choses à faire avant de changer de thème WordPress si nécessaire.
  3. Utilisez un site local ou un site de staging pour le développement de thèmes. Vous ne voulez pas créer d'erreurs involontaires sur votre site en direct.
  4. Sauvegardez votre site web d'abord. Nous recommandons d'utiliser un plugin de sauvegarde comme Duplicator si c'est votre première fois.

Il existe plusieurs façons de créer un thème enfant à partir de votre thème existant. L'une d'elles utilise du code manuel, tandis que d'autres nécessitent un plugin, ce qui est beaucoup plus convivial pour les débutants.

La première méthode peut sembler intimidante si vous manquez d'expérience technique. Cela dit, même si vous choisissez l'une des méthodes par plugin, nous vous recommandons tout de même de lire la méthode manuelle pour vous familiariser avec le processus et les fichiers concernés.

Astuce de pro : Vous souhaitez personnaliser votre thème sans créer de thème enfant ? Utilisez WPCode pour activer en toute sécurité de nouvelles fonctionnalités avec des extraits de code personnalisés sans casser votre site web.

Gardant tout cela à l'esprit, passons à la création d'un thème enfant dans WordPress. Vous pouvez accéder à la méthode de votre choix en utilisant les liens ci-dessous :

Méthode 1 : Créer manuellement un thème enfant WordPress

Tout d'abord, vous devez ouvrir /wp-content/themes/ dans le dossier de votre installation WordPress.

Vous pouvez le faire en utilisant le gestionnaire de fichiers de votre hébergement WordPress ou un client FTP. Nous trouvons la première option beaucoup plus facile, nous allons donc l'utiliser.

Si vous êtes un client Bluehost, vous pouvez vous connecter à votre tableau de bord d'hébergement et naviguer vers l'onglet « Sites Web ». Ensuite, cliquez sur « Paramètres ».

Paramètres du site Bluehost

Dans l'onglet Aperçu, faites défiler jusqu'à la section « Liens rapides ».

Sélectionnez ensuite « Gestionnaire de fichiers ».

Bouton Gestionnaire de fichiers Bluehost

À ce stade, vous devez accéder au dossier public_html de votre site Web et ouvrir le chemin /wp-content/themes/.

Ici, cliquez simplement sur le bouton « + Dossier » dans le coin supérieur gauche pour créer un nouveau dossier pour votre thème enfant.

Création d'un nouveau dossier dans le gestionnaire de fichiers Bluehost

Vous pouvez nommer le dossier comme vous le souhaitez.

Pour ce tutoriel, nous utiliserons simplement le nom de dossier twentytwentyone-child car nous utiliserons Twenty Twenty-One comme thème parent. Une fois terminé, cliquez simplement sur « Créer un nouveau dossier ».

Nommage d'un nouveau fichier de thème enfant dans le gestionnaire de fichiers Bluehost

Ensuite, vous devez ouvrir le dossier que vous venez de créer et cliquer sur « + Fichier » pour créer le premier fichier de votre thème enfant.

Si vous utilisez un client FTP, vous pouvez utiliser un éditeur de texte comme le Bloc-notes et télécharger le fichier plus tard.

Création d'un nouveau fichier dans le gestionnaire de fichiers Bluehost

Nommez ce fichier « style.css », car c'est la feuille de style principale de votre enfant et elle contiendra des informations sur le thème enfant.

Cliquez ensuite sur « Créer un nouveau fichier ».

Création d'un nouveau fichier de feuille de style dans le gestionnaire de fichiers Bluehost

Maintenant, faites simplement un clic droit sur le fichier style.css.

Ensuite, cliquez sur « Modifier » pour ouvrir un nouvel onglet comme dans la capture d'écran ci-dessous.

Modification d'un fichier style.css dans le gestionnaire de fichiers Bluehost

Dans ce nouvel onglet, vous pouvez coller le texte suivant et l'ajuster selon vos besoins :

/*
Theme Name:   Twenty Twenty-One Child
Theme URI:    https://wordpress.org/themes/twentytwentyone/
Description:  Twenty Twenty-One child theme
Author:       WordPress.org
Author URI:   https://wordpress.org/
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild
*/

Une fois terminé, cliquez simplement sur « Enregistrer les modifications ».

Enregistrement d'un fichier de feuille de style dans le gestionnaire de fichiers Bluehost

La prochaine chose à faire est de créer un deuxième fichier et de le nommer functions.php. Ce fichier importera ou mettra en file d'attente les feuilles de style des fichiers du thème parent.

Une fois que vous avez créé le document, ajoutez le code wp_enqueue suivant :

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parenthandle = 'twenty-twenty-one-style'; // This is 'twenty-twenty-one-style' for the Twenty Twenty-one theme.
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', 
        array(), // if the parent theme code has a dependency, copy it to here
        $theme->parent()->get('Version')
    );
    wp_enqueue_style( 'custom-style', get_stylesheet_uri(),
        array( $parenthandle ),
        $theme->get('Version') // this only works if you have Version in the style header
    );
}

Une fois terminé, enregistrez simplement le fichier comme à l'étape précédente.

Note : Pour cette méthode, nous vous recommandons de lire la documentation officielle sur les thèmes enfants et sur l'inclusion des ressources pour vous assurer que les feuilles de style de votre thème enfant sont chargées correctement.

Vous avez maintenant créé un thème enfant très basique. Lorsque vous allez dans Apparence » Thèmes dans votre panneau d'administration WordPress, vous devriez voir l'option Twenty Twenty-One Child.

Cliquez sur le bouton « Activer » pour commencer à utiliser le thème enfant sur votre site.

Activation d'un thème enfant dans l'administration WordPress

Méthode 2 : Créer un thème classique enfant avec un plugin

La méthode suivante utilise le plugin Child Theme Configurator. Ce plugin WordPress facile à utiliser vous permet de créer et de personnaliser rapidement des thèmes enfants WordPress sans utiliser de code, mais il ne fonctionne bien qu'avec un thème classique (non basé sur des blocs).

La première chose à faire est d'installer et activer le plugin WordPress. Lors de l'activation, vous devez naviguer vers Outils » Thèmes enfants dans votre tableau de bord WordPress.

Dans l'onglet Parent/Enfant, il vous sera demandé de choisir une action. Sélectionnez simplement « CRÉER un nouveau thème enfant » pour commencer.

Création d'un nouveau thème enfant avec Child Theme Configurator

Ensuite, sélectionnez un thème parent dans un menu déroulant. Nous sélectionnerons le thème Hestia.

Après cela, cliquez simplement sur le bouton « Analyser » pour vous assurer que le thème est adapté à une utilisation comme thème parent.

Choix d'un thème parent dans Child Theme Configurator

Ensuite, il vous sera demandé de nommer le dossier dans lequel le thème enfant sera enregistré. Vous pouvez utiliser le nom de dossier que vous souhaitez.

Ci-dessous, vous devez sélectionner où enregistrer les nouveaux styles : dans la feuille de style principale ou dans une feuille de style séparée.

La feuille de style principale est la feuille de style par défaut qui accompagne votre thème enfant. Lorsque vous enregistrez de nouveaux styles personnalisés dans ce fichier, vous modifiez directement les styles principaux de votre thème enfant. Chaque modification écrasera le style du thème d'origine.

L'option séparée vous permet d'enregistrer un nouveau style personnalisé dans un fichier de feuille de style séparé. Ceci est utile si vous souhaitez préserver le style du thème d'origine et ne pas l'écraser.

À des fins de démonstration, nous choisirons la première option. Mais à mesure que vous deviendrez plus créatif avec les personnalisations de votre thème enfant, vous pourrez toujours répéter ce processus et sélectionner la deuxième option.

Choix de l'emplacement d'enregistrement de la feuille de style dans Child Theme Configurator

En descendant, vous devez choisir comment la feuille de style du thème parent sera accessible.

Nous allons simplement opter pour l'option par défaut « Utiliser la file d'attente de styles WordPress », car cela permettra au plugin de déterminer automatiquement les actions appropriées.

Choix de la gestion de la feuille de style du thème parent dans Child Theme Configurator

Lorsque vous arrivez à l'étape 7, vous devrez cliquer sur le bouton intitulé « Cliquez pour modifier les attributs du thème enfant ».

Vous pourrez ensuite renseigner les détails de votre thème enfant.

Remplissage des détails du thème enfant dans Child Theme Configurator

Lorsque vous créez un thème enfant manuellement, vous perdrez les menus et les widgets du thème parent. Child Theme Configurator peut les copier du thème parent vers le thème enfant. Cochez la case à l'étape 8 si vous souhaitez le faire.

Enfin, cliquez sur le bouton « Créer un nouveau thème enfant » pour créer votre nouveau thème enfant.

Clic sur le bouton Créer un nouveau thème enfant dans Child Theme Configurator

Le plugin créera un dossier pour votre thème enfant et ajoutera les fichiers style.css et functions.php que vous utiliserez pour personnaliser le thème plus tard.

Avant d'activer le thème, vous devez cliquer sur le lien en haut de l'écran pour le prévisualiser et vous assurer qu'il est esthétique et qu'il ne casse pas votre site.

Aperçu d'un thème enfant dans Child Theme Configurator

Si tout semble fonctionner, cliquez sur le bouton « Activer et publier ».

Désormais, votre thème enfant sera en ligne.

À ce stade, le thème enfant aura le même aspect et le même comportement que le thème parent.

Activation d'un thème enfant après sa création avec Child Theme Configurator

Méthode 3 : Créer un thème bloc enfant avec un plugin

Si vous utilisez un thème de blocs, WordPress offre un moyen simple de créer un thème enfant avec le plugin Create Block Theme.

Tout d'abord, vous devrez installer et activer le plugin WordPress. Ensuite, allez dans Apparence » Créer un thème bloc.

Ici, sélectionnez simplement « Créer un enfant de [nom du thème actuel]. »

Création d'un thème enfant avec le plugin Create Block Theme

Ensuite, remplissez les informations de votre thème enfant. Nous utilisons Twenty Twenty-Four dans cet exemple, nous allons donc le nommer Twenty Twenty-Four Child.

Nous avons également donné une description et un auteur pour le thème enfant. Une fois terminé, cliquez sur le bouton « Créer un thème enfant ».

Insertion des informations du thème enfant dans le plugin Create Block Theme

Le plugin va maintenant créer et installer le fichier zip du thème WordPress dans votre zone d'administration.

Une fois terminé, votre site web activera automatiquement ce thème enfant nouvellement créé. Vous pouvez le confirmer en allant dans Apparence » Thèmes.

Visualisation du thème enfant nouvellement créé avec le plugin Create Block Theme

Astuce bonus : Découvrez si votre thème dispose d'un générateur de thème enfant

Si vous avez de la chance, votre thème WordPress peut déjà avoir une fonctionnalité existante pour créer un thème enfant.

Par exemple, si vous utilisez Astra, vous pouvez aller sur le site web Générateur de thème enfant Astra. Ensuite, remplissez simplement le nom de votre thème enfant et cliquez sur le bouton « Générer ».

Site web Astra Child Theme Generator

Votre navigateur téléchargera alors automatiquement votre thème enfant sur votre ordinateur, que vous pourrez ensuite installer vous-même sur WordPress.

Nous avons également trouvé d'autres thèmes WordPress populaires qui disposent d'un générateur de thème enfant :

Comment personnaliser votre thème enfant classique

Note : Cette section est destinée aux utilisateurs de thèmes WordPress classiques. Si vous utilisez un thème de blocs, passez simplement à la section suivante.

Techniquement, vous pouvez personnaliser votre thème enfant sans code en utilisant le personnaliseur de thème. Les modifications que vous y apportez n'affecteront pas votre thème parent. Si vous n'êtes pas encore à l'aise avec le codage, n'hésitez pas à utiliser le personnaliseur.

Cela dit, nous vous recommandons également de personnaliser le thème enfant avec du code.

En plus d'en apprendre davantage sur le développement de thèmes WordPress, la personnalisation par code permet de documenter les modifications dans les fichiers du thème enfant, ce qui facilite leur suivi.

Maintenant, la manière la plus basique de personnaliser un thème enfant est d'ajouter du CSS personnalisé au fichier style.css. Pour ce faire, vous devez savoir quel code vous devez personnaliser.

Vous pouvez simplifier le processus en copiant et en modifiant le code existant du thème parent. Vous pouvez trouver ce code en utilisant l'outil d'inspection de Chrome ou de Firefox, ou en le copiant directement à partir du fichier CSS du thème parent.

Méthode 1 : Copier le code de l'inspecteur Chrome ou Firefox

Le moyen le plus simple de découvrir le code CSS que vous devez modifier est d'utiliser les outils d'inspection fournis avec Google Chrome et Firefox. Ces outils vous permettent d'examiner le HTML et le CSS derrière n'importe quel élément d'une page Web.

Vous pouvez en savoir plus sur l'outil d'inspection dans notre guide sur les bases de l'inspection d'éléments : personnalisation de WordPress pour les utilisateurs autonomes.

Lorsque vous faites un clic droit sur votre page web et utilisez l'inspection d'éléments, vous verrez le HTML et le CSS de la page.

Lorsque vous déplacez votre souris sur différentes lignes HTML, l'inspecteur les mettra en surbrillance dans la fenêtre supérieure. Il vous montrera également les règles CSS relatives à l'élément mis en surbrillance, comme ceci :

Démonstration du fonctionnement de l'outil d'inspection de Chrome

Vous pouvez essayer de modifier le CSS directement pour voir à quoi cela ressemblerait. Par exemple, essayons de changer la couleur de fond du corps du thème en #fdf8ef. Trouvez la ligne de code qui dit body { et à l'intérieur, le code qui dit color: .

Cliquez simplement sur l'icône du sélecteur de couleur à côté de color: et collez le code HEX dans le champ approprié, comme ceci :

Maintenant, vous savez comment changer la couleur d'arrière-plan en utilisant CSS. Pour que les modifications soient permanentes, vous pouvez ouvrir votre fichier style.css dans le répertoire du thème enfant (en utilisant le gestionnaire de fichiers ou FTP).

Ensuite, collez le code suivant sous les informations du thème enfant, comme ceci :

/*
Theme Name:   Twenty Twenty-One Child
Theme URI:    https://wordpress.org/themes/twentytwentyone/
Description:  Twenty Twenty-One child theme
Author:       WordPress.org
Author URI:   https://wordpress.org/
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild
*/

body {
    background-color: #fdf8ef
}

Voici à quoi cela ressemblera si vous allez dans l'administration WordPress et ouvrez Apparence » Éditeur de fichiers de thème :

Ajout de CSS personnalisé dans la feuille de style d'un thème enfant dans l'éditeur de fichiers du thème

Si vous êtes débutant et que vous souhaitez apporter d'autres modifications, nous vous recommandons de vous familiariser avec HTML et CSS afin de savoir exactement à quel élément chaque code fait référence. Il existe de nombreuses fiches récapitulatives HTML et CSS en ligne auxquelles vous pouvez vous référer.

Voici la feuille de style complète que nous avons créée pour le thème enfant. N'hésitez pas à expérimenter et à la modifier :

/*
Theme Name:   Twenty Twenty-One Child
Theme URI:    https://wordpress.org/themes/twentytwentyone/
Description:  Twenty Twenty-One child theme
Author:       WordPress.org
Author URI:   https://wordpress.org/
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild
*/

.site-title {
color: #7d7b77;
}
.site-description {
color: #aba8a2;
}
body {
background-color: #fdf8ef;
color: #7d7b77;
}
.entry-footer {
color: #aba8a2;
}
.entry-title {
color: #aba8a2;
font-weight: bold;
}
.widget-area {
color: #7d7b77;
}

Méthode 2 : Copier du code du fichier style.css du thème parent

Il y a peut-être beaucoup de choses dans votre thème enfant que vous souhaitez personnaliser. Dans ce cas, il peut être plus rapide de copier du code directement du fichier style.css du thème parent, de le coller dans le fichier CSS de votre thème enfant, puis de le modifier.

La partie délicate est qu'un fichier de feuille de style de thème peut sembler très long et décourageant pour les débutants. Cependant, une fois que vous comprenez les bases, ce n'est pas si difficile.

Utilisons un exemple concret de la feuille de style du thème parent Twenty Twenty-One. Vous devez naviguer vers /wp-content/themes/twentytwentyone dans le dossier de votre installation WordPress, puis ouvrir le fichier style.css dans votre gestionnaire de fichiers, FTP ou Éditeur de fichiers de thème.

Vous verrez les lignes de code suivantes :

:root {
/* Colors */
--global--color-black: #000;
--global--color-dark-gray: #28303d;
--global--color-gray: #39414d;
--global--color-light-gray: #f0f0f0;
--global--color-green: #d1e4dd;
--global--color-blue: #d1dfe4;
--global--color-purple: #d1d1e4;
--global--color-red: #e4d1d1;
--global--color-orange: #e4dad1;
--global--color-yellow: #eeeadd;
--global--color-white: #fff;
--global--color-white-50: rgba(255, 255, 255, 0.5);
--global--color-white-90: rgba(255, 255, 255, 0.9);
--global--color-primary: var(--global--color-dark-gray); /* Body text color, site title, footer text color. */
--global--color-secondary: var(--global--color-gray); /* Headings */
--global--color-primary-hover: var(--global--color-primary);
--global--color-background: var(--global--color-green); /* Mint, default body background */
--global--color-border: var(--global--color-primary); /* Used for borders (separators) */
}

Les lignes 3 à 15 contrôlent le type de couleurs (comme jaune, vert, violet) que le thème entier utilisera dans leurs codes HEX spécifiques. Et ensuite, pour des lignes comme « global-color-primary » ou « global-color-secondary », cela signifie que ce sont les couleurs primaires et secondaires de ce thème.

Vous pouvez copier ces lignes de code dans la feuille de style de votre thème enfant, puis modifier les codes HEX pour créer votre schéma de couleurs parfait.

En faisant défiler la feuille de style du thème parent, vous remarquerez que d'autres variables peuvent également avoir ces variables de couleur, comme ici :

/* Buttons */
--button--color-text: var(--global--color-background);

Cela signifie essentiellement que tous les textes des boutons utiliseront la même couleur que celle déclarée dans --global--color-background:, qui est le vert menthe (--global--color-green: #d1e4dd). Si vous modifiez le HEX dans --global--color-green:, le texte du bouton aura également un aspect différent.

Remarque : Si vous utilisez le thème enfant Twenty Twenty-One et que vous ne voyez aucun changement, vous devrez peut-être mettre à jour la partie « Version » des informations du fichier de thème (par exemple, de 1.0 à 2.0) chaque fois que vous mettez à jour le fichier style.css.

Vous pouvez également suivre ces tutoriels pour expérimenter les personnalisations de votre thème enfant :

Comment personnaliser votre thème enfant bloc

Si vous utilisez un thème enfant basé sur des blocs, la plupart de vos personnalisations seront effectuées dans votre fichier theme.json, et non dans style.css.

Cependant, lors de nos tests, nous avons trouvé le processus compliqué. Contrairement aux thèmes enfants classiques, il y a un plus grand fossé de connaissances à combler (surtout concernant le JSON et la gestion du CSS) si vous débutez dans le développement de thèmes WordPress.

Cela dit, nous avons trouvé une alternative beaucoup plus simple en utilisant le plugin Create Block Theme. Cet outil peut enregistrer toutes les modifications apportées dans l'éditeur complet du site WordPress dans le fichier child theme.json de votre thème enfant. Ainsi, vous n'aurez pas à toucher au code, car le plugin s'en chargera pour vous.

Montrons-vous un exemple. Tout d'abord, ouvrez l'éditeur complet du site WordPress en allant dans Apparence » Éditeur.

Sélection de l'Éditeur de site complet depuis le panneau d'administration WordPress

Vous verrez plusieurs menus au choix.

Ici, sélectionnez simplement « Styles ».

Ouverture du menu Styles dans l'Éditeur de site complet

Sur la page suivante, vous verrez plusieurs combinaisons de styles intégrées parmi lesquelles choisir.

Pour notre exemple, vous pouvez simplement ignorer tout cela et cliquer sur l'icône du crayon.

Clic sur le bouton Modifier les styles dans l'Éditeur de site complet

Maintenant, essayons de modifier certaines parties de votre thème enfant, comme les polices.

Pour cet exemple, cliquez sur « Typographie » dans la barre latérale droite.

Clic sur le menu Typographie dans l'Éditeur de site complet

Ensuite, vous verrez des options pour modifier les polices globales du thème pour le texte, les liens, les titres, les légendes et les boutons.

Cliquons sur « Titres » pour la démonstration.

Clic sur Titres dans l'Éditeur de site complet

Dans le menu déroulant Police, changez la sélection d'origine pour n'importe quelle police disponible.

N'hésitez pas à modifier l'apparence, la hauteur de ligne, l'espacement des lettres et la casse des lettres si nécessaire.

Mise en forme des titres dans l'Éditeur de site complet

Une fois que vous avez terminé, cliquez simplement sur « Enregistrer ». Après cela, vous pouvez cliquer sur le bouton Créer un thème de bloc (l'icône de clé à molette) à côté de « Enregistrer ».

Ensuite, cliquez sur « Enregistrer les modifications du thème ».

Sauvegarde des modifications apportées à un thème enfant avec le plugin Create Block Theme

Ensuite, sélectionnez les modifications à enregistrer dans le thème enfant.

Les exemples incluent les polices, les styles personnalisés, les modifications de modèles, et plus encore.

Sélection des modifications à sauvegarder dans le thème enfant avec le plugin Create Block Theme

Une fois terminé, faites défiler toute la barre latérale.

Ensuite, cliquez sur « Enregistrer les modifications ».

Clic sur le bouton Enregistrer les modifications dans le plugin Create Block Theme

Maintenant, visualisons votre fichier theme.json afin que vous puissiez voir les modifications reflétées dans le code.

Pour ce faire, cliquez à nouveau sur le bouton Créer un thème de bloc et sélectionnez « Afficher theme.json ».

Clic pour afficher le fichier theme.json dans le plugin Create Block Theme

Après avoir cliqué dessus, vous verrez que le fichier inclut de nouvelles additions de code.

Dans notre cas, le fichier inclut du code qui indique que les balises de titre utiliseront la police Inter avec une apparence semi-grasse, une hauteur de ligne de 1,2, un espacement de ligne de 1 pixel et en minuscules.

Visualisation du fichier theme.json dans le plugin Create Block Theme

Ainsi, chaque fois que vous modifiez votre thème de bloc enfant, assurez-vous de cliquer sur l'icône de clé à molette et d'enregistrer vos modifications afin qu'elles soient bien documentées.

Comment modifier les fichiers de modèle d'un thème enfant

La plupart des thèmes WordPress ont des modèles, qui sont des fichiers de thème qui contrôlent la conception et la mise en page d'une zone spécifique à l'intérieur d'un thème. Par exemple, la section du pied de page est généralement gérée par le fichier footer.php, et l'en-tête est géré par le fichier header.php.

Chaque thème WordPress a également une disposition différente. Par exemple, le thème Twenty Twenty-One a un en-tête, une boucle de contenu, une zone de widgets de pied de page et un pied de page.

Si vous souhaitez modifier un modèle, vous devez trouver le fichier dans le dossier du thème parent et le copier dans le dossier du thème enfant. Après cela, vous devriez ouvrir le fichier et apporter les modifications souhaitées.

Par exemple, si vous utilisez Bluehost et que votre thème parent est Twenty Twenty-One, vous pouvez aller dans /wp-content/themes/twentytwentyone dans votre gestionnaire de fichiers. Ensuite, faites un clic droit sur un fichier modèle comme footer.php et sélectionnez « Copier ».

Copie de footer.php dans le gestionnaire de fichiers Bluehost

Après cela, entrez le chemin du fichier de votre thème enfant.

Une fois que vous avez terminé, cliquez simplement sur « Copier les fichiers ».

Saisie du chemin du fichier du thème enfant pour copier et coller footer.php dans le gestionnaire de fichiers Bluehost

Vous serez alors redirigé vers le chemin du fichier.

Pour modifier le fichier footer.php, faites simplement un clic droit dessus et sélectionnez « Modifier ».

Modification de footer.php dans le gestionnaire de fichiers Bluehost

À titre d'exemple, nous allons supprimer le lien « Fièrement propulsé par WordPress » de la zone du pied de page et y ajouter un avis de droit d'auteur.

Pour ce faire, vous devez supprimer tout ce qui se trouve entre les balises <div class= "powered-by"> :

<div class="powered-by">
				<?php
				printf(
					/* translators: %s: WordPress. */
					esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
					'<a href="' . esc_url( __( 'https://wordpress.org/', 'twentytwentyone' ) ) . '">WordPress</a>'
				);
				?>
			</div><!-- .powered-by -->

Ensuite, vous devez coller le code que vous trouverez sous ces balises dans l'exemple ci-dessous :

<div class="powered-by">
<p>© Copyright <?php echo date("Y"); ?>. All rights reserved.</p>
</div><!-- .powered-by -->

Voici ce que vous devriez maintenant avoir dans l'éditeur de texte :

Remplacement des liens de pied de page WordPress dans footer.php dans le gestionnaire de fichiers Bluehost

Allez-y et enregistrez le fichier pour officialiser les modifications.

Après cela, visitez votre site web pour voir la nouvelle notice de copyright.

Ajout d'un avis de droit d'auteur dynamique dans footer.php

Comment ajouter de nouvelles fonctionnalités à votre thème enfant

Le fichier functions.php d'un thème utilise du code PHP pour ajouter des fonctionnalités ou modifier les fonctionnalités par défaut d'un site WordPress. Il agit comme un plugin pour votre site WordPress qui est automatiquement activé avec votre thème actuel.

Vous trouverez de nombreux tutoriels WordPress qui vous demandent de copier-coller des extraits de code dans functions.php. Mais si vous ajoutez vos modifications au thème parent, elles seront écrasées chaque fois que vous installerez une nouvelle mise à jour du thème.

C'est pourquoi nous recommandons d'utiliser un thème enfant lors de l'ajout d'extraits de code personnalisés. Dans ce tutoriel, nous allons ajouter une nouvelle zone de widgets à notre thème.

Nous pouvons le faire en ajoutant cet extrait de code au fichier functions.php de notre thème enfant. Pour rendre le processus encore plus sûr, nous recommandons d'utiliser le plugin WPCode afin de ne pas modifier directement le fichier functions.php, ce qui réduit le risque d'erreurs.

Vous pouvez lire notre guide sur comment ajouter des extraits de code personnalisés pour plus d'informations.

Voici le code que vous devez ajouter à votre fichier functions.php :

// Register Sidebars
function custom_sidebars() {

$args = array(
'id'            => 'custom_sidebar',
'name'          => __( 'Custom Widget Area', 'text_domain' ),
'description'   => __( 'A custom widget area', 'text_domain' ),
'before_title'  => '<h3 class="widget-title">',
'after_title'   => '</h3>',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget'  => '</aside>',
);
register_sidebar( $args );

}
add_action( 'widgets_init', 'custom_sidebars' );

Une fois que vous avez enregistré le fichier, vous pouvez visiter la page Apparence » Widgets de votre tableau de bord WordPress.

Ici, vous verrez votre nouvelle zone de widget personnalisée à laquelle vous pouvez ajouter des widgets.

Création d'une zone de widget personnalisée pour un thème enfant

Il existe de nombreuses autres fonctionnalités que vous pouvez ajouter à votre thème en utilisant des extraits de code personnalisés. Consultez ces astuces extrêmement utiles pour le fichier functions.php de WordPress et ces extraits de code WordPress utiles pour les débutants.

Comment dépanner votre thème enfant WordPress

Si vous n'avez jamais créé de thème enfant auparavant, il y a de fortes chances que vous fassiez des erreurs, et c'est normal. C'est pourquoi nous vous recommandons d'utiliser un plugin de sauvegarde, de créer un site local ou un environnement de staging, et de utiliser du contenu factice pour votre site de démonstration.

Cela dit, n'abandonnez pas trop vite. La communauté WordPress est très ingénieuse, donc quel que soit le problème que vous rencontrez, une solution existe probablement déjà.

Pour commencer, vous pouvez consulter nos erreurs WordPress les plus courantes pour trouver une solution.

Les erreurs les plus courantes que vous rencontrerez probablement sont les erreurs de syntaxe causées par quelque chose que vous avez manqué dans le code. Vous trouverez de l'aide pour résoudre ces problèmes dans notre guide rapide sur comment trouver et corriger l'erreur de syntaxe dans WordPress.

De plus, vous pouvez toujours recommencer si quelque chose tourne très mal. Par exemple, si vous avez accidentellement supprimé quelque chose dont votre thème parent avait besoin, vous pouvez simplement supprimer le fichier de votre thème enfant et recommencer.

Nous espérons que cet article vous a aidé à apprendre comment créer un thème enfant WordPress. Vous voudrez peut-être aussi consulter notre guide ultime sur comment tester votre thème WordPress par rapport aux dernières normes et notre article comparatif sur les thèmes WordPress gratuits vs premium.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.

Avis : Notre contenu est financé par nos lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons percevoir une commission. Voir comment WPBeginner est financé, pourquoi c'est important et comment vous pouvez nous soutenir. Voici notre processus éditorial.

La boîte à outils WordPress ultime

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tout professionnel devrait posséder !

Interactions des lecteurs

108 CommentsLeave a Reply

  1. Cet article est incroyablement perspicace, surtout pour ceux d'entre nous qui débutent dans leur parcours WordPress. Je me souviens, quand j'ai commencé, j'ai sous-estimé l'importance d'utiliser un thème enfant et j'ai fini par perdre toutes mes personnalisations après une mise à jour du thème. Apprendre à la dure m'a fait apprécier la valeur d'un thème enfant pour préserver les modifications. Merci d'avoir souligné ce qu'il faut faire avant d'en créer un : ce guide évitera sûrement à de nombreux débutants des frustrations similaires !

  2. J'adore la flexibilité offerte par le thème enfant, car lorsque le thème parent est mis à jour, les modifications apportées au thème enfant sont conservées. J'aime aussi créer manuellement un thème enfant, car je crois que cela m'expose à des erreurs qui, à leur tour, augmenteront ma compréhension et mon expertise. On apprend quand on fait des erreurs.

    • Je suis tout à fait d'accord avec vous ! La flexibilité qu'offrent les thèmes enfants change la donne, surtout lorsqu'il s'agit de maintenir les personnalisations lors des mises à jour du thème parent. J'ai également apprécié de créer manuellement des thèmes enfants pour la même raison. Bien que cela puisse être un peu intimidant au début, j'ai constaté qu'en plongeant dans le code, non seulement j'améliore ma compréhension, mais je renforce également ma confiance en tant que développeur.

      Je me souviens, lorsque j'ai commencé à travailler avec des thèmes enfants, j'ai commis quelques erreurs en cours de route, comme oublier d'inclure correctement les styles ou modifier le fichier functions.php. Chaque erreur a été une précieuse opportunité d'apprentissage, m'aidant à mieux comprendre le fonctionnement des thèmes WordPress. De plus, savoir que mes personnalisations sont en sécurité pendant les mises à jour me donne la tranquillité d'esprit. C'est définitivement une compétence qui vaut la peine d'être développée ! Merci de partager vos réflexions ; c'est formidable de se connecter avec d'autres qui valorisent l'apprentissage pratique.

  3. Je n'ai jamais vraiment réfléchi aux thèmes enfants, pensant qu'ils n'étaient pas nécessaires. Avant de lire cet article, je ne savais pas que les fonctions personnalisées étaient supprimées du fichier functions.php lors de la mise à jour du thème. Pour moi, un thème enfant est indispensable si j'utilise un thème du répertoire de thèmes WordPress. Merci pour cet article informatif !

    • Excellent point sur les thèmes enfants. Il existe également une autre option à considérer… Certains thèmes premium offrent des panneaux de personnalisation qui évitent complètement la nécessité de modifier le code. Cependant, les thèmes enfants offrent plus de flexibilité à long terme, surtout si vous êtes à l'aise avec un peu de code.

    • La même chose m'est arrivée quand j'ai commencé, je n'ai pas du tout pris en compte le thème enfant auparavant, j'ai découvert plus tard à quel point il est utile, surtout lorsque j'ajoute plus de personnalisation au thème gratuit qui a des mises à jour fréquentes. Le fichier du thème enfant est chargé avant le thème parent, ce qui permet de préserver la personnalisation ajoutée.

  4. Merci pour ce guide complet. Je voudrais créer un thème enfant en utilisant la méthode du plugin mais j'ai encore quelques doutes sur certains points.
    Les codes du plugin WPCode prendront-ils effet sur le thème enfant ? Si le thème parent est mis à jour mais pas le thème enfant, ne peuvent-ils pas entrer en conflit et causer une erreur ?

    • Oui, le code dans WPCode apparaîtra sur votre thème enfant et si vous mettez à jour le thème parent, il y a une possibilité de conflit, mais ce n'est pas une garantie.

      Admin

    • Bonne question Monsieur Hajjalah.
      J'ai eu les mêmes préoccupations lorsque j'ai commencé à créer des thèmes enfants. En utilisant le plugin WPCode, le code devrait s'appliquer aux thèmes parent et enfant, tant qu'il est placé correctement. Cependant, si le thème parent est mis à jour et que le thème enfant ne l'est pas, il peut y avoir un conflit. J'ai eu un problème de mise en page à cause de cela une fois, mais la mise à jour et le test des mises à jour sur un site de staging m'ont aidé à éviter les erreurs.

  5. Un thème enfant est toujours la première chose que je crée sur un site nouvellement installé. Bien que j'essaie beaucoup d'utiliser WP Code et d'éviter les problèmes, le thème enfant est une chose absolument brillante lors de la mise à jour d'un modèle et peut éviter beaucoup de tracas avec du code perdu qui disparaît du modèle principal après une mise à jour.

    • You would want to use the code from our article below the text /* enqueue scripts and style from parent theme */ :)

      Admin

  6. Salut, équipe wpbeginner,
    Merci pour cet excellent guide, je pense maintenant que je suis capable de créer mon thème enfant, et c'est vraiment utile pour moi.

  7. La ligne :
    “wp_get_theme()->get(‘Version’) )”

    Devrait être :
    “wp_get_theme()->get(‘Version’) )”

    santé !

    • While our comments automatically changed that in your message, we see the issue, thank you for letting us know :)

      Admin

  8. Vous devez ajouter des guillemets à Y = (“Y”) dans l'écho date, sinon vous obtiendrez une erreur. – echo date(“Y”)

  9. Maintenant que nous avons créé un thème enfant, comment mettons-nous à jour le thème parent lorsque le thème enfant est activé ?

    • Vous mettriez à jour le thème parent comme vous le feriez normalement. Par sécurité, vous voudrez peut-être créer une sauvegarde avant de mettre à jour le thème parent au cas où il y aurait un conflit quelque part.

      Admin

      • Mais devons-nous activer le thème parent avant de le mettre à jour, puis le désactiver et réactiver le thème enfant ?

        • Non, vous pouvez mettre à jour le thème sans qu'il soit actif

  10. Une chose que je veux savoir, si nous créons un thème enfant, nous avons alors 2 fichiers CSS à charger, un CSS du thème parent et un deuxième CSS du thème enfant. Cela n'augmenterait-il pas le temps de chargement du site et n'ajouterait-il pas un CSS de plus à charger ?

    • Bien que le temps de chargement augmente techniquement, cela ne devrait pas être d'une quantité notable.

      Admin

  11. Je commence tout juste à utiliser les thèmes enfants, et cet article m'a été d'une grande aide.

    Merci beaucoup.

  12. Salut ! J'ai lu cet article et ça marche ! mais j'ai aussi lu la documentation de WordPress à ce sujet et ils disent ceci

    « Notez que la méthode précédente consistait à importer la feuille de style du thème parent à l'aide de @import : ce n'est plus une bonne pratique, car cela augmente le temps de chargement des feuilles de style. La méthode correcte pour mettre en file d'attente la feuille de style du thème parent consiste à ajouter une action wp_enqueue_scripts et à utiliser wp_enqueue_style() dans le functions.php de votre thème enfant. »

    Dois-je utiliser les deux méthodes ? ou si j'utilise le function.php, je n'ai pas besoin d'écrire la fonction d'importation dans style.css (situé dans le dossier de mon thème enfant)

  13. Vos instructions manquent une étape concernant la création du fichier functions.php. Il devrait être mentionné que doit envelopper tout le fichier. Dans ce cas, je ne voulais pas ajouter l'exemple que vous avez utilisé et un autre morceau de code de l'article que vous avez lié. Naturellement, ces codes n'incluaient pas la balise php.

    Merci pour l'article. C'est très, très utile.

  14. Donc, question. J'utilisais mon thème WordPress sans thème enfant et je faisais toutes les modifications dedans. J'ai créé un thème enfant grâce à votre guide et je l'utilise maintenant comme thème du site web.

    Mes modifications sont identiques dans les deux thèmes. Si je mets à jour le thème principal à partir de maintenant, les modifications affecteront-elles également le thème enfant ?

  15. Hé ! wpbeginner. Le site officiel de WordPress dit ceci. Vous devez mettre à jour le post. Merci !

    Notez que la méthode précédente consistait à importer la feuille de style du thème parent en utilisant @import : ce n'est plus la meilleure pratique, car cela augmente le temps de chargement des feuilles de style. La méthode correcte pour mettre en file d'attente la feuille de style du thème parent consiste à ajouter une action wp_enqueue_scripts et à utiliser wp_enqueue_style() dans le fichier functions.php de votre thème enfant. Vous devrez donc créer un fichier functions.php dans le répertoire de votre thème enfant. La première ligne du fichier functions.php de votre thème enfant sera une balise PHP ouvrante (<?php), après quoi vous pourrez mettre en file d'attente les feuilles de style de votre thème parent et enfant. La fonction d'exemple suivante ne fonctionnera que si votre thème parent n'utilise qu'un seul fichier style.css principal pour contenir tout le CSS. Si votre thème enfant a plus d'un fichier .css (par exemple, ie.css, style.css, main.css), vous devrez vous assurer de maintenir toutes les dépendances du thème parent.

  16. J'ai un thème enfant avec la dernière version du thème installée sur mon site. Version WP 4.7.5. J'ai reçu une notification indiquant qu'une nouvelle version de WP est disponible, veuillez mettre à jour maintenant.
    1. Dois-je sauvegarder mon site à nouveau avant de mettre à jour ?
    2. Dois-je créer un autre thème enfant en utilisant la version 1 du thème enfant ?
    2. Comment puis-je changer le nom, l'e-mail et l'URL pour la version 1 du thème enfant ?

    • Salut Alfonso,

      Les mises à jour de WordPress n'affectent normalement pas vos thèmes, vous n'avez donc pas besoin de créer un autre thème enfant. Vous devriez toujours sauvegarder votre site web avant de mettre à jour WordPress.

      Admin

  17. Bonjour, je vois que cette vidéo/ce post date de quelques années, donc j'arrive un peu tard, mais j'ai une question pour laquelle j'espérais que vous pourriez m'aider.
    Je suis relativement nouveau sur WP et je viens de réaliser l'importance des thèmes enfants. Je travaille au développement d'un site pour un ami et j'ai apporté plusieurs modifications au thème que j'utilise. J'ai trouvé un bug dans le thème et j'ai contacté le développeur du thème, qui m'a dit que le bug avait été corrigé dans une mise à jour récente.
    Si j'installe la mise à jour, je pense que je perdrai toutes mes personnalisations. Est-il trop tard pour créer un thème enfant ? Est-il possible de le faire maintenant, puis d'installer la mise à jour ? Je préférerais ne pas avoir à recommencer à zéro.

    • Salut Lisa,

      Si vous savez quelles modifications vous avez apportées et à quels fichiers, téléchargez d'abord une sauvegarde de votre thème existant sur votre ordinateur. Après cela, installez la version mise à jour. Vous pouvez maintenant créer un thème enfant, puis copier-coller le code de votre version personnalisée dans le thème enfant.

      Admin

  18. Merci pour ce post utile. J'ai toujours cherché une vidéo pour me montrer exactement comment utiliser un thème enfant. C'est assez long de devoir tout refaire à chaque fois que je mets à jour mon thème, tous mes styles disparaissent. C'est frustrant de tout recommencer. J'ai essayé de lire la documentation de WordPress mais je ne sais toujours pas comment procéder après avoir activé le thème enfant. Continuez votre bon travail ! Merci encore !

  19. Bonne vidéo d'instruction. La plupart des tutoriels que j'ai regardés vous disent de coller le code dans le fichier, mais ils oublient de vous dire dans quel support coller le code. J'allais utiliser Notepad++, mais je suppose que vous pouvez utiliser le bloc-notes normal.

  20. Bonjour, je veux juste dire que vous êtes un très bon écrivain, très clair et simple. J'ai passé beaucoup de temps sur votre article pour apprendre WP.

    Merci !

  21. Salut. Merci d'être une excellente ressource WP. Je suis nouveau sur WP et j'apprécie vraiment vos conseils. J'ai suivi l'article à la lettre, mais lorsque je vais activer le modèle enfant sur le site, j'obtiens l'erreur « Le thème parent est manquant. Veuillez installer le thème parent « Real Estate Lite ». Comme vous pouvez le voir, j'utilise un modèle gratuit appelé Real Estate light. il est situé dans le répertoire ../real-estate-lite/ de wp-content/themes. Mon code est ci-dessous… ai-je fait quelque chose de mal ?

    Theme Name:   Real Estate Lite Child Theme
    Theme URI:    http://www.example.com/
    Description:  Real Estate Lite child theme
    Author:       me
    Author URI:   http://www.example.com
    Template:     Real Estate Lite
    Version:      1.0.0
    */
    @import url("../real-estate-lite/style.css");
    

    De plus, je mentionnerai que le thème était gratuit et fonctionne sur la version WP 4.7.2 (fonctionne sur Plesk). J'ai créé le fichier style.css directement sur le serveur, donc pas de problèmes FTP.

    J'ai déjà apporté des modifications importantes au fichier style.css parent ainsi qu'à functions.php… Je ne suis pas sûr si cela affecterait cela, mais je vais tester sur un domaine factice non édité pour voir si j'obtiens les mêmes résultats.

    Toute aide/assistance que vous pourrez fournir sera grandement appréciée.

    • Salut Rob,

      Vous aurez besoin que le thème parent soit installé sur votre site et que la valeur Template corresponde au nom réel du thème parent, que vous pouvez voir dans son fichier style.css.

      Admin

  22. Salut ! Excellent article ! Je commence enfin à comprendre comment modifier le CSS pour obtenir le résultat souhaité, grâce à cet article.

    Merci beaucoup pour l'explication simplifiée !

  23. J'ai créé un thème enfant et j'utilise @import pour le "style.css" sur un thème enfant. Maintenant, je veux changer dans un autre fichier CSS du dossier du thème parent... /font_awesome/css/fontawesome.css
    Maintenant, je veux savoir où je vais mettre mon nouveau fontawesome.css dans le thème enfant et comment utiliser la commande @import.
    ou tout autre processus pour utiliser plus de fichiers CSS dans le thème enfant.

  24. Je n'ai donc pas le dossier wp-content sur mon ordinateur. Que dois-je faire ?
    Aurais-je dû le télécharger à un moment donné ?

    • Alors quelle est la meilleure pratique maintenant ? Vous devriez être en mesure de sauvegarder votre commentaire.

  25. J'apprends tellement depuis quelques heures sur votre site Web. Chaque fois que je recherche quelque chose sur Google lié à « comment faire » dans WordPress, je constate que les meilleures informations se trouvent ici sur WPbeginner. C'est toujours bien expliqué et facile à comprendre. Je reviendrai toujours ici pour obtenir des informations sans aucun doute.

  26. Je sais que ce sera une question stupide. Je suis tellement nouveau dans ce domaine et je n'ai aucune compétence. Si je crée un fichier, une feuille de style, etc. sur mon installation WordPress sur mon PC local, comment cela arrive-t-il sur mon site Web ? Je suppose que c'est ce qui me manque ? J'utilise environ 3 PC différents pour travailler sur mon site Web et ces fichiers locaux ne sont pas sur tous. Encore une fois, je suis sûr qu'il me manque quelque chose de vraiment idiot. Je ne vois pas le lien.

  27. Bonjour,
    Je suis votre tutoriel mais WordPress (4.5.3) ne reconnaît pas le nouveau dossier sur mon serveur en ligne. Comment puis-je contourner ce problème ?
    Merci,
    F.

  28. Bonjour, merci pour le tutoriel, très utile. Mais j'ai une question. Puis-je créer un thème enfant à partir d'un site web déjà établi ? J'ai un client qui a conçu son propre site web mais n'a pas créé de thème enfant. Comment procéder ?

  29. Merci beaucoup pour l'article et la vidéo. Apparemment, depuis leur création, WordPress a de nouvelles meilleures pratiques listées dans son codex, ce qui me confond.

    « La dernière étape consiste à mettre en file d'attente les feuilles de style du thème parent et du thème enfant. Notez que la méthode précédente consistait à importer la feuille de style du thème parent à l'aide de @import : ce n'est plus une bonne pratique. »

    Dois-je suivre les étapes que vous avez décrites ici de manière verbeuse, ou dois-je omettre la fonction d'importation et créer le fichier PHP, ou dois-je implémenter les deux ?

    Le fichier style.css de mon thème ne contient qu'un en-tête, donc l'importation de ce fichier semble inutile, et il y a plusieurs fichiers CSS comme main.css situés ailleurs dans la structure de fichiers du parent. Ne sachant rien de mieux en tant que débutant, j'ai déjà apporté des modifications à main.css pour atteindre certains de mes objectifs et ce n'est que maintenant que je réalise que le thème enfant est nécessaire.

    Tout conseil est grandement apprécié.

    Cordialement,

    Mike

    • Vous devrez importer au moins votre fichier style.css, il devrait se trouver dans le répertoire principal de votre thème parent. Il devrait importer automatiquement d'autres fichiers CSS.

      Admin

        • Si votre fichier style.css n'a pas d'importations vers d'autres styles CSS, vous pouvez les importer directement, tout comme style.css.

  30. Bonjour. Lorsque j'ai fait un aperçu en direct du thème enfant, j'ai remarqué qu'il n'avait pas le CSS du thème parent. Est-ce peut-être le résultat d'une erreur dans la façon dont j'ai inséré le code ?
    Voici le code que j'ai inséré :
    /*
    Theme Name: sparkling child
    Theme URI: https://www.wpbeginner.com/
    Description: sparkling child theme
    Author: djetlawyer
    Author URI: http://www.example.com
    Template: sparkling
    Version: 1.0.0
    */
    @import url("../sparkling/style.css");

    Le thème parent est "sparkling". S'il y a une erreur, veuillez me corriger.
    Merci.

  31. Bonjour,
    J'essaie de configurer un thème enfant pour activer mon pied de page sur twenty twelve, mais je ne sais pas quel code utiliser pour le configurer.
    J'ai essayé cette page web

    avec diverses suggestions, et j'ai essayé de modifier votre suggestion telle que donnée en vingt treize, mais je n'y parviens pas.
    Pourriez-vous s'il vous plaît me donner le bon code fonctionnel pour configurer un thème enfant pour douze douze.

  32. C'était incroyablement utile – surtout votre HTML à copier. Je n'ai jamais été aussi excitée de voir les couleurs changer sur un site web auparavant. C'est de loin le meilleur « comment faire » pour ce thème !

  33. Bonjour, j'ai essayé le même exemple que vous avez montré. Mais mon thème enfant remplace tout le style de son thème parent.
    Il n'a aucun style de son parent. Quelle est la solution ? Pouvez-vous m'aider s'il vous plaît ? Je suis nouveau dans WordPress et j'apprends.

  34. Salut !

    Je viens d'installer le modèle Bose et j'ai également créé un thème enfant pour celui-ci. Cependant, le message d'erreur suivant apparaît au centre de mon site web :

    Attention : implode(): Arguments invalides passés dans /home/hello582/public_html/teste/wp-content/themes/bose/featured.php à la ligne 12

    Je suis un grand débutant dans la création de sites web, donc je n'ai aucune idée de ce qu'est le problème. Quelqu'un pourrait-il m'aider ?

    Merci beaucoup !

  35. Bonjour,

    Merci pour l'article ! Je n'arrivais pas à faire apparaître mon thème enfant dans la section des modèles et il s'est avéré que j'avais mal orthographié le nom du modèle original. Quelle différence une majuscule peut faire, hein ?
    Cependant, maintenant que j'ai mon thème enfant, j'ai pu mettre à jour le thème parent et quand je l'ai fait, j'ai soudainement eu un problème avec un plugin super important (je suis en train de construire un blog de critiques sur une base de données locale, pour l'instant, et c'est le plugin de récapitulatif/notation des concepteurs du modèle).
    Dans le modèle parent, ils ont "mis à jour" ce plugin. Je préfère personnellement l'ancien, mais bon... bref... sous ma critique, je vois maintenant *les deux*, l'ancien récapitulatif avec les notes et le nouveau, qui a l'air aussi décalé. J'ai désactivé et réactivé, mais ça reste comme ça. Super énervant et je ne sais pas où chercher pour garder l'ancien (plus joli) ou seulement le nouveau et les plans comme il se doit.

    Par où dois-je commencer ? Merci pour toute aide que vous pourrez m'apporter.

  36. Merci pour cet excellent article !

    Si j'utilise un thème enfant, pourrai-je toujours le personnaliser en utilisant les Options du thème > Apparence qui accompagnent mon thème dans le panneau d'administration, comme la taille de la police, les couleurs d'arrière-plan, etc., ou dois-je passer par le code ?

    Si j'ai activé le thème enfant et que j'utilise l'onglet Apparence pour mettre à jour le style au lieu d'utiliser le code, est-ce que cela met toujours à jour le thème parent car les fichiers associés ne sont pas dans le dossier du thème enfant ?

      • Merci pour votre réponse.

        Donc, si j'active le thème enfant et que j'utilise les paramètres de l'onglet Apparence de mon panneau d'administration pour modifier le style (au lieu d'écrire du code CSS), mes modifications ne seront-elles pas écrasées lorsque je mettrai à jour le thème parent ou WordPress ?

        Aurais-je encore besoin de copier les fichiers de feuille de style, d'en-tête, de pied de page, etc. dans le dossier du thème enfant pour que le scénario ci-dessus fonctionne ?

  37. J'ai suivi ces étapes (et d'autres) pour créer un thème enfant basé sur twentytwelve. Le problème que je rencontre est que WordPress semble ignorer seulement une partie du CSS que j'ai modifié par rapport au thème d'origine et cela me rend fou. Par exemple, j'ai réussi à changer la couleur de fond du menu, mais il ne me permet tout simplement pas de changer les couleurs du texte de quoi que ce soit. J'ai utilisé votre approche consistant à le modifier dans l'outil d'inspection de code de Chrome (ce qui a très bien fonctionné, la couleur a été changée, suggérant que mon code était correct) et à coller le code modifié dans le style.css du thème enfant, mais il ne semble pas être pris en compte du tout. Je ne sais pas quoi faire à ce sujet, toute idée serait très appréciée !

  38. Merci beaucoup pour ce tutoriel. Je n'ai aucun problème à modifier la feuille de style, l'en-tête et le pied de page de mon thème enfant.

    Ma question est, que dois-je faire si je voulais changer quelque chose dans un fichier situé dans le dossier de mon thème parent, comme : public_html/wp-content/themes/shopera/woocommerce ?

    Dois-je créer le même chemin dans mon thème enfant ?

    Merci d'avance...

  39. Très utile et largement compris et exécuté.
    J'essaie de faire en sorte que mon image d'en-tête soit pleine largeur. Mon thème ne le « permet » pas en standard, donc dois-je changer le fichier ?
    Merci

  40. Salut !

    Il semble que je sois un peu bloqué. J'ai déjà apporté quelques modifications dans certains fichiers .php (par exemple, header.php, footer.php, etc.) de mon thème parent sans avoir de thème enfant installé.
    Je veux maintenant créer un thème enfant car des mises à jour du thème parent sont arrivées. Que dois-je faire de tous ces fichiers déjà modifiés ? Dois-je les copier dans le répertoire du thème enfant ? Quels dossiers dois-je y avoir ? Dois-je créer les mêmes dossiers que le thème parent a pour le thème enfant ?

    Merci,

    • Vous n'avez pas besoin de tous les dossiers de votre thème parent. Il vous suffit de recréer les fichiers où vous avez apporté des modifications. Nous avons un tutoriel sur la façon de mettre à jour les thèmes sans perdre les modifications. Il contient une section où vous pouvez découvrir quels fichiers vous avez modifiés dans votre thème et quelles modifications vous y avez apportées.

      Téléchargez une copie fraîche de votre thème parent sur votre ordinateur. Téléchargez l'ancien thème sur votre ordinateur, puis téléchargez la copie fraîche. Après cela, créez un nouveau thème enfant. Copiez les fichiers où vous avez apporté des modifications du thème fraîchement téléchargé vers votre thème enfant. Copiez les modifications que vous avez apportées dans les fichiers de l'ancien thème dans les fichiers de votre nouveau thème enfant.

      Cela nécessitera un peu de dépannage avant que vous n'y arriviez. Nous vous recommandons donc vivement de sauvegarder votre site d'abord. Si possible, testez vos modifications sur une installation WordPress locale d'abord.

      Admin

      • Merci. Pourriez-vous s'il vous plaît me donner un lien vers le tutoriel mentionné ?
        Il y a un autre obstacle – j'ai modifié le fichier functions.php, comment puis-je concilier les deux dans les thèmes parent et enfant ?

Laisser un commentaire

Merci d'avoir choisi de laisser un commentaire. N'oubliez pas que tous les commentaires sont modérés conformément à notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.