Como criar um tema filho do WooCommerce Storefront

Última atualização - 5 de março de 2021

Um tema filho é uma modificação de um tema existente mantendo seu estilo e funções básicos. O tema original é chamado de tema pai e o novo modificado é chamado de tema filho. Criar seu próprio tema filho do WooCommerce Storefront é uma boa maneira de personalizar sua loja sem comprar um novo tema.

Obtenha o WooCommerce Storefront!

Tema filho - Uma visão geral

Conforme mencionado na introdução, um tema filho usará o tema pai como base e conferirá recursos adicionais ao tema. Muitas vezes, essa é uma boa opção quando você deseja fazer variações para um tema. No diretório de temas filho do Storefront, você pode encontrar uma boa variedade de temas filhos premium adequados para diversos setores e tipos de produtos. Dessa forma, você pode criar facilmente seu próprio tema filho para o Storefront.

Vantagens de usar um tema filho

Modificar diretamente um tema corre o risco de perder as modificações durante a atualização. Um tema filho garante que as modificações sejam preservadas intactas. No geral, desenvolver um tema filho é um processo mais rápido do que criar um tema novo. Além disso, para quem está interessado no desenvolvimento de temas WordPress , criar um tema filho é uma ótima maneira de experimentar e aprender.

Aqui estão algumas das vantagens de criar um tema filho:

• Ajuda a criar diferentes variações para o mesmo tema para atender a diferentes domínios.
• Pode salvar as personalizações de design separadamente sem modificar o tema pai.
• As personalizações podem ser preservadas mesmo após a atualização do tema pai ou dos arquivos principais do WordPress ou WooCommerce.

Criando um tema filho do WooCommerce Storefront

É aconselhável ter um backup adequado do seu site antes de tentar personalizar um tema. Você precisa de acesso FTP ao seu host para carregar o novo tema filho.

Para iniciar o processo, crie um arquivo style.css para o tema filho com o código de exemplo a seguir fornecido no WooCommerce Docs.

Em seguida, altere o campo de modelo para apontar para Storefront.

Uma diferença que você deve ter notado aqui é que com o Storefront você não precisa da etapa de enfileiramento que foi seguida ao criar um tema filho para o tema vinte e quinze. Ao criar um tema filho usando o Storefront, você precisa apenas de um arquivo function.php em branco e um arquivo style.css para iniciar o processo.

Você pode simplesmente transferir o arquivo para uma pasta de tema filho, criar um arquivo zip e fazer o upload. Feito isso, ative o novo tema filho em Aparência > Temas .

Você também pode fazer upload do tema filho por FTP, se tiver acesso ao seu serviço de hospedagem. Você pode usar um programa FTP como o FileZilla.

Principais clientes FTP para Mac e Windows.

Agora você pode personalizar adicionando códigos à folha de estilo do tema filho e aos arquivos de modelo. Por exemplo, você pode copiar qualquer arquivo de modelo da pasta do tema Storefront para a pasta do tema filho. Esse arquivo na pasta do tema filho pode ser personalizado modificando o código conforme sua necessidade.

Como personalizar o design e a funcionalidade de um tema filho?

Com as configurações acima, você criou um tema filho para o Storefront. No entanto, ainda não há propriedades personalizadas para o seu tema. Você pode adicionar funcionalidades e personalizações de design ao seu tema filho sem modificar o tema pai.

Alterações de design

Por exemplo, na folha de estilo acima que você criou para o tema filho, você pode personalizar a cor do título do site com o código abaixo:
.site-branding h1 a {
color: red;
}

Modificações de modelo

Você também pode modificar os arquivos de modelo (*.php) na pasta do tema. Por exemplo, você pode modificar um código específico copiando o header.php da pasta do tema pai wp-content/themes/storefront/header.php para a pasta do tema filho wp-content/themes/storefront-child/header.php.

Uma vez que a cópia foi feita, você pode editar header.php e customizar qualquer código conforme suas necessidades. O header.php no tema filho será usado no lugar do header.php do tema pai.

Você também pode fazer modificações nos modelos do WooCommerce dessa maneira. Basta criar uma nova pasta em seu tema filho e nomeá-lo “WooCommerce”. Aqui você pode fazer alterações nos modelos do WooCommerce para alinhá-los com o design do seu site.

