Guide pour créer un thème dans Magento 2

Publié: 2015-11-20

Salut! Vous vous sentez curieux à propos de Magento 2.0 avec beaucoup de mises à jour et de changements ? Aujourd'hui, nous aimerions partager avec vous un article de blog sur Guide pour créer un thème dans Magento 2. Soyez toujours mis à jour en pratiquant tous les jours.

Dernière mise à jour : Nous venons de publier la version 2.0 du thème Claue Multipurpose Magento 2 avec de nombreuses améliorations de performances et des fonctionnalités exclusives. Découvrez ce thème maintenant : Thème Claue Magento 2. 0

claue2_edited (1)

Démo en direct

Claue - Clean, Minimal Magento 2 & 1 Theme est un excellent modèle pour une boutique de commerce électronique moderne et propre avec plus de 40 mises en page de page d'accueil et des tonnes d'options pour les mises en page de magasin, de blog, de portefeuille, de localisateur de magasin et d'autres pages utiles. La version 2. 0 de Claue est livrée avec un tas de fonctionnalités exclusives, notamment :

  • Être basé sur le thème Luma.
  • Répondre à toutes les normes du thème Magento
  • Amélioration significative des performances
  • Compatible avec la plupart des extensions tierces.
  • Entièrement compatible avec Magento 2.4.x

Cette deuxième version avancée se différencie complètement de la précédente. Ainsi, si vous utilisez la version 1 de Claue et que vous souhaitez mettre à jour vers la version 2 de Claue, vous ne pouvez que reconstruire un nouveau site Web plutôt que de mettre à jour à partir de l'ancienne version. Maintenant, revenons au sujet principal.

Le système de thème a un peu changé dans Magento 2 mais il y a des similitudes. Cette rubrique explique comment créer les fichiers qui composent un thème, comment ajouter un logo à un thème et comment dimensionner les images.

Créer un répertoire thématique

Pour créer le répertoire de votre thème :

  1. Allez dans <your Magento install dir>/app/design/frontend .
  2. Créez un nouveau répertoire nommé en fonction du nom de votre fournisseur : /app/design/frontend/<Vendor> .
  3. Sous le répertoire du fournisseur, créez un répertoire nommé en fonction de votre thème.
 application/conception/interface/
├── <Vendeur>/
│ │ ├──...<thème>/
│ │ │ ├── ...
│ │ │ ├── ...

Le nom du dossier correspond classiquement à la dénomination utilisée dans le code du thème : tout jeu de caractères alphanumériques, au gré du vendeur, est acceptable. Cette convention n'est qu'une recommandation, rien n'empêche donc de nommer ce répertoire d'une autre manière.

Déclarez votre thème

Après avoir créé un répertoire pour votre thème, vous devez créer theme.xml contenant au moins le nom du thème et le nom du thème parent (si le thème en hérite). Vous pouvez éventuellement spécifier où l'image d'aperçu du thème est stockée.

  1. Ajoutez ou copiez un theme.xml existant dans votre répertoire de thèmes app/design/frontend/<Vendor>/<theme>
  2. Configurez-le à l'aide de l'exemple suivant :
 <theme xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation= "urn:magento:framework:Config/etc/theme.xsd" > <title> New theme </title> <!-- your theme's name --> <parent> Magento/blank </parent> <!-- the parent theme, in case your theme inherits from an existing theme --> <media> <preview_image> media/preview.jpg </preview_image> <!-- the path to your theme's preview image --> </media> </theme>

Faites de votre thème un package Composer (facultatif)

Les thèmes par défaut de gento sont distribués sous forme de packages Composer.

Pour distribuer votre thème sous forme de package, ajoutez un fichier composer.json répertoire du thème et enregistrez le package sur un serveur de packaging. Un serveur de packaging public par défaut est https://packagist.org/.

composer.json fournit des informations sur la dépendance du thème.

Exemple de thème composer.json :

 { "name" : "magento/theme-frontend-luma" , "description" : "N/A" , "require" : { "php" : "~5.5.0|~5.6.0|~7.0.0" , "magento/theme-frontend-blank" : "100.0.*" , "magento/framework" : "100.0.*" }, "type" : "magento2-theme" , "version" : "100.0.1" , "license" : [ "OSL-3.0" , "AFL-3.0" ], "autoload" : { "files" : [ "registration.php" ] } }

Vous pouvez trouver des détails sur l'intégration de Composer dans le système Magento dans l'intégration de Composer.

Ajouter inscription.php

Pour enregistrer votre thème dans le système, dans votre répertoire de thèmes ajoutez un fichier registration.php avec le contenu suivant :

 <?php /** * Copyright 2015 Magento. All rights reserved. * See COPYING.txt for license details. */ \Magento\Framework\Component\ComponentRegistrar :: register ( \Magento\Framework\Component\ComponentRegistrar :: THEME , 'frontend/<Vendor>/<theme>' , __DIR__ );

