Comment créer un thème enfant WooCommerce Storefront [Guide complet]

Publié: 2022-01-05

Comment créer un thème enfant WooCommerce Storefront Dans cet article, nous verrons comment vous pouvez créer un thème enfant WooCommerce Storefront en seulement quatre étapes simples. Le thème Storefront WooCommerce est l'une des principales raisons du succès de WooCommerce car il est gratuit et facile à utiliser pour créer une boutique unique avec un minimum d'effort.

De plus, Woocommerce offre des possibilités de personnalisation presque infinies, ce qui est un autre facteur important contribuant au succès de WooCommerce. Cela signifie que lorsqu'il est combiné avec le bon thème, il vous offrira une grande flexibilité de conception.

Thème enfant WooCommerce Storefront

Pour un look professionnel, le thème Storefront est un excellent choix. Maintenant que votre boutique WooCommerce est opérationnelle, vous pouvez toujours personnaliser l'apparence de votre boutique pour qu'elle corresponde à votre vision exacte.

Après avoir installé le thème de vitrine WooCommerce, l'étape suivante consiste à créer un thème enfant WooCommerce Storefront qui vous permettra d'apporter des modifications à votre thème de thème parent Storefront sans modifier directement le code du thème parent.

Cela facilite la personnalisation de l'apparence de votre boutique et élimine les risques potentiels pour votre thème et votre boutique, en particulier le risque de perdre la personnalisation que vous avez ajoutée lors de la mise à jour du thème WooCommerce Storefront.

Créer un thème enfant WooCommerce Storefront

Pourquoi créer un thème enfant WooCommerce Storefront ?

Si vous avez passé beaucoup de temps à lire sur WordPress, vous avez peut-être déjà rencontré des thèmes enfants. En termes simples, le thème enfant est une copie d'un autre thème, souvent appelé « thème parent ».

Cela signifie que vous pouvez apporter des modifications au thème enfant et les tester, sans modifier directement le thème parent. Il est important d'apporter des modifications au thème enfant, car la modification du thème d'origine peut entraîner des erreurs irréversibles et même endommager votre site Web.

De plus, vous souhaiterez peut-être créer un thème enfant car vous souhaitez utiliser un autre thème comme base. Cela vous fera gagner du temps et vous n'aurez pas à créer un nouveau thème entièrement à partir de zéro.

De plus, vous souhaiterez peut-être apporter quelques modifications mineures à l'image de marque ou à l'esthétique générale d'un thème. Utiliser un thème enfant ouvre de nombreuses possibilités selon le temps que vous êtes prêt à consacrer au projet en cours.

Cependant, vous pouvez télécharger plusieurs options à partir de la boutique officielle WooCommerce ou d'autres sites comme ThemeForest, mais aucun des thèmes enfants proposés ne correspond à vos besoins. De plus, vous voudrez peut-être créer un look unique. Le thème enfant Storefront vise à offrir une expérience de magasin parfaite pour votre créneau.

Il convient également de mentionner que le processus réel de création d'un thème enfant est le même pour WooCommerce ou un site WordPress plus général. Malgré ce fait, vous devez garder à l'esprit l'objectif de votre boutique lorsque vous personnalisez votre thème enfant.

Comment créer un thème enfant WooCommerce Storefront

Dans ce didacticiel, nous allons créer un thème qui utilise Storefront comme parent. Vous pouvez utiliser n'importe quel thème comme base. Il est également important que vous créiez une sauvegarde de votre site avant de continuer, car cela assurera la sécurité de votre boutique en cas de panne pendant le processus de développement.

De plus, il est également judicieux d'utiliser un environnement de mise en scène pour créer et peaufiner votre thème enfant. Pour créer le thème enfant, nous avons juste besoin de trois choses pour commencer : le répertoire du thème enfant, le fichier style.css et le fichier functions.php.

Voici les étapes à suivre pour créer un thème enfant WooCommerce.

1. Création du dossier de thème

Ce dossier de thème contiendra votre feuille de style et vos fichiers de fonction. D'un point de vue d'expert, il est idéal d'utiliser le nom de votre thème parent comme nom de dossier et de lui ajouter « -child ». Dans ce tutoriel, j'ai nommé mon répertoire "Storefront-child". Il est également important de vérifier que le nom du répertoire de votre thème enfant ne comporte pas d'espaces pour éviter d'éventuelles erreurs.

Créer un thème enfant WooCommerce Storefront

2. Feuille de style du thème enfant

Après avoir créé le dossier, vous devez créer une feuille de style pour le thème enfant. La feuille de style doit être définie pour hériter des styles de votre thème parent.

