Theming for Magento 2 - Comenzando desde cero

27

Es probable que algunos de ustedes lean ese tema sobre temas desde cero para Magento 1: Theming - comenzando desde cero

Me preguntaba, ¿cuál sería la mejor práctica para desarrollar un tema desde cero para Magento 2?

  • ¿Construyes usando el nativo lumao el blanktema? O algo más ?
  • ¿Utiliza alguna extensión para ayudarlo a desarrollar su tema?
  • ¿Qué pasos sigues al desarrollar un tema desde cero?
magento2 theme template magento-2.0 design Raphael en Digital Pianism
fuente
Proporciono algunos enlaces en mi respuesta, por favor revíselos, conocerá la arquitectura frontend y el desarrollo de Magento 2.0.
Asheem Patro
Siga los pasos de Magento docs devdocs.magento.com/guides/v2.1/frontend-dev-guide/themes/… para crear el tema para la interfaz.
Rishabh Rk Rai

Respuestas:

45

TL: DR

¿Construyes usando la luma nativa o el tema en blanco? O algo más ?

Esto depende de usted, declarar un tema principal es opcional. Si no declara un padre, seguirá recurriendo a los módulos (por ejemplo, Magento_Catalog) que proporcionan archivos XML y de plantilla pero sin estilo.

¿Utiliza alguna extensión para ayudarlo a desarrollar su tema?

Como prefiero trabajar con SCSS y GULP, ahora uso Frontools y el tema en blanco SCSS . Elimina mucho el estrés de lidiar con el flujo de trabajo predeterminado Grunt / LESS.

¿Qué pasos sigues al desarrollar un tema desde cero?

  1. Declara el tema
  2. Eliminar el tema principal CSS (si es necesario)
  3. Agregue su propio CSS / LESS / SCSS

Mi opinión personal es que es mejor crear su propio "tema en blanco" desde cero, ya que puede adaptarlo para que sea exactamente lo que necesita.

Así es como crearía un tema desde cero, he usado NewStore / default como mi proveedor y nombre del tema.

Ahora para la respuesta más detallada ...

Crear el tema (según documentos oficiales)

Crea el tema según los documentos oficiales

Opcionalmente declarar un padre

Dentro de app/design/frontend/NewStore/default/theme.xmlusted tiene la opción de declarar un tema principal o no, para este ejemplo, he dejado de lado la línea 3 ( <parent>Vendor/theme</parent>) para que no haya un tema principal . Esto significa que todas las plantillas / archivos de diseño provendrán de los módulos mismos y no de Blank o Luma, y ​​no habrá estilo de tema ya que esto se agrega en el tema en blanco.

Mi theme.xml se ve así:

<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>

Elimine el estilo (si establece un tema principal) y agregue su propio CSS

Si establece en blanco o Luma como padre, deberá evitar que se carguen los archivos CSS. Para hacer esto, cree app/design/frontend/NewStore/default/Magento_Theme/layout/default_head_blocks.xmly agregue el siguiente XML:

<?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>

Esto elimina styles-m.css, styles-l.cssy print.cssagregados por el tema en blanco. También agrega styles.css como base para su propio CSS.

Si no especificó un padre, puede eliminar las 3 <remove />etiquetas en el código anterior.

Agrega tu propio CSS

Ahora puede diseñar su tema como quiera, soy fanático de Sass en lugar de MENOS, así que agregué este archivo: app/design/frontend/NewStore/default/web/css/styles.scss

Cambié el color de fondo aquí solo para demostrar que esto funciona, idealmente solo usarías este archivo para importar otros archivos Sass / Less.

Resultado

El resultado de lo que acabo de hacer es un tema sin estilo (aparte de mi hermoso fondo verde) que le permite diseñar su tema sin trabajar con el estilo de Magento (a veces difícil de trabajar).

ingrese la descripción de la imagen aquí

Consejos

  • Si prefiere trabajar con SCSS y no tiene tiempo para crear un tema desde cero, le recomiendo usar Frontools y el tema en blanco SCSS de Snowdog Apps .

  • Me parece que el aspecto más frustrante de trabajar con el código de front-end de Magento es cuán específico es su estilo, para ayudar a evitar esto, recomendaría usar la convención de nomenclatura BEM al escribir su propio estilo.

  • También son importantes los comentarios útiles, si un desarrollador acostumbrado a trabajar con Luma / Blank trabajó en un tema creado desde cero, probablemente encontraría que las cosas funcionan de manera muy diferente a lo que esperan.

Ben Crook
fuente
He creado mi propio tema en blanco usando sus instrucciones, sin un tema principal definido en theme.xml. Sin embargo, todavía hay todo tipo de estilos visibles en el front-end. La instalación de Magento está en developermodo y se han borrado todas las memorias caché. No sé de dónde vienen todos estos estilos, ¿tienes una idea?
fritzmg
¿Tiene alguna extensión / complemento instalado? También podría ser Barniz si está instalado, para descartar eso, agregue un signo de interrogación y una cadena aleatoria después de la URL, como?=123
Ben Crook
Sí, he descartado el barniz (o similar). No hay extensiones o complementos instalados.
fritzmg
¿Es el estilo del tema completo o solo partes de él? Es difícil para mí decirlo sin ver el sitio y la base de código. ¿Quizás hacer una nueva pregunta y publicar algunos detalles allí? Si me etiqueta, veré si puedo resolverlo.
Ben Crook
Es la temática completa por lo que puedo ver. Además del archivo CSS incluido de mi propio tema. Sí, probablemente sea mejor crear una nueva pregunta para esto :)
fritzmg
8

Hay muchos tutoriales para comenzar un tema en Magento 2.0. Proporciono algunos enlaces de video y algunos enlaces normales donde puede obtener un buen conocimiento sobre el desarrollo del tema en magento 2.0. haga clic aquí para ver el video

tomar referencia de estos enlaces también

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/

Desde este enlace aprenderá sobre la arquitectura frontend de magento 2.0

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

también revise estos dos enlaces

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
fuente
5

Heredo del espacio en blanco, pero avanzo rápidamente hacia el intento de crear un tema base más liviano que tenga una estructura CSS mucho menos compleja.

Vale la pena señalar que, en 2015, Magento salió y dijo que no recomiendan heredar de luma, ya que se reservan el derecho de realizar cambios no anunciados para sus propios fines de marketing y demostración. Más tarde revisaron esa declaración diciendo que su objetivo es permitir la herencia .

Lawrence
fuente
3

La mejor manera de comenzar a desarrollar un tema es comenzar heredando de lumao blank. La razón de esto es porque están diseñados para ser receptivos (es decir, amigables con múltiples resoluciones). También reduce la cantidad de trabajo que tiene que hacer para crear los diferentes archivos de plantilla y las definiciones JS / CSS. Todo lo que tiene que hacer es anular solo las piezas que desea personalizar con las suyas. Consulte los enlaces a continuación para obtener diferentes instrucciones sobre cómo desarrollar un tema.

Enlaces de documentación de Magento:

James Calcaben
fuente
Los archivos de plantilla ahora provienen de los módulos y no están en blanco / luma, por lo que puede omitirlos afectivamente si no requiere el estilo / cambios. Por ejemplo, si echa un vistazo a app / design / frontend / Magento / blank / Magento_Catalog, todo lo que hace es mover un elemento y agregar un estilo, las plantillas provienen de app / code / Magento / Catalog / view / frontend / templates y app / code / Magento / Catalog / view / base / templates
Ben Crook