A preocupação em tornar o nosso ambiente de trabalho ou dos nossos clientes mais confortável e intuitivo deve ser uma constante. Quando encontramos ferramentas e soluções bem organizadas, nosso dia de trabalho flui mais facilmente e consequentemente, o nosso tempo é otimizado. Nós já falamos aqui sobre a importância dos custom fields para personalizar o uso das postagens WordPress. Entretanto, hoje você vai ver um tutorial completo sobre o plugin que faz isso de maneira muito mais prática e eficiente, com WordPress Advanced Custom Fields você perceberá que o mundo WP é maior do que imagina.

WordPress Advanced Custom Fields

O plugin tem mais de 1 milhão de downloads ativos e está em constante atualização. Mais do que um criador de fields customizados para coleta de dados personalizados, o Advanced Custom Fields é um plugin que trabalha com os mais diversos tipos de campos ou fields – texto, área de texto, arquivos, imagens, listas, checkbox, user, Google Maps, Tabs, dentre muitos (muitos) outros.

Talvez você precise de um sistema completo para coletar dados que funcione em todos os browsers e dispositivos existentes. Tranquilo! O Advanced Custom Fields foi testado em um grande número de navegadores, até mesmo em iPhones, iPads, smartphones… Ele vai estar totalmente funcional para qualquer momento que você precise e isso é independente do dispositivo que você vai utilizar para acessar seu site.

Download e Instalação

Para dar início ao nosso tutorial de hoje, é necessário que você possua o plugin devidamente instalado e ativado em seu site WordPress.

Para instalar o Advanced Custom Fields, você pode optar por diversas maneiras que o WP oferece para realizar a instalação. As mais comuns são: buscar pelo nome do plugin através do seu próprio Painel WordPress (Plugins > Adicionar novo) ou realizar o download do arquivo do plugin e fazer o upload do mesmo via FTP ou Dashboard WordPress.

Se você quer fazer o download direto da página oficial no diretório do WordPress, clique no botão abaixo e você será redirecionado.

Baixar | Hospedagem

Qual o Objetivo

Possa ser que você ainda esteja um tanto confuso sobre qual o objetivo do plugin Advanced Custom Fields. Não se preocupe, garanto que no final desse tutorial você terá entendido tudo “direitinho”.

Sabe aquele momento em que estamos criando uma Página ou Post para nosso site/blog/loja e percebemos que os campos nativos WP não são mais o bastante? Que precisaríamos de um campo específico para informar uma marca, o nome de uma empresa ou até de uma cidade? Nesse momento o plugin entra em cena e te mostra que o WordPress é tudo o que você precisa para desenvolver estáveis, completos e robustos sistemas web.

Cenário de Exemplo

Para o nosso tutorial sobre Advanced Custom Fields, vamos imaginar um cenário onde temos um site/blog sobre carros, motos, etc. Então, sentimos a necessidade de informar dados relevantes fora da área de texto comum do WordPress. Queremos campos específicos para o nome da montadora, itens de série, ano de fabricação e preço de venda. A partir da nossa definição e ciência das necessidades, vamos utilizar o plugin para a criação dos novos campos e posteriormente para a exibição das informações coletadas no Front-End do seu site.

Criando Campos Customizados Avançados

Depois que você tiver ativado o plugin, um ícone referente ao mesmo estará presente na lateral da sua Dashboard – acesse Campos Personalizados.

Precisamos criar um grupo de campos, para dentro dele adicionar os fields que desejamos. Clique em Adicionar Novo no topo da janela. Agora, quando a nova página for carregada você deve: dar um Nome para o Novo Grupo de Campos e em qual Local o Grupo de Campos deve ser exibido.

Local

Na área entitulada como Local você vai definir em quais áreas do Painel Administrativo aquele grupo de campos pode ser exibido. Você também pode escolher por tipo de usuário logado, categoria de post, etc.

Para o nosso tutorial você deve escolher Tipos de post – é igual – post. Aqui estamos informando que o grupo de campos que estamos prestes a criar somente será exibido na área de criação de posts, onde o tipo de post é igual a Post – é extremamente útil para quem utiliza mais de um tipo de Post. Quando é um sistema muito robusto, como muitos tipos de post e de usuários, você pode optar por Adicionar grupo de regras – onde você combina diferentes regras a serem obedecidas.

Adicionando Campos

Clique no botão + Adicionar Campo e vamos começar a inclusão dos nossos 4 campos citados anteriormente. A aba irá se expandir e você precisa inserir informações como Rótulo do campo, Nome do campo (para controle pelo Front-End), Tipo de Campo, Obrigatoriedade, etc. Os que citei são inicialmente os de definição obrigatória.

Para os nossos 4 campos personalizados, algumas diferenças irão ocorrer na configuração – vou listar tudo para você logo abaixo. Obs: Para cada novo campo é necessário clicar no botão + Adicionar Campo

Campo 1

• Rótulo do Campo: Nome da Montadora
• Nome do Campo: nome_da_montadora
• Tipo do Campo: Texto
• Obrigatório?: Não

Campo 2 – Atenção nessa etapa!

• Rótulo do Campo: Itens de Série
• Nome do Campo: itens_de_serie
• Tipo do Campo: Checkbox
• Obrigatório?: Não
• Escolhas (informe 1 opção por linha):
  • Vidro Elétrico
  • Bancos de Couro
  • etc
• Layout: Vertical

Campo 3

• Rótulo do Campo: Ano de Fabricação
• Nome do Campo: ano_de_fabricacao (edite para que o “ç” e “ã” não entrem – isso pode gerar conflitos)
• Tipo do Campo: Número
• Obrigatório?: Sim

Campo 4

• Rótulo do Campo: Preço de Venda
• Nome do Campo: preco_de_venda (edite para que o “ç” não entre – isso pode gerar conflitos)
• Tipo do Campo: Texto (Permite que você adicione “,” e “.”)
• Obrigatório?: Não

Observações Importantes

Aqui eu utilizei apenas os campos básicos, mas para uma navegação mais facilitada você pode adicionar instruções que acompanharam cada campo.

Se você criar campos mais avançados, onde é necessário uma resposta para então um novo campo ser exibido, basta utilizar da opção Condições para Exibição. Nesse caso, se a resposta for igual àquela que você determinar, tal campo será exibido – caso contrário, não. É muito utilizado com campos de checkbox, radio buttons e lista de opções.

Clique no botão Publicar e você já deve ter todos os campos criados na sua área de posts. Siga para lá e verifique se tudo está como o esperado.

Opções

Você criou dezenas de campos pertinentes ao seu negócio ou às necessidades do cliente. Entretanto, a área de cadastro de posts (ou como você decida usá-la) ficaria muito mais elegante se algumas áreas fossem ocultadas. Com o Advanced Custom Fields você faz isso facilmente.

Na aba Opções você pode, além de escolher a posição que o grupo de campos será exibido e o seu estilo, marcar os checkboxes referentes a Ocultar na tela: Categorias, Tags, Slug, Comentários, Editor de Conteúdo e muitos outros. Escolheu esconder tudo ou apenas alguns itens? É só clicar no botão para Publicar ou Atualizar e pronto!

Conclusão

Como você pode ver os campos personalizados tem grande importância na construção personalizada das necessidades do seu site/blog. Agora que você sabe como utilizar o Advanced Custom Fields você pode facilmente criar campos personalizados para fazer do seu site/blog um sucesso!

Se você gostou desse artigo considere compartilhar nas redes sociais. Siga-nos nas redes sociais para acompanhar mais artigos como esse. Se de alguma forma este artigo lhe foi útil deixa seu comentário abaixo para podermos saber a sua opinião.