Guide rapide pour créer et personnaliser un thème enfant WordPress

Bien que le développement de thèmes puisse sembler écrasant, les thèmes enfants sont simples à configurer et constituent une alternative beaucoup plus rapide au développement d'un thème à partir de zéro.

Dans cet article, je partagerai plus de détails sur les thèmes enfants WordPress ainsi que sur la façon d'en créer et de le personnaliser efficacement.

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

Avant de définir ce qu'est un thème enfant WordPress, il est important de comprendre d'abord ce qu'est un thème WordPress et d'où WordPress tire des informations pour afficher la conception d'un site Web.

Selon le WordPress Codex, « Un thème est une collection de fichiers qui fonctionnent ensemble pour produire une interface graphique avec une conception unificatrice sous-jacente pour un blog. Un thème modifie la façon dont les données sont affichées sans altérer le logiciel sous-jacent.

Si votre site WordPress a un seul thème actif avec tous les modèles et actifs requis, il n'y a pas de distinction entre le thème parent ou enfant.

Cependant, si vous décidez que vous aimez vraiment un thème que vous avez trouvé, mais que vous souhaitez y apporter quelques modifications sans créer de thème à partir de zéro, vous pouvez créer un thème enfant WordPress à cette fin.

Un thème enfant hérite de la structure du thème d'origine et n'inclut que les personnalisations que vous lui apportez. Au lieu de remplacer entièrement un thème, le thème enfant modifie ou s'ajoute aux fichiers du thème existant.

De cette façon, lorsque votre site est chargé pour un visiteur, la conception du thème d'origine se charge, mais avec les modifications que vous y avez apportées.

Les enfants dans la vraie vie – et non dans le monde en ligne – dépendent d'au moins une figure parentale pour vivre. De même, un thème enfant dépend du thème d'origine pour fonctionner.

C'est pourquoi lorsque vous utilisez un thème enfant, le thème d'origine est appelé thème parent.

Contrairement à un bébé humain, un thème enfant n'est pas un thème complet en soi. Cela signifie que le thème parent doit être installé avant que vous puissiez activer son thème enfant correspondant.

Le thème de l'enfant parfait et quand l'utiliser

N'importe quel thème peut être un thème parent, cependant, certains sont mieux adaptés pour cela.

Choisissez un thème que vous aimez qui pourrait utiliser quelques petites personnalisations structurelles pour répondre à vos besoins, mais cela ne vient pas avec les options pour faire les personnalisations que vous voulez dès la sortie de la boîte.

Par exemple, le thème Perfect Magazine a été utilisé comme thème parent pour créer le thème enfant Newsliner afin non seulement de modifier certaines couleurs du design, mais également de supprimer une bannière publicitaire tout en ajoutant un carrousel de publication de blog en haut de la page.

Ces types de personnalisations ne sont pas possibles dans les options de Perfect Magazine, mais elles ne sont pas suffisamment importantes pour justifier la création d'un tout nouveau thème à partir de zéro.

Pourquoi créer un thème enfant ?

Les thèmes WordPress Child sont importants pour enregistrer et préserver tout le travail que vous avez mis sur un site. Si vous modifiez directement un thème, puis le mettez à jour avec une nouvelle version du logiciel, toutes vos modifications et personnalisations seront perdues.

C'est pourquoi de nombreux propriétaires de sites Web choisissent de ne pas mettre à jour du tout leur thème parent. Mais c'est un grave problème de sécurité puisque 54% des sites WordPress piratés avaient des logiciels obsolètes, que les pirates et les logiciels malveillants exécutent souvent des analyses pour trouver.

De plus, les mises à jour contiennent souvent des correctifs de vulnérabilité, donc ignorer une mise à jour signifie laisser votre site grand ouvert aux attaques.

Alternativement, vous pouvez créer un thème enfant pour éviter ces pièges.

Comme mentionné précédemment, l'utilisation d'un thème enfant WordPress peut également accélérer le développement.

