Como Criar um Bloco Personalizado no WordPress (Maneira Fácil)

Os blocos padrão do WordPress são ótimos para conteúdo simples — mas eles podem rapidamente se tornar insuficientes quando você precisa de layouts personalizados, elementos interativos ou designs sob medida.

É aí que entram os blocos personalizados. Eles lhe dão controle total sobre como seu conteúdo se parece e funciona, sem depender de plugins inchados ou soluções alternativas.

A melhor parte? Criar blocos personalizados é mais acessível do que a maioria das pessoas pensa. Com as ferramentas certas e um processo claro, você não precisa ser um desenvolvedor para criar blocos que atendam às necessidades exclusivas do seu site.

Ao longo dos anos, usamos blocos personalizados para otimizar fluxos de trabalho e entregar sites WordPress totalmente personalizados para clientes — e agora, mostraremos como fazer o mesmo.

Neste guia, você aprenderá o processo passo a passo para criar blocos personalizados do WordPress, mesmo que você não seja um codificador especialista.

Por que Criar um Bloco Personalizado no WordPress?

O WordPress vem com um editor de blocos intuitivo que permite construir facilmente suas postagens e páginas adicionando conteúdo e elementos de layout como blocos.

Por padrão, o WordPress vem com vários blocos comumente usados. Plugins do WordPress também podem adicionar seus próprios blocos que você pode usar.

No entanto, às vezes, você pode querer criar um bloco personalizado para fazer algo específico em seu site WordPress porque não consegue encontrar um plugin de bloco que funcione para você.

Com blocos personalizados, você pode adicionar recursos e funcionalidades exclusivas ao seu site que podem não estar disponíveis em blocos pré-fabricados. Isso pode ajudar a automatizar processos ou tornar a criação de conteúdo para o seu blog WordPress mais eficiente.

Por exemplo, você pode criar um bloco personalizado para exibir depoimentos e, em seguida, inserir e gerenciar facilmente esse bloco sem nenhum conhecimento de codificação.

Dito isso, vamos ver como criar facilmente um bloco totalmente personalizado no WordPress.

Para este tutorial, mostraremos dois métodos para criar um bloco personalizado. Você pode usar os links rápidos abaixo para pular para o método de sua escolha:

• Método 1: Crie Blocos Personalizados para WordPress Usando WPCode (Recomendado)
• Método 2: Crie Blocos Personalizados para WordPress Usando o Plugin Genesis Custom Code (Grátis)
• Bônus: Crie Modelos Personalizados para Suas Publicações

Método 1: Crie Blocos Personalizados para WordPress Usando WPCode (Recomendado)

Se você é novo no WordPress e a codificação parece intimidante, o WPCode é uma escolha fantástica para você.

Como parte de nosso kit de ferramentas, descobrimos que o WPCode é a maneira mais amigável para iniciantes e mais segura de adicionar snippets de código personalizados.

Também temos uma revisão detalhada do WPCode que pode ser útil para entender todo o seu potencial.

Um de seus recursos de destaque são os snippets de bloco, que permitem criar blocos personalizados sem esforço.

Primeiro, você precisa instalar e ativar o plugin WPCode. Para instruções detalhadas, você pode consultar nosso guia para iniciantes sobre como instalar um plugin WordPress.

Após a ativação, acesse a página Code Snippets » + Add Snippet na barra lateral de administração do WordPress.

Uma vez lá, clique no botão ‘Use Snippet’ em ‘Add Your Custom Code (New Snippet)’.

Isso o levará para a página ‘Criar Snippet Personalizado’, onde você pode começar digitando um nome para o novo bloco que está prestes a criar.

Depois de fazer isso, basta selecionar a opção ‘Snippet de Blocos’ no menu suspenso ‘Tipo de Código’ no canto direito da tela.

Isso exibirá o botão ‘Editar com Editor de Blocos’ na caixa ‘Prévia do Código’.

Simplesmente clique neste botão para iniciar o editor de blocos.

