Como construir seu próprio tema de bloco para WordPress

Rifat Tutoriais do WordPress Mar 13, 2023

Fazer um design especial para o seu site com um WordPress Block Theme é mais fácil do que você imagina. Esses tipos de temas se tornaram mais populares desde que foram introduzidos no WordPress 5.9 e existem muitos já prontos disponíveis na loja do WordPress. Se você deseja criar seu próprio tema exclusivo, pode fazê-lo de maneira rápida e fácil com o plug-in Create Block Theme. Você não precisa ser um especialista em codificação para usá-lo. Isso facilita a criação de um tema de bloco personalizado. Você pode até mesmo usá-lo para fazer um design especial para apenas uma seção do seu site.

Neste artigo, mostraremos por que usar o plug-in Create Block Theme é uma boa ideia e como criar seu próprio tema de bloco com apenas alguns cliques.

Introdução ao WordPress Block Theme

Um tema de bloco do WordPress é um tipo de tema que facilita a construção do seu site usando blocos. Você pode adicionar texto, imagens e outros elementos ao seu site simplesmente arrastando e soltando-os no lugar. Você também pode criar modelos personalizados, como cabeçalhos e rodapés, usando o editor do site.

Com um tema de bloco, você não precisa se preocupar em editar o código para alterar a aparência do seu site. Você pode adicionar facilmente estilos personalizados editando apenas um arquivo chamado theme.json. O WordPress acredita que os temas de blocos são o futuro da construção de sites e há muitos benefícios em usá-los.

Create Amazing Websites

Com o melhor criador de páginas gratuito Elementor

Comece agora

Além disso, usaremos um novo plugin chamado Create Block Theme Plugin.

O Create Block Theme é uma ferramenta que você pode obter gratuitamente no WordPress. Isso facilita a criação de um novo tema ou um tema filho. Você pode até usar fontes do Google com ele usando um site especial ou mantendo as fontes em seu computador.

Com o Create Block Theme, você pode ter um tema filho pronto para ser usado em apenas alguns minutos. Aqui está o que você precisa fazer para começar a usá-lo. O plug-in Create Block Theme é uma ferramenta que facilita e agiliza a criação de um novo tema para o seu site. Com apenas um clique, você pode criar um tema filho de bloco sem precisar fazer nenhuma codificação complicada. Você também pode copiar um tema existente ou criar um tema completamente em branco. Além disso, você pode até pegar seus temas de bloco do WordPress e usá-los em outros projetos. E se você quiser mudar a aparência do seu site, pode adicionar novas opções de estilo no editor do site.

Como construir um tema de bloco do WordPress

Antes de usar o plug-in para gerar um tema de bloco, você deve instalar e ativar um tema de bloco pai. Usaremos o tema Twenty Twenty-Three para este tutorial.

tema do bloco pai

Faça login no painel do WordPress para começar. Em seguida, selecione Aparência > Temas no menu.

Você pode selecionar qualquer tema que desejar, desde que seja um tema de bloco do WordPress. Comece clicando no botão Add New em Appearance > Themes se quiser usar um tema de bloco diferente de Twenty Twenty-Three.

Clique na guia do tema do bloco para exibir as opções de tema do bloco disponíveis.

Quando encontrar o tema desejado, passe o mouse sobre ele e clique no botão Instalar.

Instale o plug-in do tema Create Block

O plug-in Create Block Theme deve então ser instalado. Existem várias maneiras de instalar um plug-in do WordPress, mas esta é simples de fazer no painel. Comece acessando Plugins > Adicionar novo no painel do WordPress.

Configurar o plug-in

Depois de instalar o plug-in, vá para Aparência > Criar tema de bloco.

Existem algumas opções nas configurações do plugin:

  1. Exportar (nome do tema)
  2. Criar um filho de (nome do tema)
  3. Clone (nome do tema)
  4. Substituir (nome do tema)
  5. Criar tema em branco
  6. Crie uma variação de estilo

Exportar tema

Esta opção permite exportar o tema atualmente ativo, bem como quaisquer alterações feitas. Haverá modelos, estilo global, fontes ou outras alterações estruturais. Você pode exportar o tema e usá-lo em outras instalações do WordPress usando esta configuração. Todas as suas preferências serão mantidas.

Selecione a opção de exportação e clique no botão gerar para exportar o tema atualmente instalado. O arquivo será baixado como um arquivo zip para sua pasta de downloads, assim como qualquer outro tema do WordPress.

Criar Tema Filho

