Cómo crear un tema infantil en Magento 2

18

Quiero modificar ciertos aspectos del tema Luma listo para usar, pero me gustaría hacerlo conservando los archivos originales y también asegurándome de que cada vez que actualice Magento conserve mis cambios también.

Quiero hacer esto a través de un tema infantil.

¿Magento 2 admite temas secundarios y, de ser así, cómo estructuro mi ruta de directorio para que esto suceda?

magento2 parent-child-theme H. Ferrence
fuente
1
Le agradezco que haya hecho esta pregunta. Me preguntaba lo mismo!
camdixon

Respuestas:

26

Permite crear un tema secundario para que todos nuestros temas personalizados en Magento 2 vayan aquí:

app / design / frontend / company_name / theme_name

Supongamos que el nombre de nuestra empresa es mycompany y el nombre de nuestro tema es básico. Necesitamos crear la siguiente estructura de directorios para nuestro tema:

app
└────design
     └──────frontend
            └──mycompany
               └───basic
                   └──etc
                   └──Magento_Theme
                   │       └─layout
                   │             default.xml
                   └──media
                   │       preview.png
                   └──web
                   │  └─css
                   │  └─fonts
                   │  └─images
                   │  └─js
                   │ theme.xml
                   │ registration.php

mi empresa :-

El nombre del paquete temático.

básico: - El nombre del tema. Podemos tener múltiples temas con nombre dentro de la carpeta mycompany.

etc / view.xml: -

Este archivo se utiliza para especificar dimensiones de imágenes de productos, miniaturas, etc.

Magento_Theme: - Este directorio se utiliza para anular los archivos de temas existentes de Magento.

Magento_Theme / layout / default.xml: - Por defecto, Magento2 asume que el archivo del logotipo de su tema debería ser: /web/media/logo.svg Si desea algún otro archivo para el logotipo, debe declararlo endefault.xml archivo.

Este archivo también se usa para anular la configuración predeterminada del tema.

media / preview.png: - La vista previa del tema actual.

web: este directorio contiene todos los datos estáticos del tema, como imágenes, estilos, javascript, fuentes, etc.

registration.php: - Este archivo es necesario para registrar nuestro tema en el sistema Magento2.

theme.xml: - Este es un archivo obligatorio que define el nombre de nuestro tema, su padre y, opcionalmente, la imagen de vista previa del tema.

Crear archivos de tema

Permítanos ahora crear nuestros archivos uno por uno.

theme.xml (app / design / frontend / mycompany / basic / theme.xml)

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
   <title>Basic</title> <!-- your theme's name -->
   <parent>Magento/blank</parent> <!-- the parent theme -->
   <media>
        <preview_image>media/preview.jpg</preview_image> <!-- theme's preview image -->
   </media>
</theme>

registration.php (app / design / frontend / mycompany / basic / registration.php)

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

default.xml (app / design / frontend / mycompany / basic / 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/my_logo.png</argument>
              <argument name="logo_img_width" xsi:type="number">200</argument>
              <argument name="logo_img_height" xsi:type="number">200</argument>
           </arguments>
        </referenceBlock>
    </body>
</page>

En este punto, nuestro tema está listo. Borre su caché y ahora seleccionaremos nuestro nuevo tema de administrador.

Ahora, inicie sesión en admin y avance a la siguiente ruta:

Content -> Design -> Themes

Deberías ver tu tema en la lista.

Ahora ve a:

Stores -> Configuration -> Design

Elija el sitio web principal frente a la vista de la tienda en la parte superior izquierda. Ahora haga clic

Desgin -> Design Theme

Desmarque la casilla de verificación Usar predeterminado y elija su tema. Haga clic en Guardar configuración, borre su caché y su nuevo tema está listo. Revisa tu página de inicio.

Para más detalles ver aquí.

Arunendra
fuente
Gracias por la extensa guía paso a paso @Arunendra. Lo intentaré en breve y volveré a publicar.
H. Ferrence
Esto es excelente @Arunendra. Funcionó a la perfección. Solo necesita seguirlo por completo sin omitir ningún paso.
H. Ferrence
1
Gran paso a paso @Arunendra. En caso de que alguien tenga los mismos problemas que yo, la ubicación donde aplica su tema registrado ha cambiado de Design -> Design Themea Content/Design/Configuration.
Kedmasterk
Nota importante: el archivo media/preview.pngdebe existir; de lo contrario, Magento generará una excepción.
Salman von Abbas
5

Crear directorios:

Vaya a root al directorio raíz y navegue a app / design / frontend , cree el directorio Demo .

Ahora cree el directorio Mytheme en app / design / frontend / Demo.

Cree el directorio Mangento_Theme en app / design / frontend / Demo / Mytheme.

Crear directorio de diseño en app / design / frontend / Demo / Mytheme / Magento_Theme.

Crear directorio de medios en app / design / frontend / Demo / Mytheme.

Crear directorio web en app / design / frontend / Demo / Mytheme.

Cree un directorio de imágenes en app / design / frontend / Demo / Mytheme / web.

Declaración del tema

Cree el archivo theme.xml en app / design / frontend / Demo / Mytheme y pegue el siguiente código:

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

Registro de tema

Ahora cree el archivo Registration.php en app / design / frontend / Demo / Mytheme y pegue el siguiente código:

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

Subir imagen de vista previa del tema

Vaya a app / design / frontend / Demo / Mytheme / media y cargue su imagen de vista previa (preview.jpg) aquí.

Declaración del logotipo del tema

Vaya a app / design / frontend / Demo / Mytheme / Magento_Theme / layout y cree un archivo default.xml. Pegue el siguiente código en él:

<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/mytheme-logo.png</argument>
<argument name="logo_img_width" xsi:type="number">200</argument>
<argument name="logo_img_height" xsi:type="number">200</argument>
</arguments>
</referenceBlock>
</body>
</page>

Subir logo de tema

Vaya a app / design / frontend / Demo / Mytheme / web / images y cargue su logotipo (mytheme-logo.png) aquí.

Aplica tu tema

  • Abra el panel de administración de su Magento 2 y vaya a Contenido → Configuración.

  • Haga clic en la opción Editar.

  • Seleccione Mytheme en el menú desplegable Tema aplicado y haga clic en
    Guardar configuración.

Ejecutar comandos

Abra la terminal SSH y vaya al directorio raíz de su Magento 2. Ahora ejecute todos estos comandos uno por uno:

rm -rf var/di/* var/generation/* var/cache/* var/log/* var/page_cache/* var/session/* var/view_preprocessed/* pub/static/*
php bin/magento setup:upgrade
php bin/magento setup:db-schema:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento indexer:reindex
php bin/magento cache:clean
php bin/magento cache:flush
Syed Muneeb Ul Hasan
fuente