The Ultimate Guide to WordPress Child Themes

Você já encontrou um tema WordPress quase perfeito para o seu site, mas decidiu não ir com ele por causa de um elemento de design minúsculo e estressante que você não pode ignorar? É o estilo da fonte, a paleta de cores ou o posicionamento dos elementos de design, talvez?

O mercado de temas do WordPress está saturado com tantos temas excelentes, tanto gratuitos quanto premium, mas sem contratar um desenvolvedor para criar um tema personalizado para o seu site, há poucas chances de você encontrar um que seja perfeito até o último pixel.

Os temas filho do WordPress permitem que os webmasters modifiquem os arquivos de um tema ao mesmo tempo que mantêm sua funcionalidade principal no lugar, sem correr o risco de perder as modificações cada vez que o tema é atualizado. Eles oferecem o poder de modificar a aparência de um tema, desde algo tão pequeno quanto a chamada para a ação em um botão, para mudar completamente cada elemento de design.

Neste artigo, cobriremos tudo o que você precisa saber sobre os temas filhos, desde o que eles são até por que são tão importantes. Concluiremos com um tutorial sobre como usar temas filhos em seu próprio site WordPress - da maneira certa.

Parece bom? Vamos começar!

Temas infantis do WordPress: o básico

Temas filhos são temas separados que herdam ativamente a funcionalidade de seus temas pais. Depois de ativar um tema filho, o WordPress verificará se há alguma funcionalidade específica codificada nele. A funcionalidade de um tema filho substitui a do tema pai, o que significa que a funcionalidade do tema filho será aplicada ao seu site. No entanto, se a funcionalidade não existir, ela examinará os arquivos dos pais e acompanhará o que está codificado.

Em inglês simples, os temas filho são arquivos de tema duplicados e toda vez que você sentir a necessidade de modificar aspectos do design ou alguma funcionalidade, você os edita nos arquivos do tema filho. Esse é um ótimo recurso porque permite que os webmasters façam alterações no tema sem o medo persistente de bagunçar os arquivos originais.

A maioria dos temas WordPress hoje em dia vem com seus temas filhos (ou variações de seus temas filhos) direto da caixa.

Por que você deve usar temas infantis?

Fazer modificações e alterações em seu tema por meio de temas filhos é uma prática recomendada amplamente aceita (e recomendada). Pense desta forma: se você errar na primeira vez, pode sempre tentar novamente. Além desse benefício proeminente, os temas filhos têm muita importância para a manutenção e o desenvolvimento do seu site WordPress.

Elimine o risco de perder modificações

Fazer alterações em seu tema pai (os arquivos do tema original) significa que, ao atualizar o tema, as alterações serão perdidas. Isso o deixa em uma espécie de estado de beco sem saída; se você atualizar o tema, perderá todas as modificações, mas se não atualizar o tema, você terá bugs residindo em seu site que podem estar afetando negativamente.

É discutível que você pode simplesmente copiar e colar o código associado às modificações em seu tema pai assim que terminar a atualização. Embora isso seja inteiramente possível, por que perder tempo localizando as modificações feitas e copiando e colando-as nos arquivos de tema atualizados toda vez que você atualiza seu tema? É um processo fácil, mas falível.

É aqui que a importância dos temas infantis é percebida pela primeira vez. Ao usar temas filhos, você pode manter todas as modificações e atualizar com segurança o tema do seu site.

Manter Organização do Código

Um tema WordPress é normalmente composto de alguns milhares de linhas de código e vários arquivos diferentes - HTML, CSS, PHP, JavaScript e muito mais. E por causa disso, quaisquer pequenas alterações feitas aqui e ali tornam-se difíceis de rastrear. Quando chegar a hora de voltar e editar o tema ou consertar bugs inesperados, será bastante caro (tanto em termos de tempo quanto de orçamento).

Como discutimos acima, os temas filhos são ativamente herdados de seus temas pais. Todas as alterações feitas no tema filho permanecem lá (o que acontece nos temas filhos permanece nos temas filhos!) E são mais fáceis de rastrear porque terá apenas algumas centenas de linhas de código (nas circunstâncias mais agressivas) em oposição a um alguns milhares.

Como você provavelmente pode dizer agora, não há desvantagens em usar temas filhos. Na verdade, eles protegem seu site de bugs acidentais.