Avec les systèmes de fichiers et les éléments essentiels d'un site déjà configurés, vous n'avez pas à recommencer à zéro. Vous pouvez vous appuyer sur un thème préexistant et tirer parti des fonctionnalités tout en personnalisant sa conception.

Premiers pas avec un thème enfant WordPress

Il y a quelques éléments clés dont vous avez besoin pour créer un thème enfant :

1. Un dossier répertoire de thèmes
2. Un fichier style.css
3. Un fichier functions.php

Alors que le seul fichier requis dans un thème enfant est style.css , le fichier functions.php est nécessaire pour mettre correctement en file d'attente la feuille de style du thème parent.

Il est donc fortement recommandé de créer un fichier functions.php dans votre thème enfant pour éviter les erreurs.

Créer un thème enfant WordPress

Lors de la création de votre thème enfant WordPress, il y a quatre étapes, qui sont décrites en détail ci-dessous : créer un dossier de répertoire, créer une feuille de style, mettre en file d'attente les nouvelles feuilles de style et les feuilles de style parent et activer le thème.

Création d'un dossier répertoire

Tous les thèmes sont situés dans le dossier /wp-content/themes/ de votre installation WordPress.

Accédez à ce répertoire et créez un nouveau dossier qui servira de dossier de thème enfant.

En règle générale, le thème est renommé en utilisant le nom du thème parent, mais en ajoutant -child à la fin.

Par exemple, les deux chemins de fichiers seront /wp-content/themes/yourtheme/ et /wp-content/themes/yourtheme-child/ .

Il ne devrait pas non plus y avoir d'espaces dans le nom du thème enfant.

Bien qu'il ne s'agisse pas de règles strictes pour nommer votre dossier, en particulier si vous ne distribuez pas le thème à un usage public, il s'agit d'une pratique de développement WordPress courante car elle facilite l'organisation.

Création d'une feuille de style

Les thèmes enfants WordPress sont souvent utilisés pour des modifications de conception assez étendues, un style.css distinct est donc nécessaire.

Le fichier contiendra toutes les règles et déclarations CSS qui affectent l'apparence de votre thème.

Créez un fichier style.css à la racine de votre nouveau dossier de thème enfant. Ensuite, saisissez cet en-tête en haut de la page :

 /*
 Nom du thème: Twenty Seventeen Child
 URI du thème : http://example.com/twenty-seventeen-child/
 Description: Vingt-sept thème enfant
 Auteur : Jane Doe
 URI de l'auteur : http://example.com
 Modèle : vingt-sept
 Version : 1.0.0
 Licence : Licence publique générale GNU v2 ou ultérieure
 URI de la licence : http://www.gnu.org/licenses/gpl-2.0.html
 Balises : clair, sombre, deux colonnes, barre latérale droite, mise en page réactive, prêt pour l'accessibilité
 Domaine du texte : vingt-sept-enfants
*/

L'en-tête est une partie essentielle du fichier, car il indique les détails de base de WordPress sur le thème. Il signale également qu'il s'agit d'un thème enfant avec un parent particulier, comme indiqué par la partie Modèle .

Les seules exigences pour l'en-tête sont le nom du thème et le modèle . Mais, il est préférable de remplir le reste.

Assurez-vous également de modifier tous les détails requis afin qu'ils soient exacts. Par exemple, l' auteur et l' URI de l'auteur ainsi que des références à Twenty Seventeen si le thème parent que vous utilisez est différent.

La section Balises concerne le répertoire de thèmes WordPress. Si vous souhaitez y télécharger votre thème, assurez-vous de choisir des balises qui se rapportent à votre thème.

Mise en file d'attente des feuilles de style de thème parent et enfant

Ensuite, il est important de s'assurer que la feuille de style de chaque thème se charge correctement dans un processus appelé mise en file d'attente.

