La personnalisation d'un thème WordPress existant est un besoin courant, mais la modification directe du thème peut entraîner des problèmes. 

Si le thème est mis à jour, vos modifications seront écrasées ! Une meilleure façon consiste à créer un thème enfant hérité du thème parent. 

Les thèmes enfants vous permettent de modifier et d'étendre un thème en toute sécurité. 

Dans ce guide détaillé, nous aborderons la création d'un thème enfant dans WordPress. Vous apprendrez à quoi servent les thèmes enfants, comment en créer un et comment le personnaliser pour remplacer la conception et les fonctionnalités du thème parent. 

Avec quelques méthodes, vous pouvez créer un thème enfant et commencer à appliquer vos modifications sans toucher aux fichiers du thème parent. 

Alors, sans plus tarder, commençons.

1 Qu'est-ce qu'un thème enfant ?

Un thème enfant est un thème WordPress qui hérite des fonctionnalités d'un thème parent. Il vous permet de modifier ou d'ajouter de nouvelles fonctionnalités sans modifier les fichiers de thème parents. 

Ceci est utile car si vous modifiez directement les fichiers du thème parent, vos modifications seront perdues lors de la mise à jour du thème. 

Avec un thème enfant, vous pouvez apporter des modifications sans affecter le thème parent et recevoir des mises à jour sans perdre vos modifications.

Dans cette section, vous remarquerez que nous avons mentionné le thème parent, mais de quoi s'agit-il exactement ?

2 Qu'est-ce qu'un thème parent ?

Un thème parent est un thème prédéfini qui sert de base à un site Web WordPress. Il fournit le structure basique, la mise en page et les fonctionnalités du site. 

Un thème parent peut être personnalisé pour répondre aux besoins d'un site Web particulier en ajoutant ou en modifiant ses fonctionnalités. 

L'utilisation d'un thème parent peut permettre d'économiser du temps et des efforts lors de la création d'un site Web, fournissant ainsi un point de départ pour la conception et les fonctionnalités.

À ce stade, nous pouvons dire que tous les thèmes WordPress sont techniquement des thèmes parents, à moins qu’ils ne soient spécifiquement conçus pour être un thème enfant.

Voici un point clé à retenir : Un thème parent peut exister et fonctionner indépendamment, tandis que un thème enfant repose toujours sur un thème parent pour fournir les fonctionnalités et fonctionnalités de base.

3 Pourquoi utiliser un thème enfant ?

Il existe quelques raisons clés d’utiliser un thème enfant plutôt que de modifier directement un thème :

• La création d'un thème enfant protège vos modifications contre l'écrasement lorsque le le thème parent est mis à jour.
• Il maintient les fichiers de thème parent et enfant séparés. Cela permet d'éviter toute confusion puisque les fichiers sont organisés.
• Plusieurs thèmes enfants peuvent être utilisés à différentes fins, comme modifier des styles ou des fonctionnalités. Mais notez qu’un site Web ne peut avoir qu’un seul thème actif à la fois.
• C'est également un excellent moyen de commencer à développer un nouveau thème WordPress complet.

Remarque: Des personnalisations étendues dans un thème enfant peuvent entraîner des problèmes de gestion. Pour les projets plus importants, il est souvent préférable de créer un thème complet/parent basé sur le thème original plutôt que de continuer à modifier le thème enfant.

4 Pré-requis pour créer un thème enfant

Avant de créer un thème enfant, il est important de mettre en place certaines exigences. 

Tout d’abord, vous avez besoin d’une installation WordPress fonctionnelle et d’un thème parent pour lequel vous souhaitez créer un thème enfant. 

Il est également utile de comprendre HTML, CSS et PHP, car vous modifierez le code pour personnaliser le thème enfant. 

En outre, vous devriez pouvoir copier et coller des extraits de code provenant d’autres sources. 

Il est recommandé de s'entraîner dans un environnement de développement local en utilisant du contenu factice ou en déplaçant un site WordPress en direct vers un serveur local à des fins de test. Cela vous permet de tester votre thème enfant avant de l'implémenter sur un site en direct.

Enfin, il est important d'avoir un sauvegarde du site au cas où quelque chose se passerait mal pendant le processus.

Ainsi, une fois que vous avez défini toutes ces exigences, vous pouvez créer un thème enfant. Tout ce que vous avez à faire est de suivre le processus de configuration du thème enfant décrit dans ce guide.

Mais pour ce guide, nous utiliserons le thème WordPress par défaut Twenty Twenty-four.

5 Créer un thème enfant dans WordPress

