:::: MENU ::::

Magento 2. Crear un nuevo tema / theme

3.31 avg. rating (66% score) - 13 votes

En Magento 2 los temas o plantillas han cambiado (como casi todo) respecto a Magento 1, así que en este artículo explicamos cómo crear un nuevo tema en Magento 2 paso a paso.

Una de las características más destacadas y que supone un paso adelante respecto a Magento 1 es el nuevo sistema de fallback para la creación de temas. En Magento 1, los Temas Magento se organizaban en packages y themes.

Diferencias en la creación de nuevos temas en Magento 1 y Magento 2

Dentro de cada package podíamos designar un tema por defecto y uno o varios temas personalizados. Si un archivo o configuración no se encontraba en el tema personalizado, Magento lo buscaba en el tema por defecto de nuestro package. En caso de no encontrarlo allí, se recurría al tema base de Magento. Como máximo en Magento 1 podíamos tener nuestro tema activo, un tema por defecto dentro del package activo y finalmente el tema base del que heredaban todos los temas. El número máximo en la cadena de temas heredados, era tres.

En Magento 2 se ha creado un sistema de herencia entre temas, de forma que no estamos limitados a realizar la herencia dentro de un mismo package, con lo que el número de herencias que podemos realizar de un tema a otro es prácticamente ilimitado.

Otra diferencia fundamental es que en Magento 1 no estaba del todo bien definida la diferencia entre theme y skin, ya que a menudo cuando creábamos o instálabamos un tema, existían archivos tanto a nivel de plantillas (app/design) como en la carpeta skin. En Magento 2 por el contrario, todo el contenido de un tema se encuentra dentro de la misma carpeta, lo que hace más sencilla la distribución, al igual que ocurre con los módulos y extensiones.

Creación de un tema básico en Magento 2

Para crear un nuevo tema en Magento 2 tenemos que crear varios archivos de configuración, al contrario de lo que ocurría en Magento 1, donde únicamente necesitábamos crear las carpetas correspondientes y ya nos aparecía en el backend.

En primer lugar deberemos crear un par de carpetas dentro de app/design/frontend. En nuestro caso hemos optado por el nombre NV_Test para nuestra plantilla, con lo que crearemos la ruta: app/design/frontend/NV/test

Observad que el nombre del tema va en minúscula, lo que puede confundir en un primer momento respecto a lo que hacemos en el caso de los módulos.

A continuación y de forma similar a lo que hacemos con los módulos, necesitaremos crear un archivo registration.php que indica al sistema que lo que contiene nuestra carpeta es un tema. El contenido del archivo deberá ser similar al siguiente:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/NV/test',
    __DIR__
);

El siguiente paso es crear un archivo theme.xml donde informaremos a Magento del nombre de nuestra plantilla y del tema del que realizamos la herencia de archivos, en el caso de que queremos hacerlo. En nuestro caso partimos del tema blank, uno de los disponibles por defecto en la instalación de Magento 2.

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Título del tema</title>
    <parent>Magento/blank</parent>
    <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
</theme>

En este archivo, además podemos incluir una imagen de previsualización de nuestra plantilla, que en este caso hemos llamado preview.jpg. Atención porque dicho archivo y la carpeta media, deben estar dentro de nuestro theme y no dentro de la carpeta media de magento.

Finalmente, si deseamos distribuir nuestra plantilla por medio del marketplace de magento o a través de algún repositorio de composer, deberemos crear el correspondiente archivo composer.json, que contendrá algo como lo siguiente:

{
  "name": "nv/theme-frontend-test",
  "description": "Descripcion de la plantilla",
  "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"
    ]
  }
}

En este caso, informamos a Magento de la compatibilidad y requisitos de nuestra plantilla para funcionar. En este caso indicamos que nuestra plantilla es compatible con todas las versiones 100.0.* de Magento 2 y que requiere PHP 5.5 o superior para funcionar.




3 Comments

Hey! Qué opinas sobre el artículo?