Guia para criar um tema no Magento 2

Publicados: 2015-11-20

Oi! Você se sente curioso sobre o Magento 2.0 com muitas atualizações e mudanças? Hoje, gostaríamos de compartilhar com você uma postagem no blog sobre o Guia para criar um tema no Magento 2. Esteja sempre atualizado praticando todos os dias.

Última atualização: Acabamos de lançar a versão 2.0 do Claue Multipurpose Magento 2 Theme com várias melhorias de desempenho e recursos exclusivos. Confira este tema agora: Claue Magento Theme 2. 0

claue2_edited (1)

Demonstração ao vivo

Claue – Clean, Minimal Magento 2&1 Theme é um excelente modelo para uma loja de comércio eletrônico moderna e limpa com mais de 40 layouts de página inicial e toneladas de opções para loja, blog, portfólio, layouts de localizador de lojas e outras páginas úteis. A versão 2.0 do Claue vem com vários recursos exclusivos, incluindo:

  • Sendo baseado no tema Luma.
  • Conheça todos os padrões do tema Magento
  • Melhoria significativa de desempenho
  • Compatível com a maioria das extensões de terceiros.
  • Totalmente compatível com Magento 2.4.x

Esta segunda versão avançada diferencia-se completamente da anterior. Assim, se você estiver usando o Claue versão 1 e quiser atualizar para o Claue versão 2, você só pode reconstruir um novo site em vez de atualizar da versão antiga. Agora, vamos voltar ao assunto principal.

O sistema de temas mudou um pouco no Magento 2, mas há semelhanças. Este tópico discute como criar os arquivos que compõem um tema, como adicionar um logotipo a um tema e como dimensionar imagens.

Crie um diretório de temas

Para criar o diretório para o seu tema:

  1. Vá para <your Magento install dir>/app/design/frontend .
  2. Crie um novo diretório nomeado de acordo com o nome do seu fornecedor: /app/design/frontend/<Vendor> .
  3. No diretório do fornecedor, crie um diretório nomeado de acordo com seu tema.
 aplicativo/design/frontend/
├── <Fornecedor>/
│ │ ├──...<tema>/
│ │ │ ├── ...
│ │ │ ├── ...

O nome da pasta corresponde convencionalmente à nomenclatura usada no código do tema: qualquer conjunto alfanumérico de caracteres, conforme o fornecedor achar adequado, é aceitável. Esta convenção é meramente uma recomendação, então nada impede de nomear este diretório de outra forma.

Declare seu tema

Depois de criar um diretório para seu tema, você deve criar theme.xml contendo pelo menos o nome do tema e o nome do tema pai (se o tema herdar de um). Opcionalmente, você pode especificar onde a imagem de visualização do tema é armazenada.

  1. Adicione ou copie de um theme.xml existente para seu diretório de temas app/design/frontend/<Vendor>/<theme>
  2. Configure-o usando o seguinte exemplo:
 <theme xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation= "urn:magento:framework:Config/etc/theme.xsd" > <title> New theme </title> <!-- your theme's name --> <parent> Magento/blank </parent> <!-- the parent theme, in case your theme inherits from an existing theme --> <media> <preview_image> media/preview.jpg </preview_image> <!-- the path to your theme's preview image --> </media> </theme>

Transforme seu tema em um pacote do Composer (opcional)

Os temas padrão do gento são distribuídos como pacotes do Composer.

Para distribuir seu tema como um pacote, adicione um arquivo composer.json ao diretório de temas e registre o pacote em um servidor de empacotamento. Um servidor de empacotamento público padrão é https://packagist.org/.

composer.json fornece informações de dependência de tema.

Exemplo de um tema composer.json :

 { "name" : "magento/theme-frontend-luma" , "description" : "N/A" , "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" ] } }

Você pode encontrar detalhes sobre a integração do Composer no sistema Magento na integração do Composer.

Adicionar registro.php

Para registrar seu tema no sistema, no diretório do seu tema adicione um arquivo registration.php com o seguinte conteúdo:

 <?php /** * Copyright 2015 Magento. All rights reserved. * See COPYING.txt for license details. */ \Magento\Framework\Component\ComponentRegistrar :: register ( \Magento\Framework\Component\ComponentRegistrar :: THEME , 'frontend/<Vendor>/<theme>' , __DIR__ );

Onde <Vendor> é o nome do seu fornecedor, <theme> é o código do tema.

