Avançar para conteúdo

Tudo para WordPress

Plugins, Temas, dicas de WordPress e muito mais para você que busca informação sobre este excelente CMS!

  • Twitter
  • Facebook
  • Google+
  • RSS
Entenda com funciona Assine nosso RSS

Advanced Custom Fields

Campos Personalizados para desenvolvedores, no nível mais profissional que você já viu.

O que é o Advanced Custom Fields?

Publicado em 13/03/2015 às 10h18 por Guga Alves

O plugin Advanced Custom Fields (ACF) é a solução perfeita para qualquer site WordPress que precise de campos personalizados em formatos mais amigáveis e de fácil utilização, disponível em 2 versões: gratuita e PRO (versão paga e que posui algumas funcionalidades exclusivas). Os campos personalizados são uma funcionalidade nativa do WordPress, um campo para poder salvar dados adicionais em uma postagem, página e custom post types, entretanto a interface nativa não é muito amigável, como podemos ver na imagem abaixo.

campos personalizados

Na imagem acima, imaginem que criamos uma página e precisamos de campos para cadastrar imagem, link e um texto descritivo dela. Toda sua equipe responsável por conteúdo, normalmente composta por redatores, jornalistas, publicitários e afins, teria que decorar as variáveis que dão nome para cada campo, e lembrar que em uma deve ser digitado um caminho completo de imagem em HTML, que um link deve conter obrigatoriamente http:// e que o valor máximo de caracteres permitido para a descrição é 200. Você certamente teria problemas! E não é pq eles não tem capacidade para tal, mas sim porque nomes de variáveis e padrões técnicos são itens que programadores tem boa familiaridade, mas os demais não, por motivos óbvios.

Com o Advanced Custom Fields, você mata os 2 problemas de uma vez só: Os campos personalizados terão uma usabilidade pensada para cada tipo de conteúdo que deverá ser inserido, facilitando a vida de quem deve focar em criar um conteúdo original e único, de qualidade, que gere a conversão final necessária, e não em nomes de variáveis e detalhamentos técnicos. Olhe a imagem abaixo e pense bem: ela não é bem mais fácil de ser compreendida e utilizada por qualquer pessoa?

Campos Advanced Custom Fields

Bem mais agradável, não?

Além de prover tais interfaces melhoradas, o Advanced Custom Fields permite que você exiba seus campos apenas em determinados locais, como posts apenas de uma categoria, apenas um determinado Custom Post Type, ou mesmo criar novos campos para perfil de usuário, categorias, etc, e criar campos que apareçam apenas se um outro determinado campo for selecionado ou preenchido de uma forma determinada.

Com toda esta gama de funcionalidades e possibilidades, o Advanced Custom Fields é certamente um plugin que todo usuário gostaria de ter em seu tema, e além disso facilitando o trabalho do desenvolvedor. Logicamente, ele é um plugin para ser usado por desenvolvedores, que deverão fazer tais campos funcionarem da forma esperada no front-end do site, nas páginas que seus visitantes irão ver, mas que facilitará a vida de quem for utilizar tal tema/plugin que for feito com ele.

Tipos de campos que podem ser criados

Exemplos de campos do ACF
O ACF possui uma grande gama de tipos de campos que podem ser criados por padrão. Vejamos todos os tipos de campo que podemos criar por padrão:

  • Texto
  • Área de texto
  • Númerico
  • Email
  • Senha
  • WYSIWYG
  • Imagem
  • Arquivo (fazer upload de um arquivo)
  • Selecão (lista suspensa de opções)
  • Checkbox (lista tickbox de escolhas)
  • Botões de rádio
  • Booleano (Falso / Verdadeiro)
  • Link  de Página (selecione uma ou mais páginas, posts ou custom post types e a api retornará a url selecionado)
  • Objeto do Post (selecione uma ou mais páginas, posts ou custom post types e a api retornará o objeto deste post, um vetor com todos os seus dados armazenados )
  • Campo Relacional (pesquisa, objetos selecionados e ordenação dos selecionados, criando um campo que guarda o relacionamento entre os 2 itens)
  • Taxonomia (seleção de taxonomia com opções para carregar, exibir e salvar)
  • Usuário (selecione um ou mais usuários do WP)
  • Google Maps (mapa interativo, com a API retornando latitude, longitude e dados de endereço)
  • Date Picker (Seletor jquery de datas)
  • Color Picker (Seletor jquery de cores)
  • Tabs (Campos para criação de abas)
  • Mensagem (para exibir mensagens personalizadas nos campos)
  • Repetidor (capacidade de criar blocos repetidos de campos!)
  • Conteúdo Flexível (capacidade de criar blocos flexíveis de campos!)
  • Galeria (adicionar, editar e pedir várias imagens em um campo simples)
  • Personalizado (Crie o seu próprio tipo de campo!)

