Theming for Magento 2 - Partir de zéro

27

Certains d'entre vous ont probablement lu ce sujet concernant le thème à partir de zéro pour Magento 1: Theming - à partir de zéro

Je me demandais, quelle serait la meilleure pratique pour développer un thème à partir de zéro pour Magento 2?

  • Construisez-vous en utilisant le natif lumaou le blankthème? Ou autre chose?
  • Utilisez-vous une extension pour vous aider à développer votre thème?
  • Quelles étapes suivez-vous lors du développement d'un thème à partir de zéro?
magento2 theme template magento-2.0 design Raphael chez Digital Pianism
la source
Je fournis quelques liens dans ma réponse, veuillez le parcourir, vous connaîtrez l'architecture frontend et le développement de Magento 2.0.
Asheem Patro
Suivez les étapes de Magento docs devdocs.magento.com/guides/v2.1/frontend-dev-guide/themes/… pour créer le thème du frontend.
Rishabh Rk Rai

Réponses:

45

TL: DR

Construisez-vous en utilisant le thème natif luma ou vide? Ou autre chose?

Cela dépend de vous, déclarer un thème parent est facultatif. Si vous ne déclarez pas de parent, vous aurez toujours recours aux modules (par exemple Magento_Catalog) qui fournissent des fichiers XML et de modèle mais pas de style.

Utilisez-vous une extension pour vous aider à développer votre thème?

Comme je préfère travailler avec SCSS et GULP, j'utilise maintenant Frontools et le thème vierge SCSS . Il supprime une grande partie du stress lié au traitement du flux de travail Grunt / LESS par défaut.

Quelles étapes suivez-vous lors du développement d'un thème à partir de zéro?

  1. Déclarez le thème
  2. Supprimer le thème CSS parent (si nécessaire)
  3. Ajoutez votre propre CSS / LESS / SCSS

Mon opinion personnelle est qu'il est préférable de créer votre propre "thème vierge" à partir de zéro car vous pouvez l'adapter exactement à ce dont vous avez besoin.

C'est ainsi que je créerais un thème à partir de zéro, j'ai utilisé NewStore / default comme nom de fournisseur et de thème.

Maintenant, pour la réponse plus détaillée ...

Créez le thème (selon les documents officiels)

Créez le thème selon les documents officiels

Déclaration facultative d'un parent

En app/design/frontend/NewStore/default/theme.xmlvous, vous avez le choix de déclarer un thème parent ou non, pour cet exemple, j'ai omis la ligne 3 ( <parent>Vendor/theme</parent>) donc il n'y a pas de thème parent . Cela signifie que tous les modèles / fichiers de mise en page proviendront des modules eux-mêmes et non de Blank ou Luma, et il n'y aura pas de style de thème car cela est ajouté dans le thème vierge.

Mon theme.xml ressemble à ceci:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>NewStore default</title>
    <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
</theme>

Supprimez le style (si vous définissez un thème parent) et ajoutez votre propre CSS

Si vous définissez vide ou Luma en tant que parent, vous devrez empêcher le chargement des fichiers CSS. Pour ce faire, créez app/design/frontend/NewStore/default/Magento_Theme/layout/default_head_blocks.xmlet ajoutez le XML suivant:

<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>

        <!-- Remove blank/luma theme styling if you declared a parent -->
        <remove src="css/styles-m.css" />
        <remove src="css/styles-l.css" />
        <remove src="css/print.css" />

        <!-- Add your own CSS files -->
        <css src="css/styles.css" />
    </head>
</page>

Cela supprime styles-m.css, styles-l.csset print.cssajouté par le thème de vide. Il ajoute également styles.css comme base pour votre propre CSS.

Si vous n'avez pas spécifié de parent, vous pouvez supprimer les 3 <remove />balises dans le code ci-dessus.

Ajoutez votre propre CSS

Vous pouvez maintenant personnaliser votre thème comme bon vous semble, je suis un fan de Sass plutôt que de LESS, j'ai donc ajouté ce fichier - app/design/frontend/NewStore/default/web/css/styles.scss

J'ai changé la couleur d'arrière-plan ici juste pour prouver que cela fonctionne, idéalement vous n'utiliseriez ce fichier que pour importer d'autres fichiers Sass / Less.

Résultat

