Tutorial Advanced Custom Fields: O Guia Definitivo

Campos personalizados no WordPress são partes importantes que o transformam em um sistema de gerenciamento de conteúdo flexível, ao invés de “apenas uma plataforma de blogs”.

Quando se trata dos campos personalizados no WordPress, o plugin freemium Advanced Custom Fields é um dos nomes mais conhecidos. Ele facilita o trabalho com campos personalizados em todos os aspectos e também é o tema do nosso post de hoje.

Em especial, explicaremos por que o Advanced Custom Fields é tão valioso e mostraremos um passo a passo de como você pode aplicá-lo em seu site WordPress.

Aqui está tudo o que você encontrará neste post:

Há muita coisa para cobrir, por isso vamos começar…

O Que São Campos Personalizados no WordPress? O Que Eles Permitem que Você Faça?

Os campos personalizados no WordPress permitem que você adicione, armazene e exiba informações adicionais sobre determinado conteúdo no WordPress. Em um nível mais técnico, os campos personalizados te ajudam a armazenar metadados.

Mesmo que você não esteja familiarizado com esse termo, os campos personalizados impulsionam muitas das funcionalidades presentes em seus plugins e temas favoritos.

Por exemplo, o WooCommerce, a forma mais popular de construir uma loja de E-commerce, usa campos personalizados para armazenar informações adicionais sobre um produto, como:

• Preço
• Peso
• Cor

Ou, se você tem um plugin de calendário de eventos no WordPress, ele usará os campos personalizados para armazenar informações extras sobre um evento, como:

• Localização
• Horário de início/término
• Preço

Você também pode criar seus próprios campos personalizados para armazenar informações que são relevantes para suas necessidades únicas, que é sobre o que este post realmente se trata.

Quando Você Deve Usar Campos Personalizados?

Talvez você esteja se perguntando por que precisa de campos personalizados.

Por exemplo, se deseja publicar um evento em seu site WordPress, não poderia apenas colocar todas as informações como texto normal no editor do WordPress?

Bem, sim, você poderia fazer isso. Mas usar campos personalizados é uma abordagem melhor por algumas razões:

• Inserção facilitada — ao invés de digitar as informações do zero, um grupo de campos personalizados bem definidos é um meio muito mais fácil para inserir dados. Por exemplo, ao invés de digitar uma data, você pode simplesmente selecioná-la em um calendário.
• Consistência — a informação que você insere em seus campos personalizados sempre será exibida de acordo com sua configuração, o que significa que será consistente em todos os locais do seu site.
• Atualizações e manutenções facilitadas — se você deseja alterar algo sobre a forma como a informação será exibida no futuro, pode simplesmente atualizar um detalhe, ao invés de precisar editar cada post individualmente.

O WordPress Inclui a Funcionalidade de Campos Personalizados Incorporados

Na verdade, o WordPress inclui uma funcionalidade incorporada para adicionar campos personalizados ao seu conteúdo. No editor clássico TinyMCE, você pode habilitar esse recurso na área de Opções de Tela. No novo editor em blocos, é possível habilitá-lo na área de Opções:

Em seguida, você pode inserir os dados no campo personalizado usando pares de chaves/valores:

Esta funcionalidade nativa de campos personalizados é completamente operacional, mas não apresenta a forma mais amigável ao usuário para fazer as coisas. E esse é o motivo pelo qual muitas pessoas preferem usar o plugin Advanced Custom Fields.

Advanced Custom Fields Facilita as Coisas

De forma simples, o Advanced Custom Fields facilita muito o trabalho com campos personalizados no WordPress em… basicamente todos os aspectos.

Ele simplifica a interface para adicionar e gerenciar campos personalizados em seu painel do WordPress e também facilita o processo de exibição de informações dos campos personalizados no front-end do seu site. Isso ajuda a explicar por que ele está ativo em mais de um milhão de websites com uma avaliação de 4,9 estrelas em mais de mil reviews.

