Guía para crear un tema en Magento 2

Publicado: 2015-11-20

¡Hola! ¿Sientes curiosidad por Magento 2.0 con muchas actualizaciones y cambios? Hoy, nos gustaría compartir con ustedes una publicación de blog sobre la Guía para crear un tema en Magento 2. Siempre manténgase actualizado practicando todos los días.

Última actualización: acabamos de lanzar la versión 2.0 de Claue Multipurpose Magento 2 Theme con un montón de mejoras de rendimiento y funciones exclusivas. Echa un vistazo a este tema ahora: Claue Magento Theme 2. 0

clausula2_editado (1)

Demo en vivo

Claue - Clean, Minimal Magento 2&1 Theme es una excelente plantilla para una tienda de comercio electrónico moderna y limpia con más de 40 diseños de página de inicio y toneladas de opciones para tiendas, blogs, portafolios, diseños de localizador de tiendas y otras páginas útiles. Claue versión 2.0 viene con un montón de características exclusivas que incluyen:

  • Estar basado en el tema Luma.
  • Cumple con todos los estándares de Magento Theme
  • Mejora significativa del rendimiento
  • Compatible con la mayoría de las extensiones de terceros.
  • Totalmente compatible con Magento 2.4.x

Esta segunda versión avanzada se diferencia por completo de la anterior. Por lo tanto, si está utilizando CLAUE la versión 1 y desea actualizar a CLAUE Versión 2, solo puede reconstruir un nuevo sitio web sin actualizar desde la versión anterior. Ahora, volvamos al tema principal.

El sistema de temas ha cambiado un poco en Magento 2 pero hay similitudes. Este tema trata sobre cómo crear los archivos que componen un tema, cómo agregar un logotipo a un tema y cómo cambiar el tamaño de las imágenes.

Crear un directorio de temas

Para crear el directorio para su tema:

  1. Vaya a <your Magento install dir>/app/design/frontend .
  2. Cree un nuevo directorio con el nombre de su proveedor: /app/design/frontend/<Vendor> .
  3. En el directorio de proveedores, cree un directorio con el nombre de acuerdo con su tema.
 aplicación/diseño/interfaz/
├── <Vendedor>/
│ │ ├──...<tema>/
│ │ │ ├── ...
│ │ │ ├── ...

El nombre de la carpeta coincide convencionalmente con el nombre utilizado en el código del tema: cualquier conjunto de caracteres alfanuméricos, según lo considere adecuado el proveedor, es aceptable. Esta convención es meramente una recomendación, por lo que nada impide nombrar este directorio de otra forma.

Declara tu tema

Después de crear un directorio para su tema, debe crear theme.xml que contenga al menos el nombre del tema y el nombre del tema principal (si el tema hereda de uno). Opcionalmente, puede especificar dónde se almacena la imagen de vista previa del tema.

  1. Agregue o copie desde un theme.xml existente a su directorio de temas app/design/frontend/<Vendor>/<theme>
  2. Configúrelo usando el siguiente ejemplo:
 <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>

Haz que su tema sea un paquete compositor (opcional)

Los temas predeterminados de gento se distribuyen como paquetes de Composer.

Para distribuir su tema como un paquete, agregue un archivo composer.json al directorio del tema y registre el paquete en un servidor de empaquetado. Un servidor de empaquetado público predeterminado es https://packagist.org/.

composer.json proporciona información sobre la dependencia del tema.

Ejemplo de un tema 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" ] } }

Puede encontrar detalles sobre la integración de Composer en el sistema Magento en Integración de Composer.

Añadir registro.php

Para registrar su tema en el sistema, en su directorio de temas agregue un archivo registration.php con el siguiente contenido:

 <?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__ );

Donde <Vendor> es el nombre de su proveedor, <theme> es el código del tema.

Para una ilustración, vea el archivo registration.php del tema Magento Luma.

Configurar imágenes

Los tamaños de imagen del producto y otras propiedades utilizadas en el escaparate se configuran en un archivo de configuración view.xml . Es obligatorio para un tema, pero es opcional si existe en el tema principal.

