Como criar um tema filho no Magento 2

18

Quero modificar certos aspectos do tema Luma pronto para uso, mas gostaria de fazê-lo preservando o (s) arquivo (s) original (ais) e também assegurando que sempre que atualizo o Magento, também preservo minhas alterações.

Eu quero fazer isso por meio de um tema infantil.

O Magento 2 suporta temas filhos e, em caso afirmativo, como estruturo meu caminho de diretório para que isso aconteça?

magento2 parent-child-theme H. Ferrence
fonte
11
Sou grato por você ter feito esta pergunta. Eu estava pensando a mesma coisa!
amigos estão dizendo sobre camdixon

Respostas:

26

Vamos criar um tema filho para que todos os nossos temas personalizados no Magento 2 cheguem aqui:

app / design / frontend / nome_empresa / nome_da_ tema

Vamos supor que o nome da nossa empresa seja minhaempresa e o nome do nosso tema seja básico. Precisamos criar a seguinte estrutura de diretórios para o nosso tema:

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

minha compania :-

O nome do pacote de temas

básico: - O nome do tema. Podemos ter vários temas nomeados dentro da pasta mycompany.

etc / view.xml: -

Este arquivo é usado para especificar dimensões da imagem do produto, miniaturas etc.

Magento_Theme: - Este diretório é usado para substituir os arquivos de temas existentes do Magento.

Magento_Theme / layout / default.xml: - Por padrão, o Magento2 assume que o arquivo de logotipo do seu tema deve ser: /web/media/logo.svg Se você deseja outro arquivo para o logotipo, deve declará-lo no default.xmlarquivo.

Este arquivo também é usado para substituir as configurações do tema padrão.

media / preview.png: - A visualização do tema atual.

web: - Este diretório contém todos os dados estáticos do tema, como imagens, estilos, javascript, fontes etc.

registration.php: - Este arquivo é necessário para registrar nosso tema no sistema Magento2.

theme.xml: - Este é um arquivo obrigatório que define o nome do tema, seu pai e, opcionalmente, a imagem de visualização do tema.

Criando arquivos de tema

Vamos agora criar nossos arquivos um por um.

theme.xml (app / design / frontend / minhaempresa / 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 / minhaempresa / basic / registration.php)

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

default.xml (app / design / frontend / minhaempresa / básico / 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>

Neste ponto, nosso tema está pronto. Limpe seu cache e agora vamos selecionar nosso novo tema de admin.

Agora, faça login no admin e vá para o seguinte caminho:

Content -> Design -> Themes

Você deve ver o seu tema listado.

Agora vá para:

Stores -> Configuration -> Design

Escolha Site principal na frente da Visualização da loja, no canto superior esquerdo. Agora clique

Desgin -> Design Theme

Desmarque a caixa de seleção Usar padrão e escolha seu tema. Clique em Salvar configuração, limpe seu cache e seu novo tema está pronto. Verifique sua página inicial.

Para mais detalhes veja aqui.

Arunendra
fonte
Obrigado pelo extenso guia passo a passo @Arunendra. Vou tentar em breve e postar de volta.
H. Ferrence 31/03
Isso é excelente @Arunendra. Funcionou perfeitamente. Só precisa segui-lo completamente sem pular nenhuma etapa.
H. Ferrence 31/03
11
Ótimo passo a passo @Arunendra. Caso alguém tenha os mesmos problemas que eu, o local onde você aplica o tema registrado mudou de Design -> Design Themepara Content/Design/Configuration.
Kedmasterk
Nota importante: O arquivo media/preview.pngdeve existir, caso contrário, o Magento lançará uma exceção.
Salman von Abbas
5

Crie diretórios:

Vá para root no diretório raiz e navegue para app / design / frontend , crie o diretório Demo .

Agora crie o diretório Mytheme em app / design / frontend / Demo.

Crie o diretório Mangento_Theme em app / design / frontend / Demo / Mytheme.

Crie um diretório de layout em app / design / frontend / Demo / Mytheme / Magento_Theme.

Crie um diretório de mídia em app / design / frontend / Demo / Mytheme.

Crie um diretório da web em app / design / frontend / Demo / Mytheme.

Crie um diretório de imagens em app / design / frontend / Demo / Mytheme / web.

Declaração de Tema

Crie o arquivo theme.xml em app / design / frontend / Demo / Mytheme e cole o seguinte 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 do Tema

Agora crie o arquivo registration.php em app / design / frontend / Demo / Mytheme e cole o seguinte código:

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

Carregar imagem de visualização do tema

Vá para app / design / frontend / Demo / Mytheme / media e faça upload da sua imagem de visualização (preview.jpg) aqui.

Declaração do logotipo do tema

Vá para app / design / frontend / Demo / Mytheme / Magento_Theme / layout e crie um arquivo default.xml. Cole o seguinte código nele:

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

Carregar logotipo do tema

Acesse app / design / frontend / Demo / Mytheme / web / images e faça o upload do seu logotipo (mytheme-logo.png) aqui.

Aplique o seu tema

  • Abra o painel Admin do seu Magento 2 e vá para Conteúdo → Configuração.

  • Clique na opção Editar.

  • Selecione Mytheme no menu suspenso Tema aplicado e clique em
    Salvar configuração.

Executar comandos

Abra o terminal SSH e vá para o diretório raiz do seu Magento 2. Agora execute todos esses comandos um por um:

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
fonte