Assim como acontece na maior parte do desenvolvimento de software, você não precisa começar do zero para criar algo valioso para seus clientes ou para você mesmo.
Isso é especialmente verdadeiro para os temas de blocos no WordPress. O plugin Create Block Theme, disponível no repositório de plugins do WordPress, oferece uma maneira direta de criar um novo tema de bloco, seja derivado de um tema ativo ou começando com um canvas em branco.
Esse plugin usa o recurso do Editor de Sites do WordPress como uma ferramenta de criação de temas, o que o torna um recurso poderoso para desenvolvedores de temas. No entanto, como ele pode fazer alterações permanentes no seu site, recomendamos fortemente que você o utilize em um ambiente de teste. Se você é um usuário da Kinsta, configurar um ambiente de teste para o seu site é rápido e simples.
Como esperado, esse plugin só é compatível com temas de blocos e não funcionará com temas clássicos. Neste artigo, exploraremos os recursos do plugin Create Block Theme e explicaremos como você pode usá-lo.
Como trabalhar com o plugin Create Block Theme
O plugin Create Block Theme oferece duas maneiras de acessar seus recursos, dependendo de sua preferência e do fluxo de trabalho:
Você pode acessar as configurações do plugin em Aparência > Create Block Theme, dentro do painel administrativo do WordPress.
Aqui, você encontrará uma lista de opções, incluindo salvar alterações no tema atual, criar novos temas ou exportar temas. Embora esse método seja simples, sua funcionalidade é limitada em comparação com o Editor de Site.

Para a melhor experiência, recomendamos o uso do plugin dentro do Editor de Sites do WordPress. Ao selecionar o ícone de chave inglesa no Editor de Sites, você desbloqueia todos os recursos do plugin diretamente no ambiente de edição em tempo real. Essa integração permite visualizar e personalizar suas alterações de forma fluida e intuitiva.

Explorando os recursos do plugin Create Block Theme
O plugin Create Block Theme oferece um conjunto robusto de recursos para ajudar você a criar, personalizar e exportar temas de blocos com eficiência. Vamos analisar cada recurso em detalhes:
1. Salvar alterações em um tema
O conceito e a execução são bastante simples. No Editor de Site, modifique seus estilos, templates e padrões no tema ativo e, em seguida, salve seu trabalho.

O botão Save Changes serve para salvar o que você deseja exportar, não as alterações de tema que você fez, que só podem ser salvas com o botão padrão Save. Você sempre pode reverter as alterações salvas usando a ferramenta de revisões do WordPress (sem precisar do plugin).
Como visto acima, há oito opções a considerar ao exportar o tema:
- Salvar Fontes
- Salvar Alterações de Templates
- Processar Apenas Templates Modificados
- Salvar Padrões Sincronizados
- Localizar Texto
- Localizar Imagens
- Remover Referências de Navegação
2. Criar uma variação de tema
Embora possa não ser óbvia à primeira vista, essa opção permite que você crie não apenas uma variação de estilo, mas também uma nova paleta de cores e/ou um conjunto de fontes (uma coleção de fontes que pode ser aplicada a texto, links, cabeçalhos, legendas e botões).
No exemplo abaixo, criamos um estilo “My New Variation” (Minha nova variação). Para fazer isso, no mínimo, você deve criar uma nova paleta de cores e uma tipografia para ser associada à nova variação de estilo. Esteja ciente de que você só verá a nova variação aqui (sem alterações nas paletas de cores e nas composições padrão).

No exemplo abaixo, criamos uma nova paleta de cores com duas cores que podem ser aplicadas a qualquer variação de estilo. O lado esquerdo destaca a criação de duas cores personalizadas para a nova paleta de cores. O meio mostra o processo de salvamento. O lado direito confirma a nova paleta de cores personalizada.

Por fim, criamos um novo conjunto de tipos aqui. Uma nova fonte, Roboto, foi adicionada e, em seguida, atribuída aos elementos de texto e título (não mostrados).

O lado direito indica as fontes que estão sendo usadas para a nova composição, o meio mostra o processo de salvamento e o lado direito confirma a nova composição.
Em resumo, você pode criar não apenas uma variação completa de estilo, mas também uma paleta de cores e/ou uma composição tipográfica separada, que pode ser aplicada ao seu tema da maneira que desejar.
3. Criar um tema em branco
Se você deseja começar com um tema limpo e sem design pré-definido, a opção Criar Tema em Branco é ideal. Sua finalidade é semelhante ao tema Underscores, que era popular entre os desenvolvedores na era clássica da criação de temas para WordPress.

Criar um tema em branco gera um tema boilerplate básico. Como esperado, um tema em branco terá as seguintes características:
- Incluirá apenas um template de índice.
- Não terá variações de estilo.
- Terá apenas um cabeçalho e um rodapé como partes do template.
- Conterá um arquivo
theme.json
minimalista. - Não incluirá um arquivo
functions.php
.
Diferentemente das opções Create New Theme ou Create Style Variations, essa opção cria um tema totalmente novo que ficará evidente quando você visualizar a página Appearance.