Si los tamaños de imagen del producto de su tema difieren de los del tema principal, o si su tema no hereda de ningún tema, agregue view.xml usando los siguientes pasos:

  1. Inicie sesión en su servidor Magento como usuario con permisos para crear directorios y archivos en el directorio de instalación de Magento. (Normalmente, este es el propietario del sistema de archivos de Magento).
  2. Crea el directorio, etc en tu carpeta temática
  3. Copie view.xml del directorio etc de un tema existente (por ejemplo, del tema Blank) al directorio etc de su tema.
  4. Configure todos los tamaños de imagen de productos de escaparate en view.xml . Por ejemplo, puede hacer la categoría Grid Ver imágenes de productos Square especificando un tamaño de 250 x 250 píxeles, aquí es cómo se vería la configuración correspondiente:
 ... <image id= "category_page_grid" type= "small_image" > <width> 250 </width> <height> 250 </height> </image> ...

Para obtener detalles sobre la configuración de imágenes en view.xml , consulte el tema Configurar propiedades de imágenes para un tema.

Crear directorios para archivos estáticos.

Es probable que su tema contenga varios tipos de archivos estáticos: estilos, fuentes, JavaScript e imágenes. Cada tipo debe almacenarse en un subdirectorio separado de la web en su carpeta de temas:

 Aplicación / Diseño / <Área> / <Vendor> / <Theme> /
├──web/
│ ├── CSS/
│ │ ├── fuente/ 
│ ├── fuentes/
│ ├── imágenes/
│ ├── js/

En .../<theme>/web/images almacena los archivos estáticos generales relacionados con el tema. Por ejemplo, el logotipo de un tema se almacena en ...<theme>/web/images . Es probable que su tema también contenga archivos específicos del módulo, que se almacenan en los subdirectorios correspondientes, como .../<theme>/<Namespace_Module>/web/css y similares. La gestión de los archivos de temas específicos del módulo se analiza en las siguientes secciones de esta guía.

Su estructura de directorio de su tema ahora

En este punto, la estructura de archivos de su tema se ve de la siguiente manera:

 app/diseño/frontend/<Proveedor>/
├── <tema>/
│ ├── etc/
│ │ ├── ver.xml
│ ├──web/
│ │ ├── imágenes
│ │ │ ├── logotipo.svg
│ ├── tema.xml
│ ├── compositor.json

logotipo del tema

En la aplicación Magento, el formato y el nombre predeterminados de una imagen de logotipo es logo.svg . Cuando coloca una imagen logo.svg en la ubicación convencional, que es el <theme_dir>/web/images , se reconoce automáticamente como el logotipo del tema. Se muestra en el encabezado de la página de tu tienda una vez que se aplica el tema.

En su tema personalizado, puede usar un archivo de logotipo con un nombre y formato diferente, pero es posible que deba declararlo.

La necesidad de la declaración depende de si su tema tiene un tema principal y su imagen de logotipo. Los siguientes casos son posibles:

  • Su tema no tiene un tema principal:
    • si el nombre y el formato de la imagen de su logotipo son predeterminados, logo.svg , no es necesario declararlo;
    • Si el nombre o el formato de la imagen de su logotipo no es el predeterminado, debe declararlo en el diseño.
  • Su tema tiene un tema principal:
    • si la imagen del logotipo de su tema tiene el mismo nombre y formato que el logotipo del tema principal, no es necesario declararlo;
    • si la imagen de su logotipo tiene un nombre o formato diferente, declárelo en el diseño.

Declarando el logo del tema

Para declarar un logotipo de tema, agregue un diseño extendido <theme_dir>/Magento_Theme/layout/default.xml .

Por ejemplo, si el archivo de su logotipo es my_logo.png y tiene un tamaño de 300x300 px, debe declararlo de la siguiente manera:

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

Declarar el tamaño del logotipo es opcional.

Visite el blog de Magesolution para leer el tutorial completo de Magento 2 y actualizar los últimos tutoriales sobre Magento 2.

Fuente: magento.com