Esta documentação do WooCommerce ajudará você a entender mais sobre a estrutura do modelo WooCommerce.

Personalizando a funcionalidade

Ao criar um tema filho, você também deseja que ele tenha uma funcionalidade personalizada. Para isso, você precisa primeiro garantir que seu arquivo functions.php esteja vazio e não contenha nenhuma informação do arquivo functions.php do pai. Agora, se uma função específica na função do tema pai for conectável (envolvida em uma instrução if condicional), você poderá copiá-la para os temas filhos functions.php. Depois de copiar uma função conectável, você pode fazer alterações conforme necessário. Abaixo está um exemplo para uma função conectável:
if (!function_exists("parent_function_name")) {
parent_function_name() {
...
}
}

Criando um tema filho geral

O processo de criação de um tema filho é diferente e mais simples com o Storefront, em comparação com outros temas. Neste artigo, também veremos os detalhes básicos do método geral.

O primeiro passo é criar um diretório de temas. Em seguida, crie uma folha de estilo (arquivo style.css) para o tema filho. O WooCommerce recomenda a criação de um arquivo functions.php, que é útil para enfileirar estilos corretamente.

Criando um tema filho geral

O processo de criação de um tema filho é diferente e mais simples na vitrine em comparação com outros temas. Neste artigo, também veremos os detalhes básicos do método geral.

O primeiro passo é criar um diretório de temas. Em seguida, crie uma folha de estilo (arquivo style.css) para o tema filho. O WooCommerce recomenda a criação de um arquivo functions.php, que é útil para enfileirar estilos corretamente.

Criando diretório de tema filho

Crie e coloque o diretório do tema filho em wp-content/themes. Anexar o nome do diretório do tema filho com '-child' é sugerido, embora não obrigatório. Deve-se tomar cuidado para não deixar espaços no nome do diretório do tema filho para evitar problemas.

Criando a folha de estilo do tema filho

Crie um cabeçalho de folha de estilo para iniciar o processo. Abaixo está um exemplo do WordPress Codex de um cabeçalho de folha de estilo criado para um tema filho baseado no tema Twenty Fifteen.

Ao criar um tema filho, você pode usar este texto de exemplo como ponto de referência e substituí-lo por detalhes relevantes ao seu tema. A linha Template fornece o nome do diretório do tema pai. Você deve ajustá-lo de acordo com o tema com o qual está trabalhando.

Enfileirando os temas pai e filho

Crie um arquivo functions.php no diretório de temas filho para enfileirar os temas pai e filho. Enfileirar a folha de estilo do tema pai adicionando uma ação wp_enqueue_scripts e usando wp_enqueue_style() no function.php do tema filho. Abra o function.php do seu tema filho com uma tag PHP (<?php). Em seguida, enfileirar as folhas de estilo do tema pai e filho. A captura de tela abaixo é um exemplo que funcionará apenas se seu tema pai usar um arquivo .css para armazenar o CSS. Se houver mais de um arquivo .css, como style.css, main.css, ie.css, certifique-se de manter todas as dependências do tema pai. Um bom nível de conhecimento de codificação é claramente um fator importante para acertar na primeira vez.

Você também precisa enfileirar o código CSS real no style.css do seu tema filho. Para garantir que a folha de estilo do tema filho seja carregada após a folha de estilo pai, você pode definir o estilo pai como uma dependência. Além disso, inclua o número da versão do tema filho para garantir que você possa bloquear o cache também para seu tema filho. O exemplo recomendado no Codex é dado abaixo:

Ativando seu tema filho

Crie um arquivo zip da pasta do seu tema filho e carregue-o navegando em Aparência → Temas → Adicionar novo tema .

Agora o novo tema filho ficará visível na lista de temas.

Você pode ativar o novo tema filho agora clicando no botão Ativar .

• Baixe o tema Storefront agora.
• Leia mais sobre temas filhos do WordPress Codex.

Você também pode baixar um tema filho de amostra deste link WooCommerce para saber melhor. Ou leia alguns de nossos artigos relacionados:

1. Como escolher o tema certo para sua loja WooCommerce?
2. Como instalar e configurar o Storefront?
3. Últimas tendências em temas WooCommerce.