Como criar um tema filho de bloco no WordPress

Publicados: 2023-07-14

Imagine este cenário: você acabou de encontrar um tema quase perfeito para usar em seu site. É bem projetado, inclui os layouts que você deseja, mas deseja alterar a paleta de cores e limitar os clientes de modificar algumas áreas. Infelizmente, o tema que você está usando não permite remover as cores padrão ou os blocos de bloqueio.

Embora você possa editar os arquivos do tema diretamente, todas as suas modificações serão perdidas quando você executar atualizações no tema. Você pode adicionar um pouco de CSS personalizado usando um plug-in de trecho de código, mas isso não alterará as opções de estilo disponíveis para usuários logados.

Então o que você pode fazer? Como você altera as opções disponíveis de estilo global? Para isso, você precisa de um tema filho de bloco.

O que é um tema filho do WordPress?

De acordo com a documentação do desenvolvedor do WordPress:

Um tema filho herda a aparência do tema pai e todas as suas funções, mas pode ser usado para fazer modificações em qualquer parte do tema. Dessa forma, as personalizações são mantidas separadas dos arquivos do tema pai. O uso de um tema filho permite que você atualize o tema pai sem afetar as personalizações feitas em seu site.

Portanto, para usar um tema filho no WordPress, você também precisará ter o tema pai instalado. Seu tema filho herda tudo do pai, com algumas variações adicionadas.

Como criar um tema filho

Você prefere uma opção de código para personalizar o estilo do seu site? Assim como substituir outros temas do WordPress, usar um tema filho é a melhor maneira de substituir o código. Quando o tema for atualizado, o código do tema filho permanecerá.

Neste artigo, abordaremos os principais componentes do que torna um bom tema filho do WordPress e forneceremos recursos de leitura aprofundados.

1. Quando usar um tema filho de bloco

Temas infantis costumam ser uma ótima solução. No entanto, se você deseja adicionar apenas um pouco de código CSS, um tema filho inteiro pode ser um exagero. Considere um plug-in como o Code Snippets para adicionar um pouco de personalização.

Personalizando sites de clientes

Quando você está construindo sites para clientes, há alguma personalização adicional que você pode querer oferecer.

Se você deseja controlar a capacidade dos usuários de inserir novos blocos, mover blocos existentes ou excluir blocos, convém implementar o bloqueio de bloco. Você pode aprender como bloquear blocos e muito mais neste tutorial introdutório.

Criando variações de tema

Além de definir quais regiões do layout do tema os clientes podem modificar, você também pode querer alterar suas opções de paleta de cores, omitindo o que vem por padrão com o tema ou WordPress e adicionando opções exclusivas. Você também pode definir gradientes e opções de tom duplo que também devem estar disponíveis em seu tema.

2. Escolha um bom tema WordPress

Nem todos os temas são criados iguais. Além do que você vê no design do tema, selecionar um tema pai envolve fatores adicionais, como frequência de atualizações, qualidade do suporte, documentação e reputação do desenvolvedor do tema. Saiba mais em Como usar temas do WordPress para criar um site.

3. Crie um ambiente de teste

Até agora você escolheu o tema pai, reuniu os recursos da marca e decidiu quais configurações gostaria de substituir. Em seguida, você precisará configurar um ambiente de teste.

Se você estiver usando um provedor de hospedagem WordPress gerenciado, como o Managed WordPress Hosting da GoDaddy, poderá usar seu site de teste de um clique como um ambiente de desenvolvimento. Se você estiver usando algo como cPanel ou VPS para hospedagem, poderá configurar uma instalação separada do WordPress e clonar ou copiar seu site existente para a nova instalação.

Se você não estiver aplicando o tema filho a um site existente ou se preferir criar do zero, poderá criar um ambiente de desenvolvimento WordPress local em seu computador usando uma ferramenta como MAMP ou DesktopServer da ServerPress.

4. Crie seu diretório de temas

Primeiro você precisa instalar o tema pai. Em seguida, usando um cliente FTP, conecte-se ao seu ambiente de desenvolvimento e navegue até onde seus arquivos do WordPress estão localizados.

Você está procurando a seguinte pasta:

 /wp-content/temas/

É aí que você pode encontrar todos os seus temas WordPress instalados. Cada tema tem sua própria pasta ou diretório que contém todos os arquivos do tema. Você adicionará um novo diretório à lista, que conterá seu tema filho. Você vai acabar com algo como:

 /wp-content/themes/seu-tema-filho/

5. Crie seus arquivos de tema

Para o nosso exemplo, vamos supor que estamos usando o tema Twenty Twenty Two. Você precisará ter esse tema instalado para que o tema filho possa se referir a ele.

Dentro da nova pasta do diretório do tema filho, você criará dois novos arquivos:

 estilo.css
tema.json

Ambos os arquivos servem a um propósito específico. O arquivo style.css é usado para fornecer ao WordPress informações sobre o tema, como nome, autor, tags e ID do tema pai.