Como criar um tema filho no WordPress

A maioria dos temas vem com temas infantis, mas se você achar que algum de seu agrado não o faz, então criar um tema infantil sozinho não será difícil. Demonstrarei o tutorial criando um tema filho para nosso tema Sparkling.

Etapa 1: Crie um diretório para o tema filho na instalação do WordPress.

1. Navegue até o diretório de temas do seu site WordPress ( /wp-content/themes ).
2. Crie uma nova pasta e nomeie -a criança espumante . É uma prática recomendada dar ao seu tema filho o mesmo nome que o pai com -child anexado no final.

Adicionaremos todos os arquivos do tema filho a esta pasta. Dito isso, o único arquivo que um tema filho requer para funcionar corretamente é o arquivo style.css .

Etapa 2: Crie um arquivo style.css para o seu novo tema filho.

1. Navegue até o diretório do tema filho criado na Etapa 1, ou seja, /wp-content/themes/sparkling-child .
2. Crie um novo arquivo .css no diretório e style.css .
3. Copie e cole o seguinte código no novo arquivo style.css :

https://gist.github.com/rafaysansari/59ab402cffc540d050ed

No código fornecido acima, as linhas mais importantes são aquelas que começam com Theme Name , Template e @import . É muito importante que você preencha essas linhas corretamente se estiver criando um tema filho para outro tema pai. A linha @import garante que você não precise reescrever as regras CSS do tema pai do zero. Sem a linha @import , o novo site terá apenas o conteúdo carregado nele, sem estilização.

Se o seu tema pai tiver várias folhas de estilo, pule esta etapa. Mostraremos como importar várias folhas de estilo usando uma função nativa do WordPress nas etapas a seguir.

Etapa 3: Crie o arquivo functions.php (opcional).

O arquivo functions.php permite que os desenvolvedores da web adicionem funcionalidade a seus sites WordPress usando funções nativas do WordPress e código PHP.

1. Navegue até a pasta do seu tema filho, ou seja, sparkling-child .
2. Crie um arquivo .php e nomeie-o functions.php .
3. Adicione o seguinte código ao arquivo functions.php:

https://gist.github.com/rafaysansari/6c3cc1606823d56388f4

É importante notar que um tema filho não requer um arquivo functions.php para funcionar. Na verdade, você só deve adicionar este arquivo se pretende modificar a funcionalidade do tema pai. Na maioria dos casos, uma folha de estilo é suficiente, mas se o seu tema pai tiver várias folhas de estilo, você terá que criar um arquivo functions.php .

Etapa 4: importe várias folhas de estilo (opcional).

Se, por exemplo, o tema pai que você selecionou vier com mais de uma folha de estilo, importá-los para seu tema filho usando @import tornará seu site mais lento por alguns segundos - o que não é bom. Você não deseja aumentar o tempo de carregamento da página do seu site se isso puder ser evitado com algumas linhas de código.

1. Navegue até o diretório do seu tema filho e abra o arquivo functions.php em um editor de texto.
2. Adicione as seguintes linhas de código ao arquivo functions.php sob a tag de abertura <?php :

https://gist.github.com/rafaysansari/9535343506d670226f4e

A função wp_enqueue_style() usada no código acima importará várias folhas de estilo para o seu tema filho sem tornar o seu site lento.

Nota: As melhores práticas para a criação de temas filho sugerem que, independentemente de quantas folhas de estilo seu tema pai tenha, você sempre deve importá-los usando o código fornecido acima.

Etapa 5: faça upload do tema filho.

Agora que você criou com sucesso o tema filho, é hora de carregá-lo no seu site WordPress e ativá-lo.

1. Compacte o diretório do tema filho em um arquivo .zip .
2. Faça login no painel de administração do WordPress e navegue até Aparência > Temas .
3. Clique no botão Adicionar novo na tela seguinte.

   

4. Clique no botão Carregar tema para continuar.

   

5. Procure o arquivo .zip do seu tema filho e carregue-o.
6. Depois que o tema filho for carregado, clique em Ativar .

Você também pode carregar o tema filho por meio de seu cliente FTP, copiando e colando diretamente o arquivo .zip no diretório de temas. Se você estiver criando um tema filho para outro tema, certifique-se de fazer as alterações necessárias no código fornecido acima.

