Comment créer un thème enfant dans WordPress (étape par étape)

Avez-vous déjà mis à jour votre thème WordPress uniquement pour constater que toutes les modifications personnalisées que vous aviez apportées au thème lui-même avaient été perdues ? Un thème WordPress Child est la solution pour éviter ce problème et dans cet article nous allons vous montrer exactement comment en créer un.

Allons-y!

Qu'est-ce qu'un thème enfant WordPress

Un thème enfant WordPress n'est pas considéré comme un thème complet comme ceux que l'on peut trouver dans le répertoire des thèmes WordPress. Au lieu de cela, il dépend entièrement d'un autre thème (appelé le thème parent) afin de pouvoir être activé et fonctionner correctement.

Lorsqu'il est activé, il hérite de toutes les fonctionnalités, caractéristiques et code de son thème parent sans apporter de modifications aux fichiers du thème parent.

WordPress servira le code du thème parent à l'exception des parties qui sont remplacées par le thème enfant qui seront servies à partir du dossier du thème enfant. Le résultat de cela signifie que lorsque le thème parent est mis à jour, toutes les modifications/ajouts et ainsi de suite effectués dans le thème enfant ne sont pas perdus.

Création d'un thème enfant (étape par étape)

Avant de continuer, assurez-vous :

• Vous avez accès aux fichiers de votre site web via un client FTP (comme WinSCP ou Filezilla)
• Vous disposez d'un éditeur de texte (comme notepad++).

Pour commencer, nous allons activer un thème par défaut qui est également appelé thème parent. Dans cet exemple, ce sera le thème Twenty Twenty. Si nous nous dirigeons vers le front-end de notre site Web, nous verrons quelque chose comme ceci :

Créons et activons maintenant un thème enfant "Twenty Twenty".

Ajouter le répertoire

Tout d'abord, nous devons créer un nouveau répertoire 'twentytwenty-child'' dans /wp-content/themes. Notez que le dossier enfant peut être nommé comme vous le souhaitez tant que vous n'utilisez pas d'espaces ou de ponctuation.

Ajouter le fichier style.css

Ensuite, nous devons créer un fichier style.css et ajouter les en-têtes de thème appropriés. Avant de continuer, regardons le style.css du thème parent .

Voyons où ces informations se reflètent dans la zone d'administration.

Tout d'abord, ouvrez les détails du thème sur Apparence > Thèmes et examinez de plus près la colonne de droite.

Si nous comparons cela à la feuille de style, nous verrons d'où proviennent divers éléments de ces informations.

Nous devons commencer à ajouter certaines de ces informations à notre feuille de style de thème enfant. Les informations minimales requises qui doivent être insérées en tant qu'en-têtes sont le "Nom du thème" et le "Modèle".

 /* Theme Name: Twenty Twenty - Child Template: twentytwenty */

• Nom du thème : Le nom souhaité de votre thème enfant qui sera affiché dans le back-end de WordPress.
• Modèle : il doit être identique au nom du répertoire du thème parent. C'est l'en-tête le plus important pour le thème enfant car il indique en fait à WordPress quel thème est le parent et définit ainsi la dépendance. Sans cela, votre thème enfant ne fonctionnera pas.

Une fois le thème enfant activé, ce que vous verrez dans le backend est ceci :

Vous pouvez également saisir les informations facultatives suivantes :

• Version (version du thème)
• Nécessite au moins (version WP minimale requise pour que le thème fonctionne correctement)
• Nécessite PHP (version minimale de WP PHP pour que le thème fonctionne correctement)
• Description (détails liés au thème)
• Balises (balises du thème)
• Auteur (nom du développeur du thème)
• etc.

À ce stade, si vous ouvrez le front-end de votre site Web, vous constaterez peut-être qu'il est cassé et ressemble à ceci :

Ceci est tout à fait normal car la feuille de style (style.css) à laquelle WordPress fait maintenant référence provient désormais du thème enfant et cette feuille de style est vide, à l'exception des informations que vous avez saisies ci-dessus. Vous pouvez soit créer votre propre style à partir de zéro, soit charger le style du thème parent et commencer par là. Si vous souhaitez importer la feuille de style du thème parent, vous pouvez le faire de deux manières.

Première option : importer la feuille de style parent de manière classique

Tout ce que vous avez à faire est simplement d'ajouter cette ligne au fichier style.css de votre thème enfant :

 @import url('../twentytwenty/style.css');