Para ilustração, veja o arquivo registration.php do tema Magento Luma.

Configurar imagens

Os tamanhos de imagem do produto e outras propriedades usadas na vitrine são configuradas em um arquivo de configuração view.xml . É necessário para um tema, mas é opcional se existir no tema pai.

Se os tamanhos de imagem do produto do seu tema forem diferentes dos do tema pai ou se o seu tema não herdar de nenhum tema, adicione view.xml usando as seguintes etapas:

  1. Faça login no seu servidor Magento como um usuário com permissões para criar diretórios e arquivos no diretório de instalação do Magento. (Normalmente, este é o proprietário do sistema de arquivos Magento.)
  2. Crie o diretório etc na pasta do seu tema
  3. Copie view.xml do diretório etc de um tema existente (por exemplo, do tema Blank) para o diretório etc do seu tema.
  4. Configure todos os tamanhos de imagem de produto de vitrine em view.xml . Por exemplo, você pode tornar as imagens de produtos de exibição de grade de categorias quadradas especificando um tamanho de 250 x 250 pixels. Veja como seria a configuração correspondente:
 ... <image id= "category_page_grid" type= "small_image" > <width> 250 </width> <height> 250 </height> </image> ...

Para obter detalhes sobre a configuração de imagens em view.xml , consulte o tópico Configurar propriedades de imagens para um tema.

Criar diretórios para arquivos estáticos

Seu tema provavelmente conterá vários tipos de arquivos estáticos: estilos, fontes, JavaScript e imagens. Cada tipo deve ser armazenado em um subdiretório separado da web na pasta do seu tema:

 app/design/<área>/<Fornecedor>/<tema>/
├── web/
│ ├── css/
│ │ ├── fonte/ 
│ ├── fontes/
│ ├── imagens/
│ ├── js/

Em .../<theme>/web/images você armazena os arquivos estáticos relacionados ao tema geral. Por exemplo, um logotipo de tema é armazenado em ...<theme>/web/images . É provável que seu tema também contenha arquivos específicos do módulo, que são armazenados nos subdiretórios correspondentes, como .../<theme>/<Namespace_Module>/web/css e similares. O gerenciamento dos arquivos de tema específicos do módulo é discutido nas seções a seguir deste Guia.

Sua estrutura de diretórios de temas agora

Neste ponto, sua estrutura de arquivos de tema se parece com o seguinte:

 app/design/frontend/<Fornecedor>/
├── <tema>/
│ ├── etc/
│ │ ├── view.xml
│ ├── web/
│ │ ├── imagens
│ │ │ ├── logo.svg
│ ├── theme.xml
│ ├── composer.json

Logotipo do tema

No aplicativo Magento, o formato e o nome padrão de uma imagem de logotipo é logo.svg . Quando você coloca uma imagem logo.svg no local convencional, que é <theme_dir>/web/images , ela é automaticamente reconhecida como logotipo do tema. Ele é exibido no cabeçalho da página da sua loja assim que o tema é aplicado.

Em seu tema personalizado, você pode usar um arquivo de logotipo com um nome e formato diferentes, mas talvez seja necessário declará-lo.

A necessidade de declaração depende se o seu tema tem um tema pai e sua imagem de logotipo. Os seguintes casos são possíveis:

  • Seu tema não tem um tema pai:
    • se o nome e o formato da imagem do seu logotipo forem padrão, logo.svg , não há necessidade de declará-lo;
    • se o nome ou formato da imagem do logotipo não for padrão, você precisará declará-lo no layout.
  • Seu tema tem um tema pai:
    • se a imagem do logotipo do seu tema tiver o mesmo nome e formato do logotipo do tema dos pais, não há necessidade de declará-lo;
    • se a imagem do seu logotipo tiver um nome ou formato diferente, declare-o no layout.

Declarando o logotipo do tema

Para declarar um logotipo de tema, adicione um layout de extensão <theme_dir>/Magento_Theme/layout/default.xml .

Por exemplo, se seu arquivo de logotipo for my_logo.png com tamanho de 300x300px, você precisará declará-lo da seguinte forma:

 <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" > 300 </argument> <argument name= "logo_img_height" xsi:type= "number" > 300 </argument> </arguments> </referenceBlock> </body> </page>

Declarar o tamanho do logotipo é opcional.

Visite o blog Magesolution para ler o tutorial completo do Magento 2 e atualizar os tutoriais mais recentes sobre o Magento 2.

Fonte: magento.com