Le résultat de ce que je viens de faire est un thème sans style (à part mon beau fond vert) vous permettant de styliser votre thème sans travailler avec le style de Magento (parfois difficile à travailler).

entrez la description de l'image ici

Conseils

  • Si vous préférez travailler avec SCSS et que vous n'avez pas le temps de créer un thème à partir de zéro, je recommande d'utiliser Frontools et le thème vierge SCSS à la fois par Snowdog Apps .

  • Je trouve que l'aspect le plus frustrant de travailler avec le code frontal de Magento est la spécificité de leur style.Pour éviter cela, je recommande d'utiliser la convention de dénomination BEM lors de l'écriture de votre propre style.

  • Des commentaires utiles sont également essentiels, si un développeur habitué à travailler avec Luma / Blank travaillait sur un thème construit à partir de zéro, il trouverait probablement que les choses fonctionnent assez différemment de ce à quoi il s'attend.

Ben Crook
la source
J'ai créé mon propre thème vierge à l'aide de vos instructions, sans thème parent défini dans le theme.xml. Cependant, il y a toujours toutes sortes de styles visibles dans le front-end. L'installation de Magento est en developermode et tous les caches ont été effacés. Je ne sais pas d'où viennent tous ces styles - avez-vous une idée?
fritzmg
Avez-vous des extensions / plugins installés? Il peut également s'agir de Varnish s'il est installé, pour exclure l'ajout d'un point d'interrogation et d'une chaîne aléatoire après l'URL, comme?=123
Ben Crook
Oui, j'ai exclu Varnish (ou similaire). Aucune extension ou plug-in n'est installé.
fritzmg
Est-ce le style complet du thème ou seulement des parties de celui-ci? C'est difficile pour moi de dire sans voir le site et la base de code. Peut-être poser une nouvelle question et y poster quelques détails? Si vous me taggez, je verrai si je peux y arriver.
Ben Crook
C'est le thème complet pour autant que je puisse voir. Plus le fichier CSS inclus de mon propre thème. Oui, il est probablement préférable de créer une nouvelle question pour cela :)
fritzmg
8

Il existe de nombreux tutoriels pour démarrer un thème dans Magento 2.0. Je fournis des liens vidéo et des liens normaux où vous pouvez obtenir une bonne connaissance du développement de thème dans magento 2.0. cliquez ici pour la vidéo

prendre référence à partir de ces liens aussi

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html

http://blog.magestore.com/how-to-create-custom-theme-on-magento-2-part-1/

À partir de ce lien, vous découvrirez l'architecture frontend de magento 2.0

http://inchoo.net/magento-2/frontend-theme-architecture/

vérifiez également ces deux liens

http://www.webmull.com/magento-2-create-new-custom-theme/

http://www.slideshare.net/Magestorecom/how-to-create-theme-in-magento-2-part-1

Asheem Patro
la source
5

J'hérite du blanc mais je m'oriente rapidement vers la création d'un thème de base plus léger qui a une structure CSS beaucoup moins complexe.

Il convient de noter qu'en 2015, Magento est sorti et a déclaré qu'il ne recommandait pas d'hériter de luma car il se réservait le droit d'y apporter des modifications inopinées à ses propres fins de marketing et de démonstration. Ils ont ensuite révisé cette déclaration en disant que leur objectif était de permettre l'héritage .

Lawrence
la source
3

La meilleure façon de commencer à développer un thème est de commencer par hériter de lumaou blank. La raison en est qu'ils sont conçus pour être réactifs (c'est-à-dire compatibles avec plusieurs résolutions). Cela réduit également la quantité de travail que vous avez à faire pour créer les différents fichiers de modèle et définitions JS / CSS. Tout ce que vous avez à faire est de remplacer uniquement les pièces que vous souhaitez personnaliser avec les vôtres. Voir les liens ci-dessous pour différentes instructions sur la façon de développer un thème.

Liens de documentation Magento:

James Calcaben
la source
Les fichiers de modèle proviennent désormais des modules et non de blanc / luma, vous pouvez donc les contourner affectivement si vous n'avez pas besoin du style / des modifications. Par exemple, si vous jetez un œil à app / design / frontend / Magento / blank / Magento_Catalog, cela ne fait que déplacer un élément et ajouter du style, les modèles proviennent de app / code / Magento / Catalog / view / frontend / templates et application / code / Magento / Catalogue / vue / base / modèles
Ben Crook