Cette commande indique à WordPress où chercher pour récupérer le fichier CSS d'origine. Maintenant, si vous actualisez votre page d'accueil, cela semble revenir à la normale. Tout ce que vous ajoutez maintenant dans le style.css remplacera le style parent importé. Essayez par exemple d'ajouter une taille de police différente pour le titre h2 "Hello world!".

Actualisez la page et regardez l'inspecteur d'éléments des onglets du développeur.

Vous remarquerez que la valeur ajoutée est comptée et la valeur par défaut (style parent) "font-size : 6.4rem ; » a été remplacé.

Ce que vous devez cependant prendre en considération, c'est que l'utilisation de cette méthode a une influence négative sur la vitesse de votre site car les fichiers sont obligés de se charger les uns après les autres et non en parallèle. Plus précisément, le navigateur doit télécharger, analyser et exécuter le premier fichier avant d'être "informé" qu'il doit télécharger le second fichier.

Pour ces raisons, l'importation du fichier parent style.css de cette manière n'est plus recommandée.

Deuxième option : importer la feuille de style parent dans le bon sens

Afin d'importer le fichier parent style.css "de la bonne manière", nous devons d'abord ajouter un fichier functions.php vide dans le dossier de votre thème enfant.

Une fois que vous avez fait cela, ouvrez-le avec votre éditeur et ajoutez une balise PHP d'ouverture (<?php), après quoi vous pouvez ajouter le code PHP suivant :

 function twentytwenty_scripts() { wp_enqueue_style('parent-theme-style', get_template_directory_uri() . '/style.css'); } add_action('wp_enqueue_scripts', twentytwenty_scripts);

Si vous vérifiez les outils de développement de votre navigateur maintenant, vous remarquerez que les résultats sont les mêmes qu'avec la méthode "traditionnelle" décrite dans l'option 1 ci-dessus, sauf que maintenant c'est beaucoup plus rapide.

Quelques notes supplémentaires sur le code PHP :

• Le 'parent-theme-style' est le nom de la poignée et doit être unique
• Le get_template_directory_uri() . '/style.css' get_template_directory_uri() . '/style.css' indique à WordPress l'emplacement source de l'emplacement parent style.css
• Le get_template_directory_uri() récupère l'URI du répertoire de modèles pour notre thème parent. Dans notre cas, il affiche 'http://mywebsite.onpressidium.com/wp-content/themes/twentytwenty'

Ajoutez des fonctionnalités à votre thème enfant

Maintenant que vous avez créé un thème enfant, vous pouvez commencer à ajouter des fonctionnalités supplémentaires. Voyons d'abord comment vous procéderiez pour éditer le fichier functions.php dans votre thème enfant et comment cela fonctionne en pratique.

Fonctions du thème enfant.php

Contrairement au fichier style.css , lorsque vous mettez functions.php dans le thème enfant, le code functions.php du thème parent sera toujours en cours d'exécution. Tout ce que vous ajoutez dans le fichier functions.php de l'enfant sera exécuté en plus du contenu functions.php du parent.

Par exemple, voyons comment nous pouvons modifier le texte "En savoir plus" pour la vue des articles :

Première étape : créez une catégorie de publication de test :

Deuxième étape : créez deux nouveaux messages dans cette catégorie. Ajoutons quelques exemples de contenu. À ce stade, si vous visitez la page de catégorie, vous verrez ceci :

Dans cet exemple, nous souhaitons modifier le texte "Continuer la lecture" affiché dans le bouton qui charge le message complet.

Revenons un peu en arrière pour comprendre comment ce texte est affiché. Dans WordPress, afin de modifier une certaine fonction, nous utilisons des filtres.

Dans cet exemple, pour obtenir ce que nous voulons, nous devons personnaliser le filtre 'the_content_more_link' qui est initialement introduit dans le fichier core wp-includes/post-template.php à la ligne 369 comme ceci :

 $output .= apply_filters( 'the_content_more_link', ' <a href="' . get_permalink( $_post ) . "#more-{$_post->ID}\" class=\"more-link\">$more_link_text</a>", $more_link_text );

Ceci est actuellement remplacé par le thème parent TwentyTwenty dans son fichier function.php (ligne 571) par ce morceau de code :

 function twentytwenty_read_more_tag( $html ) { return preg_replace( '/<a(.*)>(.*)<\/a>/iU', sprintf( '<div class="read-more-button-wrap"><a$1><span class="faux-button">$2</span> <span class="screen-reader-text">"%1$s"</span></a></div>', get_the_title( get_the_ID() ) ), $html ); } add_filter( 'the_content_more_link', 'twentytwenty_read_more_tag' );

