Si alguna vez has trabajado o trabajas habitualmente en el desarrollo web con Magento seguramente has tenido que crear un tema hijo para almacenar todas las personalizaciones de la web de tu cliente. Con tanta información en Internet al respecto, contradicciones varias, y guías desactualizadas, hoy te enseñamos a crear un tema hijo para Magento 2 basado en el tema Luma.
Cuando quieres personalizar el tema que trae de serie Magento, llamado Luma, necesitas recurrir a la tendencia de crear un tema hijo. Se basa en la propiedad de herencia que tienen las plantillas y temas, mediante los cuales existe un tema padre (normalmente que viene de serie por el propio CMS o bien una plantilla que hemos adquirido y/o descargado) y un tema hijo. Este es el tema que nuestra agencia especializada en magento personalizamos y al que le agregamos todas las modificaciones para que la página web luzca como queremos.
¿Por qué es necesario crear un tema hijo?
En el mundo del desarrollo y páginas web no sólo los software como Wordpress, Prestashop o mismamente Magento se actualizan, también lo hacen las plantillas, en esa línea imagina por un momento si todas las modificaciones que hicieras en el tema cuando se produzca la actualización del mismo las perdieras. Es justamente lo que pasa si no usas un tema hijo. El tema hijo sirve por tanto como un almacén de modificaciones propias, un lugar seguro donde los desarrolladores hacen sus cambios con la seguridad de que futuras actualizaciones de las plantillas no se vean afectadas.
Hoy hablaremos de la creación de temas hijos en Magento, concretamente en la versión 2.4, y en concreto crearemos un tema hijo de Luma, que es el tema por defecto de Magento 2.
Pasos para crear un tema hijo basado en Luma para Magento
El primer paso es recordar la estructura que tienen las plantillas de Magento, supongamos que vamos a basarnos en la plantilla Luma, su directorio principal es /vendor/magento/theme-frontend-luma/, dentro de esta carpeta nos vamos a encontrar con varios ficheros importantes:
- registration.php: es el fichero que registra la plantilla en el sistema de Magento
- theme.xml: es el fichero que registra la información de la plantilla y mucho más importante, la herencia (o tema padre)
- composer.json: fichero que registra las dependencias y versiones de nuestra plantilla
Como dato de curiosidad, hablamos de crear un tema hijo a partir de Luma, que es el tema por defecto, pero ¿sabías que Luma a su vez tiene un padre y es el tema blank? También viene de serie, y puedes ver cómo está asociado con una estructura XML típica:
Como decíamos, la estructura básica de un tema en Magento se basa en esos 3 ficheros.
Hoy te vamos a enseñar a crear un tema hijo, ¿estás preparado? Vamos allá.
El primer paso es que accedas a la carpeta app/design/frontend y crees una carpeta con el nombre del "vendor", es decir, del fabricante de la plantilla. Tranquilo, te lo puedes inventar :)
Si te hace ilusión, llámalo Sysprovider, en mi caso lo he llamado MyTheme.
¿Ya lo tienes? Ahora vamos al siguiente paso, crea una subcarpeta (una carpeta dentro de MyTheme) llamada My_Theme, este es el nombre de tu plantilla, podrías haberlo llamado tema o tema_hijo, el nombre nos da igual. Importante: no pongas espacios o simúlalos con _, pero nunca dejes un espacio.
Una vez tengas la estructura, es necesario que crees tres ficheros claves:
- registration.php: aquí debes incluir este contenido que puedes modificar con los nombres que hayas definido para cada plantilla
<?php\Magento\Framework\Component\ComponentRegistrar::register(\Magento\Framework\Component\ComponentRegistrar::THEME,'frontend/MyTheme/My_Theme',__DIR__);
Aquí es importante que cambies MyTheme y My_Theme por los nombres de las carpetas de fabricante y de la plantilla hijo que acabas de crear, siguiendo las instrucciones antes indicadas.
- composer.json: aquí debes incluir este contenido que puedes modificar con los nombres que hayas definido para cada plantilla
{
"name": "mytheme/my_theme",
"description": "Your custom theme",
"require": {
"php": "~7.3.0||~7.4.0||~8.1.0"
},
"type": "magento2-theme",
"version": "1.0.0",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"autoload": {
"files": [
"registration.php"
]
}
}
- theme.xml: aquí debes incluir este contenido que puedes modificar con el nombre que hayas definido para la plantilla, donde "title".
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Sysprovider Tema hijo 3</title>
<parent>Magento/luma</parent>
</theme>
¿Ya lo tienes? Ya tienes tu tema hijo, ahora sólo te queda ejecutar:
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy es_ES en_US -f
php bin/magento cache:flush
y ya lo tienes. Si permaneces atento a los próximos tutoriales te enseñaremos a trabajar con tu tema hijo en Magento 2.