4. Exportar o tema como arquivo ZIP
Essa é uma funcionalidade muito útil do plugin, pois é a maneira mais eficiente de migrar seu tema ativo para um novo site. A função de exportação cria um arquivo ZIP de tema padrão, que pode ser facilmente utilizado em outro site.

Mas qual é a diferença entre exportar um tema dessa forma em comparação com a funcionalidade nativa do WordPress? Nenhuma. Essa é apenas uma maneira mais conveniente de exportar o tema ativo.
Se você não estiver familiarizado com o método interno de exportação de um tema ativo, selecione a opção de três pontos no canto superior direito e localize a opção Export.

5. Criar um novo tema
Vamos examinar as duas abordagens oferecidas pelo plugin para criar um novo tema. Assim como no caso do tema em branco, os temas criados com essa opção também aparecerão na página Appearance > Themes e se tornarão automaticamente o tema ativo após a criação.
Independentemente da opção escolhida – Clone a Theme ou Create a Child – você terá as mesmas opções que viu para o tema em branco.

Clonar um tema
Ao clonar um tema, você cria uma duplicata das alterações salvas no tema ativo. Após decidir o nome do tema clone, você também pode definir metadados para o tema da seguinte forma:
- Nome do tema
- Descrição do tema
- URI do tema
- Autor
- URI do autor
- Versão mínima do WordPress
Criar um tema filho (child theme)
A criação de um tema filho (child theme) fornece aos desenvolvedores a maneira adequada de fazer alterações em um tema sem alterar seu código.
Você pode escolher os metadados da mesma forma que na criação de um tema clone.
6. Editar metadados do tema
Você pode personalizar os metadados do seu tema ativo diretamente por meio do plugin. Os campos de metadados que você pode atualizar incluem:
- Nome do tema: O nome exibido no gerenciador de temas do WordPress.
- Descrição do tema: Uma breve descrição da finalidade ou dos recursos do seu tema.
- URI do tema: Uma URL que aponta para a documentação ou demonstração do tema.
- Autor: O nome do criador do tema.
- Versão do tema: O número da versão do tema.
- Versão mínima do WordPress: A versão mais antiga do WordPress compatível com o tema.
- Tags do tema: Palavras-chave para categorizar e descrever seu tema.
- Plugins recomendados: Plugins dos quais seu tema depende ou aprimora.
- Créditos de fontes: Agradecimentos por quaisquer fontes usadas em seu tema.
- Créditos de imagens: Agradecimentos por todas as imagens usadas em seu tema.
- Captura de tela: A imagem de visualização exibida no gerenciador de temas do WordPress.
Esses campos são essenciais para tornar seu tema profissional e pronto para distribuição.
7. Visualizar o arquivo theme.json
Se precisar verificar rapidamente o conteúdo do arquivo theme.json
, o plugin fornece uma visualização somente leitura do arquivo theme.json
do seu tema. Esse arquivo contém os estilos e as configurações globais do seu tema, como cores, tipografia e configurações de layout.
A revisão desse arquivo permite que você verifique rapidamente as personalizações aplicadas ao seu tema.

8. Exibir estilos personalizados
Para temas derivados baseados em blocos, o arquivo theme.json
inclui personalizações que não afetam o tema principal. Isso garante que o tema base permaneça inalterado enquanto as modificações são aplicadas apenas ao tema derivado.
A interface para visualização desses estilos personalizados é a mesma que você usa para o arquivo theme.json
do tema principal.
9. Restaurar o tema
Essa opção permite que você reverta as alterações feitas no seu tema, inclusive estilos, templates e partes de templates, para o estado em que estavam na última operação de salvamento.

Para um controle mais preciso sobre versões anteriores, o WordPress também oferece a função Revisions (Revisões). Esse recurso nativo mantém um histórico detalhado das modificações, permitindo restaurar versões anteriores do tema com precisão.

Resumo
Se você está começando a desenvolver um tema de bloco personalizado, o plugin Create Block Theme é a ferramenta ideal. Ele aproveita todos os recursos do WordPress como uma ferramenta de criação de temas, tornando seu tema mais rápido.
Ao trabalhar com o plugin, você receberá alertas do navegador para ajudá-lo a entender as etapas que está prestes a realizar.
Em essência, esse plugin permite a transferência de dados do sistema de banco de dados para o arquivo. Quando você faz alterações em um tema, essas alterações são salvas no banco de dados. Esse plugin extrai essas alterações do banco de dados e cria os arquivos necessários para um novo tema e/ou para uma exportação, se necessário.
Como esse plugin está em desenvolvimento ativo, você pode esperar aprimoramentos, mas fique atento a possíveis alterações significativas. Ao testar um recurso específico, você sempre deve usar um ambiente de teste. Na Kinsta, oferecemos ferramentas que facilitam o trabalho dos criadores e desenvolvedores de temas com o WordPress.
Experimente a Kinsta hoje mesmo e descubra como podemos ajudar você a criar temas incríveis para WordPress!