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
Ir para Plugins >> Adicionar novo, e instalar o plugin 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.
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.
O bloco do WordPress é basicamente uma lista de campos. Neste exemplo, vamos criar quatro campos em nosso bloco:
- Campo de imagem para imagem médica
- Campo de texto para o nome do médico
- Área de texto para breve biografia do médico
- 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.
Assim que você adicionar todos os campos, clique em Publicar.
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.
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.
Para adicionar o estilo CSS ao seu bloco, clique em CSS na mesma aba do Editor de Modelos.
É 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.
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.
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.
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.