No back-end, ele permite que você crie caixas meta com formatos amigáveis, que incluem tipos de campos pré-selecionados. Portanto, ao invés de ter aquela interface genérica de pares de chaves e valores (como os que vimos acima), você será capaz de usar selecionadores de datas, caixas de marcação e muito mais recursos, como estes:

No total, o Advanced Custom Fields oferece mais de 30 tipos diferentes de campos, que podem ser adicionados em qualquer área do seu painel, incluindo posts, usuários, taxonomias, mídia, comentários e até mesmo páginas de opções personalizadas.

Você pode visualizar informações detalhadas sobre cada tipo de campo aqui.

Advanced Custom Fields também facilita a exibição dessas informações, através de funções bem-documentadas, shortcodes, blocos do Gutenberg, entre outros.

Ou ainda, você pode encontrar integrações com outras ferramentas, como alguns construtores de páginas do WordPress de arrastar e soltar.

Advanced Custom Fields Gratuito versus Pro: De Qual Você Precisa?

Advanced Custom Fields é disponibilizado tanto em uma versão gratuita quanto em outra premium de custo acessível.

Para usos mais básicos, a versão gratuita é suficiente. Ela te dá acesso a quase todos os tipos de campos, bem como todos os recursos que economizam tempo e que têm aspecto amigável para o usuário, conforme destacamos acima.

Se você deseja apenas armazenar algumas informações extras sobre seu conteúdo, a versão gratuita é tudo o que precisa.

Dito isso, a versão Pro adiciona alguns recursos bastante convenientes que ajudam você a usar o Advanced Custom Fields de formas mais interessantes:

• Repeater fields — permitem que você repita certos campos/grupos de campos em cada post. Por exemplo, se você estiver adicionando informações sobre um palestrante de um evento, um repeater field te ajudaria a lidar com casos em que há mais de um palestrante (você poderia simplesmente “repetir” o campo do palestrante tantas vezes quanto necessário, o que te permite cuidar de situações nas quais há múltiplos palestrantes).
• Blocos ACF — exibem seus campos como blocos do Gutenberg, ao invés de uma caixa meta. Isso é algo especialmente conveniente se estiver desenvolvendo um site para um cliente e deseja oferecer a ele uma forma fácil de inserir e visualizar dados do campo personalizado.
• Campo de conteúdo flexível — cria layouts a partir de outros campos. É semelhante a um construtor de páginas leve, baseado em informações do campo personalizado.
• Campo de galeria — carrega múltiplas imagens para um só campo.

Também há outras diferentes, como páginas de opções, a capacidade de clonar campos, melhorias nas relações entre campos e outros ajustes menores.

Você também pode ver todos os recursos do ACF PRO aqui.

ACF PRO é disponibilizado a partir de US$25 por uso vitalício em um site. Ou você pode pagar US$100 por uso vitalício em sites ilimitados.

Se estiver em dúvida, comece usando a versão gratuita até descobrir exatamente qual funcionalidade você precisa. Sempre será possível fazer o upgrade mais tarde, se for necessário.

Tutorial Advanced Custom Fields: Como Adicionar Seus Campos

Agora vamos nos aprofundar no tutorial real do Advanced Custom Fields e te mostrarei como criar e exibir seu primeiro conjunto de campos personalizados.

Para este exemplo, vamos considerar que você tem um blog sobre corrida. Você realmente gosta de correr e deseja compartilhar seus exercícios diários com seus leitores. Em especial, em cada post do blog, você deseja compartilhar as seguintes informações sobre sua corrida:

• Objetivo — digamos que você tenha dois tipos diferentes de corrida: “velocidade” e “condicionamento”.
• Distância — quanto você correu.
• Horário de Início — quando você começou a corrida.
• Horário de Término — quando você terminou a corrida.
• Localização — onde sua corrida aconteceu.

Para coletar essas informações, você deverá adicionar cinco campos personalizados.

É importante notar que os princípios que você aprenderá com esse tutorial do Advanced Custom Fields se aplicam a qualquer caso de uso. Estamos apenas dando um exemplo específico, porque ele ajuda a oferecer uma situação tangível como referência.

