Comment créer un thème enfant WordPress (2021)

Savez-vous faire un thème enfant WordPress ?

Bien sûr, votre thème sera adapté à votre site Web, mais à certains moments, vous devrez les modifier. Apporter des modifications au thème enfant est un choix préférable pour modifier votre site. En outre, l'apprentissage du thème enfant est l'une des choses de base de WordPress que vous devez savoir. Vous pouvez commencer à vous renseigner sur WordPress ici.

Passons en revue le processus de création d'un thème enfant WordPress.

Pourquoi devriez-vous utiliser des thèmes enfants pour WordPress ?

Dans WordPress, un thème enfant acquiert toutes les caractéristiques, fonctionnalités et autres du thème parent. De l'autre côté, il est possible de modifier le thème enfant sans changer le parent. Cela réduira le temps et les efforts d'édition du site pour vous. De plus, vos mises à jour de thèmes WordPress restent plus sûres et plus stables. Lorsque vous personnalisez l'enfant, toutes les modifications et personnalisations sur le parent restent les mêmes. Les utilisateurs peuvent également utiliser ce thème enfant sur d'autres sites Web WordPress.

Avis avant de créer un thème enfant

Pour faire un thème enfant WordPress , une compétence en codage est requise puisque vous travaillerez avec du HTML et du CSS. Savoir ce qu'il faut changer est très important. De plus, vous aurez besoin d'une connaissance de base de PHP, au moins en copiant/collant les extraits de code provenant d'autres sources.

Nous vous conseillons sincèrement de pratiquer dans l'environnement de développement. C'est un endroit où vous pouvez le faire sans avoir peur de gâcher votre site principal. C'est comme si vous faisiez d'une pierre deux coups : l'un le déplace vers le champ de test et l'autre est utilisé comme thème de développement.

Encore une chose, le thème parent doit adapter l'apparence et les fonctionnalités à vos besoins. En effet, moins vous apporterez de modifications, meilleur sera votre site.

Dans les parties ci-dessous, nous utiliserons le thème LearnPress comme exemple pour une meilleure illustration du thème enfant créé par WordPress .

Construire le thème du premier enfant

Vous avez 2 options lors de la création de thèmes enfants WordPress. Vous pouvez utiliser la méthode manuelle pour vous familiariser avec tous les fichiers. Sinon, l'application d'un plugin fonctionnera avec des fichiers et des dossiers compliqués.

Maintenant, nous allons commencer la personnalisation.

Utiliser le code

Pour commencer, vous allez ouvrir /wp-content/themes/ dans l'installation de WordPress et créer un nouveau dossier pour votre thème enfant. Nommez-le comme vous le souhaitez.

Ensuite, vous devez créer les 2 premiers fichiers pour votre thème enfant. Ouvrez un éditeur de texte et collez le code ci-dessous dans le document vide :

 1 Theme Name: LP Child Theme 2 Theme URI: https://www.wpbeginner.com/ 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild

Vous pouvez modifier les informations au fur et à mesure de votre planification et enregistrer ce fichier dans votre fichier style.css dans le dossier du thème enfant récent. Eh bien, vous venez de créer la feuille de style principale du thème enfant.

