Comment créer un thème enfant WordPress en 4 étapes faciles

Les thèmes enfants - comme leur nom l'indique - sont des thèmes qui dérivent des fonctionnalités d'un thème parent. La modification directe de votre thème WordPress n'est pas recommandée dans certains cas, comme lorsque le thème peut être mis à jour. Si une nouvelle mise à jour d'un thème est appliquée, vous risquez de perdre la personnalisation que vous avez effectuée.

Afin de conserver les personnalisations et de continuer à recevoir les mises à jour des thèmes, il est recommandé de créer un thème enfant WordPress du thème parent que vous souhaitez utiliser. La création d'un thème enfant présente un autre avantage, à savoir que votre thème parent reste intact et libre de toute modification.

Les thèmes enfants existent dans un dossier différent de celui d'un thème parent, et le thème enfant dépend des fonctionnalités du thème parent à moins qu'il ne soit modifié. Si vous utilisez un thème enfant sur votre site Web, le noyau WordPress vérifiera d'abord les fichiers du thème enfant. S'il n'est pas modifié, WordPress exécutera les fichiers du thème parent.

Afin de bien comprendre le concept de thèmes enfants dans WordPress, nous allons créer un thème enfant du thème WordPress par défaut de Twenty Fifteen et apporter certaines modifications pour avoir l'idée derrière les thèmes enfants.

Pour créer un thème enfant WordPress, nous allons suivre ces étapes :

• Créez un dossier et nommez-le vingt quinze-enfants. L'ajout d'un enfant est considéré comme une bonne pratique.
• Créez style.css avec les informations du thème enfant et le fichier functions.php
• Importez le modèle Twenty Fifteen dans style.css
• Mettre les feuilles de style en file d'attente via un fichier functions.php
• Modifiez les fichiers modèles comme single.php

Étape 1 : Créez un dossier de thème enfant et ajoutez style.css

La première étape consiste à créer un nouveau dossier pour notre thème enfant. Appelez-le vingt-quinze-enfant afin de vous rappeler facilement où réside notre thème enfant.

Pour ce faire, connectez-vous à votre serveur à l'aide d'un client FTP comme FileZilla et accédez à /public_html/wp_content/themes et créez un nouveau dossier appelé vingtfifteen-child

Dans ce nouveau répertoire, créez un fichier style.css et collez-y les informations suivantes.

 /*
Nom du thème : Vingt-quinze enfants
URI du thème : https://wordpress.org/themes/twentyfifteen/
Auteur : l'équipe WordPress
URI de l'auteur : https://wordpress.org/
Modèle : vingt quinze
Description: Thème enfant de TwentyFifteen
Version : 1.3
Licence : GNU General Public License v2 ou version ultérieure
URI de la licence : http://www.gnu.org/licenses/gpl-2.0.html
Mots clés : noir, bleu, gris, rose, violet, blanc, jaune, foncé, clair, à deux colonnes, barre latérale gauche, mise en page fixe, mise en page réactive, prêt pour l'accessibilité, arrière-plan personnalisé, couleurs personnalisées, personnalisé en-tête, menu personnalisé, style éditeur, images en vedette, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Domaine du texte : vingt-cinq enfants
Ce thème, comme WordPress, est sous licence GPL.
Utilisez-le pour créer quelque chose de cool, vous amuser et partager ce que vous avez appris avec les autres.
*/

Les lignes les plus importantes que vous devez modifier sont le « Nom du thème » , le « Domaine du texte » et le « Modèle » . Étant donné que le nom du thème ne peut pas être le même que Twenty Fifteen, et dans le modèle, nous disons à WordPress que ce thème est le thème enfant de Twenty Fifteen, nous devons appeler les fichiers des dossiers Twenty Fifteen s'ils n'existent pas dans le Twentyfifteen-child dossier. De plus, le domaine de texte doit être différent et unique pour chaque thème que vous avez avec votre installation WordPress.

Maintenant, si nous naviguons vers notre tableau de bord d'administration WordPress → Apparence → Thème, nous verrons que Twenty Fifteen Child est apparu. Nous pouvons appliquer ce thème sur notre site.

Comme style.css est présent dans le répertoire du thème enfant. WordPress chargera ce style.css et non le style.css du thème parent. Tous les autres fichiers comme index.php , page.php , functions.php seront chargés à partir du thème parent.

Comme nous n'avons aucun style défini dans le style.css du thème enfant, nous devrons importer les styles. La meilleure pratique recommandée sur le codex WordPress est de mettre les feuilles de style en file d'attente à l'aide du fichier functions.php.

Étape 2 : Mettre les feuilles de style en file d'attente à l'aide de functions.php

Contrairement à d'autres fichiers, la théorie derrière le fichier functions.php dans les thèmes enfants WordPress est la suivante : WordPress charge d'abord le fichier functions.php du thème enfant et initialise les fonctions qu'il contient, puis il exécutera également le fichier functions.php du thème parent.

Comme je l'ai mentionné précédemment, la meilleure façon d'importer des feuilles de style est de les mettre en file d'attente via le fichier functions.php .

Créez le fichier functions.php dans votre répertoire de thème enfant et ajoutez le code suivant.

 <?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
fonction enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Cela appellera la feuille de style « style.css » à partir du fichier des thèmes parents. Si vous souhaitez modifier quoi que ce soit dans les feuilles de style, vous pouvez ajouter ces règles dans le style.css du thème enfant.

Étape 3: Modifiez le fichier style.css du thème enfant

Dans les thèmes enfants WordPress, vous pouvez facilement modifier les feuilles de style en définissant des règles dans le fichier style.css du dossier du thème enfant. Par exemple, si nous voulons changer la couleur de l'ancre, il suffit d'ajouter le code suivant dans le style.css de notre thème enfant

 une {
couleur : #D54E21 ;
texte-décoration : aucun ;
}

Ce qui se passe ici, c'est que la règle style.css du thème enfant pour "a" remplace le style.css du thème parent, le reste reste intact.

Étape 4: Modifier un fichier modèle de single.php

Nous pouvons facilement éditer des fichiers de modèles individuels dans les thèmes enfants. Par exemple, si nous voulons éditer single.php, nous devons copier ce fichier à partir du dossier du thème parent et le coller dans le dossier du thème enfant.

Disons que nous voulons supprimer la section des commentaires des pages de publication unique. Après avoir copié le fichier dans notre dossier de thème enfant, nous pouvons le modifier et supprimer la section de commentaires suivante.

 // Si les commentaires sont ouverts ou si nous avons au moins un commentaire, chargez le modèle de commentaire.
if ( comments_open() || get_comments_number() ) :
comments_template();
fin si;

Ce qui se passe ici, c'est que WordPress vérifie le dossier du thème enfant pour single.php , s'il existe dans le répertoire, il le chargera à partir de là, sinon il reviendra au dossier du thème parent.

Juste comme ça, nous pouvons éditer n'importe quel fichier de modèle individuel dans nos thèmes. Cette approche est généralement bonne car elle garde notre thème parent intact et met à jour le thème parent sans perdre notre personnalisation.