Os campos personalizados são uma das funcionalidades mais poderosas do WordPress. Eles permitem que customizemos tanto a parte frontal quanto a administrativa de um site, possibilitando usos criativos como exibir conteúdos específicos e alterar layouts de páginas com base nos valores dos campos.

Tradicionalmente, usar campos personalizados envolvia enfrentar obstáculos, exigindo conhecimento em codificação ou um plugin para renderizar os dados dos campos, o que pode ser demorado e difícil para alguns usuários.

A API de Bindings de Blocos do WordPress remove algumas dessas limitações, permitindo “vincular” os valores de campos personalizados a um bloco do WordPress. Essa função está incorporada no Editor de Blocos, mas ainda requer código para registrar os campos.

Independentemente disso, a API é uma economia de tempo para desenvolvedores. Veja como ela funciona com um exemplo prático.

O que você precisa para usar a API de Bindings de Blocos

A API de Bindings de Blocos do WordPress simplifica a renderização de dados de campos personalizados. No entanto, você precisará de algumas coisas para usá-la:

• A versão mais recente do WordPress;
• Um tema com um arquivo functions.php ou um plugin personalizado para abrigar seu código;

Isso é tudo! A API funciona com temas de bloco e clássicos. Use um tema de bloco se preferir uma experiência sem código.

Observamos algumas limitações da API. Até o momento, ela funciona com os blocos de Parágrafo, Cabeçalho, Botão e Imagem. Os tipos de dados também são limitados a conteúdo, texto, URL, etc. Consulte a documentação para mais detalhes.

Exemplo: Vinculando um campo personalizado a um bloco do WordPress

Nosso exemplo é uma homenagem às raízes de blog do WordPress. Vamos criar um campo personalizado chamado “Agora Tocando”, que preencheremos em cada post do blog. O campo conterá uma música, filme ou programa de TV favorito do momento.

Vamos registrar o campo personalizado em nosso tema, adicioná-lo ao template do post e vinculá-lo a um bloco de parágrafo.

Passo 1: Registrar o Campo Personalizado

Primeiro, registraremos nosso campo personalizado adicionando código ao arquivo functions.php do nosso tema. Isso informa ao WordPress que nosso campo está associado a posts.

Observe o slug do campo, pois precisaremos dele mais tarde: now_playing

Passo 2: Exibir Campos Personalizados no Editor de Blocos

Por padrão, os campos personalizados não são exibidos no Editor de Blocos. Então, teremos que habilitar o recurso:

1. Abra um post ou página no admin do WordPress.
2. Dentro do Editor de Blocos, clique no menu Opções (⋮).
3. Clique no link Preferências.
4. Vá para o cabeçalho Avançado e ative Campos personalizados.

O WordPress atualizará a tela e exibirá uma interface de campos personalizados na parte inferior.

Passo 3: Adicionar um Campo Personalizado a um Post de Blog

Em seguida, adicionaremos nosso campo personalizado a um post de blog:

1. Navegue para Posts > Adicionar Novo no admin do WordPress.
2. Dê um título ao seu post e adicione conteúdo.
3. Role até a área de Campos Personalizados do editor.
4. Na coluna Nome, clique no botão Adicionar Novo.
5. Insira o slug do campo personalizado no campo Nome: now_playing
6. No campo Valor (coluna direita), insira o nome de uma música, filme ou programa de TV.
7. Publique seu post de blog.

Passo 4: Vincular o Campo Personalizado a um Bloco

Agora, é hora de vincular nosso campo personalizado a um bloco. Como estamos usando um tema de bloco, navegaremos até Aparência > Editor.

Queremos adicionar dados de campo personalizado aos posts individuais. Dentro do Editor de Site, clique em Templates, depois clique em Posts Individuais.

Em seguida, escolheremos um local para nosso campo personalizado no template de Posts Individuais. Acima do conteúdo do post parece uma boa escolha.

1. Adicione um bloco de Parágrafo no local escolhido no template. Não adicione nenhum conteúdo ao bloco.
2. Selecione o bloco de Parágrafo (clique no bloco ou selecione-o no painel Visualizar Lista).
3. Clique no ícone “+” na aba Atributos na coluna direita do editor.
4. Selecione “conteúdo” na lista de Atributos.

5. Clique em “conteúdo” na aba de Atributos. Uma lista de campos personalizados registrados aparecerá. Selecione now_playing da lista. Você também pode adicionar formatação personalizada a esta área para que o campo se destaque. Escolhemos o estilo “Subtítulo” nas configurações do bloco.

6. Salve as alterações feitas no template.

Note que clicar no bloco de Parágrafo revela um contorno roxo. Isso indica que o bloco está vinculado a uma fonte de dados personalizada.

Passo 5: Visualizar o Resultado no Front-End

Vamos ver como ficou a vinculação do nosso campo personalizado. Visitaremos nosso post de blog para ver como está.

Está funcionando! Nossa música (“Wonderwall” do Oasis) é exibida acima do conteúdo do post.

A parte técnica do nosso exemplo está concluída. No entanto, podemos querer ajustar os estilos ou adicionar outro parágrafo que diga “Agora Tocando:” acima do campo. Isso melhoraria a aparência e a acessibilidade do recurso.

Um Caminho Mais Fácil para Usar Campos Personalizados

Usar campos personalizados do WordPress está mais fácil do que nunca. A API de Bindings de Blocos ajuda em casos simples como o acima. Tudo funciona dentro dos editores de Bloco e de Site.

Isso significa menos complicações para os construtores de sites. Você não precisa instalar um plugin ou se envolver com camadas de PHP.

Além disso, espera-se que o recurso evolua. Por exemplo, podemos ver mais tipos de dados suportados e uma maneira sem código de registrar campos personalizados. Será emocionante ver o que vem a seguir.

Recursos como a API de Bindings de Blocos aproximam cada vez mais o WordPress de uma experiência sem código. Isso coloca um site personalizado ao alcance de todos.