Você gostaria de criar um WordPress Plugin bloco Gutenberg simples?
Todos nós não amamos o WordPress? A plataforma teve um enorme sucesso desde o seu início, com os desenvolvedores constantemente adicionando novos recursos. Um dos recursos de destaque dos últimos tempos é o WordPress Block Editor, codinome Gutenberg.
O Gutenberg oferece aos usuários do WordPress uma nova e empolgante maneira de publicar conteúdo e personalizar seu site. É incrivelmente fácil de usar, o que é uma ótima notícia para iniciantes e desenvolvedores. Se você estiver usando a versão mais recente do WordPress, já conhece o editor de blocos e o conceito de blocos.
Por padrão, o editor de blocos do WordPress vem com alguns blocos que permitem incluir texto, imagens, citações, áudio, vídeo, incorporações, etc. Além disso, existem vários complementos do Gutenberg que permitem estender o editor sem quebrar um suor.
No entanto, você pode ter uma necessidade específica que o solicite a criar seus próprios blocos personalizados. Neste artigo, mostraremos em alguns parágrafos como criar blocos personalizados do Gutenberg para atender às suas necessidades específicas.
Sem mais delongas, vamos começar porque há muito o que aprender.
Mas antes, se você nunca instalou o WordPress, descubra Como instalar um blog WordPress passos 7 et Como encontrar, instalar e ativar um tema WordPress em seu blog
Então, voltemos ao porquê de estarmos aqui.
O que são blocos, afinal?
Os blocos tratam parágrafos, títulos, mídia e incorporações como componentes que, quando agrupados, compõem o conteúdo armazenado no banco de dados do WordPress, substituindo o conceito tradicional de texto por mídia e incorporações.
No passado, os usuários do WordPress dependiam de texto e códigos de acesso para adicionar conteúdo. Gutenberg usa blocos. O novo editor permite que você use unidades de bloco para criar layouts ricos e flexíveis que são fáceis de gerenciar. Atualmente, você pode usar o editor de blocos para postagens e páginas, mas há planos ativos para suporte a edição completa do site no futuro.
Trabalhar com blocos torna a criação de conteúdo no WordPress bastante refrescante. Além disso, muitos plug-ins existentes suportam o novo editor e vêm com blocos prontos para uso que facilitam a adição de conteúdo desses plug-ins. O editor permite arrastar e soltar blocos em uma página para que você possa pressionar o botão de publicação mais rapidamente.
Assim como um construtor de páginas integrado diretamente ao WordPress.
Se você estiver familiarizado com o construtores de páginas, como Elementor, você provavelmente está familiarizado com o conceito de criação de páginas de arrastar e soltar. Gutenberg é uma tentativa de integrar totalmente a construção de sites de arrastar e soltar no núcleo do WordPress.
Então vamos para a melhor parte do artigo de hoje. Vamos aprender como criar um bloco simples. Você pode fazer isso manualmente ou usando plugins como Blocos personalizados do Genesis (anteriormente BlockLab), Blocos preguiçosos ou ACF. Criar blocos personalizados é um pouco técnico, então, para os propósitos do artigo de hoje, usaremos um plugin.
Como criar um bloco personalizado (usando genesis Custom Blocks)
É mais fácil seguir o caminho do plug-in porque criar blocos personalizados do Gutenberg a partir do zero requer uma boa compreensão de HTML, CSS, PHP e, mais importante, javaScript. Você também precisará entender React.
Para a próxima seção, usaremos os blocos personalizados do Genesis. Sua versão gratuita está disponível no repositório oficial do WordPress, o que significa que podemos instalá-lo no painel de administração do WordPress.
Instale os blocos personalizados do Genesis
Faça login no painel de administração do WordPress e navegue até Extensões> Adicionar, como mostrado abaixo.
Em seguida, digite " Blocos personalizados do Genesis na caixa de pesquisa de palavras-chave e clique no botão instalar agora
Depois disso, ativar o plugin para você começar
Em seguida, vamos criar um novo bloco personalizado. Para fins de ilustração, vamos criar uma chamada para ação (CTA) personalizada que adicionaremos ao final de cada artigo que publicarmos. A melhor parte é que você pode reutilizar os blocos para evitar que você crie os mesmos blocos repetidamente.
No menu de administração do WordPress, navegue até Blocos personalizados > Adicionar novo, como destacamos a seguir.
Isso o levará à página a seguir, onde você encontrará todas as opções para criar um bloco personalizado (no nosso caso, um CTA):
Aqui estão algumas palavras para explicar o que você vê na captura de tela acima. Começando de cima, você tem.
Área de edição principal:
- Construtor – Você provavelmente passará muito tempo aqui projetando seu bloco personalizado. a Constructeur permite adicionar título, campos, slug, palavras-chave, categoria e visualizar seu bloco personalizado. Você aprenderá como adicionar campos.
- Editor de modelos – Depois de projetar seu bloco personalizado (ou seja, adicionar vários campos), você precisará criar um modelo de bloco (ler, adicionar algum código) em o editor de modelos. Aprenderemos mais quando projetarmos o CTA.
- Visualização do Editor – Permite visualizar o bloco personalizado no editor de blocos do WordPress.
- Visualização de front-end – Aqui você pode visualizar como o bloco personalizado ficará em seu site.
- Campo do Editor – Mostrará campos na área de edição principal de um post ou página (você sabe, assim como você vê seus posts regulares no editor do WordPress)
- Campo do Inspetor – Exibe o campo na barra lateral direita abaixo do Inspetor de Blocos.
Opções da barra lateral
- Lesma – Ele é preenchido automaticamente com base no título que você dá ao seu bloco personalizado. Isso é importante ao criar o modelo de bloco.
- ícone – Esta opção permite adicionar um ícone ao seu bloco personalizado.
- Categoria – Permite atribuir uma categoria ao seu bloco personalizado. Você pode categorizar seu bloco personalizado usando uma das categorias internas ou pode criar uma categoria totalmente nova.
- Palavras-chave – Adicione no máximo três palavras-chave relacionadas ao seu bloco personalizado para que as pessoas possam encontrá-lo facilmente no seletor de blocos.
- Campos de bloco abertos em um modal em vez de renderizar no local – Habilite se desejar abrir campos em um modal. Isso é útil se você tiver um bloco personalizado com muitos campos.
- Tipos de Post – Marque a(s) caixa(s) para permitir que seu bloco personalizado seja exibido em cada tipo de postagem. Por exemplo, se você desmarcar Posts, o bloco não aparecerá em nenhum post.
Criar um bloco personalizado
Agora que você compreendeu melhor a interface do usuário e o que cada parte faz, vamos ao trabalho.
em Construtor- Construtor -, dê ao seu bloco personalizado um título apropriado. Vamos escolher o CTA para este, conforme mostrado abaixo.
Antes de adicionar novos campos, vamos adicionar um ícone, palavras-chave e escolher uma categoria para o bloco personalizado conforme mostrado abaixo.
Para isso, vamos adicionar alguns campos ao nosso bloco personalizado. Para nosso bloco de CTA de exemplo, adicionaremos apenas três campos na seguinte ordem: uma imagem, algum texto e um campo de arquivo que permite que as pessoas baixem um e-book.
Leia também: 5 WooCommerce plugins para editar seus produtos em massa
Adicionando Campos de Bloco
Na secção Campos do editorClique em o ícone de adição (+) para adicionar o primeiro campo como mostrado abaixo.
Em seguida, vamos adicionar um campo de imagem. Na barra lateral, defina o Tipo de campo ativado Imagem e defina as outras opções. Além disso, considere o slug, pois o usaremos ao criar o modelo de bloco.
Depois disso, adicione os campos de texto e arquivo da mesma maneira.
Troque para Editor de modelos > Marcação.
Aqui vamos projetar como nosso bloco personalizado ficará em seu site. O editor de modelos aceita HTML, CSS e slugs de campo (que você deve colocar entre 2 colchetes). Se você precisar usar a linguagem PHP, você pode criar o modelo usando Método de modelagem PHP
Não se preocupe, é fácil.
Em o editor de modelos, sob guia de marcação, adicione o seguinte código:
<div class="cta-block">
<div class="cta-image">
<img src ="{{image-field}}">
</div>
<div class="text-upload">
<h2>{{text-field}}</h2>
<a href="{{file-field}}">
<button type="button" class="dwnld">Telecharger</button></a>
</div>
</div>Ao escrever seu código, você notará que o editor de modelos Slugs de campo de preenchimento automático (por exemplo, {{image-field}} ) para você.
Em seguida, vá para a seção APF para adicionar estilos simples com o seguinte código:
.cta-block {
text-align:center;
background-color:orange;
width:100%;
height:auto;
border: 2px solid orange;
}
.dwnld {
background-color: black;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
border-radius:2px;
}
Você pode personalizar esses estilos como quiser,
Clique publicar :
Para ver seu novo bloco personalizado em ação, volte para o painel de administração do WordPress e crie uma postagem como faria normalmente, clique no botão Mais (+) para adicionar um novo bloco e escolher seu novo bloco personalizado, conforme destacamos abaixo.
Em seguida, preencha seu bloco personalizado conforme desejado e poste sua mensagem:
Agora, se verificarmos nosso novo bloco de CTA personalizado no front-end, é isso que vemos.
Nosso CTA personalizado está logo ali! Por favor, não se preocupe com nossos recursos de design – é claro, em um cenário da vida real, você gastará um pouco mais de tempo personalizando seu bloco. Mas esperamos que você tenha aprendido algo aqui.
Outros recursos recomendados
Convidamo-lo também a consultar o Ressources abaixo para ter mais propriedade e controle de seu site e blog.
- 10 plugins WordPress afiliados para criar um programa
- Como adicionar várias colunas no WordPress
- Como adicionar várias colunas no WordPress
- Usando diferentes origens WordPress
- Elementor: Como criar uma animação ao passar o mouse
Conclusão
Construir blocos personalizados não é uma tarefa fácil. Mas com WordPress plugins como Genesis Custom Blocks e Lazy Blocks, entre outros, seja você iniciante ou não, conseguirá criá-los. Do mais básico ao complexo, dependendo das suas necessidades.
É isso neste artigo que mostra como adicionar fontes personalizadas a um site WordPress. Convidamos você a experimentar. Se você tiver alguma dúvida ou sugestão, informe-nos dentro de Comentários.
No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.
En attendant, compartilhe este artigo em suas diferentes redes sociais.
...
