Comment créer un thème enfant WordPress

2 minutes de lecture
Jiangsu
2025-08-22
2025-10-29
2,995
Je reçois une commission lorsque vous achetez via les liens ci‑dessous, sans frais supplémentaires pour vous.

Vous personnalisez votre thème WordPress, mais vous souhaitez le sécuriser au maximum ? Ne vous inquiétez pas. Nous avons tout ce qu'il vous faut. Lisez l'article suivant et vous serez en mesure de personnaliser votre thème WordPress à l'aide d'un thème enfant WordPress. Le rôle d'un thème enfant WordPress est de sauvegarder vos personnalisations dans un dossier différent afin que la mise à jour de votre thème parent ne l'endommage pas.

Que signifie "sous-thème" ?

Fondamentalement, un thème enfant est le reflet d'un thème quelconque. L'idée est que, quelles que soient les modifications apportées au thème enfant, votre thème parent ne sera pas affecté, mais que toute modification apportée au thème parent sera répercutée dans le thème enfant.

Si vous devez utiliser un thème enfant

Il ne fait aucun doute que l'utilisation d'un thème enfant est le moyen le plus sûr de modifier un thème. L'avantage est que même si votre thème parent est mis à jour, vos modifications ne seront pas supprimées. Si vous avez des difficultés à modifier un thème enfant, vous pouvez facilement le supprimer pour revenir au thème parent.

Mise en place d'un thème enfant WordPress

Vous pouvez créer des thèmes enfants WordPress manuellement ou à l'aide de plugins.

Une chose dont vous devez vous souvenir, c'est que cela ne fonctionnera pas tant que votre thème parent n'apparaîtra pas dans la page Thèmes sous Apparence.

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

#1Tout d'abord, vous devez créer un nouveau dossier et le nommer selon vos souhaits, par exemple “twentytwentyfour-child”.

#2 :Ensuite vous devez créer un fichier et le nommer “style.css”, notez que ce fichier doit exister.

#3Vous devez maintenant ouvrir ce fichier récemment créé et y saisir les informations suivantes.

/*
Theme Name:     Twenty Twenty-Four Child
Theme URI:      https://example.com/twentytwentyfour-child/
Description:    This is a child theme for Twenty Twenty-Four, created by me.
Author:         Your Name
Author URI:     https://example.com
Template:       twentytwentyfour
Version:        1.0.0
*/

Explication des paramètres clés.

  • Theme Name:.(obligatoire)Le nom de votre thème enfant.
  • Template:.(obligatoire)ceci estle plus critiqued'une ligne. Il doitcorrespondance parfaiteLe nom du répertoire de la rubrique parente. Par exemple, le sujet parent est twentytwentyfourRemplissez ici les blancs. twentytwentyfourLe thème parent est DiviRemplissez ici les blancs. Divi.Le dossier doit être cohérent
  • DescriptionDescription du sous-thème : Une brève description du sous-thème.
  • AuthorVotre nom.
  • Author URIAdresse de votre site web.
  • Version: Le numéro de version du sujet secondaire.

Bien que la feuille de style CSS du thème enfant soit chargée automatiquement, la feuille de styleIl n'hérite pas automatiquement de tous les styles du thème parent. Une pratique très courante et recommandée pour disposer d'un point de départ complet et fiable pour vos sous-thèmes est la suivante.Importez d'abord la feuille de style complète du thème parent

Vous pouvez ajouter un CSS personnalisé à votreau préalableUtilisation @import pour qu'il en soit ainsi.

/*
Theme Name:     Twenty Twenty-Four Child
Theme URI:      https://www.likacloud.com/twentytwentyfour-child/
Description:    This is a child theme for Twenty Twenty-Four, created by me.
Author:         Your Name
Author URI:     https://example.com
Template:       twentytwentyfour
Version:        1.0.0
*/

/* 导入父主题的样式以确保设计基础一致 */
@import url("../twentytwentyfour/style.css");

/* 自定义样式从这里开始 */

/* 1. 更改文章标题颜色 */
.wp-block-post-title {
    color: #1a4f6e;
    font-weight: 700;
}

/* 2. 更改网站背景色 */
body {
    background-color: #f8f9fa;
}

/* 3. 更改主内容区域的宽度 */
.wp-block-group.alignwide {
    max-width: 1280px;
}

/* 4. 自定义链接颜色 */
a {
    color: #d14545;
}
a:hover {
    color: #a23434;
    text-decoration: none;
}

prendre note