E ainda existem muitos plugins que extendem suas funcionalidades, permitindo utilizar outros tipos de campos, como o Advanced Custom Fields: Table Field, que cria uma fantástica interface de criação de tabelas! E em novos posts, falaremos de mais alguns deles.

Exibindo os dados do ACF no seu tema

O ACF apresenta uma interface fácil de usar e uma poderosa biblioteca de funções para carregar e exibir dados de campos personalizados. Os dados são salvos em campos personalizados nativos do WordPress, sendo possível utilizar normalmente as funções postmeta, mas também formata o valor com base no tipo do campo e as definições de campo. Isso permite que você escreva menos código e produza sites mais inteligentes!

Logicamente, o ACF exige que você tenha algum conhecimento prévio sobre personalização de tema e entender minimamente bem de PHP. Uma vez que você está editando o arquivo de template correto, um simples comando the_field(‘hero_text’) exibirá o valor salvo no campo com este nome, e get_field(‘hero_text’) irá retornar o valor para o uso com uma variável. Mais detalhes sobre a exibição dos dados no seu front-end podem ser lidas em outra seção da nossa documentação.
Exemplo de trecho de código no ACF

E nos próximos posts, veremos muito mais!

Este post é o primeiro de uma série especial de posts sobre o Advanced Custom Fields e inaugura nossa categoria exclusiva sobre ele, que buscará ser a sua maior referência em português sobre este plugin que para mim, Guga Alves, já é essencial em todo e qualquer projeto e que tenho o prazer de palestrar sobre em alguns eventos e ver mentes explodindo com novas e melhores formas de fazer tudo aquilo que você sempre sonhou mas nunca soube como! Dizem por ai que entendo bastante deste assunto, mas prefiro deixar que os posts falem por mim e vocês tirarem suas conclusões, sem que elogios subam a minha cabeça e mudem a forma didática e divertida que sempre buscamos falar com nossos leitores por aqui.

E você não pode perder nossos próximos capítulos! Ou achou que acabaria por aqui?

Na próxima postagem, você aprenderá mais sobre como criar grupos de campos, como os configurar para aparecer apenas a partir de determinadas regras e começar a entrar mais na parte técnica, entendendo como começar a integrar com seu tema. E é claro, o retorno de vocês é essencial para dar o combustível que precisamos para conseguir cobrir todas as possibilidades que este plugin pode lhe oferecer.

5 pessoas comentaram o artigo

  • Raphael de Almeida comentou em 16 de março de 2015.

    Estávamos carentes de uma referencia em português do ACF.

    Gostaria de ver nessa série como integrar ACF com Custom Post Type, nativo e plugin.

    Parabéns pelo artigo.

    Responder esse usuário
    • Guga Alves comentou em 16 de março de 2015.

      Oi Raphael, no artigo que tratará sobre a criação dos campos, iremos abordar este assunto. Iremos falar sobre tudo o que é possível fazer com o ACF em uma série de posts que irão aos poucos surgindo por aqui :)
      Com isso, essa carência será totalmente extinta!

      Responder esse usuário
  • YB comentou em 1 de julho de 2015.

    Consegui fazer o que vocês explicaram, eu fiz um campo customizado para pegar a url do joguinho, e usei também o campo resumo que tem por padrão no WP, obrigado pela ajuda GUGA! Novamente muito util o blog.

    Responder esse usuário
  • Luis Fernando Mangia comentou em 16 de maio de 2016.

    Cara, não acredito que não sabia destes tutorias. Estão nota 10!

    Responder esse usuário

Participe e deixe o seu comentário!

Procurando Temas?

Acesse o arquivo de Temas WordPress