Truques e Dicas para Advanced Custom Fields Pro

Dicas para usar o plugin de WordPress Advanced Custom Fields Pro para construir websites.

Advanced Custom Fields (ACF) é um plugin de WordPress para ajudar a gerir campos e ecrâs de edição. Definitivamente recomendo a versão Pro já que dá acesso aos campos Repeater, Flexible Content e Clone, entre outros, que acho essenciais.

Este artigo é para pessoas que já são familiares com o plugin, mas que querem tirar um pouco mais do mesmo. Vou assumir que têm um design e que querem construir um website a partir dele. A maioria das dicas não são exclusivas ao ACF, mas sobre usar o mesmo para construir um theme.

1) Dividir o design em secções lógicas

Muitas vezes vejo alguém a construir um grupo com 20, 30 ou 40 campos. Este tipo de grupos torna-se muito difícil de gerir devido ao seu tamanho e complexidade. Não serão capazes de reutilizar a maioria dos mesmos noutras páginas.

Ao contrário, tentem seguir a estrutura natural do design. A maioria dos designs está dividido em secções e as secções divididas em componentes. Deverão criar um grupo de campos separado para cada secção e para cada componente.

Exemplo: têm uma secção com um fundo, um cabeçalho, um texto, um slider e um botão. Criam um grupo de campos separado apenas para esta secção. Talvez o botão precise de opções extra para configurar o estilo, caso deva abrir numa nova janela, etc. Este tipo de botão provavelmente também será usado noutras secções, por isso recomendaria criar um grupo separado para ele também, de forma a evitar ter de recriar as mesmas opções mais do que uma vez.

Para fazer uso destes grupos de campos podem usar o tipo de campo Clone. Como o nome indica podem seleccionar um grupo para ser clonado noutro grupo e desta forma reutilizar um mesmo grupo várias vezes. Ao combinar campos clonados com um campo Flexible Content podem ter um template verdadeiramente dinâmico, onde é possível escolher as secções que querem para cada página.

Resumo:

  • Não criem grupos com muitos campos.
  • Criem grupos de campos parciais, divididos em secções e componentes.
  • Usem campos Clone e Flexible Content.

2) Construir secções com reusabilidade em mente

Outro problema comum ao construir um site é criar grupos de campos que são muito específicos para uma página particular. Devem promover a reutilização. Construam para a página que estão a trabalhar actualmente, mas mantenham uma menta aberta sobre onde isso poderá ser usado no futuro.

Isto significa ter em conta que todo o conteúdo deve ser editável: cabeçalhos, texto, imagens, etiqueta e destino de botões, etc. Configurabilidade deve ser a norma. Mesmo secções que pareçam semelhantes podem muitas vezes ser agrupadas num único grupo de campos (e.g. imaginem uma secção que partilha os mesmos campos mas a única diferença está na cor ou no estilo - isso pode ser alcançado apenas com um grupo de campos em que alguns campos são usados para especificar o estilo).

A maior dos campos deve ser opcional. O layout não deve quebrar se decidirem deixar um campo de texto vazio, nem deve ser mostrado um elemento vazio no seu lugar. Na mesma linha, listas devem suportar um número variável de items. Devem ser suportadas listas de 0 a N items sem que isso cause problemas no layout. Obviamente se o layout for muito complexo em si mesmo, talvez tenham de limitar uma quantidade mínima/máxima, mas devem almejar flexibilidade.

Outra questão é dar nomes muito específicos para um grupo e para os seus campos de forma a que espelhe o design (que muitas vezes nem tem o texto final). Devem tentar dar nomes que representem a sua natureza estrutural. Em vez de um grupo chamado "Descubra porque somos os melhores", chamem-no "Lista de funcionalidades". Em vez de "Etiqueta para botão começar agora", simplesmente chamem-lhe "Etiqueta para botão". Isto fará com que seja mais fácil de perceber que os grupos são reutilizáveis noutras páginas.

Resumo:

  • Criem grupos que possam ser reutilizados noutras páginas.
  • Assumam que todo o conteúdo no design é editável.
  • Assumam que a maioria dos campos é opcional.
  • Assumam que as listas variam em quantidade.
  • Usem nomes genéricos que representem a sua verdadeira natureza.

3) Fazer layouts fáceis de editar

Quando criam um grupo de campos devem ter em conta quão fácil será para editar essa página. Por exemplo, há muitas situações em que os campos apenas precisam de ser preenchidos dependendo doutros campos, de outra forma poderão ser escondidos pois não oferecem qualquer valor - para isso podem usar configurações de Conditional Logic (i.e. apenas mostrar um campo se um select/checkbox/radio tiver um valor específico).

Para fazerem layouts mais avançados também podem usar grupos e tabs, dividindo ainda mais o grupo em secções lógicas.

Dependendo do tipo de layout pode fazer sentido dar uma largura específica a um campo para a página de edição - alguns layouts funcionam melhor quando estão compactos e podem pôr vários campos na mesma linha com larguras definidas. Podem até dar uma classe CSS a um campo e usar CSS para aplicar estilos custom - em alguns casos é muito útil dar destaque a um campo ou acomodar cenários específicos.

Os campos também têm opções de formatação (e.g. adicionar parágrafos automaticamente nas novas linhas). O importante é ser consistente. Se num campo de texto transformam as novas linhas em BRs, então façam o mesmo para o resto dos campos de texto. O importante é não quebrar as espectativas dos utilizadores.

Resumo:

  • Usem campos condicionais.
  • Usem tabs e grupos para compartimentalizar campos.
  • Usem as opções dos campos para controlo avançado.

4) Usar opções de Theme para configurações gerais

ACF tem funcionalidades para ajudar a gerir páginas de opções genéricas para o vosso theme. Façam uso delas para criarem configurações genéricas, e.g. opções para o cabeçalho, rodapé, opçoes genéricas para grupos de páginas. Dividam as opções em várias sub-páginas para manterem cada página pequena e rápida.

5) Usar acf-json para um workflow automatizado

acf-json guarda automaticamente os campos para uma pasta local. Basta criarem uma pasta chamada acf-json dentro do vosso theme e os ficheiros serão guardados aí. Ficam com a vantagem de os ficheiros poderem ser gravados em git. Se tiverem deployments automatizados (se não têm, deviam), os campos serão também instalados para o ambiente externo.

Ficam com um setup completamente automatizado e a única coisa que têm de se preocupar é sincronizar os campos localmente antes de trabalharem neles. Não devem fazer mudanças manuais aos campos nos ambientes de produção ou staging - apenas façam mudanças locais e sincronizem sempre os campos (mais informação sobre como evitar conflitos).

Conclusão

ACF tem muitas funcionalidades avançadas para ajudar a gerir a complexidade e promover a reutilização. Aprendam a usá-las e terão a vossa vida facilitada, mas não exagerem com layouts complexos - mantenham-nos simples de trabalhar que geralmente isso também significa o melhor para a performance.

Nuno Freitas
Publicado por Nuno Freitas em 01 junho, 2018

Artigos relacionados