Wordpress

Como criar o Child Theme no WordPress

tema-filho-wordpress-hostinger

Child Theme ou na tradução grossa do termo, “temas filhos” foi criado por desenvolvedores do WordPress para que você possa criar subtópicos com base nas características de um pai ou de um tema mestre. Um tema filho permite que você use e modifique um tema mestre e salve o tema filho separadamente sem afetar o tema pai. Neste tutorial, você aprenderá como criar e personalizar um tema filho do WordPress.

Por que você deve usar Temas filhos no WordPress

Um tema filho permite que você modifique muito (ou pouco) um tema pai como você desejar. Em seguida, você pode alterar o tema filho sem afetar o tema pai ou quaisquer outros projetos usando-o como uma âncora para seus próprios temas filho.

Como funcionam os temas filhos do WordPress

Um tema filho reside em um diretório separado do tema pai e cada diretório filho precisa incluir seus próprios arquivos style.css e functions.php. Arquivos personalizados podem ser adicionados conforme necessário, mas esses arquivos são recomendados para o tema funcionar corretamente.

Usando os arquivos .css e .php relevantes, você pode modificar tudo, desde os parâmetros de estilo e de layout, até a codificação real e os scripts que o tema filho usa, mesmo que esses scripts não estejam presentes no diretório do tema pai.

Pense no tema filho como uma sobreposição sentada em cima do tema pai. Quando um visitante carrega seu site, o WordPress primeiro carrega o tema filho e, em seguida, herda estilos e funções ausentes do tema pai. Como resultado, a maioria de sua codificação de plano de fundo ainda é retirada do diretório pai, mas é modificada de acordo com os parâmetros do tema filho antes que o conteúdo seja exibido na página.

O que você precisa?

Antes de começar este guia, você precisará do seguinte:

  • Acesso à área de administração do WordPress
  • Acesso ao gerenciador de arquivos (recomendado) ou FTP

Passo 1 – criando um tema Filho no WordPress

Criar um tema filho não é mais complicado do que o trabalho que você já está fazendo com um único tema mestre.

Você criará um diretório para o tema filho no diretório wp-content / themes existente. É melhor manter uma boa organização de diretórios adicionando -child ao final do nome do tema pai. Você também pode adicionar o nome do projeto específico, se preferir. Lembre-se de não incluir quaisquer espaços no nome do arquivo porque eles podem causar erros. Para criar um novo diretório, você pode usar o cliente FTP ou o Gerenciador de Arquivos.

O exemplo a seguir usa o Gerenciador de Arquivos para criar um tema filho com base no tema Twenty Seventeen, então o caminho completo para a pasta de tema filho será  wp-content/themes/twentyseventeen-child.

  1. Acesse o painel de controle do Hostinger e clique em Gerenciador de Arquivos.
  2. Navegue até o diretório de instalação do WordPress (geralmente chamado de  public_html) e abra a pasta wp-content -> themes.
  3. Clique no ícone Criar nova pasta, digite o nome do seu filho e clique em Criar.create wordpress child theme folder
  4. Acesse a pasta do tema filho recém-criada.
  5. Clique no botão Novo Arquivo, digite style.css como o nome do arquivo e clique em Criar.
    create style css for child theme
  6. Preencha o arquivo com o seguinte código:
  7. Altere todos os valores para coincidir com o nome do seu tema e domínio. Os campos mais importantes são os campos Template e @import porque eles informam o WordPress qual o tema principal no qual o tema do seu filho é baseado. Quando terminar, clique em Salvar.
    child theme custom css with rules
  8. Adicione um novo arquivo functions.php na mesma pasta, mas não copie e cole o código do arquivo do tema pai, porque ele precisa permanecer separado de todas as modificações feitas no tema filho. Em vez disso, crie um arquivo em branco ou adicione novas funções .php necessárias para o seu tema filho.
  9. Na área de administração do WordPress, navegue até Aparência -> Temas para ver o tema filho recém-criado e clique em Ativar.
    activate wordpress child theme
  10. Visite seu site, e você verá seu tema com alguns problemas óbvios (como ilustrado abaixo). Não entre em pânico, porque o arquivo functions.php não está carregando o CSS do tema pai ainda.wordpress without css
  11. Na área de administração do WordPress, navegue até Aparência -> Editor e escolha functions.php.
  12. WordPress tem uma função para carregar o CSS de temas pais. Copie e cole o seguinte código para o arquivo theme.php do tema filho:
  13. Clique em Atualizar na parte inferior da página para salvar suas alterações.
  14. Visite seu site novamente. Você notará que o CSS está carregado e seu tema filho parece exatamente o mesmo que o tema pai.wordpress with css