Agora, um prompt aparecerá na sua tela pedindo para salvar o snippet de código para carregá-lo no editor de blocos. Basta clicar no botão ‘Sim’ para prosseguir.

Agora que você está no editor de blocos, pode facilmente criar um bloco personalizado usando os blocos pré-fabricados disponíveis no menu de blocos.

Para este tutorial, criaremos um bloco personalizado para adicionar depoimentos ao seu site.

Primeiro, clique no botão ‘Adicionar Bloco’ (+) no canto superior esquerdo da tela para abrir o menu de blocos.

A partir daqui, arraste e solte o bloco de Título na interface do editor de blocos e nomeie-o ‘Depoimentos’.

Em seguida, você pode usar os blocos de parágrafo, citação em destaque ou citação para adicionar depoimentos de diferentes clientes em seu site.

Você pode até personalizar ainda mais seu bloco de depoimentos usando os blocos de imagem, logotipo do site, ícones sociais ou slogan do site.

Você também pode configurar o tamanho, a cor do texto ou a cor de fundo de seus depoimentos no painel de blocos no lado direito da tela.

Quando terminar, não se esqueça de clicar no botão ‘Atualizar’ na parte superior para armazenar as configurações do seu bloco personalizado.

Em seguida, basta clicar no botão ‘Retornar ao Snippet WPCode’ na parte superior para ser redirecionado para a página do editor de código.

Uma vez lá, role para baixo até a seção ‘Inserção’ e escolha o modo ‘Inserção Automática’.

Ao ativar o snippet de código, seu bloco personalizado será adicionado automaticamente ao local que você escolher para inseri-lo em seu site.

Em seguida, você terá que configurar a localização do bloco personalizado que você criou.

Para fazer isso, simplesmente clique no menu suspenso ‘Localização’ na seção ‘Inserção’ e mude para a aba ‘Específico da Página’. A partir daqui, você pode agora escolher a opção ‘Inserir Após Post’ se quiser mostrar seu bloco de Depoimentos após o fim do post.

Depois de fazer isso, você também pode configurar o número de posts após os quais o bloco de depoimentos deve aparecer. Por exemplo, se você digitar o número 3, o bloco de Depoimentos aparecerá em cada terceiro post.

Você também pode exibir o bloco entre diferentes parágrafos, após resumos de posts e muito mais.

No entanto, se você não encontrar a localização do bloco que está procurando, você também pode criar sua própria regra de lógica condicional para incorporar o bloco personalizado em seu local preferido.

Para fazer isso, role para baixo até a seção ‘Lógica Condicional Inteligente’ e ative o interruptor ‘Habilitar Lógica’.

Em seguida, você deve clicar no botão ‘Adicionar Novo Grupo’ para começar a criar uma regra de lógica condicional.

Por exemplo, se você quiser mostrar o bloco personalizado que criou apenas em uma página ou post específico, você terá que selecionar a opção ‘URL da Página’ no menu suspenso à direita.

Depois disso, você pode deixar o menu suspenso no meio como está e, em seguida, adicionar a URL da página/post do WordPress de sua escolha no campo à esquerda.

Você também pode configurar sua regra de lógica condicional para exibir o bloco personalizado apenas em uma página específica, usuários logados, páginas da loja WooCommerce, páginas do Easy Digital Downloads, datas específicas e muito mais.

Quando terminar, role de volta para o topo da página e mude o interruptor ‘Inativo’ para ‘Ativo’. Em seguida, clique no botão ‘Atualizar’ para salvar suas configurações.

Seu bloco personalizado agora será adicionado automaticamente a todos os locais que você selecionou para o trecho do bloco.

Lembre-se de que o bloco personalizado que você criou não será exibido como uma opção no menu de blocos do editor Gutenberg do WordPress.

Você terá que configurar as configurações do bloco visitando a página Trechos de Código no painel do WordPress e clicando no link ‘Editar’ abaixo do trecho do bloco.