Dividiremos esse tutorial em duas partes:

1. Como adicionar e gerenciar seus campos personalizados no back-end.
2. Como exibir informações de campos personalizados no front-end do seu site.

1. Criar um Novo Grupo de Campos

Após instalar e ativar a versão gratuita do Advanced Custom Fields do WordPress.org, vá até Campo Personalizados (Custom Fields) > Adicionar Novo (Add New) para criar seu primeiro Grupo de Campos.

Conforme o nome sugere, um “Grupo de Campos” é um grupo com um ou mais campos personalizados que são exibidos juntos em seu painel WordPress.

Neste exemplo, você criará um grupo de campos que contém cinco campos personalizados.

Atribua ao seu grupo de campos um nome e selecione sua Localização. Para este exemplo, queremos exibir esses campos personalizados para posts regulares de blogs WordPress, para que você possa mantê-los em um Post padrão.

No entanto, se você deseja exibir seus campos personalizados em algum outro lugar, como por exemplo juntamente com um tipo de post personalizado ou uma taxonomia, deverá fazer as alterações de acordo. Também é possível configurar diversas regras para exibir seus campos em múltiplos locais:

2. Adicionar Campos Personalizados

Em seguida, clique no botão + Adicionar Campo (+ Add Field) para adicionar seu primeiro campo personalizado:

Várias opções serão abertas, mas você não precisa preencher tudo.

As duas escolhas mais importantes são:

• Etiqueta do Campo (Field Label) — o nome que aparecerá no editor. Também será usado para gerar o Nome do Campo, que será usado no código. Você não precisa alterar o nome do campo (embora seja possível, se for necessário).
• Tipo do Campo (Field Type)— este é o tipo de informação que você deseja coletar. Por exemplo, você precisaria de um campo de Número para coletar informações numéricas ou um campo de E-mail para coletar endereços de e-mail.

Neste primeiro campo, você usará o tipo de campo de Botão de Opção (Radio Button):

Mais adiante, você pode inserir as opções de seleção para o botão de opção na caixa Escolhas (Choices):

Também há um número de outras escolhas que você pode fazer, como definir se um campo é necessário ou não e qual seu valor padrão. Configure esses campos conforme sua necessidade.

Vejamos outro exemplo: um campo personalizado para coletar a distância da corrida. Dessa vez, você usará um campo com o tipo Número (Number):

Você também poderia tornar as coisas ainda mais amigáveis aos usuários, ao optar por um Complemento (Append) com a unidade de distância. E se desejar, você também poderia adicionar uma validação com um Valor Mínimo (Minimum Value) e Valor Máximo (Maximum Value). Por exemplo, é improvável fazer corridas de mil quilômetros (e se fizer… bom, então você é o novo Forrest Gump)!

Apenas repita o processo para todos os outros campos personalizados que deseja coletar. Quando terminar, deverá ter algo assim:

3. Configurar Detalhes e Publicar

Para finalizar, role a página até chegar à caixa de Configurações (Settings). Nela, você pode controlar como seus campos serão exibidos no editor do WordPress.

Na maioria das vezes, é possível manter as definições padrão. Mas sinta-se livre para alterar os detalhes como quiser. Por exemplo, você pode optar por exibir seus campos personalizados acima do editor regular do WordPress:

Após fazer suas escolhas, Publique seu grupo de campos para que ele vá ao ar.

4. Adicione Algumas Informações ao Editor do WordPress

Após publicar seu grupo de campos, você verá seus campos aparecerem sempre que criar um novo post.

Por padrão, eles aparecerão juntos embaixo do editor, seja ele o clássico TinyMCE ou o novo editor em blocos:

As informações que você insere aqui serão armazenadas no banco de dados de WordPress do seu site, para facilitar sua recuperação (você verá detalhes sobre isso em nosso próximo tutorial sobre o Advanced Custom Fields).

Explorando a Lógica Condicional

Antes de prosseguirmos, vamos fazer um rápido desvio.