Como você pode ver a criação do tema filho no WordPress é bastante simples se você quebrar o processo para separar etapas.

Passo 2 – Personalização de um tema Filho WordPress

É muito provável que você queira personalizar a aparência do tema do seu filho. É por isso que o criou em primeiro lugar, certo?

Passo 2.1 – Personalizar o aspecto do seu Tema Filho

Para personalizar a aparência do tema, é necessário editar o arquivo custom.css do tema filho. Você pode usar um editor de texto e cliente FTP, gerenciador de arquivos ou usar o editor WordPress (Aparência -> Editor). Você também precisa de uma compreensão básica das regras CSS e sabe como inspecionar elementos usando seu navegador.

Por exemplo, para alterar a cor de plano de fundo do tema filho do WordPress, adicione a seguinte regra CSS ao arquivo style.css:

Veja abaixo como isso mudaria a aparência do seu site WordPress. Siga um processo semelhante para qualquer outro elemento que você deseja alterar.

wordpress changed background

O mesmo vale para qualquer outro elemento que você quiser mudar.

Passo 2.2 – Adicionando e removendo recursos

Outra grande vantagem de usar um tema filho é a capacidade de ter um arquivo functions.php separado que, assim como Plugins, é usado para adicionar (ou remover) determinados recursos. Ao ter o functions.php em um tema filho separado, você pode ter certeza que quaisquer modificações não desaparecerão após uma atualização do tema.

Para adicionar novos recursos ao seu tema, adicione o código PHP ao arquivo functions.php do seu filho. Por exemplo, o código a seguir irá desativar o recurso de pesquisa do WordPress:

Conclusão

Os temas filhos do WordPress oferecem uma maneira poderosa para criar um projeto totalmente novo com base em parâmetros de um tema mestre sem afetar os arquivos do tema pai, e vice-versa. Com um pouco de codificação simples e gerenciamento de diretórios, você pode modificar o tema filho quanto você quiser, proporcionando uma ampla gama de possibilidades para seu projeto. Se você quiser saber como criar um blog usando o WordPress, nós temos um passo a passo interessante.

2 Comentários

Clique aqui para comentar

  • Na hora que eu coloquei o código em functions.php apareceu a seguinte mensagem “Não é possível comunicar de volta com o site para verificar erros fatais, por isso a alteração ao PHP foi revertida. Terá de carregar a sua alteração ao ficheiro PHP de outro modo, tal como SFTP.”
    O que devo fazer?

    Agradeço desde já

    • Oi, André.

      Parece que o problema está no desenvolvimento desse arquivo. O script errado gera esse erro.
      Se o site for em WordPress, tem alguma informação errada. Se foi desenvolvido manualmente ou por algum outro CMS, tem que verificar o código fonte. Aconselhamos checar com o desenvolvimento 🙂 Abraço

Comece a Economizar Agora!

Hospedagem com tudo incluso e nome de domínio
R$6
39
/mês*

Junte-se a centenas de inscritos em todo o mundo

e receba um resumo dos tutoriais mais recentes direto para o seu e-mail

Please wait...

Obrigado por se inscrever!