Crear un nuevo tema con Magento2

1. Crear una carpeta de tema para Magento 2

Crear una carpeta para el tema:

Ir a app/design/frontend
Crear una carpeta de proveedor app/design/frontend/<proveedor> por ejemplo: app/design/frontend/Mageplaza
Crear una carpeta de tema app/design/frontend/<proveedor>/<tema> por ejemplo: app/design/frontend/Mageplaza/simple

2. Declarar tu tema

Ahora que tenemos la carpeta app/design/frontend/Mageplaza/simple, crea un archivo llamado theme.xml que define información básica sobre el tema, como: Nombre, tema padre (en caso de que tu tema herede de un tema existente), imagen de vista previa.

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
     <title>Mageplaza Simple</title> <!-- nombre de tu tema -->
     <parent>Magento/blank</parent> <!-- tema padre, en caso de que tu tema herede de un tema existente -->
     <media>
         <preview_image>media/preview.jpg</preview_image> <!-- la ruta de la imagen de vista previa de tu tema -->
     </media>
 </theme>

3. Paquete de Composer

Composer es una herramienta para la gestión de dependencias en PHP. Te permite declarar las bibliotecas en las que tu proyecto depende y gestionará (instalar/actualizar) esas dependencias por ti.

Para distribuir tu tema como un paquete, agrega un archivo composer.json al directorio del tema y registra el paquete en un servidor de empaquetado.

Ejemplo de composer.json:

{
    "name": "mageplaza/simple",
    "description": "N/A",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0|~8.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"
        ]
    }
}

4. Archivo registration.php

Puedes agregar el siguiente contenido para registrar el tema en Magento 2

<?php
/**
 * Copyright © 2015 Magento. Todos los derechos reservados.
 * Ver COPYING.txt para los detalles de la licencia.
 */
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Mageplaza/simple',
    __DIR__
);

Debes cambiar Mageplaza, simple por tu proveedor y nombre de tema.

5. Crear archivos y carpetas estáticos

En un diseño, hay muchos archivos estáticos como javascript, css, imágenes y fuentes. Se almacenan en carpetas separadas en la web del paquete del tema.

Aquí está la estructura:

app/design/frontend/Mageplaza/simple/
├── web/
│ ├── css/
│ │ ├── source/ 
│ ├── fonts/
│ ├── images/
│ ├── js/

Consejos:

En Magento 2, desarrollo de temas o extensiones, al actualizar cualquier archivo en la carpeta app/design/frontend/Mageplaza/simple/web, debes actualizar las carpetas estáticas ubicadas en pub/static y var/view_preprocessed; de lo contrario, no verás cambios en el frontend.

6. Configurar imágenes de productos en el catálogo

Como puedes ver en la estructura del tema que mencioné anteriormente, hay un archivo llamado etc/view.xml. Este es un archivo de configuración. Este archivo es necesario para el tema de Magento 2, pero es opcional si existe en el tema padre.

Ir a app/design/frontend/Mageplaza/simple/ y crear una carpeta etc y un archivo view.xml. Puedes copiar el archivo view.xml del tema padre, como el tema Blank app/design/frontend/Magento/blank/etc/view.xml.

Actualiza la configuración de imagen para la página del catálogo de productos.

<image id="category_page_grid" type="small_image">
    <width>250</width>
    <height>250</height>
</image>

En view.xml, las propiedades de las imágenes se configuran en el ámbito del elemento:

<images module="Magento_Catalog">
...
<images/>

Las propiedades de las imágenes se configuran para cada tipo de imagen definido por los atributos id y type del elemento :

<images module="Magento_Catalog">
    <image id="unique_image_id" type="image_type">
    <width>100</width> <!-- Ancho de la imagen en píxeles --> 
        <height>100</height> <!-- Altura de la imagen en píxeles -->
    </image>
<images/>

7. Declarar el logotipo del tema

En Magento 2 por defecto, se utiliza /web/images/logo.svg, en tu tema, puedes cambiar a diferentes formatos de archivo como png, jpg, pero debes declararlo.

El tamaño del logotipo debe ser de 300×300 píxeles y debes abrir el archivo /Magento_Theme/layout/default.xml

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

8. Elementos básicos del diseño

Los componentes básicos del diseño de página de Magento son bloques y contenedores.

Un contenedor existe con el único propósito de asignar la estructura de contenido a una página. Un contenedor no tiene contenido adicional excepto el contenido de los elementos incluidos. Ejemplos de contenedores incluyen el encabezado, la columna izquierda, la columna principal y el pie de página.

9. Tipos y convenciones de archivos de diseño
   Archivos de diseño de módulos y temas

Se utilizan los siguientes términos para distinguir los diseños proporcionados por diferentes componentes de la aplicación:

Diseños base: Archivos de diseño proporcionados por módulos. Ubicación convencional:
    Configuración de página y archivos de diseño genéricos: <module_dir>/view/frontend/layout
    Archivos de diseño de página

: /view/frontend/page_layout
Diseños de temas: Archivos de diseño proporcionados por temas. Ubicación convencional:
Configuración de página y archivos de diseño genéricos: //layout Archivos de diseño de página: //page_layout

Crear un archivo de tema que se extienda

En lugar de copiar extensos códigos de diseño de página o configuración de página y luego modificar lo que deseas cambiar, en el sistema de Magento, solo necesitas crear un archivo de diseño que se extienda y que contenga los cambios que deseas.

Para agregar un archivo de configuración de página o un archivo de diseño genérico que se extienda:

<theme_dir>
 |__/<Namespace>_<Module>
   |__/layout
     |--<layout1>.xml
     |--<layout2>.xml

Por ejemplo, para personalizar el diseño definido en /view/frontend/layout/catalog_product_view.xml, debes agregar un archivo de diseño con el mismo nombre en tu tema personalizado, como sigue:

<theme_dir>/Magento_Catalog/layout/catalog_product_view.xml

<theme_dir>
 |__/<Namespace>_<Module>
   |__/page_layout
     |--<layout1>.xml
     |--<layout2>.xml

Anular los diseños base

Anular no es necesario si un bloque tiene un método que cancela el efecto del método originalmente invocado. En este caso, puedes personalizar el diseño agregando un archivo de diseño donde se invoque el método de cancelación.

Para agregar un archivo de diseño base que anule (para anular un diseño base proporcionado por el módulo): coloca un archivo de diseño con el mismo nombre en la siguiente ubicación:

<theme_dir>
  |__/<Namespace_Module>
    |__/layout
      |__/override
         |__/base
           |--<layout1>.xml
           |--<layout2>.xml

Estos archivos anulan los siguientes diseños:

<module_dir>/view/frontend/layout/<layout1>.xml
<module_dir>/view/frontend/layout/<layout2>.xml

Anular los diseños de temas

Para agregar un archivo de anulación de tema (para anular un diseño de tema principal):

<theme_dir>
  |__/<Namespace_Module>
    |__/layout
      |__/override
         |__/theme
            |__/<Parent_Vendor>
               |__/<parent_theme>
                  |--<layout1>.xml
                  |--<layout2>.xml

Estos archivos anulan los siguientes diseños:

<parent_theme_dir>/<Namespace>_<Module>/layout/<layout1>.xml
<parent_theme_dir>/<Namespace>_<Module>/layout/<layout1>.xml

¡Consejos!

• Cambiar el nombre o alias del bloque. El nombre de un bloque no debe cambiarse, al igual que el alias de un bloque que permanece en el mismo elemento principal.
• Cambiar la herencia del identificador. Por ejemplo, no debes cambiar el identificador del tipo de página principal.