Ainsi, si vous souhaitez modifier le texte « Continuer la lecture » ​​dans le bouton, cela peut être remplacé dans le fichier functions.php de votre thème enfant si vous ajoutez ce morceau de code :

 function modify_read_more_link() { return '<a class="more-link" href="' . get_permalink() . '">My Custom Read More text</a>'; } add_filter( 'the_content_more_link', 'modify_read_more_link' );

Le crochet ''the_content_more_link'' est commun entre ces fichiers, auquel cas le crochet de l'enfant prévaut toujours.

Ensuite, actualisez la page et le tour est joué :

Comment personnaliser les modèles PHP

La capture d'écran ci-dessus montre le contenu du modèle du thème TwentyTwenty pour la vue de la catégorie de publication. Alors, comment changer son design ou ajouter/supprimer des informations en utilisant le thème enfant ?

Voici comment procéder :

1. Trouver le fichier php associé
2. Copiez le fichier approprié dans le dossier du thème enfant et modifiez-le
3. Personnalisez-le comme bon vous semble

Le premier problème et le plus courant ici est que nous devons trouver quel fichier php contient la sortie que nous voulons modifier. Quelque chose qui vous aidera certainement à vous y retrouver est la hiérarchie des modèles WordPress.

En un mot, les seuls fichiers dont un thème WordPress a réellement besoin sont les fichiers index.php et style.css. Les fichiers et dossiers supplémentaires sont en fait des fichiers appelés depuis index.php . Ce sont les fragments de ce que vous verrez éventuellement comme sortie du fichier index.php .

En ce qui concerne le thème Twenty Twenty, si nous regardons son fichier index.php , nous pouvons voir à la ligne 79 que, lorsque le contenu est un ou plusieurs articles, alors les fichiers php du répertoire template-parts/ sont utilisés.

 if ( have_posts() ) { $i = 0; while ( have_posts() ) { $i++; if ( $i > 1 ) { echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; } the_post(); get_template_part( 'template-parts/content', get_post_type() ); }

Dans notre cas, nous devrons copier le fichier content.ph p depuis le sous-dossier du thème template-parts.

Veillez également à ne copier que les fichiers PHP que vous envisagez de personnaliser. Ne copiez pas tous les fichiers PHP dans le thème parent.

REMARQUE : la structure des dossiers doit être la même dans le thème enfant pour que les modifications soient reflétées sur le front-end.

Donc, nous créons d'abord le sous-dossier 'template-parts' et y plaçons une copie de content.php .

Vous pouvez maintenant ouvrir le fichier dans votre éditeur et le personnaliser.

Essayez de changer quelque chose de trivial au début pour vous assurer que tout fonctionne bien, par exemple, changez une classe div et actualisez votre interface pour vérifier les résultats.

Personnaliser le modèle de catégorie de publication

Nous avons déjà deux articles dans la catégorie "catégorie test". Vous pouvez maintenant créer un menu d'éléments « Catégorie de publication » et le lier à la « catégorie de test ». Si vous cliquez sur le nouvel élément de menu, vous devriez voir la page d'affichage de la catégorie de publication.

Vous pouvez maintenant modifier davantage le fichier content.php et modifier la vue de la catégorie de publication selon votre propre style. À titre indicatif, recherchez les références des fichiers supplémentaires inclus comme à la ligne 23 :

 get_template_part( 'template-parts/featured-image' );

Cela signifie que le fichier qui produit l'image sélectionnée est template-parts/featured-image.php

Ainsi, vous pouvez copier le fichier dans le répertoire de votre thème enfant et le modifier. Fantastique!

Conclusion

Un thème enfant permet aux utilisateurs de modifier la disposition, le style et les fonctionnalités du thème parent sans perdre la possibilité de mettre à jour le thème parent. Souvent, les concepteurs de sites Web hésitent à mettre à jour le thème de leur site Web car ils savent que s'ils le font, ils perdront les modifications apportées directement dans le thème parent. C'est un problème sérieux car il est aussi important de garder votre thème à jour que vos plugins et votre noyau WordPress. Travailler avec un thème enfant dès le départ supprime ce problème et vous permet de mettre à jour le thème parent selon les besoins sans craindre d'écraser toutes les modifications que vous avez apportées au thème dans son ensemble.