Uma das razões pelas quais o Advanced Custom Fields é tão popular são todas as implementações interessantes que ele proporciona.

E uma opção poderosa é a Lógica Condicional, que permite que você exiba/oculte campos, com base em como o campo anterior foi preenchido.

Vejamos um exemplo rápido de como isso funciona…

Digamos que você deseje escrever sobre alimentação, suas viagens ou qualquer outro assunto que não seja relacionados às suas corridas. Quando estiver escrevendo sobre um assunto que não seja desse meio, não faz muito sentido exibir campos personalizados com informações sobre corridas, não é mesmo?

E se, ao invés de exibir automaticamente todos os campos personalizados que acabou de criar, você adicionasse um campo personalizado que diga “Este post é sobre uma corrida?”:

Se marcar a caixa de seleção, os campos de informações sobre a corrida aparecerão automaticamente. Se deixá-la desmarcada, eles permanecerão ocultos:

É isso que a lógica condicional permite que você faça!

Para configurá-la, é necessário editar seu grupo de campos e adicionar um novo campo de Verdadeiro/Falso para a pergunta “Este post é sobre uma corrida?”:

Em seguida, você editaria os campos existentes e ativaria a Lógica Condicional (Conditional Logic) para que cada um deles fosse exibido apenas quando o campo “Este post é sobre uma corrida?” fosse marcado:

Como Exibir o Advanced Custom Fields no Front-End

Certo, estamos no meio do caminho em nossa jornada pelo Advanced Custom Fields. Agora você é capaz de adicionar informações aos seus campos personalizados, associá-las ao tipo relevante de post e armazená-las em seu banco de dados.

No entanto, há um problema em potencial: a informação dos seus campos personalizados ainda não aparece em nenhum local do front-end!

Isto é, mesmo que você tenha adicionado alguns campos personalizados ao editor dos posts do seu blog, eles continuam com a aparência de um post normal no front-end:

Vamos corrigir isso.

Existem algumas formas diferentes que você pode exibir os dados do Advanced Custom Fields no front-end do seu site. O método exato a ser adotado dependerá de suas necessidades e seu nível de conhecimento. Existem três formas de conseguir isso:

1. Os arquivos de template do seu tema — exige um pouco de conhecimento técnico, mas é a melhor abordagem na maioria das vezes, especialmente se você se sente confortável trabalhando com os arquivos de template do seu tema.
2. Com um shortcode — essa é uma opção muito simples e boa se você quer apenas inserir dados dos campos personalizados variando de caso a caso. No entanto, exige muito mais trabalho manual, porque você teria que adicionar shortcodes em cada post individualmente.
3. Com o Elementor Pro — uma ótima opção, porque elimina completamente a necessidade de trabalhar com PHP, mas é um produto premium e também significa que você precisará usar o Elementor Pro para seus templates.

Você pode clicar nos links acima para avançar diretamente para um método específico ou ler todos eles. A decisão é sua.

Como Adicionar o Advanced Custom Fields nos Arquivos de Template do Tema

A primeira forma de exibir as informações do seu campo personalizado é adicionar as funções PHP do Advanced Custom Fields diretamente aos arquivos de template do seu tema filho.

É um método um pouco avançado, porque exige que você se aprofunde nos arquivos de template do seu tema, mas assegura que os campos personalizados sejam exibidos automaticamente no mesmo lugar todas as vezes.

Em especial, você precisará editar o template single para o tipo de post em questão.

Para um post normal do blog, se trata do arquivo single.php. Alguns temas os dividem em partes do template. Por exemplo, no tema TwentyNineteen você precisa editar a parte do template chamada content-single.php.

Se estiver perdido, talvez seja melhor usar um método diferente.

Ao encontrar um arquivo de template do tema para seu post único, você poderá usar a função the_field()do Advanced Custom Fields para exibir as informações do campo. Por exemplo,

<?php the_field('FIELD_NAME'); ?>

 Saiba mais aqui.

Por exemplo, para exibir o campo “Objetivo”, você usaria

