Como Criar a Estrutura Básica Tema Magento 1.9

Olá, Dando continuidade agora vamos criar a estrutura básica do nosso tema, que é muito semelhante a estrutura que fizemos no tutorial de como criar um tema magento com mínimo arquivos, se não viu vale a pena dar uma lida.

Sequência dos artigos

* Como criar um ambiente de trabalho para cirar temas Magento 1.9
* Como fazer a estrutura básica
Como manipular o CSS
Como lidar com imagens
Como trabalhar com arquivos de layout (XML)
Como trabalhar com arquivos de template (PHTML)
Como personalizar a tradução dentro do tema
BÔNUS: Como manipular o slideshow nativo do Magento 1.9

Desativar o cache

Antes de tudo, não se esqueça de desativar o cache para que não tenhamos sustos com o layout.

Vá em sistema > Gerenciamento de Cache

Você pode selecionar todas as opções, mas por enquanto podemos marcar somente as quatro primeiras: Configuração, Layouts, Blocks HTML output e Traduções.

Em Ações selecione Desativar e clique no botão Enviar.

magento-estrutura-01

Depois de recarregar a tela ela ficará assim

magento-estrutura-02

Com isso podemos dar sequência às alterações

Criando as pastas principais

Como sabe o Magento divide o tema em duas pastas, uma na pasta app/design/frontend e outra em skin/frontend. Para criarmos um tema responsivo aproveitando o tema nativo desta versão vamos criar um tema personalizado do pacote de tema rwd. Assim aproveitaremos este excelente tema responsivo que já vem nativo com o Magento

Primeiro crie as pastas do tema:

Vamos primeiro criar as duas pastas principais do nosso tema que vai ficar dentro de app/design/frontend/rwd e skin/frontend/rwd, vou chamar este tema de red, então fica assim:

app/design/frontend/rwd/red

skin/frontend/rwd/red

agora dentro de cada pasta vamos copiar a estrutura padrão de qualquer tema, entenda que talvez não utilizemos todas estas pastas e poderemos apagá-las no futuro. Então na pasta app/design/frontend/red colocaremos as pastas layout, template e locale. Na pasta skin/frontend/red irão as pastas images js e css então a estrutura ficará assim:

app/design/frontend/rwd/red
app/design/frontend/rwd/red/layout
app/design/frontend/rwd/red/locale
app/design/frontend/rwd/red/template

skin/frontend/rwd/red
skin/frontend/rwd/red/css
skin/frontend/rwd/red/images
skin/frontend/rwd/red/js

Com isso temos o esqueleto de um tema, está tudo vazio, mas já podemos alterar o tema na loja Magento.

Vá em Sistema > Configuração > Design,

Abra a guia temas e

No campo Predefinido escreva o nome do seu tema, no meu caso red.

magento-estrutura-03jpg

Pronto com isso já definimos nosso tema como o tema padrão do Magento, mas como saber se funcionou se não tem nenhum arquivo? Simples, mova um arquivo para dentro dele

Vá na pasta skin/fronend/rwd/default/css, copie o arquivo styles.css e cole na pasta skin/frontend/rwd/red/css.

Agora vá a sua frente de loja, atualize a tela (caso já estivesse aberta) e veja o código fonte. Exatamente na linha 56 veremos o caminho do arquivo do nosso tema.

magento-estrutura-04

Bom por hoje é só isso, mas se você já tem uma certa experiência com temas Magento isto é o suficiente para você começar, mas se você quer mais não fique preocupado, pois no próximo artigo vou mostrar como alterar este arquivo style.css e fazer nossas primeiras alterações dentro do nosso tema

Até lá comente aqui o que você achou até agora deste artigo e quero aproveitar também pra pedir aquela força para curtir minha página e compartilhar nas redes dociais. Para mim divulgar este material e ajudar o máximo de pessoas é meu maior prazer

Um abraço.

2017-01-24T20:24:36+00:00

RECEBA DICAS VALIOSAS NO SEU EMAIL

x