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

Savez-vous comment faire un thème enfant WordPress ?

Bien sûr, votre thème conviendra à votre site Web, mais à certains moments, vous devrez les modifier. Apporter des modifications au thème enfant est un choix préférable pour éditer votre site. En outre, l'apprentissage du thème enfant est l'une des choses de base que vous devez savoir sur WordPress. Vous pouvez commencer à en apprendre davantage 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 fonctionnalités, fonctionnalités et autres du thème parent. D'un autre côté, éditer le thème enfant sans changer le thème parent est possible. Cela réduira le temps et les efforts nécessaires pour éditer le site pour vous. De plus, les mises à jour de votre thème WordPress restent plus sûres et plus stables. Lorsque vous personnalisez l'enfant, toutes les modifications et personnalisations sur le parent resteront 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 créer un thème enfant WordPress , des compétences en codage sont nécessaires puisque vous travaillerez avec HTML et CSS. Il est très important de savoir quoi changer. En outre, 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 terrain d'essai et l'autre est utilisé pour le développement du thème.

Une dernière chose, le thème parent doit correspondre à l'apparence et aux fonctionnalités de vos objectifs. 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 WordPress create child .

Thème Construire le 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.

Utilisation du 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: WPB 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 ainsi. 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 le thème parent demandant la fenêtre contextuelle. Choisissez « Analyser » pour vérifier la compatibilité avec 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.

Lors de la création manuelle d'un thème enfant, 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 nouvel enfant de thème" pour terminer. Dans cette étape, votre thème enfant aura les fonctions.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. En outre, 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 sera divisé 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 aussi 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. En outre, vous pouvez le relancer 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 )

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

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

Par exemple, le code de la couleur d'arrière-plan de la page est :

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

'–global–color-background' est une variable utilisée dans les 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. Accédez à /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 du -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 des 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 « Fièrement propulsé par 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 invité à copier et coller des extraits de code dans le fichier function.php, mais ils seront supprimés lors de la mise à jour de PHP ou de 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 correction.

Correction des erreurs

Vous pouvez rencontrer n'importe quel problème pour créer 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 des éléments manquants dans le processus de codage. C'est également l'erreur la plus courante que tous les utilisateurs peuvent rencontrer. De plus, si les choses ne se passent 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 à travers notre article. Merci pour vos lectures !

Lire la suite : Comment corriger l'erreur HTTP 500 WordPress (2021)