En este Tutorial veremos que pasos necesitamos seguir para poder crear un Tema Básico con Magento2.
¿Qué es un Tema?
Un tema es un componente de Magento que proporciona un diseño a nuestra aplicación tanto para el frontend como para el backend.
El Tema lo crearemos usando una combinación de layouts, templates, estilos e imágenes.
Los temas son creados por vendedores y distribuidos en paquetes para el sistema de Magento.
Magento 2 ofrece 2 temas por defecto; el primero es Luma que es un tema de demostración y el tema blank es un tema básico del que poder partir para crear nuestros propios temas.
Localización de Temas
Los temas son creados en los siguientes directorios
- app/design/frontend/<vendor>/<tema>/ para el frontend
- app/design/adminhtml/<vendor>/<tema>/ para el backend
Podemos crear un nuevo tema o podemos hacer que herede de otro ya existente.
La idea de este tutorial es crear un tema hijo que herede el comportamiento del tema blank de Magento2.
Empezaremos activando el modo desarrollador desde linea de comandos.
|
1 |
php ./bin/magento deploy:mode:set developer |
Los temas para el frontend en Magento 2.3 son creados en la carpeta app/design/frontend/
Y al igual que a la hora de crear un módulo personalizado tendremos que crear una carpeta vendor y otra con el nombre de nuestro tema.
|
1 |
app/design/frontend/Artegrafico/Fusion/ |
Declaración del Tema
El tema es declarado en un fichero llamado theme.xml el en directorio raíz de nuestro tema.
Este contendrá el nombre del tema y el tema padre del cual es heredado.
El campo media es opcional y contiene el nombre de la imagen de demostración del tema.
|
1 |
app/design/frontend/Artegrafico/Fusion/theme.xml |
|
1 2 3 4 5 6 7 |
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>Artegrafico Fusion</title> <parent>Magento/blank</parent> <media> <preview_image>media/preview.jpg</preview_image </media> </theme> |
Composer Package
Si queremos distribuir nuestro tema y que este pueda instalar o actualizar componentes necesitamos crear un fichero llamado composer.json
En este fichero incluiremos sus dependencias, version, licencia, autores, etc …
|
1 |
app/design/frontend/Artegrafico/Fusion/composer.json |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
{ "name": "Artegrafico/Fusion", "description": "N/A", "require": { "php": "~7.0|~7.1|~7.2", "magento/theme-frontend-blank": "100.0.*", "magento/framework": "100.0.*", "magento/magento-composer-installer": "*", "Artegrafico/Fusion": "100.0.*" }, "type": "magento2-theme", "version": "100.0.1", "license": [ "OSL-3.0", "AFL-3.0" ], "autoload": { "files": [ "registration.php" ] } } |
Registro del tema
Al igual que con la creación de módulos, los temas necesitan ser registrados por Magento.
Para ello necesitamos crear un fichero llamado registration.php
|
1 |
app/design/frontend/Artegrafico/Fusion/registration.php |
|
1 2 3 4 5 |
\Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/Artegrafico/Fusion', __DIR__ ); |
Configuraciones
Los tamaños de imágenes de productos y otras configuraciones usadas por nuestro tema son creadas en el fichero view.xml que tendremos que crear en el directorio etc/ de nuestro tema.
|
1 |
app/design/frontend/Artegrafico/Fusion/etc/view.xml |
Este fichero será obligatorio si nuestro tema no es heredado de ningún otro y opcional en el caso de que si lo sea.
Ficheros estáticos
El tema puede contener diferentes tipos de ficheros estáticos, desde hojas de estilos, imágenes, javascript, etc …
Para poder organizarlos debidamente crearemos una estructura para ellos
|
1 2 3 4 |
app/design/frontend/Artegrafico/Fusion/web/css/ app/design/frontend/Artegrafico/Fusion/web/css/source/ app/design/frontend/Artegrafico/Fusion/web/images/ app/design/frontend/Artegrafico/Fusion/web/js/ |
Toda la caché de estos ficheros estáticos y que son accedidos por usuarios son guardados en el directorio pub/static/ y var/view_preprocessed/
En modo developer si cambiamos alguna parte de nuestro tema, Magento2 se encargará de limpiarlos automáticamente.
En modo producción estos ficheros estáticos no son cacheados por lo que tendremos que hacer un deploy desde linea de comandos.
Ficheros de layout
El tema también contendrá ficheros de layout que se encargan de la capa de vistas de la aplicación.
Si realizamos alguna modificación en ellos tendremos que limpiar la caché para comprobar cualquier cambio que hayamos realizado.
Estilos
Magento 1x usaba SASS para crear los estilos del tema pero la novedad en Magento2 es que usa LESS para construirlas.
Si decides usar LESS necesitarás crear un fichero llamado _theme.less en la carpeta css/source/ para poder extender los ficheros del tema heredado.
Logo del Tema
El formato por defecto que usará Magento para incluir el Logo de nuestro tema es logo.svg por lo que si lo encuentra en la carpeta web/images/ lo reconocerá como el logo del tema.
Podremos usar un logo con un nombre y formato diferente pero necesitamos declararlo desde el layout de tu tema.
Los layouts los explico en la parte 2, pero si queremos incluir el logo personalizado desde el layout necesitamos sobrescribir el layout default.xml del la libreria Magento_Theme
Este fichero de layout se encargará de mostrar tanto la cabecera, contenidos y pie de página de nuestro tema y está ubicado en Magento/Theme/view/frontend/layout/default.xml
Por lo que necesitamos crear en nuestro tema la carpeta Magento_Theme/layout/ y en ella crear el fichero default.xml
|
1 |
app/design/frontend/Artegrafico/Magento_Theme/layout/default.xml |
|
1 2 3 4 5 6 7 8 9 10 11 |
<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/you_logo_here.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> |
* El logo de nuestro tema también también podrá ser cambiado desde el propio Backend de Magento.
Aplicación y activación
Para poder aplicar y activar un tema tendremos que hacerlo desde el Backend de Magento2.
Es la única forma de registrar e incluir el tema en la base de datos de Magento.
Desde Content > Design > Configuration asignaremos el nuevo tema creado.
Recuerda que hay que limpiar la caché para que los cambios tengan su efecto.
Desinstalación
En caso de necesitar desinstalar o borrar un tema creado manualmente eliminaremos el directorio del tema.
|
1 |
rm -rf ./app/design/frontend/<vendor>/<tema>/* |
Eliminamos cualquier registrodel tema en la tabla theme de la base de datos
|
1 2 3 |
$ mysql -u -<user> -p use magento2-2.2.3; delete from theme where the_path = '<vendor>/<tema>' ana area = 'fronted'; |
Esta es una parte importante porque Magento es muy quejica y puede mostrarte el error «Magento 2.x Required parameter ‘theme_dir’ was not passed» en muchas áreas de tu backend.
Si lo hubieramos descargado vía composer:
|
1 2 3 |
php ./bin/magento module:disable vendor_module –clear-static-content php bin/magento setup:upgrade composer remove vendor/tema |
