Post Top Ad

Your Ad Spot

miércoles, 26 de agosto de 2020

Cómo crear nuevos temas de Magento 2

Aquí aprenderá a crear nuevos temas para Magento 2. Veamos todos los pasos que debe seguir, incluida la declaración del tema de Magento, el registro, la aplicación en el panel de administración, la creación de directorios para CSS, JavaScript, imágenes y fuentes, la definición del logotipo del tema y otros. Con nuestra guía detallada, podrá crear un tema sin ninguna dificultad.
En este artículo, vamos a discutir la creación de temas en Magento 2. En comparación con Magento 1, la última versión se considera una plataforma más actualizada y actualizada. En cuanto al desarrollo de temas, la principal diferencia es que se ha implementado una estructura de código modular. Ahora, todos los archivos estáticos como JS, CSS e imágenes se encuentran en la carpeta web, mientras que la carpeta de aspectos se ha eliminado del directorio de inicio.
Después de completar los pasos a continuación, puede crear su primer tema, que se puede utilizar en el futuro como plantilla para sus otros temas:
Directorio de temas de Magento
Declaración del tema de Magento
Registro del tema de Magento
Agregar archivo Composer.json
Aplicar tema en el panel de administración
Creación de directorios para CSS, JavaScript, imágenes y fuentes
Definición del logotipo del tema
Configuración de imagen
Usando LESS para cambiar de estilo
Resumen de traducciones
Extender y anular el diseño
Plantillas de módulo
Eliminación de temas
Estructura del tema de Magento

Directorio de temas de Magento

Los temas de Magento 2 se encuentran en la carpeta / app / design / frontend . Primero, es necesario crear una carpeta de proveedor y luego crear una carpeta de tema dentro de ella.
Por ejemplo: / app / design / frontend / BelVG / air .
BelVG es un proveedor, air es una carpeta de temas. Cabe mencionar que los desarrolladores recomiendan comenzar el nombre de una carpeta con mayúscula a pesar de que esta no es una condición indispensable.

creación de tema magento 2

Declaración del tema de Magento

Para definir temas de Magento, en la carpeta raíz del tema debe crear un archivo .xml de tema con los siguientes detalles:

En la etiqueta del título , se define un nombre de tema. En la etiqueta principal , se define un tema que se establece como principal. Todos los archivos estáticos no encontrados, así como los archivos de plantilla, se tomarán de un tema principal. En este ejemplo, se define el tema "luma" vinculado con Magento 2 . Considerando que, Magento / tema en blanco se considera un tema principal para "luma". Es un tema básico, por lo que no hay un tema principal. En comparación con Magento 1, no hay límites en los niveles de herencia y su cantidad. En la etiqueta preview_image , se define una miniatura para presentar un tema en la parte de administración.
temas en magento 2 creando

Registro del tema de Magento

Para registrar un tema en el sistema, en la carpeta del tema debe crear un archivo registration.php con los siguientes detalles:

En nuestro caso, habrá:

 
creación de tema magento 2

Agregar archivo Composer.json

No es necesario, pero puede crear un archivo composer.json para difundir un tema como un paquete de compositor.
Por ejemplo, tomemos un archivo composer.json del tema "luma":

Aplicar tema en el panel de administración

Vaya a la sección Contenido -> Diseño -> Temas y asegúrese de que el tema creado esté en la lista:
registro de tema magento 2
Si vemos el tema necesario en la lista, vaya a Contenido → Diseño → Configuración y luego haga clic en Editar para el sitio web o tienda web al que desea aplicar su tema. Seleccione un tema y guarde la configuración.
registro del tema magento

Creación de directorios para CSS, JavaScript, imágenes y fuentes.

Creemos una carpeta para los archivos estáticos del tema. La estructura debe ser la siguiente:
app/design/frontend/<Vendor>/<theme>/
├──web /
│├──css /
││├──source /
│├──fonts /
│├──images /
│├──js /
Si todo lo relacionado con CSS, fuentes, imágenes y carpetas JS está claro, todavía hay una pregunta sobre una carpeta de origen y la forma en que debe usarse.
Magento 2 incorpora LESS, un preprocesador CSS que simplifica la gestión de archivos CSS complejos. Para definir estilos de una tienda, puede utilizar tanto CSS como hojas de estilo LESS.
Si su tema hereda del tema Blank o Luma listo para usar de Magento, puede anular los archivos LESS predeterminados.
Como ejemplo, podemos crear un archivo _theme.less con variables básicas anuladas en la interfaz de usuario de Magento. En la  carpeta / lib / web / css / source / lib / variables / en los archivos de origen, podemos encontrar valores predeterminados para esas variables que se pueden anular. Los estilos de módulo se pueden configurar en un archivo _module.less , así como para los widgets, se puede realizar en un archivo _widgets.less . Para correcciones menores, es posible crear un archivo _extend.less . Entonces, como ejemplo, vamos a cambiar un archivo _theme.less .
Ahora tenemos la siguiente estructura:

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas