Como criar um tema filho do WooCommerce Storefront [Guia Completo]
Publicados: 2022-01-05
Neste artigo, veremos como você pode criar o tema filho do WooCommerce Storefront em apenas quatro etapas simples. O tema Storefront WooCommerce é uma das principais razões que tornaram o WooCommerce bem-sucedido, pois é gratuito e fácil de usar para criar uma loja exclusiva com o mínimo de esforço.
Além disso, o Woocommerce oferece possibilidades de personalização quase infinitas, o que é outro grande fator que contribui para o sucesso do WooCommerce. Isso significa que, quando combinado com o tema certo, oferecerá muita flexibilidade de design.
Tema filho da vitrine do WooCommerce
Para uma aparência profissional, o tema Storefront é uma ótima opção. Agora que sua loja WooCommerce está funcionando, você ainda pode personalizar a aparência de sua loja para corresponder à sua visão exata.
Depois de instalar o tema da loja WooCommerce, a próxima etapa é criar o tema filho do WooCommerce Storefront que permitirá que você faça alterações no tema do tema pai do Storefront sem editar o código do tema pai diretamente.
Isso facilita a personalização da aparência da sua loja e elimina o risco potencial para o seu tema e loja, especialmente o risco de perder a personalização que você adicionou quando o tema WooCommerce Storefront é atualizado.
Por que criar um tema filho do WooCommerce Storefront?
Se você dedicou muito tempo lendo no WordPress, talvez já tenha se deparado com temas filhos antes. Em termos simples, o tema filho é uma cópia de outro tema, muitas vezes referido como o 'tema pai'.
Isso significa que você pode fazer alterações no tema filho e testá-las, sem editar o tema pai diretamente. Fazer as alterações no tema filho é importante porque alterar o tema original pode resultar em erros irreversíveis e até mesmo danos ao seu site.
Além disso, você pode querer criar um tema filho porque deseja usar outro tema como base. Isso economizará seu tempo e você não precisará criar um novo tema inteiramente do zero.
Além disso, convém fazer algumas pequenas alterações na marca de um tema ou na estética geral. Usar um tema filho abre muitas possibilidades, dependendo do tempo que você está disposto a dedicar ao projeto em andamento.
No entanto, você pode baixar várias opções da loja oficial do WooCommerce ou de outros sites como o ThemeForest, mas nenhum dos temas infantis oferecidos pode atender às suas necessidades. Além disso, você pode querer criar uma aparência única. O tema filho Storefront visa oferecer uma experiência de loja perfeita para o seu nicho.
Também vale a pena mencionar que o processo real de criação de um tema filho é o mesmo para WooCommerce ou um site WordPress mais geral. Apesar disso, você precisa manter o propósito da sua loja em mente ao personalizar seu tema filho.
Como criar um tema filho do WooCommerce Storefront
Neste tutorial, criaremos um tema que usa Storefront como pai. Você pode usar qualquer tema como base. Também é importante que você crie um backup do seu site antes de prosseguir, pois isso manterá sua loja segura se algo quebrar durante o processo de desenvolvimento.
Além disso, também é inteligente usar um ambiente de teste para criar e ajustar seu tema filho. Para criar o tema filho, precisamos apenas de três coisas para começar: diretório do tema filho, arquivo style.css e arquivo functions.php.
Aqui estão as etapas que você precisa seguir para criar um tema filho do WooCommerce.
1. Criando a pasta do tema
Esta pasta de tema abrigará sua folha de estilo e arquivos de função. Do ponto de vista de um especialista, é ideal usar o nome do seu tema pai como um nome de pasta e anexá-lo com “-child”. Neste tutorial, nomeei meu diretório como “Storefront-child”. Também é importante verificar se o nome do diretório do seu tema filho não possui espaços para evitar possíveis erros.
2. Folha de estilo do tema filho
Depois de criar a pasta, você precisa criar uma folha de estilo para o tema filho. A folha de estilo precisa ser definida para herdar os estilos do seu tema pai.
Para fazer isso, você precisa inserir o seguinte cabeçalho de folha de estilo e substituí-los por detalhes relevantes. Também vale a pena mencionar que as personalizações feitas aqui substituirão os estilos do tema pai.
/* Nome do tema: filho da vitrine URI do tema: http://sitename.com/storefront/ Descrição: Tema filho da vitrine Autor: Seu nome URI do autor: http://sitename.com Modelo: vitrine /*isso diferencia maiúsculas de minúsculas*/ Versão: 1.0.0 Licença: GNU General Public License v2 ou posterior Licença URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: claro, escuro, largura total, layout responsivo, pronto para acessibilidade Domínio de texto: storefront-child */ /*As personalizações do tema começam aqui*/
No entanto, neste tutorial, não ensinarei como usar CSS, pois é impossível abordar neste artigo. Você precisa aprender CSS ou contratar um desenvolvedor para fazer os ajustes de CSS em seu site.
3. Função Tema Filho
Nos métodos anteriores, eles sugerem que você use “@import” em sua folha de estilo para carregar seu tema filho. É importante notar que isso não é mais considerado uma prática recomendada. No entanto, você só precisa “enfileirar” a folha de estilo do seu tema pai no arquivo functions.php do seu tema filho.
Para tornar isso possível, você pode usar “wp_enqueue_scripts action” e usar “wp_enqueue_style()”. Também vale a pena mencionar que a folha de estilo do seu tema filho geralmente é carregada automaticamente.
Você precisa enfileirar bem para que seja carregado e precisa garantir que a folha de estilo filho tenha prioridade. Para facilitar as coisas, criei o código a seguir que define 'parent-style' como uma dependência para que a folha de estilo do seu tema filho seja carregada depois.
<?php
function theme_enqueue_styles() {
$parent_style = 'estilo-pai';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'estilo filho', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>4. Ativação
Agora que a pasta do tema filho está completa, você precisa criar um arquivo .zip da pasta do tema filho, para poder adicioná-lo aos seus temas do WordPress.
Você pode fazer isso usando 7-zip ou Winrar. Também é importante ter certeza de que você tem seu style.css e functions.php dentro da pasta do seu tema filho.
Além disso, é importante tomar nota e manter registros de outras configurações de plug-in antes de ativar seu tema filho. Depois disso, você pode fazer o upload no seu WordPress via Appearance > Add Themes . 
O WordPress irá instalá-lo como qualquer tema e, uma vez instalado, você precisa ativá-lo clicando em 'Ativar' indo em Aparência > Temas conforme mostrado abaixo: 
Depois de ativá-lo, ele fica igual ao tema original. O tema filho está puxando os estilos do seu tema pai. Então, você precisa ser criativo e personalizar a aparência na folha de estilo.
Além disso, você pode fazer alterações nos arquivos de modelo do seu tema, copiando o arquivo de modelo que deseja alterar, como header.php, da pasta pai para a pasta do tema filho.
Além disso, você também precisará fazer algumas alterações para especificar qual função o WordPress usa para fazer referência aos arquivos de modelo. Isso significa que você usará o get_stylesheet_directory(); função em vez de get_template_directory() para referenciar seus templates.
Conclusão
Neste ponto, tenho certeza de que você pode criar o WooCommerce Storefront Child Theme. Eu recomendo que você retoque seu CSS para tirar o máximo proveito de seu estilo e confira nosso outro guia sobre como criar temas filhos para obter ainda mais conselhos.
Você também pode comprar um tema filho de um fornecedor terceirizado, mas não precisa confiar na criatividade de outras pessoas. Isso ocorre porque criar o WooCommerce Storefront Child Theme não é tão difícil quanto você imagina.
Além disso, oferece controle quase total sobre a aparência e a funcionalidade de sua loja. Portanto, você precisa criar um, pois é considerado uma prática recomendada ao fazer o trabalho de desenvolvimento em seu site WooCommerce.
Além disso, modificar diretamente um tema corre o risco de perder as modificações durante a atualização. O tema filho garantirá que as modificações sejam preservadas intactas.
Artigos semelhantes
- O que é o tema WooCommerce Storefront? [Respondidas]
- Mais de 80 truques para personalizar o tema WooCommerce da vitrine: o guia definitivo de personalização do tema da vitrine
- Como adicionar um logotipo de confiança ou seguro na página de checkout do WooCommerce
- Como redirecionar o WooCommerce após o checkout : Redirecionar para a página de agradecimento personalizada
- Como criar um aviso de administração do WooCommerce para o plug-in – Desenvolvimento WooCommerce
- Como criar banco de dados WordPress no PHPMyAdmin
- Como criar vários widgets no WordPress usando loops For & Foreach
- Como criar Shortcode para Plugin no WordPress
- Como criar banco de dados MySQL WordPress via linha de comando
- Primeiros 20 passos para iniciantes completos do WordPress para começar
- Como exibir produtos WooCommerce por categoria
- Snippet PHP de logout do WooCommerce para criar botão de logout
- Como alterar o texto do botão Adicionar ao carrinho na página da loja WooCommerce
- Como definir produtos em destaque no WooCommerce
- Como adicionar um método de envio personalizado no WooCommerce