Este tutorial destina-se apenas a demonstrar como um tema filho é criado. Criamos um tema filho para Sparkling que você pode baixar diretamente se preferir não perder tempo criando o seu próprio.

Personalizando Seu Tema Infantil

Supondo que tudo tenha ocorrido conforme planejado, quando você ativa o tema filho, seu site deve ter a mesma aparência de quando o tema pai é ativado. Mas espere! Não é o objetivo de criar um tema filho para fazer seu site parecer diferente?

Nesta seção, mostraremos como você pode começar a personalizar o tema filho para fazer modificações.

Aplicando estilos personalizados

Como o primeiro arquivo (e o arquivo obrigatório) que criamos foi style.css , só faz sentido começar adicionando estilos personalizados ao tema filho usando-o. Adicionando código CSS personalizado à folha de estilo, você poderá substituir a folha de estilo do tema pai.

Com CSS, você pode modificar quase todos os aspectos de design e estilo do tema ativado, desde cores e botões até dimensões e estilos de fonte. Os desenvolvedores da Web com um talento real para CSS modificam todo o layout do tema filho para torná-lo único.

Tudo o que você precisa fazer é adicionar o código CSS personalizado na parte inferior do arquivo style.css do tema filho e style.css . Aqueles de vocês que não desejam acessar o cliente FTP de seu site cada vez que uma simples mudança precisa ser feita, podem navegar até o editor padrão do WordPress ( Aparência > Editor ) e adicionar o código CSS diretamente de lá.

Técnicas alternativas de modificação de tema

Adicionar código CSS ao arquivo style.css é a maneira mais simples de fazer modificações no tema filho. No entanto, se você quiser levar as coisas para o próximo nível e talvez adicionar alguma nova funcionalidade personalizada ao tema filho, então é aí que as coisas ficam sérias. Existem diferentes tipos de modificação que você pode fazer (além de alterar os elementos de design), como:

• Adicione novas funções ao arquivo functions.php . Já criamos o arquivo functions.php para o seu tema filho, então tudo que você precisa fazer agora é adicionar algumas funções personalizadas a ele, dependendo da funcionalidade que deseja alcançar. Você pode codificar em PHP ou usar funções nativas do WordPress.
• Edite arquivos de modelo. Se style.css e functions.php simplesmente não resolverem e você ainda precisar modificar o tema, você pode copiar e colar os arquivos de modelo do tema pai e editá-los de acordo.
• Adicione novos arquivos de modelo. Se você encontrou modelos de que gosta em outro lugar (não no diretório do tema pai) ou se deseja criar seus próprios modelos, você pode adicioná-los diretamente ao tema filho e prosseguir a partir daí.

Você pode ficar tranquilo sabendo que seu site WordPress estará protegido contra bugs indesejados e prejudiciais, independentemente do (s) método (s) que você adotar para fazer modificações em seu tema ativado. Se por acaso algo der errado com o código, você saberá exatamente onde ocorreu o erro e poderá corrigi-lo. (Dica: geralmente está nas últimas linhas que você adicionou!)

Uma das melhores coisas sobre os temas filhos é que eles permitem que os usuários personalizem totalmente o tema pai para combinar com a marca de seu site, o que é especialmente útil para empresas novas e estabelecidas. E se você quiser redesenhar completamente seu site mais tarde com base no mesmo tema pai ou em um novo tema pai, você sempre pode criar um novo tema filho e continuar a partir daí!

Embrulhando-o

Temas filhos são a forma recomendada de fazer modificações em um tema WordPress. Eles evitam que os usuários cometam erros potencialmente prejudiciais em seus arquivos de tema originais e correm o risco de perder as modificações cada vez que o tema é atualizado.

Cobrimos tudo que você precisa saber sobre temas filho no WordPress, discutimos por que eles são tão importantes e orientamos você por um tutorial detalhado sobre como criar seu próprio tema filho do zero. Para ajudá-lo a começar a fazer modificações, concluímos com uma breve seção sobre como você pode começar a personalizar o tema filho.

Você concorda que todas as modificações de design e funcionalidade devem ser feitas por meio de temas filho? Você conseguiu criar um tema filho e ativá-lo com sucesso em seu site WordPress? Gostaríamos muito de ouvir sobre sua experiência, então deixe-nos saber comentando abaixo!