Pour ce faire, vous devez insérer l'en-tête de feuille de style suivant et les remplacer par les détails pertinents. Il convient également de mentionner que les personnalisations effectuées ici remplaceront les styles de thème parent.

 /*

 Nom du thème: Storefront Child

 URI du thème : http://sitename.com/storefront/

 Description : thème enfant de vitrine

 Auteur : Votre nom

 URI de l'auteur : http://nomdusite.com

 Modèle : vitrine /*ceci est sensible à la casse*/

 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, pleine largeur, mise en page réactive, prêt pour l'accessibilité

 Domaine de texte : storefront-child

*/

/*Les personnalisations de thème commencent ici*/

Cependant, dans ce tutoriel, je ne vais pas vous apprendre à utiliser le CSS, car il est impossible de le couvrir dans cet article. Vous devez apprendre le CSS ou embaucher un développeur pour effectuer les modifications CSS sur votre site Web.

3. Fonction de thème enfant

Dans les méthodes précédentes, ils vous suggèrent d'utiliser "@import" dans votre feuille de style pour charger votre thème enfant. Il est important de noter que cela n'est plus considéré comme une pratique exemplaire. Cependant, il vous suffit de "mettre en file d'attente" la feuille de style de votre thème parent dans le fichier functions.php de votre thème enfant.

Pour rendre cela possible, vous pouvez utiliser "wp_enqueue_scripts action" et utiliser "wp_enqueue_style()". Il convient également de mentionner que la feuille de style de votre thème enfant est généralement chargée automatiquement.

Vous devez bien le mettre en file d'attente pour qu'il soit chargé et vous devez vous assurer que la feuille de style enfant est prioritaire. Pour faciliter les choses, j'ai créé le code suivant qui définit 'parent-style' comme dépendance afin que votre feuille de style de thème enfant se charge après.

 <?php

fonction theme_enqueue_styles() {

$parent_style = 'parent-style';

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'style enfant', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

?>

4. Activation

Maintenant que le dossier de thème enfant est complet, vous devez créer un fichier .zip de votre dossier de thème enfant, afin de pouvoir l'ajouter à vos thèmes WordPress.

Vous pouvez le faire en utilisant 7-zip ou Winrar. Il est également important de vous assurer que vous avez votre style.css et functions.php dans votre dossier de thème enfant.

De plus, il est important de prendre note et de conserver des enregistrements des autres paramètres du plug-in avant d'activer votre thème enfant. Après cela, vous pouvez le télécharger dans votre WordPress via Apparence > Ajouter des thèmes . télécharger le thème Créer un thème enfant WooCommerce Storefront

WordPress l'installera comme n'importe quel thème et une fois qu'il est installé, vous devez l'activer en cliquant sur 'Activer' en allant dans Apparence > Thèmes comme indiqué ci-dessous : Créer un thème enfant WooCommerce Storefront

Après l'avoir activé, il ressemble au thème d'origine. Le thème enfant extrait les styles de votre thème parent. Ensuite, vous devez faire preuve de créativité et personnaliser l'apparence dans la feuille de style.

De plus, vous pouvez apporter des modifications aux fichiers de modèle de votre thème en copiant le fichier de modèle que vous souhaitez modifier, tel que header.php, de votre dossier parent vers votre dossier de thème enfant.

De plus, vous devrez également apporter quelques modifications pour spécifier la fonction utilisée par WordPress pour référencer les fichiers de modèle. Cela signifie que vous utiliserez le get_stylesheet_directory(); fonction au lieu de get_template_directory() pour référencer vos modèles.

Conclusion

À ce stade, je suis sûr que vous pouvez créer le thème enfant WooCommerce Storefront. Je vous recommande vivement de réviser votre CSS pour tirer le meilleur parti de votre style et de consulter notre autre guide sur la création de thèmes enfants pour encore plus de conseils.

Vous pouvez également acheter un thème enfant auprès d'un fournisseur tiers, mais vous n'avez pas à compter sur la créativité des autres. En effet, créer un thème enfant WooCommerce Storefront n'est pas aussi difficile que vous ne le pensez.

De plus, cela vous donne un contrôle presque total sur l'apparence et la fonctionnalité de votre magasin. Par conséquent, vous devez en créer un car cela est considéré comme une bonne pratique lors du travail de développement sur votre site WooCommerce.

De plus, modifier directement un thème fait courir le risque de perdre les modifications lors de la mise à jour. Le thème enfant veillera à ce que les modifications soient conservées intactes.