Maintenant que vous comprenez le concept des thèmes enfants, passons à la création d'un thème enfant dans WordPress. 

Nous explorerons deux méthodes courantes parmi lesquelles choisir, adaptées à différents niveaux de confort :

5.1 Créer un thème enfant à l'aide d'un code

Tout d’abord, accédez à votre installation WordPress via FTP ou un gestionnaire de fichiers fourni par votre panneau de contrôle d’hébergement. Accédez au wp-content/themes répertoire et créez un nouveau dossier avec un nom unique pour votre thème enfant. 

Pour ce tutoriel, nous utiliserons le nom « mtschild » pour le dossier du thème enfant.

Ce répertoire fait office d'espace de stockage principal pour les composants de votre thème enfant.

Dans le dossier du thème enfant, créez un nouveau fichier intitulé style.css. Ce fichier contiendra les détails essentiels pour reconnaître et activer votre thème enfant. Ouvrez le fichier style.css et insérez le code suivant :

Theme Name: MTS Child Theme
Theme URI: https://www.mythemeshop.com/
Description: Child theme for the Twenty Twenty-Four Theme
Author: MyThemeShop
Author URI: https://www.mythemeshop.com
Template: twentytwentyfour
Version: 1.0.0
Text Domain: mtschild

Ce code informe WordPress que votre thème enfant étend le thème parent spécifié. Remplacez « Thème enfant MTS » par le nom de votre thème enfant préféré et le champ du modèle par le nom du dossier du thème parent.

L'étape suivante consiste à garantir que votre thème enfant hérite des styles du thème parent. Pour y parvenir, vous devez mettre en file d'attente la feuille de style du thème parent.