Isso abrirá a página ‘Editar Trecho’, onde você pode personalizar o bloco ou alterar sua localização e regras de lógica condicional facilmente.

Agora, visite seu site para ver o bloco personalizado que você criou em ação.

Aqui está nosso bloco personalizado de Depoimentos em nosso site de demonstração.

Método 2: Crie Blocos Personalizados para WordPress Usando o Plugin Genesis Custom Code (Grátis)

Se você é um usuário intermediário e procura uma solução gratuita, então este método é para você. Tenha em mente que você precisará estar familiarizado com HTML e CSS para seguir as instruções deste método.

Primeiro, você precisa instalar e ativar o plugin Genesis Custom Blocks. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Para fins deste tutorial, construiremos um bloco de Depoimentos.

Etapa 1: Crie um Bloco Personalizado para WordPress

Primeiro, acesse a página Blocos Personalizados » Adicionar Novo na barra lateral de administração do WordPress.

Isso o levará à página do Editor de Blocos, onde você criará um bloco personalizado para o seu site WordPress.

A partir daqui, você pode começar dando um nome ao seu bloco.

Agora, no lado direito da página, você encontrará as propriedades do bloco que pode configurar.

Aqui, você pode escolher um ícone para o seu bloco, adicionar uma categoria e adicionar palavras-chave.

O slug será preenchido automaticamente com base no nome do seu bloco, portanto, você não precisa alterá-lo. No entanto, você pode escrever até 3 palavras-chave no campo de texto 'Palavras-chave' para que seu bloco possa ser encontrado facilmente.

Agora, é hora de adicionar alguns campos ao seu bloco. Você pode adicionar diferentes tipos de campos como texto, números, endereços de e-mail, URLs, cores, imagens, caixas de seleção, botões de rádio e muito mais.

Adicionaremos três campos ao nosso bloco personalizado de Depoimentos: um campo de imagem para a foto do revisor, uma caixa de texto para o nome do revisor e um campo de área de texto para o texto do depoimento.

Basta clicar no botão '+' para inserir o primeiro campo.

Isso abrirá algumas opções para o campo na coluna da direita. Vamos dar uma olhada em cada uma delas.

• Rótulo do Campo: Você pode usar qualquer nome de sua escolha para o rótulo do campo. Vamos nomear nosso primeiro campo como 'Imagem do Revisor'.
• Nome do Campo: O nome do campo será gerado automaticamente com base no rótulo do campo. Usaremos este nome de campo na próxima etapa, portanto, certifique-se de que ele seja exclusivo para cada campo.
• Tipo de Campo: Aqui, você pode selecionar o tipo de campo. Queremos que nosso primeiro campo seja uma imagem, então escolheremos 'Imagem' no menu suspenso.
• Localização do Campo: Você pode decidir se deseja adicionar o campo ao editor ou ao inspetor.
• Texto de Ajuda: Você pode adicionar algum texto para descrever o campo. Isso não é obrigatório se você estiver criando este bloco para uso pessoal, mas pode ser útil para blogs com vários autores.

Você também pode ver algumas opções adicionais com base no tipo de campo que você escolher. Por exemplo, se você selecionar um campo de texto, obterá opções extras como texto de espaço reservado e limite de caracteres.

Seguindo o processo acima, vamos adicionar outros 2 campos para nosso bloco de Depoimentos clicando no botão ‘+’.

Caso queira reordenar os campos, você pode fazer isso arrastando-os usando a alça no lado esquerdo do rótulo de cada campo. Para editar ou excluir um campo específico, você precisa clicar no rótulo do campo e editar as opções na coluna da direita.

Quando terminar, basta clicar no botão ‘Publicar’ no lado direito da página para salvar seu bloco Gutenberg personalizado.

Etapa 2: Criar um Modelo de Bloco Personalizado

Embora você tenha criado o bloco personalizado do WordPress na etapa anterior, ele não funcionará até que você crie um modelo de bloco.