Où <Vendor> est le nom de votre fournisseur, <theme> est le code du thème.

Pour illustration, voir le fichier registration.php du thème Magento Luma.

Configurer les images

Les tailles d'image de produit et les autres propriétés utilisées sur la vitrine sont configurées dans un fichier de configuration view.xml . Il est obligatoire pour un thème, mais facultatif s'il existe dans le thème parent.

Si les tailles des images produit de votre thème diffèrent de celles du thème parent, ou si votre thème n'hérite d'aucun thème, ajoutez view.xml en view.xml comme suit :

  1. Connectez-vous à votre serveur Magento en tant qu'utilisateur disposant des autorisations nécessaires pour créer des répertoires et des fichiers dans le répertoire d'installation de Magento. (Généralement, il s'agit du propriétaire du système de fichiers Magento.)
  2. Créez le répertoire etc dans votre dossier de thème
  3. Copiez view.xml du répertoire etc d'un thème existant (par exemple, du thème Blank) vers le répertoire etc votre thème.
  4. Configurez toutes les tailles d'image de produit de vitrine dans view.xml . Par exemple, vous pouvez faire en sorte que la grille de catégories visualise les images des produits soit carrée en spécifiant une taille de 250 x 250 pixels, voici à quoi ressemblerait la configuration correspondante :
 ... <image id= "category_page_grid" type= "small_image" > <width> 250 </width> <height> 250 </height> </image> ...

Pour plus d'informations sur la configuration des images dans view.xml , consultez la rubrique Configurer les images des propriétés pour une rubrique de thème.

Créer des répertoires pour les fichiers statiques

Votre thème contiendra probablement plusieurs types de fichiers statiques : styles, polices, JavaScript et images. Chaque type doit être stocké dans un sous-répertoire distinct de web dans votre dossier de thème :

 app/design/<zone>/<fournisseur>/<thème>/
├── internet/
│ ├── css/
│ │ ├── source/ 
│ ├── polices/
│ ├── images/
│ ├── js/

Dans le .../<theme>/web/images vous stockez les fichiers statiques liés au thème général. Par exemple, un logo de thème est stocké dans ...<theme>/web/images . Il est probable que votre thème contiendra également des fichiers spécifiques au module, qui sont stockés dans les sous-répertoires correspondants, comme .../<theme>/<Namespace_Module>/web/css et similaires. La gestion des fichiers de thème spécifiques au module est abordée dans les sections suivantes de ce guide.

Votre structure de répertoire de thème maintenant

À ce stade, la structure de votre fichier de thème ressemble à ceci :

 app/design/frontend/<Fournisseur>/
├── <thème>/
│ ├── etc./
│ │ ├── vue.xml
│ ├── internet/
│ │ ├── images
│ │ │ ├── logo.svg
│ ├── thème.xml
│ ├── composer.json

Logo du thème

Dans l'application Magento, le format et le nom par défaut d'une image de logo est logo.svg . Lorsque vous placez une image logo.svg à l'emplacement conventionnel, qui est le <theme_dir>/web/images , elle est automatiquement reconnue comme logo de thème. Il s'affiche dans l'en-tête de la page de votre boutique une fois le thème appliqué.

Dans votre thème personnalisé, vous pouvez utiliser un fichier de logo avec un nom et un format différents, mais vous devrez peut-être le déclarer.

La nécessité de la déclaration dépend si votre thème a un thème parent et son image de logo. Les cas suivants sont possibles :

  • Votre thème n'a pas de thème parent :
    • si le nom et le format de votre image de logo sont par défaut, logo.svg , il n'est pas nécessaire de le déclarer ;
    • si le nom ou le format de l'image de votre logo n'est pas par défaut, vous devez le déclarer dans la mise en page.
  • Votre thème a un thème parent :
    • si l'image de votre logo de thème a le même nom et le même format que le logo du thème parent, il n'est pas nécessaire de le déclarer ;
    • si votre image de logo a un nom ou un format différent, déclarez-le dans la mise en page.

Déclarer le logo du thème

Pour déclarer un logo de thème, ajoutez une mise en page étendue <theme_dir>/Magento_Theme/layout/default.xml .

Par exemple, si votre fichier de logo est my_logo.png taille 300x300px, vous devez le déclarer comme suit :

 <page xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation= "urn:magento:framework:View/Layout/etc/page_configuration.xsd" > <body> <referenceBlock name= "logo" > <arguments> <argument name= "logo_file" xsi:type= "string" > images/my_logo.png </argument> <argument name= "logo_img_width" xsi:type= "number" > 300 </argument> <argument name= "logo_img_height" xsi:type= "number" > 300 </argument> </arguments> </referenceBlock> </body> </page>

La déclaration de la taille du logo est facultative.

Visitez le blog Magesolution pour lire le didacticiel complet de Magento 2 et mettre à jour les derniers didacticiels sur Magento 2.

Source : magento.com