Home » WordPress » Como criar um bloco WordPress personalizado em 10 minutos

Como criar um bloco WordPress personalizado em 10 minutos

Recentemente construí um site para uma clínica privada usando WordPress. Para tornar a administração do site o mais simples possível, acrescentei alguns blocos personalizados de WordPress. Aqui vou mostrar como criar um bloco WordPress simples por conta própria.

Usando as ferramentas certas, você pode criar um bloco editor WordPress Gutenberg personalizado em apenas alguns minutos. Aqui está como você faz isso.

Criando um bloco personalizado do WordPress sem sair do painel de administração do WordPress

Para criar um bloco personalizado no WordPress, você precisará baixar um plugin gratuito para WordPress chamado Blocos personalizados Genesis. Não se preocupe, você não precisa usar o tema baseado no Genesis Framework para usar este plugin – ele funciona com qualquer tema que suporte blocos WordPress.

Primeiro passo – instale o plugin personalizado de blocos WordPress

Best WordPress hosting 2024

Ir para Plugins >> Adicionar novo, e instalar o plugin Genesis Custom Blocks.

how to use genesis Custom Blocks

Uma vez ativado o plugin, você encontrará suas configurações no painel de administração do WordPress >> Blocos personalizados.

Segundo passo – criar campos de blocos personalizados do WordPress

Uma vez ativado o plugin, vá para Blocos personalizados >> Adicionar novo para começar a construir seu primeiro bloco editor Gutenberg personalizado.

create new wordpress block

Agora você está na aba Builder onde você fará a estrutura real do bloco e definirá seu nome:

  • Digite o nome do bloco personalizado do WordPress no topo
  • Selecione um ícone para um bloco – seu nome e ícone serão mostrados na página ou post para os editores do site.
  • Os editores do WordPress geralmente procuram por um bloco digitando seu nome. Você pode especificar palavras-chave adicionais para garantir que os editores do site encontrem o bloco de que precisam o mais fácil possível.
  • Selecione se o bloco precisa ser mostrado em páginas, em posts, ou em ambos os tipos de conteúdo.
custom gutenberg block in wordpress

O bloco do WordPress é basicamente uma lista de campos. Neste exemplo, vamos criar quatro campos em nosso bloco:

  1. Campo de imagem para imagem médica
  2. Campo de texto para o nome do médico
  3. Área de texto para breve biografia do médico
  4. Campo de arquivo para o CV do médico – editor do site poderá carregar um arquivo PDF diretamente no bloco.

Para criar um novo campo, clique no botão +, e selecione as configurações de campo:

  • Digite a etiqueta do campo
  • Digite o nome do campo / lesma (será usado no modelo html)
  • tipo de campo
  • largura do campo

Alguns blocos têm configurações adicionais como espaço reservado, texto de ajuda, etc. Portanto, você pode até mesmo adicionar instruções de como usar o campo diretamente no editor do WordPress.

how to create custom wordpress block

Assim que você adicionar todos os campos, clique em Publicar.

wordpress custom block in admin panel

Após publicar o bloco personalizado, você será notificado de que pode adicionar este arquivo ao seu tema (clicando no ícone no quadrado vermelho), ou você pode mudar mal para a aba Template Editor e criar lá o código HTML e CSS do bloco.

how to create custom wordpress block

Terceiro passo – criar bloco HTML personalizado do WordPress e código CSS

Uma vez que tenhamos nossa estrutura de blocos WordPress personalizada, a próxima coisa que precisamos é criar um modelo HTML para ele. O modelo é usado para exibir blocos personalizados para os visitantes do site.

Uma vez na aba Template Editor, clique em Markup, e crie qualquer estrutura HTML que desejar.

Para exibir valores de campo, inclua a barra de campo em 2 colchetes. Por exemplo {{doctor-image}}, {{cv-file}}, etc.

Você pode verificar mais informações sobre o uso e a marcação de campos na documentação oficial do plugin aqui.

wordpress custom block html

Para adicionar o estilo CSS ao seu bloco, clique em CSS na mesma aba do Editor de Modelos.

wordpress custom block styling

É isso – seu bloco WordPress personalizado está pronto para uso.

Se você quiser editar o estilo, marcação html ou campos personalizados, você pode sempre editar seu bloco WordPress personalizado na lista de Blocos personalizados. Portanto, não se preocupe se você não tiver certeza de como seu bloco precisa ficar – você pode atualizá-lo mais tarde.

Como usar o bloco personalizado do WordPress em páginas e posts

Para começar a usar seu bloco criado no WordPress, basta ir à página ou postar o bloco desejado, e adicionar o bloco da mesma forma que você adiciona qualquer outro bloco.

Clique + onde você quer que o bloco apareça, digite o nome do bloco, e escolha-o.

create custom block in wordpress

Preencha seu novo bloco. Os dados serão visíveis da mesma forma que nos blocos nativos do WordPress para que os administradores do site de seu cliente não tenham nenhum problema ao usá-los.

wordpress custom blocks

Você pode adicionar tantos blocos personalizados quantos desejar na mesma página ou postagem.

Aproveite seu novo bloco personalizado no WordPress!

Como você vê, adicionar novos blocos personalizados no WordPress é realmente fácil e direto. Você só precisa do plugin certo, algumas habilidades básicas de HTML e CSS, e você pode construir qualquer coisa com o WordPress sem construtores de páginas incômodos de terceiros.

how to create custom gutenberg blocks in wordpress

Você pode criar quantos blocos personalizados de WordPress quiser, adicionar estilo a eles a partir do administrador do WordPress e construir sites WordPress personalizados sem nunca sair do painel de administração do WordPress.

Fathom analytics