Pour ce faire, accédez au fichier function.php dans le répertoire de votre thème enfant (créez-en un s'il est absent) et implémentez l'un des codes suivants.

Si votre thème parent ne charge aucune feuille de style, utilisez le code suivant pour charger style.css via function.php :

<?php
add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' );
function mts_child_theme_enqueue_styles() {
wp_enqueue_style( 'mts_child_theme-style', get_stylesheet_uri() );
}

Ce code peut également fonctionner si le thème parent charge uniquement sa feuille de style. 

Cependant, si le thème parent charge uniquement la feuille de style du thème actif, vous devez également mettre en file d'attente la feuille de style du thème parent via functions.php en utilisant le code ci-dessous :

<?php
add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' );
function mts_child_theme_enqueue_styles() {
	wp_enqueue_style( 'mts-child-theme-parent-style', get_parent_theme_file_uri( 'style.css' ) );
}

Pour le thème Twenty Twenty-Four utilisé dans ce guide, nous appliquerons le premier code puisque le thème ne charge aucune feuille de style. 

N'oubliez pas de commencer par le <?php balise lors de l’ajout du code. Modifiez ces codes selon vos besoins, en particulier là où le nom du thème mts_child_theme est utilisé.

Une fois que vous avez terminé les étapes ci-dessus, reconnectez-vous à votre tableau de bord WordPress et passez à Apparence → Thèmes. Passez la souris sur le thème enfant et cliquez sur le bouton Activer .

Puisque vous n’avez encore apporté aucune modification à votre thème enfant, votre site Web conservera la fonctionnalité et l’apparence de son thème parent. 

Cependant, nous vous guiderons dans la personnalisation du thème enfant pour vous préparer à d'autres modifications.

Il s'agit du processus manuel de création d'un thème enfant à l'aide de code dans WordPress. Si cette méthode semble complexe, vous pouvez explorer l'approche plugin que nous aborderons dans la section suivante.

5.2 Créer un thème enfant à l'aide d'un plugin

Créer un thème enfant à l’aide d’un plugin est simple et facile. Tout d'abord, vous devez installer et activer le Configurateur de thème enfant brancher. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Une fois le plugin activé, accédez au tableau de bord WordPress et accédez à Outils → Thèmes enfants.

Sur le Sélectionnez un onglet Thème parent, choisissez le thème parent dans le menu déroulant pour la création du thème enfant. Généralement, le thème actif sur votre site est présélectionné.

Ensuite, cliquez sur le Analysez bouton. Le plugin examinera le thème parent sélectionné pour déterminer s'il peut générer un thème enfant et s'il nécessite son fichier style.css pour apparaître.

Ensuite, attribuez un nom à votre thème enfant. Vous pouvez adapter la feuille de style, les fonctions et autres configurations à votre guise. 

Cependant, évitez de modifier les paramètres jusqu'à ce que vous atteigniez la section 7.

Dans la section 7, cliquez sur le bouton intitulé Cliquez pour modifier les attributs du thème enfant.

À partir de là, vous pouvez saisir les détails de votre thème enfant.

Lors de la création manuelle d'un thème enfant, vous risquez de perdre les menus et widgets du thème parent. 

Cependant, le plugin Child Theme Configurator peut les transférer du thème parent vers le thème enfant. 

Si vous souhaitez procéder ainsi, cochez la case dans la section 8. Enfin, cliquez sur le bouton Créer un nouveau thème enfant bouton pour créer le thème enfant.

Une fois terminé, le plugin créera un dossier pour votre thème enfant contenant les fichiers style.css et function.php essentiels pour une personnalisation future.

Avant d'activer le thème, prévisualisez-le en cliquant sur le lien « Prévisualiser votre thème enfant » en haut de l'écran pour vérifier son apparence et vous assurer qu'il n'affecte pas négativement votre site.

Après avoir vérifié que tout fonctionne correctement, cliquez sur le bouton Activer et publier bouton. Cela fera vivre votre thème enfant sur votre site Web.

Une fois que vous avez activé votre thème enfant sur votre site Web, il est temps de commencer à le personnaliser. Nous aborderons cela dans la section suivante.

6 Comment personnaliser votre thème enfant

Avant de vous lancer dans la personnalisation, identifiez les éléments de votre site Web que vous souhaitez modifier, tels que les styles, les modèles, les fonctions, les zones de widgets ou les modèles de pages personnalisés. 

Avoir une vision claire de vos objectifs rationalisera le processus de personnalisation. Il existe différentes méthodes pour personnaliser votre thème enfant, notamment :

6.1 Personnalisation des styles avec CSS

Le fichier style.css de votre thème enfant sert de plate-forme pour peaufiner l'apparence de votre site Web. Ici, vous pouvez insérer des règles CSS personnalisées pour modifier ou améliorer les styles du thème parent.

Avant de continuer, une compréhension de base du HTML et du CSS est nécessaire. 

Vous pouvez utiliser efficacement l'outil Inspecter de votre navigateur ou copier directement les styles à partir du fichier style.css du thème parent.

Pour accéder aux codes CSS d'une page Web à l'aide de votre navigateur, faites simplement un clic droit sur la page et sélectionnez Inspecter parmi les options qui apparaissent. Cet outil affiche les codes de style CSS, vous permettant d'identifier les éléments que vous souhaitez modifier.

Lorsque vous cliquez avec le bouton droit et sélectionnez « Inspecter », l'écran de votre navigateur bifurque, affichant le HTML et le CSS de la page. 

Selon les paramètres de votre navigateur, les détails HTML et CSS peuvent apparaître soit sur le côté droit, soit en bas de l'écran.

Lorsque vous survolez différentes lignes HTML, l'inspecteur Chrome les mettra en surbrillance dans l'onglet Éléments et affichera les règles CSS correspondantes liées à l'élément en surbrillance.

Vous pouvez expérimenter en modifiant directement le CSS pour prévisualiser son apparence. Par exemple, si vous souhaitez modifier la couleur d'arrière-plan de la page d'accueil par défaut du thème Twenty Twenty-Four de #f9f9f9 à #6841ea.

Une fois que vous avez ajusté la couleur d’arrière-plan dans l’inspecteur du navigateur, la modification est temporaire. Pour la rendre permanente, vous devez transférer cette règle CSS dans le fichier style.css de votre thème enfant :

body {
background-color: #6841ea;
}

Après avoir inséré le code, pensez à sauvegarder vos modifications. Vous pouvez reproduire ce processus pour tout autre élément de page Web que vous souhaitez personnaliser.

Par exemple, disons que vous souhaitez modifier les couleurs de votre site Web. Nous pouvons vous fournir quelques codes CSS qui vous permettront de le faire.

Pour changer la couleur du texte en gris foncé, ajoutez le code suivant à votre fichier CSS :

body { color: #3b3b3b; } 

Pour changer la couleur du titre en bleu, utilisez le code suivant :

h1, h2, h3 { color: #007bff; }

Pour la couleur de fond de l'en-tête, utilisez le code suivant :

#header { background-color: #f5f5f5; } /* Light grey background for header */

Et pour la zone de contenu, utilisez ce code pour définir la couleur d'arrière-plan sur blanc :

.site-container { background-color: #fff; } 

Vous pouvez copier ces styles CSS dans le fichier style.css de votre thème enfant soit via le répertoire de thèmes enfants de votre site Web, soit depuis votre tableau de bord WordPress.

Lorsque vous ajoutez votre code CSS, il ressemblera à ce format :

Après avoir enregistré vos modifications, essayez d'actualiser la page de votre site Web. Si les modifications n'apparaissent pas, videz le cache de votre navigateur pour vous assurer que vous consultez la dernière version du CSS.

6.2 Remplacement des fichiers modèles

Alors que la personnalisation CSS contrôle l'apparence de votre site Web, les thèmes enfants offrent une fonctionnalité plus robuste : remplacer les fichiers modèles.

Cette fonctionnalité avancée vous permet de remodeler la mise en page et structure des pages de votre site Web et des éléments. Cependant, soyez prudent car cela nécessite une compréhension plus approfondie des modèles WordPress, du HTML et du PHP.

Pour remplacer un modèle, copiez le fichier .php original du dossier du thème parent vers votre thème enfant, en conservant le nom de fichier exact. 

Par exemple, pour remplacer header.php, vous devez copier le fichier header.php du répertoire /parent-theme/ et le coller sous header.php dans le répertoire /child-theme/.

Vous pouvez maintenant modifier le header.php dans votre thème enfant.

Quelques modèles courants à remplacer :

• header.php – Contient balise et image de marque du site, navigation, etc.
• footer.php – La clôture balise et balisage.
• page.php - Modèle par défaut pour les pages.
• single.php – Modèle utilisé pour les publications uniques.
• index.php – Modèle de page d’accueil.

Par exemple, vous pouvez modifier footer.php en affichant un copyright personnalisé pour votre site :

<!-- Modified child footer.php -->

<footer>
  <p>&copy; <?php echo date('Y'); ?> My Company</p>

  <?php if ( is_active_sidebar('footer-1') ) : ?>
    <?php dynamic_sidebar('footer-1'); ?>
  <?php endif; ?>

</footer>

6.3 Extension des fonctionnalités

La functions.php Le fichier dans le thème enfant vous permet d'introduire de nouvelles fonctions PHP, des hooks, des filtres et du code pour développer les fonctionnalités par défaut du thème parent.

Cette flexibilité vous permet d'enregistrer des types de publication personnalisés, d'incorporer des widgets personnalisés, de créer de nouveaux codes courts, de mettre en file d'attente des scripts supplémentaires, et bien plus encore.

Par exemple, si vous souhaitez une section dédiée sur votre site WordPress pour les widgets personnalisés, utilisez l'extrait de code suivant pour créer une zone de widget nommée « Zone de widget personnalisée » :

function register_custom_widget() {
    register_sidebar( array(
        'name'          => 'Custom Widget Area',
        'id'            => 'custom_widget_area',
        'description'   => 'Add widgets here to appear in the custom widget area',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'register_custom_widget' );

Après avoir enregistré ce code dans le fichier function.php de votre thème enfant, revenez à votre site WordPress et accédez Apparence → Widgets. Vous remarquerez le widget « Zone de widget personnalisé » disponible.

7 Foire aux Questions

8 Conclusion

Créer un thème enfant dans WordPress est une compétence précieuse qui peut vous aider à personnaliser votre site Web sans risquer de perdre vos modifications lors des mises à jour du thème. Même si cela peut paraître intimidant au début, n’abandonnez pas trop vite si vous faites des erreurs. 

Les erreurs les plus courantes que vous pourriez rencontrer sont des erreurs de syntaxe causées par quelque chose manquant dans le code. Si quelque chose ne va pas, vous pouvez toujours recommencer. 

Par exemple, si vous supprimez accidentellement quelque chose dont votre thème parent a besoin, vous pouvez simplement supprimer le fichier de votre thème enfant et recommencer. 

N'oubliez pas qu'avec un peu de persévérance, la création d'un thème enfant peut vous donner la flexibilité nécessaire pour créer une apparence unique pour votre site Web tout en conservant la stabilité et la sécurité de votre thème parent.

Alors essayez-le et voyez la différence qu’il peut apporter à votre site Web WordPress.

Nous espérons que ce guide vous a aidé à créer un thème enfant pour votre site Web. Si oui, faites-le-nous savoir par Tweeter @rankmathseo.

• Contenu propulsé par le référencement et distribution de relations publiques. Soyez amplifié aujourd'hui.
• PlatoData.Network Ai générative verticale. Autonomisez-vous. Accéder ici.
• PlatoAiStream. Intelligence Web3. Connaissance Amplifiée. Accéder ici.
• PlatonESG. Carbone, Technologie propre, Énergie, Environnement, Solaire, La gestion des déchets. Accéder ici.
• PlatoHealth. Veille biotechnologique et essais cliniques. Accéder ici.
• La source: https://rankmath.com/blog/wordpress-child-theme/