O template de bloco determina exatamente como as informações inseridas no bloco são exibidas em seu site. Você decide como ele se parece usando HTML e CSS, ou até mesmo código PHP se precisar executar funções ou fazer outras coisas avançadas com os dados.

Existem duas maneiras de criar um template de bloco. Se a saída do seu bloco estiver em HTML/CSS, você pode usar o editor de templates integrado.

Por outro lado, se a saída do seu bloco exigir algum PHP para ser executado em segundo plano, você precisará criar manualmente um arquivo de template de bloco e carregá-lo na pasta do seu tema.

Método 1: Usando o Editor de Templates Integrado

Na tela de edição de bloco personalizado, basta alternar para a aba ‘Editor de Templates’ e inserir seu HTML na aba de marcação.

Você pode escrever seu HTML e usar chaves duplas para inserir valores de campos do bloco.

Por exemplo, usamos o seguinte HTML para o bloco de amostra que criamos acima:

<div class="testimonial-item">
<img src="{{reviewer-image}}" class="reviewer-image">
<h4 class="reviewer-name">{{reviewer-name}}</h4>
<div class="testimonial-text">{{testimonial-text}}</div>
</div>

Depois disso, basta mudar para a aba ‘CSS’ para estilizar o markup de saída do seu bloco.

Aqui está o CSS de amostra que usamos para nosso bloco personalizado:

.reviewer-name { 
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;
}

.reviewer-image {
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;
}

.testimonial-text {
    font-size:14px;
}

.testimonial-item { 
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;
}

Método 2: Upload Manual de Templates de Blocos Personalizados

Este método é recomendado se você precisar usar PHP para interagir com os campos do seu bloco personalizado. Você precisará fazer o upload do template do editor diretamente para o seu tema.

Primeiro, você deve criar uma pasta no seu computador e nomeá-la usando o slug do nome do seu bloco personalizado.

Por exemplo, nosso bloco de demonstração é chamado Testimonials, então criaremos uma pasta testimonials.

Em seguida, você deve criar um arquivo chamado block.php usando um editor de texto simples. É aqui que você colocará a parte HTML / PHP do seu template de bloco.

Aqui está o template de amostra que usamos para nosso exemplo:

<div class="testimonial-item <?php block_field('className'); ?>">
<img class="reviewer-image" src="<?php block_field( 'reviewer-image' ); ?>" alt="<?php block_field( 'reviewer-name' ); ?>" />
<h4 class="reviewer-name"><?php block_field( 'reviewer-name' ); ?></h4>
<div class="testimonial-text"><?php block_field( 'testimonial-text' ); ?></div>
</div>

Agora, você pode ter notado como usamos a função block_field() para buscar dados de um campo de bloco.

Envolvemos nossos campos de bloco no HTML que queremos usar para exibir o bloco. Também adicionamos classes CSS para que possamos estilizar o bloco adequadamente.

Não se esqueça de salvar o arquivo dentro da pasta que você criou anteriormente.

Em seguida, você precisa criar outro arquivo usando o editor de texto simples no seu computador e salvá-lo como block.css dentro da pasta que você criou.

Usaremos este arquivo para adicionar o CSS necessário para estilizar a exibição do nosso bloco. Aqui está o CSS de amostra que usamos para este exemplo:

.reviewer-name { 
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;
}

.reviewer-image {
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;
}

.testimonial-text {
    font-size:14px;
}

.testimonial-item { 
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;
}

Não se esqueça de salvar suas alterações.

Sua pasta de template de bloco agora terá dois arquivos de template dentro dela.

Depois disso, você precisa fazer o upload da sua pasta de blocos para o seu site usando um cliente FTP ou o aplicativo Gerenciador de Arquivos dentro do painel de controle da sua conta de hospedagem WordPress.

Uma vez conectado, navegue até a pasta /wp-content/themes/seu-tema-atual/.

Se a pasta do seu tema não tiver uma pasta chamada 'blocks', então prossiga e crie um novo diretório e chame-o de blocks.

