Comment créer un thème enfant WordPress

Habituellement, il est presque impossible de trouver le thème parfait ; il y a toujours des modifications à faire. Alors, pourquoi ne pas simplement prendre un joli thème WordPress par défaut, comme Twenty Fifteen, et le personnaliser pour qu'il ressemble et fonctionne exactement comme vous le souhaitez ? Créer un thème enfant vous fera économiser beaucoup de temps et de maux de tête sur la route (croyez-moi).

Je peux parler d'expérience de première main. J'ai "hérité" d'un site WordPress où le développeur venait de pirater le thème parent, et je me souviens encore à quel point il était frustrant de ne pas pouvoir mettre à jour le thème de peur qu'il ne remplace les personnalisations qui donnaient au site sa fonctionnalité. Je ne savais pas quel était le code d'origine et ce qui était personnalisé, alors il était là, sans possibilité de mises à jour.

L'histoire a une fin heureuse, cependant. J'étais plus nouveau sur WordPress à l'époque, donc cela m'a appris très tôt que modifier un thème parent n'était pas une bonne idée. Lorsque le site a finalement été repensé, la première chose à faire était de prendre les personnalisations et de les mettre dans un thème enfant.

Un thème enfant vous permet de travailler dans un endroit séparé sans que votre travail ne soit écrasé par une future mise à jour du thème parent. Techniquement parlant, lorsque vous créez un thème enfant, vous créez un ensemble de fichiers distinct que vous pouvez utiliser pour personnaliser le thème sans affecter le thème parent d'origine. Si vous apportez des modifications aux fichiers d'un thème parent, ces modifications seront écrasées lors de la prochaine mise à jour du thème. C'est un gros problème car les mises à jour peuvent inclure des modifications de fonctionnalités, des corrections de bogues et des mesures de sécurité importantes. Il est crucial de maintenir le thème parent à jour et d'utiliser un thème enfant pour toute personnalisation.

Bases du thème enfant

Les thèmes enfants sont des thèmes distincts que vous créez et qui s'appuient sur un thème parent pour ses fonctionnalités de base. Lorsque vous utilisez un thème enfant, WordPress sait le référencer et rechercher toute fonctionnalité incluse. C'est très bien car cela vous permet de modifier uniquement les parties du thème parents que vous devez modifier, ce qui en fait un moyen très efficace d'ajouter des personnalisations à votre site WordPress.

Pour creuser un peu plus, voici comment les thèmes enfants fonctionnent au niveau du fichier. WordPress vérifie si un fichier nécessaire est inclus dans le thème enfant. S'il est inclus, ce fichier de thème enfant est chargé. S'il n'y en a pas dans le thème enfant, le fichier du thème parent est chargé. La seule exception à cela est le fichier functions.php, dans lequel les versions parent et enfant sont chargées. Typiquement, il y a des informations cruciales dans le fichier functions.php. Si WordPress ne chargeait que la version du thème enfant (sauf si vous avez tout copié), le site ne fonctionnerait pas correctement. Heureusement, WordPress charge les deux fichiers, vous n'avez donc pas à vous soucier de copier l'intégralité du fichier functions.php dans votre thème enfant.

N'oubliez pas que vous pouvez toujours désactiver votre thème enfant et revenir à l'original si nécessaire. C'est une rue à sens unique cependant; vous ne pouvez pas désactiver le parent et vous fier au thème enfant.

Si vous ajoutez des personnalisations à un thème WordPress, il est préférable d'utiliser un thème enfant. Prêt à créer le vôtre ? Nous allons maintenant suivre le processus, étape par étape.

Créer un thème enfant

Il n'est pas aussi complexe que cela puisse paraître d'en créer un. En fait, techniquement, vous n'avez besoin que de deux fichiers : un fichier style.css et un fichier functions.php . La plupart des thèmes enfants ont plus que cela, mais techniquement parlant, ce sont les deux seuls requis.

Pour créer un thème enfant, vous devez avoir WordPress installé avec un thème parent que vous souhaitez utiliser.

Créer un répertoire thématique

Tout d'abord, allez dans votre répertoire de thèmes et créez un dossier pour votre nouveau thème. Donnez-lui un nom reconnaissable. Pour cet exemple, je nommerai mon thème child-example afin qu'il soit facile à trouver.

Faire la feuille de style du thème enfant

La prochaine étape cruciale consiste à créer la feuille de style du thème enfant. Créez un fichier style.css . Gardez à l'esprit qu'il doit être nommé style.css pour que tout fonctionne correctement.