Você pode usar esta opção para criar um tema filho baseado em seu tema pai atual. Antes de gerar o tema filho, dê um nome, descrição e URL ao seu tema, anote o autor e, se desejar, o URL do autor. Quando você pressiona o botão gerar, o plug-in baixa seu tema filho como um arquivo zip.

Clonar tema

O plug-in gerará um novo tema quando você clonar o tema do bloco. O clone manterá todos os ativos do tema pai, bem como quaisquer alterações do usuário. Assim como na criação de um tema filho, dê ao seu tema um nome, uma descrição e um URL de tema, autor e URL do autor.

Substituir tema

Todas as alterações do usuário são salvas e convertidas em alterações de tema quando você substitui o tema do bloco. Quaisquer modelos ou alterações de estilo que você fizer serão salvos em arquivos de tema e se tornarão uma parte permanente do tema.

Criar tema em branco

Ao selecionar esta opção, um tema em branco será criado no diretório de temas do seu site. Dê ao seu novo tema um nome, descrição e URL do tema (se desejar) antes de gerá-lo e anote o autor e o URL do autor. Depois de clicar no botão gerar, vá para Aparência > Temas para ver seu novo tema em branco.

Crie uma variação de estilo

Aparência > Editor contém variações de estilo. Para encontrá-los, acesse o editor de temas e clique no botão de estilos no canto superior direito. Você pode alterar os estilos de texto, cor e botão lá. Existem também opções de estilo adicionais para blocos individuais.

Depois de criar estilos, você pode usar o plugin Create a Block Theme para criar variações de estilo selecionando a última opção nas configurações. Dê um nome ao seu estilo e pressione o botão Gerar.

Retorne ao Editor de Aparência >, clique no ícone de estilo e navegue pelos estilos para ver seu novo estilo. Lá, você pode examinar os estilos para encontrar o novo que acabou de criar.

Fontes do tema

Navegue até Aparência > Gerenciar fontes do tema para gerenciar as fontes instaladas em seu tema. Lá, você poderá ver todas as fontes que foram instaladas em seu tema.

A capacidade de gerenciar as fontes do seu tema é um dos recursos mais surpreendentes e surpreendentes do plug-in Create Block Theme. Você pode remover famílias inteiras de fontes ou uma única variação nesta seção do plug-in. Além disso, você pode facilmente incorporar as fontes do Google em seu tema, hospedando-as localmente ou chamando-as por meio do CDN do Google Fonts .

Para remover uma família ou variação de fonte do seu site, basta clicar no link remover ao lado da família ou variação que deseja remover.

Para começar a adicionar uma fonte do Google, clique no botão Adicionar fonte do Google na parte superior da página.

Quando a página for atualizada, selecione uma fonte no menu suspenso. Você poderá selecionar qualquer fonte da biblioteca de fontes do Google.

Depois de escolher uma fonte, você poderá selecionar quais variantes deseja incluir. Você pode selecionar todos eles clicando na caixa de seleção na parte superior ou pode selecionar alguns individualmente. Depois de selecionar suas variantes, clique no botão Adicionar Google Fonts ao seu tema.

Você também pode incorporar fontes locais em seu tema. Comece selecionando a opção Adicionar fonte local. Fontes nos formatos de arquivo ttf, off e woff2 são suportadas.

Carregue uma fonte selecionando um arquivo de sua máquina local. Em seguida, dê um nome e selecione um estilo de fonte e peso. Por fim, escolha Carregar fontes locais no tema.

Depois de instaladas, as fontes podem ser gerenciadas e aplicadas a estilos no editor do site usando o plug-in Create Block Theme.

Depois de adicionar as fontes, retorne à aba Create Block Theme e selecione uma das opções para criar um tema filho, exportá-lo, cloná-lo ou sobrescrever seu tema atual. Todas as fontes, variações de estilo e modelos que você criar serão preservados.

Empacotando

O plug-in Create Block Theme simplifica a criação de um tema personalizado para o seu site. Você pode criar seus próprios modelos, adicionar estilos, alterar fontes e até mesmo usar seus temas em outros projetos. Você não precisa saber nenhuma codificação ou alterar nenhum arquivo. Tudo é feito com apenas alguns cliques. Se você deseja começar a usar temas de blocos ou torná-los mais fáceis de gerenciar, experimente o plug-in Create Block Theme.

Se você usar um construtor de páginas, poderá criar temas personalizados usando opções integradas. Por exemplo, com o construtor Divi , você pode importar e exportar facilmente seus modelos e designs usando o construtor de temas, e o mesmo vale para o Elementor . Isso significa que você pode salvar todo o estilo do seu site e usá-lo como um tema filho para iniciar rapidamente novos projetos de sites com apenas alguns cliques.

Divi WordPress Theme