Em seguida, você tem que fazer o upload da pasta que você criou no seu computador para a pasta blocks.

É isso! Você criou com sucesso arquivos de modelo manuais para o seu bloco personalizado.

Etapa 3: Visualizar seu bloco personalizado

Antes de poder visualizar seu HTML/CSS, você precisará fornecer alguns dados de teste que podem ser usados para exibir uma saída de exemplo.

Dentro da área de administração do WordPress, edite seu bloco e mude para a aba 'Visualização do Editor'. Aqui, você precisa inserir alguns dados fictícios.

Esses dados não farão parte do seu bloco personalizado e serão usados apenas para visualizar as alterações que você fez usando HTML e CSS.

Depois de adicionar os dados, lembre-se de clicar no botão 'Atualizar' para salvar suas alterações.

Se você não clicar no botão 'Atualizar', não poderá ver a visualização do seu bloco personalizado.

Agora você pode mudar para a aba 'Visualização Front-end' para ver como seu bloco ficará no front-end do seu site WordPress.

Se tudo parecer bom para você, então você pode atualizar seu bloco novamente para salvar quaisquer alterações não salvas.

Etapa 4: Usando seu bloco personalizado no WordPress

Agora você pode usar seu bloco personalizado no WordPress como usaria qualquer outro bloco.

Basta editar qualquer post ou página onde você deseja usar este bloco. Em seguida, clique no botão ‘Adicionar Bloco’ (+) no canto superior esquerdo para abrir o menu de blocos.

Aqui, use o recurso de pesquisa para encontrar seu bloco digitando seu nome ou palavras-chave. Em seguida, adicione-o à página ou post.

Após inserir o bloco personalizado na área de conteúdo, você verá os campos do bloco que criou anteriormente.

Você pode preencher os campos do bloco conforme necessário.

Ao se afastar do bloco personalizado do WordPress para outro, o editor mostrará automaticamente uma prévia ao vivo do seu bloco.

Agora você pode salvar seu post e página e visualizá-lo para ver seu bloco personalizado em ação em seu site.

Veja como o bloco de Depoimentos aparece em nosso site de teste.

Bônus: Crie Modelos Personalizados para Suas Publicações

Além de criar blocos personalizados, você pode adicionar modelos personalizados para os posts do seu blog ou páginas.

Um modelo é um layout que você pode adicionar ao seu post para que ele tenha uma aparência diferente de outras páginas e conteúdos. Isso pode tornar seus posts mais envolventes e visualmente atraentes e ajudar a gerar mais leads.

Você pode facilmente criar um modelo para todos os seus posts criando um bloco de Grupo reutilizável.

Primeiro, você terá que clicar no botão ‘Adicionar Bloco’ (+) para adicionar o bloco de Grupo ao post. Em seguida, você pode adicionar quaisquer blocos dentro do grupo, incluindo cabeçalho, mídia e texto, imagens de capa e muito mais.

Depois de criar o modelo de postagem, clique no menu de três pontos na barra de ferramentas do bloco na parte superior do bloco. Em seguida, clique no botão ‘Criar Padrão’.

Depois disso, seu modelo de postagem será salvo como um bloco reutilizável. Você pode acessá-lo e adicioná-lo a qualquer postagem abrindo o menu de blocos (+) e alternando para a guia ‘Padrões’.

No entanto, lembre-se de que este método de criação de modelos de postagem personalizados permite funcionalidade limitada. Para criar um modelo personalizado mais bonito sem codificação, você pode usar o SeedProd, que é o melhor construtor de páginas do mercado.

Para mais detalhes, consulte nosso tutorial sobre como criar modelos de postagem única personalizados no WordPress.

Esperamos que este artigo tenha ajudado você a aprender como criar facilmente blocos Gutenberg personalizados para seu site WordPress. Você também pode querer ver nosso guia sobre como adicionar uma lista de verificação de postagens de blog no editor do WordPress e ver nossas dicas essenciais para usar shortcodes em seu site.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.