Mettre en file d'attente signifie ajouter un élément ou une liste d'éléments à une file d'attente pour le traitement des données. Dans ce cas, la file d'attente correspond aux fichiers que votre site Web doit charger lorsqu'un navigateur les demande.

Si vous deviez ignorer la mise en file d'attente, votre site ne tirerait que de la feuille de style de votre thème enfant et n'utiliserait aucun des styles fournis par le thème parent.

Il peut également être important de noter qu'il est possible de mettre en file d'attente le parent style.css à l'aide de la méthode @import . Mais cela n'est plus recommandé en raison de problèmes de performances.

Pour mettre les feuilles de style en file d'attente, vous devez créer un fichier functions.php si vous ne l'avez pas déjà fait.

Cela peut être fait en créant un nouveau fichier et en le nommant functions.php . Puis. placez ce code tout en haut :

 <?php

Assurez-vous de ne pas inclure d'espaces avant la ligne ci-dessus ou cela entraînera une erreur.

Dans le fichier functions.php , ajoutez le code ci-dessous pour vous assurer que votre site charge correctement le style.css parent ainsi que le style.css du thème enfant dans le bon ordre :

 add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

function mon_theme_enqueue_styles() {

    $parent_; // C'est le 'style vingt-sept' pour le thème Twenty Seventeen.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'style enfant',
        get_stylesheet_directory_uri() . '/style.css',
        tableau( $style_parent ),
        wp_get_theme()->get('Version')
    );
}
?>

Assurez-vous de modifier le style parent stocké dans la variable $parent-style pour inclure le nom de votre thème.

Comme recommandé par le WordPress Codex, ce code s'assurera que le parent style.css est chargé en tant que dépendance, ce qui signifie qu'il est nécessaire pour que le style.css du thème enfant se charge.

Activer le thème enfant

Une fois que vous avez enregistré tous vos fichiers, allez dans Apparence > Thèmes pour trouver votre thème enfant, puis cliquez sur le bouton Activer.

Vous n'aurez pas besoin d'activer également votre thème parent. Cependant, il doit toujours être installé et rester dans le dossier /wp-content/themes/ .

Le texte d'en-tête dans le style.css de votre thème enfant reliera les deux ensemble et clarifiera la relation pour votre installation WordPress.

Une fois que vous avez activé votre thème enfant, vous devrez peut-être réenregistrer votre menu dans Apparence> Menus ainsi que d'autres contenus dans les options de thème du personnalisateur si vous rencontrez des problèmes avec votre conception.

Conseils de personnalisation rapide

Avant de commencer le processus de développement, voici quelques conseils pour personnaliser votre thème enfant WordPress.

Image du thème

Sur la page Apparence > Thèmes , vous devez inclure votre propre image pour le thème.

Si vous souhaitez insérer quelque chose à la place pour remplacer la case à carreaux, vous pouvez télécharger un fichier image PNG 880 x 660 nommé screenshot.png .

Placez l'image à la racine de votre dossier de thème enfant. De cette façon, l'installation de WordPress saura l'utiliser comme image pour votre thème.

Remplacement des fichiers de thème parent

Si vous souhaitez insérer de nouveaux fichiers dans votre thème enfant WordPress pour remplacer les anciens composants, copiez le fichier parent dans le thème enfant, que vous pouvez ensuite personnaliser.

Lors du chargement du site, WordPress vérifiera si le thème enfant contient des fichiers correspondant au thème parent. S'il en trouve, ils remplaceront le fichier du thème parent d'origine.

Ça ne prend pas un village

La création d'un thème enfant WordPress n'a pas besoin d'être aussi compliquée que cela puisse paraître. Suivez les étapes ci-dessus et soyez assuré que vos modifications resteront intactes. Cela aidera également votre site à être un peu plus sécurisé.

Quel genre de thème enfant voulez-vous faire? Avez-vous réussi à le créer ? Avez-vous rencontré des problèmes dans le processus? N'hésitez pas à partager votre expérience dans les commentaires ci-dessous.