O arquivo theme.json é usado para definir as várias configurações em Estilos Globais e muito mais. Saiba mais sobre theme.json no manual do desenvolvedor.

Em temas clássicos anteriores, o arquivo functions.php era necessário em temas filhos. Bloquear temas filhos não requer essas etapas.

Estilo.css

O que pertence ao seu arquivo style.css ? A documentação do desenvolvedor diz:

Sua folha de estilo deve conter o comentário de cabeçalho obrigatório abaixo no início do arquivo. Isso informa as informações básicas do WordPress sobre o tema, incluindo o fato de ser um tema filho com um pai específico.

Você precisará incluir o clichê no arquivo style.css contendo as informações do cabeçalho. O nome do modelo: corresponde ao nome da pasta (diretório) do tema pai sobre o qual você está construindo. O domínio de texto : nome é exclusivo para o tema filho do WordPress.

Abaixo está um exemplo de um tema filho usando Twenty Twenty Two:

 /*
Nome do tema: Twenty Twenty-Two Child
URI do tema: https://example.com/
Autor: Seu nome
URI do autor: https://example.com/
Descrição: Tema infantil Twenty Twenty Two
Requer pelo menos: 5.8
Testado até: 5.9
Requer PHP: 5.6
Versão: 0.1
Licença: GNU General Public License v2 ou posterior
URI da licença: http://www.gnu.org/licenses/gpl-2.0.html
Domínio de texto: twentytwentytwo-child
Modelo: twentytwentytwo
Tags: cores personalizadas, menu personalizado, logotipo personalizado, estilo do editor, imagens em destaque, edição completa do site, padrões de bloco

Tema WordPress Twenty Twenty-Two Child, (C) 2021 WordPress.org
Twenty Twenty-Two Child é distribuído sob os termos da GNU GPL.
*/

Tema.json

Consulte a documentação do desenvolvedor para se aprofundar no theme.json. Vamos dar uma olhada no arquivo theme.json do Twenty Twenty Two:

 {
 "versão 2,
 "configurações": {},
 "estilos": {},
 "customTemplates": {},
 "partes do modelo": {}
}

Dentro de cada um destes estão outros estilos disponíveis para você. Por exemplo, na área do estilo, Twenty Twenty Two usa:

 {
 "configurações": {
 "appearanceTools": verdadeiro,
 "cor": {
 "duotônico": [
 {
 "cores": [
 "#000000",
 "#ffffff"
 ],
 "slug": "primeiro plano e plano de fundo",
 "name": "Primeiro plano e plano de fundo"
}

Precisa de ajuda para criar um arquivo theme.json? Confira o themegen.app para obter um guia criando muitas das opções para seu arquivo theme.json.

6. Personalizando o tema filho do bloco

Embora você possa criar seu arquivo theme.json facilmente e anexá-lo ao seu tema, há algumas outras opções a serem feitas. Temas filhos e até temas de bloco são uma nova área do WordPress. O Editor do Site claramente tem um rótulo beta no momento desta postagem. Você vai querer consultar para ver o que funciona e o que não funciona ainda em temas filhos, como partes de modelo.

Além disso, você pode encontrar configurações que Estilos globais e theme.json ainda não suportam. Se você estiver adicionando CSS adicional, como uma borda de bloco de grupo com uma sombra de caixa, convém adicioná-la ao seu arquivo style.css .

 .has-primary-border-color {
 box-shadow: .1rem .1rem .05rem #647BAF ;
}

7. Teste seu tema filho

Depois de sentir que seu site parece bom em seu ambiente de desenvolvimento atual, é hora de testá-lo antes de carregá-lo em um site ativo.

  • Teste em vários tamanhos de navegador, como viewports móveis
  • Teste em diferentes navegadores ou use uma ferramenta como BrowserStack
  • Revise os padrões de acessibilidade. Comece a usar o WebAim

8. Prepare-se para carregar o tema filho do bloco

Se você estiver desenvolvendo em um site de teste, seus arquivos estarão exatamente onde deveriam estar. Você pode visitar suas opções de hospedagem para ativar o site de teste. Se você estiver criando arquivos em um ambiente de desenvolvedor local, é hora de compactar os arquivos style.css e theme.json juntos como um arquivo compactado e carregá-los em seu site.

Recapitulação para criar seu tema filho de bloco

  1. Decida se você precisa de um tema filho de bloco
  2. Escolha um tema pai
  3. Configurar seu ambiente de teste
  4. Crie seu diretório de temas
  5. Crie seus arquivos de tema
  6. Personalize o tema filho do seu bloco
  7. Teste seu tema filho
  8. Carregue-os no site ao vivo

Assim como os temas clássicos no WordPress, os temas Block ainda precisam de um local para armazenar personalizações que não serão substituídas quando o tema pai receber uma atualização. A criação de um tema filho de bloqueio permite adicionar, bloquear e omitir opções disponíveis para outros usuários no site.