même si @import est l'approche la plus simple, mais elle n'est pas optimale du point de vue des performances (puisqu'elle empêche le chargement en parallèle). Une approche plus avancée consiste à utiliser wp_enqueue_style() dans la fonction functions.php ajoute la feuille de style du thème parent à la file d'attente. Cependant, pour commencer, l'utilisation du fichier @import Il est tout à fait réalisable et facile à comprendre.

Comme ceci :

<?php
// 确保在正确的钩子上加载样式
add_action('wp_enqueue_scripts', 'enqueue_parent_and_child_styles');

function enqueue_parent_and_child_styles() {
    // 加载父主题样式
    wp_enqueue_style('parent-style', get_template_directory_uri() . 'https://www.likacloud.com/style.css');
    
    // 加载子主题样式,并指定依赖于父主题样式
    // 这样可以确保子主题样式在父主题样式之后加载,保证样式覆盖生效
    wp_enqueue_style('child-style', 
                     get_stylesheet_directory_uri() . 'https://www.likacloud.com/style.css',
                     array('parent-style'), // 依赖关系
                     wp_get_theme()->get('Version') // 版本号,可选
                    );
}

Explication du code :

  1. add_action('wp_enqueue_scripts', 'enqueue_parent_and_child_styles')Les fonctions personnalisées : montage de fonctions personnalisées sur les crochets de chargement de WordPress
  2. get_template_directory_uri(): Obtenir l'URL du répertoire du sujet parent
  3. get_stylesheet_directory_uri()Pour obtenir l'URL du répertoire du sous-thème (lorsque le sous-thème est actif), cliquez sur le lien suivant
  4. array('parent-style')Déclarer que les styles des thèmes enfants dépendent des styles des thèmes parents afin de garantir un ordre de chargement correct.

Cette approche se compare favorablement à celle de l @import est plus efficace car il permet aux navigateurs de charger les feuilles de style en parallèle et de mieux gérer les dépendances entre les styles.

Vous pouvez simplement ajouter ce code à la section functions.php (ou en créer un s'il n'existe pas), tout en conservant le thème enfant que vous avez déjà en place style.css Les informations d'annotation de l'en-tête sont suffisantes.

Tous les autres détails peuvent être modifiés en fonction de vos souhaits.

Une fois que vous avez fait cela, vous devez aller dans Apparence >> Thèmes et vérifier si votre thème enfant a été créé. Si c'est le cas, félicitations, vous pouvez l'activer pour tester s'il hérite du design du thème parent.

Méthode 2 : Utiliser un plugin pour créer un thème enfant

Si vous n'avez pas envie de le faire manuellement, vous pouvez utiliser un plugin WordPress gratuit pour faire le travail à votre place. Il existe de nombreux plugins gratuits qui peuvent créer des thèmes enfants pour vous et vous éviter de faire tout cela manuellement. Nous utiliseronsConfigurateur de thème enfantmais vous êtes libre d'utiliser n'importe lequel des plugins disponibles.

Comment créer un thème enfant WordPress - LikaCloud

#1 : Tout d'abord, vous devez télécharger Configurateur de thème enfant Plug-ins.

#2 : Connectez-vous maintenant à votre site web et accédez à votre tableau de bord.

#3 : Naviguez jusqu'à Plugins et cliquez sur l'option Ajouter un nouveau.

#4 :Vous devez maintenant charger le plugin que vous venez de télécharger en cliquant sur l'option “Upload Plugin” et l'activer.

#5 :Il est important de s'assurer que vous activez le thème pour lequel vous souhaitez créer un thème enfant.

#6 : Pour ce faire, il suffit de naviguer dans la section Outils et de cliquer sur un sous-thème.

#7 : Cliquez maintenant sur le bouton Analyser et créez votre thème enfant selon les paramètres mentionnés dans le plugin.

#8 : Vous devez maintenant cliquer sur l'option “Créer un nouveau thème enfant”.

Modification d'autres fichiers de modèles

Vous devez écrire cette fonction dans le thème enfant au cas où vous souhaiteriez y ajouter des fonctions personnalisées. N'hésitez pas à utiliser le thème enfant pour apporter des modifications structurelles ou de mise en page au thème parent.

En supposant que vous ayez créé le twentytwentyfour que vous souhaitez modifier la façon dont il affiche les pages uniques. L'emplacement de la page unique est twentytwentyfour-child/template-parts/content-single.php.

#1 :Dans le dossier du thème enfant, créez un fichier content-single.php. Vous devez faire très attention au nom et à la structure. Ils doivent être identiques à ceux du thème parent pour pouvoir les remplacer.

#2 : Ensuite, vous devrez créer un nouveau dossier et y placer ce fichier, mais soyez attentif au chemin d'accès et assurez-vous qu'il est exactement le même que celui du thème parent.

#3 : C'est tout. Tout ce que vous avez à faire dans cette étape est d'écrire le code de votre souhait dans content-single.php, qui écrasera le fichier parent.

Attention : Veillez à ce que le nom du fichier et le chemin d'accès au dossier soient identiques.

Nous espérons que vous pourrez désormais créer facilement des thèmes enfants. Si vous avez des questions, veuillez ajouterGroupe QQ 1398231Discussion.

Voir les fournisseurs d'hébergement WordPress recommandés