<?php the_field('purpose'); ?>

<?php the_field(‘objetivo’); ?>. Você pode encontrar o nome do campo ao editar um grupo de campos:

Portanto, ao combinar uma pequena configuração de HTML com PHP, você poderá ter algo assim para exibir todos os campos:

<div class="run-information">
<ul>
<li><strong>Purpose:</strong> <?php the_field('purpose'); ?></li>
<li><strong>Distance:</strong> <?php the_field('distance'); ?></li>
<li><strong>Start Time:</strong> <?php the_field('start_time'); ?></li>
<li><strong>End Time:</strong> <?php the_field('finish_time'); ?></li>
<li><strong>Location:</strong> <?php the_field('location'); ?></li>
</ul>
</div>

Para adicionar essas informações acima do conteúdo de um post regular, você adicionaria o seguinte código ao arquivo de template do seu tema, acima de the_content():

Agora, após atualizar o post do blog, você poderá ver os dados do campo personalizado acima do conteúdo regular do WordPress:

Para aprender mais sobre isso, verifique a documentação complete do Advanced Custom Fields.

Como Exibir Dados do Advanced Custom Fields com um Shortcode

Uma forma muito mais simples de exibir os dados dos seus campos personalizados é usar shortcodes. A desvantagem, no entanto, é que você precisaria adicionar o shortcode cada vez que quiser exibir um campo personalizado. Não existe uma forma mais fácil de automatizar essa tarefa.

O shortcode é este:

[acf field="FIELD_NAME"]

Por exemplo, se você insere o seguinte shortcode no editor do WordPress:

O front-end do seu site ficaria com o visual exatamente igual do método anterior que usa o template do tema:

Como Exibir o Advanced Custom Fields com o Elementor Pro

Elementor é um dos mais populares construtores de páginas do WordPress. Ele permite que você crie seus designs usando um editor visual de arrastar e soltar. Um pequeno adendo: o Elementor é um dos parceiros oficiais da Kinsta.

Com Elementor Pro, seu complemento pago, você pode construir os arquivos de template do seu tema, o que inclui uma opção para inserir dados de campos personalizados dinâmicos do Advanced Custom Fields em seus designs.

Essa é uma ótima opção se você deseja ter a flexibilidade de incluir automaticamente dados de campos personalizados em seus templates, mas não se sente confortável em fazer edições de código diretamente nos arquivos de template do seu tema.

Para começar, vá até Templates > Construtor de Temas (Theme Builder) e crie um novo template do Elementor para seu post individual:

Você poderia adicionar widgets regulares do Elementor no Título do Post e no Conteúdo do Post. E então, para exibir os dados do campo personalizado, adicionaria widgets regulares do Editor de Texto. A única diferença aqui é que, ao invés de editar o texto, você selecionaria a opção Dinâmico (Dynamic):

Em seguida, você pode selecionar Campo ACF (ACF Field) no menu suspenso:

A partir daí, você pode selecionar o campo específico que adicionou com o Advanced Custom Fields:

E você também pode usar a aba Avançado (Advanced) para inserir informações que precedem ou complementam o conteúdo dos campos, permitindo adicionar títulos e unidades:

Fácil, não é mesmo? Basta repetir o processo com o restante dos campos personalizados!

Resumo

Usando o Advanced Custom Fields você pode enriquecer as páginas e posts do seu blog com mais dados e informações através de uma solução fácil de usar. E mais: você pode começar a coletar informações adicionais para qualquer conteúdo em seu site e, então, exibi-las no front-end para que seus visitantes possam vê-las.

Para fazer isso, existem três opções:

• Os arquivos de template do seu tema
• Com um shortcode
• Com o Elementor Pro

O conhecimento que adquirido com esse post permitirá que você desbloqueie o grande potencial do WordPress para criar sites 100% personalizados, que vão muito além das raízes dos blogs padrão do WordPress.

A única questão que resta é:

O que você vai criar com o Advanced Custom Fields? Compartilhe conosco nos comentários abaixo.