WordPress Aula 04 — Campos Customizados + ACF
Data: 09/07/2026 · WordPress · Desenvolvimento Web
Data: 09/07/2026
Nível: Intermediário → Avançado
Categoria: WordPress · ACF · Desenvolvimento Dinâmico
🎯 Objetivo da Aula
Aprender a usar Advanced Custom Fields (ACF) e Custom Post Types (CPT) para criar sites dinâmicos, escaláveis e profissionais — o diferencial que separa um site genérico de um site que o cliente volta pra elogiar.
🧠 Por que ACF?
WordPress puro te dá: Título + Conteúdo + Imagem Destacada.
ACF te dá CAMPOS ILIMITADOS — você define o que cada página/produto/serviço precisa.
SEM ACF: COM ACF:
"Serviço: Barbearia" ┌─────────────────────────────┐
(um bloco de texto) │ Nome: Corte Premium │
│ Preço: R$ 59,90 │
│ Duração: 45 min │
│ Ícone: tesoura.svg │
│ Galeria: [foto1, foto2] │
│ Destaque: ☑ Sim │
│ Call-to-action: "Agendar" → │
└─────────────────────────────┘
💡 **Traduzindo:** ACF transforma WordPress num **CMS profissional**. Você cria campos estruturados, o cliente preenche no painel (igual preencher um formulário), e o site exibe bonito no front-end. **Zero código no front-end se usar page builder.**
📦 Instalação
Plugins → Adicionar Novo → "Advanced Custom Fields" → Instalar → Ativar
Gratuito (campos ilimitados, repetidores, galerias)
Versão PRO: US$ 49/ano (Repeater, Gallery, Flexible Content, Clone)
💡 A versão gratuita já resolve **90% dos casos**. Só invista no PRO quando tiver 3+ projetos pagos.
🏗️ Conceitos Fundamentais
1. Grupo de Campos (Field Group)
Conjunto de campos que aparece junto na edição.
Grupo: "Informações do Serviço"
├── Campo: Preço (Number)
├── Campo: Duração (Text)
├── Campo: Ícone (Image)
└── Campo: Destaque (True/False)
2. Tipos de Campo (os mais usados)
| Campo | Quando usar | Exemplo |
|---|---|---|
| **Text** | Título curto, nome | "Corte Premium" |
| **Text Area** | Descrição, bio | Texto de 2-3 parágrafos |
| **Number** | Preço, quantidade | 59,90 |
| **Email** | Email de contato | contato@exemplo.com |
| **URL** | Link, botão | https://wa.me/... |
| **Image** | Foto, ícone, avatar | upload de imagem |
| **Gallery** | Galeria de fotos | Antes/depois, portfólio |
| **Wysiwyg Editor** | Conteúdo formatado | Editor igual ao do WordPress |
| **Select** | Escolha entre opções | Categoria do serviço |
| **True/False** | Checkbox liga/desliga | "Exibir na home?" |
| **Repeater** (PRO) | Lista de itens repetidos | Equipe (nome + foto + cargo × N) |
| **Relationship** | Vincular conteúdo | Serviço → Profissional responsável |
3. Regras de Localização
Define onde o grupo de campos aparece:
Regras:
"Tipo de postagem é igual a Serviços" → aparece na edição de Serviços
"Tipo de postagem é igual a Página" E "Página é igual a Home" → só na Home
"Modelo de página é igual a Serviços" → só em páginas com template específico
🛠️ Custom Post Types (CPT)
WordPress vem com Posts (blog) e Páginas (estático). Mas e se você precisa de Serviços, Portfólio, Equipe, Depoimentos, Imóveis?
Registrar um CPT (functions.php)
// Em Aparência → Editor de Arquivos do Tema → functions.php
// Ou use o plugin "Custom Post Type UI" (grátis, sem código)
function registrar_cpt_servicos() {
register_post_type('servicos', [
'labels' => [
'name' => 'Serviços',
'singular_name' => 'Serviço',
'add_new' => 'Adicionar Serviço',
],
'public' => true,
'has_archive' => true,
'menu_icon' => 'dashicons-hammer',
'supports' => ['title', 'editor', 'thumbnail'],
'rewrite' => ['slug' => 'servicos'],
]);
}
add_action('init', 'registrar_cpt_servicos');
💡 Na prática, instale o plugin **"Custom Post Type UI"** — interface visual pra criar CPTs sem PHP. Mais rápido e menos chance de erro.
CPT + ACF = Poder Absoluto
CPT: "Serviços" ← tipo de conteúdo customizado
↓
ACF: Grupo "Detalhes do Serviço" ← campos estruturados
├── Preço (Number)
├── Duração (Text)
└── Ícone (Image)
↓
Elementor: Lista de Serviços ← exibição visual
├── Loop Grid → Post Type: Serviços
└── Elementos dinâmicos: {{preço}}, {{duração}}, {{ícone}}
🎨 Exibindo ACF no Front-end
Opção 1: Elementor (recomendado pra freela)
Elementor → Theme Builder → Template de Single Post (Serviços)
Widgets de conteúdo dinâmico (Elementor Pro):
├── Dynamic Heading → {{acf_preco}}
├── Dynamic Image → {{acf_icone}}
├── Dynamic Text → {{acf_duracao}}
└── Loop Grid → Lista todos os serviços em cards
💡 Com Elementor Pro, você cria o template UMA VEZ e ele se aplica a TODOS os serviços automaticamente. Adicionou um serviço novo? Já aparece formatado.
Opção 2: PHP no Tema (avançado)
Preço: R$
Duração:
; ?>)
Opção 3: Shortcode (prático)
[acf field="preco"] → exibe o valor do campo "preço"
⚠️ Shortcodes do ACF exigem o plugin **"ACF Shortcode"** (grátis) ou uso dentro do PHP com `the_field()`.
📋 Casos de Uso Reais (com ACF gratuito)
Caso 1: Site de Restaurante
CPT: "Pratos"
ACF:
├── Preço (Number)
├── Categoria (Select: Entrada, Principal, Sobremesa, Bebida)
├── Destaque (True/False)
├── Vegetariano (True/False)
└── Foto (Image)
Página Cardápio:
→ Loop Grid do Elementor filtrando por categoria
→ Card: foto + nome + preço + badge "Vegetariano"
Caso 2: Site de Advocacia
CPT: "Advogados"
ACF:
├── OAB (Text)
├── Especialidade (Select: Civil, Trabalhista, Tributário, Penal)
├── Email (Email)
├── LinkedIn (URL)
└── Foto (Image)
Página Equipe:
→ Grid de cards com foto, nome, OAB, especialidade
→ Link pro LinkedIn e email
Caso 3: Imobiliária
CPT: "Imóveis"
ACF:
├── Preço (Number)
├── Tipo (Select: Casa, Apartamento, Comercial, Terreno)
├── Quartos (Number)
├── Banheiros (Number)
├── Área (Number, m²)
├── Vagas (Number)
├── Cidade (Text)
├── Bairro (Text)
├── Destaque (True/False)
└── Galeria (Gallery)
Busca:
→ Filtro por tipo, quartos, cidade (usando facet WP ou plugin de busca)
🔁 Repeater Field (PRO — mas vale cada centavo)
O Repeater permite adicionar itens repetidos ilimitados:
CPT: "Projetos" (Portfólio)
ACF Repeater: "Etapas do Projeto"
├── Fase (Text): "Briefing"
├── Descrição (Text Area)
└── Concluída (True/False)
Cliente adiciona quantas etapas quiser: 3, 5, 12...
💡 Repeater + Flexible Content (PRO) transformam WordPress num **construtor de páginas modular** onde o cliente monta layouts sem saber código.
⚡ Performance com ACF
ACF é leve por padrão, mas cuidado:
| Boa prática | Por que |
|---|---|
| Use `get_field()` em vez de `the_field()` quando possível | `get_field()` não imprime, é mais flexível |
| Cache de consultas | Use **Transients API** ou plugin de cache |
| Limite repetidores | Mais de 50 itens num repeater → considerar CPT aninhado |
| JSON Sync | ACF → Configurações → "Save field groups as JSON" → versiona no git |
✏️ Exercícios
1. Prática (no seu WordPress de teste):
a) Instale ACF (gratuito) e Custom Post Type UI
b) Crie um CPT chamado "Serviços"
c) Crie um Field Group "Detalhes do Serviço" com:
d) Associe o Field Group ao CPT "Serviços"
e) Crie 4 serviços de teste preenchendo todos os campos
f) No Elementor, crie uma página "Serviços" com Loop Grid mostrando os 4 cards
2. Análise de Sites:
a) Visite 3 sites que claramente usam conteúdo estruturado (imobiliária, cardápio, portfólio)
b) Identifique: quais campos eles devem ter no ACF?
c) Modele mentalmente: qual CPT, quais campos, como exibiria?
3. Desafio (sem Elementor Pro):
a) Crie um template de página PHP que lista os serviços usando WP_Query + get_field()
b) Exiba: título, preço, duração e ícone de cada serviço em cards HTML
✅ Gabarito
1: (prática — siga os passos)
2: (varia — exemplos comuns: imobiliária = preço, tipo, quartos, m²; restaurante = preço, categoria, foto)
3 (template PHP exemplo):
'servicos', 'posts_per_page' => -1]);
while ($servicos->have_posts()) : $servicos->the_post(); ?>
R$
🚀 Próxima Aula
WP Aula 05 — Performance e Segurança: cache, CDN, otimização de imagens, firewall (Wordfence), backups automáticos e checklist anti-hacker.