Ensuite, vous devrez inclure des informations sur votre thème.

Copiez et collez ceci dans le style.css file :

/*
 Theme Name:   Child Example
 Theme URI:    http://example.com/child-exxample/
 Description:  Child Example Twenty Fifteen Child Theme
 Author:       Your Name
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
 Text Domain:  twenty-fifteen-child
*/

Cela peut sembler beaucoup, mais il n'y en a vraiment que deux qui sont nécessaires, qui sont Theme Name et le Template . Le Theme Name indique à WordPress le nom du thème enfant. Le Template indique à WordPress quel thème il doit considérer comme thème parent, ce qui est très important.

La plupart des autres sont assez explicites, mais il y en a quelques-uns qui pourraient avoir besoin d'un peu plus de clarification. Le Text Domain et les Tags pourraient être un peu déroutants. Le Text Domain est utilisé pour traduire des chaînes à des fins d'internationalisation. Ceci est unique pour votre thème et doit être utilisé chaque fois que vous utilisez des fonctions de traduction. Il y a beaucoup plus d'informations dans le Codex et peuvent être trouvées dans le sujet I18n pour les développeurs WordPress. La section Tags est une liste de balises spécifiques au thème WordPress. Pour cet exemple, j'ai regardé le parent Twenty Fifteen style.css , j'ai saisi les balises à partir de là et je les ai placées dans le thème enfant.

Utiliser les styles parents

Rappelez-vous comment WordPress recherche d'abord les fichiers de thème enfant ? À l'heure actuelle, le thème enfant fonctionne, mais il n'a pas l'air très soigné car vous n'avez pas encore créé de style. Si vous l'activez et rechargez la page, elle aura l'air un peu désordonnée. Cela ressemblera probablement à ceci :

Corrigeons cela pour qu'il retombe sur le thème parent et qu'il y ait au moins un style appliqué. Vous utiliserez toujours votre thème enfant pour votre style personnalisé, mais commençons par afficher le style parent.

Pour vous assurer que vous chargez la feuille de style du fichier parent, nous devrons la mettre en file d'attente dans le thème enfant. Vous aurez besoin d'un fichier functions.php dans le thème enfant pour y insérer l'extrait suivant.

<?php

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

Faire une personnalisation CSS

Maintenant que les styles parents sont affichés, modifions une partie du CSS pour la personnalisation de votre thème enfant. Pour cet exemple, styliser un élément d'arrière-plan pour le contenu de la page est un bon moyen de voir le thème enfant en action. Il a été stylisé en blanc dans le CSS du thème parent, mais changeons-le en bleu dans votre thème enfant. N'oubliez pas que les styles parents sont chargés en premier, et vos personnalisations seront chargées ensuite, ce seront donc ce que nous verrons.

Si vous êtes un utilisateur de Chrome, les outils de développement sont très utiles pour voir le style et expérimenter dans le navigateur. Accédez à Affichage > Développeur > Afficher la source et sélectionnez les éléments de la page. Les styles seront affichés sur la droite. J'ai inspecté l'article qui avait une classe .hentry qui a un fond blanc. J'ai collé une valeur hexadécimale pour la tester d'abord dans le navigateur.

Pour effectuer cette modification, ouvrez le fichier CSS dans le thème enfant et ajoutez les informations CSS.

Comme vous pouvez le voir, les changements de style peuvent facilement être effectués dans le thème enfant.

Modifier les fonctionnalités de votre thème enfant

Ajuster le style est assez facile, mais qu'en est-il d'autres choses comme l'en-tête, le pied de page, la barre latérale, etc. ? Disons qu'il y a quelques modifications à faire dans le pied de page. Copiez et collez le pied de page du thème parent dans l'enfant. Le fichier footer.php peut être ouvert dans l'éditeur de texte de votre choix et modifié. J'ai décidé de supprimer la ligne "Proudly powered by WordPress", donc je l'ai supprimée du fichier dans mon thème enfant. C'est maintenant le fichier que WordPress chargera en premier, de sorte que cette ligne de texte ne s'affichera pas.

Créer un thème enfant est une bonne habitude à prendre lors de la création de thèmes WordPress. En quelques étapes simples, ils sont faciles à créer et à entretenir. Garder les personnalisations séparées des thèmes parents est bon à la fois pour l'organisation et pour garder tout à jour, ce qui évitera beaucoup de maux de tête sur la route.