Ensuite, vous allez créer un 2 ^ème fichier pour importer les feuilles de style du thème parent. Créez un nouveau document dans votre éditeur de texte et copiez ce code :

 1 /* enqueue scripts and style from parent theme */ 2 3 function learnpress_styles() { 4 wp_enqueue_style( 'child-style', get_stylesheet_uri(), 5 array( 'learn-press-style' ), wp_get_theme()->get('Version') ); 6 ( 7 add_action( 'wp_enqueue_scripts', 'learnpress_styles');

Lorsque vous utilisez LearnPress comme thème parent, ce code commencera à fonctionner. Ainsi, la plupart des thèmes fonctionneront comme ceci. Enregistrez ce fichier et il deviendra le dossier functions.php de votre thème enfant.

Après ces étapes, vous aurez un thème enfant de base. Dans « Apparence », choisissez « Thèmes » et « Activer ». Par conséquent, votre site commencera à utiliser le thème enfant. Si vous avez besoin de personnaliser, passez à la partie suivante.

Utiliser des plugins

Nous vous suggérons d'utiliser le plugin Child Theme Configurator. Comme il ne nécessite aucun codage, vous pouvez facilement apporter des modifications et des personnalisations.

Tout d'abord, installez le plugin sur votre site. Pour plus de guides sur l'installation du plugin, cliquez ici.

Lors de l'activation, vous allez dans "Outils" -> "Thèmes enfants" et choisissez LearnPress dans la fenêtre contextuelle de demande de thème parent. Choisissez "Analyser" pour vérifier la compatibilité d'être un thème parent. Ensuite, vous devrez nommer le dossier du thème enfant pour enregistrer les fichiers et où les enregistrer. Dans le paramètre par défaut, choisissez "Cliquez pour modifier les attributs du thème enfant". Ensuite, vous remplirez les informations du thème enfant.

Lorsque vous créez un thème enfant manuellement, votre thème enfant n'héritera pas des menus et des outils du thème parent. Pour le résoudre, utilisez le configurateur de thème enfant. Enfin, choisissez "Créer un nouveau thème enfant" pour terminer. Dans cette étape, votre thème enfant aura les functions.php et style.css pour des développements ultérieurs. Apparemment, n'oubliez pas de prévisualiser votre plugin enfant. Ensuite, vous sélectionnez "Activer et publier" pour publier votre thème enfant.

Maintenant, nous allons commencer à personnaliser votre thème enfant.

Personnalisation du thème enfant WordPress

Nous allons créer un thème enfant WordPress un peu à la différence du thème parent en ajoutant du code au fichier « style.css ».

Copier le code de l'inspecteur Firefox/Chrome

Vous pouvez utiliser les widgets Inspector de Chrome et Firefox pour découvrir le code CSS nécessaire. De plus, vous pouvez utiliser ces outils pour accéder aux éléments CSS et HTML de tous les sites.

Pour voir un fichier CSS d'un article ou d'un site, faites un clic droit et choisissez "Inspecter". Votre écran se divisera en 2 moitiés et vous pourrez voir le CSS et le HTML de la page. Lorsque vous déplacez la souris sur les lignes HTML, l'outil d'inspection vous montrera dans la fenêtre supérieure. Fait également les règles CSS.

Il y aura un changement de couleur temporaire dans le dos. Pour le rendre permanent, copiez cette ligne de règle CSS et collez-la dans le fichier style.css du thème enfant :

 1 body { 2 background-color: #fdf8ef; 3 )

Enregistrez les modifications et prévisualisez le site. De plus, vous pouvez relancer ceci pour n'importe quel élément de la feuille de style du thème. Eh bien, nous vous donnons une feuille de style complète pour un thème enfant ici :

 1 Theme Name: WPB Child Theme 2 Theme URI: https://www.thimpress.com 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://www.thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild 9 */ 10 11 .site-title { 12 color: #7d7b77; 13 ) 14 .site-description { 15 color: #aba8a2; 16 ) 17 body { 18 background-color: #fdf8ef; 19 color: #7d7b77; 20 ) 21 .entry-footer { 22 color: #aba8a2; 23 ) 24 .entry-title { 25 color: #aba8a2; 26 font-weight: bold; 27 ) 28 .widget-area { 29 color: #7d7b77; 30 )

Copier le code du fichier style.css du thème parent

Comme vous pouvez le voir, il est possible de copier à partir du fichier parent theme'style.css et de le coller dans le thème enfant et de le personnaliser.

Par exemple, le code de la couleur de fond de la page est :

 1 background-color: var(--global--color-background);

'–global–color-background' est une variable utilisée aux différents endroits du thème. Vous devrez changer la valeur de la variable si vous devez changer la couleur à ces endroits en même temps. Déplacez-vous vers /wp-content/themes/learnpress dans le dossier d'installation de WordPress et ouvrez le fichier style.css dans l'éditeur de texte pour rechercher la place de –global–color-background. Cette variable peut être changée avec une autre variable. Vous pouvez trouver un grand nombre de variables de couleur dans le fichier style.css du thème parent. Après avoir sélectionné les options de couleur appropriées, vous copiez et collez cette ligne de code dans le fichier style.css du thème enfant et remplacez les anciennes par les nouvelles choisies pour votre tendance de couleur. Ensuite, les couleurs seront divisées en fonction des schémas de couleurs prévus. Ce processus rendra vos schémas de couleurs cohérents et rapidement modifiés.

Personnalisation des fichiers modèles

Dans un thème, les zones de gestion de fichiers d'un site Web sont appelées modèles. Les modèles sont généralement nommés d'après la section qu'ils gèrent. Ainsi, certaines sections importantes sont gérées par divers fichiers ou modèles de contenu.

Pour personnaliser un modèle, recherchez ce fichier dans le thème parent et copiez-le dans le thème enfant. Ensuite, ouvrez-le dans l'éditeur de texte et commencez à le modifier.

Nous allons vous montrer un tutoriel pour ce processus avec le fichier footer.php. Copiez-le dans le dossier du thème enfant et ouvrez-le dans un éditeur de texte brut. Par exemple, supprimons le lien "Proudly powered by WordPress" dans le pied de page et ajoutons un avis de droit d'auteur. Pour commencer, supprimez tout entre les balises <div class="powered-by">.

 1 <div class="powered-by"> 2 <?php 3 printf( 4 /* translators: %s: WordPress. */ 5 esc_html__( 'Proudly powered by %s.', 'learnpress' ), 6 '<a href="' . esc_url( __( 'https://wordpress.org/', 7 'learnpress' ) ) . '">WordPress</a>' 8 ); 9 ?> </div><!-- .powered-by -->

Ensuite, vous collerez le code que vous trouverez sous ces balises dans l'exemple ci-dessous.

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

Choisissez "Enregistrer les modifications" et lorsque vous reviendrez sur le site, vous verrez le nouvel avis de droit d'auteur.

Ajouter des fonctionnalités à votre thème enfant WordPress

Pour modifier ou ajouter une fonction à votre site, vous devrez rechercher le fichier functions.php. Ce fichier utilise du code PHP pour exécuter ce processus.

Habituellement, vous êtes guidé pour copier et coller des extraits de code dans le fichier function.php mais ils seront supprimés lorsque vous mettrez à jour PHP ou votre thème. Par conséquent, nous vous suggérons d'utiliser un thème enfant pour ajouter les extraits de code. Eh bien, passons au processus d'ajout de widgets. Ajoutez l'extrait de code dans le fichier functions.php du thème enfant.

 1 <?php 2 // Register Sidebars 3 function custom_sidebars() { 4 5 $args = array( 6 'id' => 'custom_sidebar', 7 'name' => __( 'Custom Widget Area', 'text_domain' ), 8 'description' => __( 'A custom widget area', 'text_domain' ), 9 'before_title' => '<h3 class="widget-title">', 10 'after_title' => '</h3>', 11 'before_widget' => '<aside class="widget %2$s">', 12 'after_widget' => '</aside>', 13 ); 14 register_sidebar( $args ); 15 16 ) 17 add_action( 'widgets_init', 'custom_sidebars' ); 18 ?>

Enregistrez et accédez à "Apparence" -> "Widgets" pour voir le nouvel outil. De plus, vous pouvez rechercher plus d'informations sur l'ajout d'une zone de fonction. Vous pouvez ajouter de nombreuses fonctionnalités en ajoutant des extraits de code au fichier functions.php de votre site.

C'est tout sur la façon de créer un thème enfant dans WordPress . Passons à la partie de l'erreur de fixation.

Correction des erreurs

Vous pouvez rencontrer n'importe quel problème en créant un thème enfant à tout moment. Par conséquent, vous ne devriez pas abandonner facilement.

Des problèmes de syntaxe peuvent être causés par certains éléments manquants dans le processus de codage. De plus, c'est l'erreur la plus courante que tous les utilisateurs peuvent rencontrer. De plus, si les choses ne vont pas bien, vous pouvez toujours le supprimer et recommencer.

Comment créer un thème enfant WordPress : conclusion

Nous espérons que vous pourrez acquérir des connaissances sur la création d'un thème enfant grâce à notre article. Merci pour vos lectures !

Lire la suite : Comment réparer l'erreur HTTP 500 WordPress (2021)