WordPress: Use IA para Criar Blocos Personalizados (Exemplo Gratuito de Acordeão)

Eu queria um acordeão no meu site WordPress. Todo plugin "gratuito" que testei era uma tentativa de venda com uma tela de configurações. Então pedi para uma IA me fazer um: 25 linhas, sem plugin, sem JavaScript, e você pode usá-lo.

Atualização, julho de 2026: este post ficou mais de um ano em rascunho prometendo "o código abaixo" sem código nenhum abaixo. Aqui está ele. Desculpa por isso.

No que isso dá

Esta é uma demonstração ao vivo. É o código exato da próxima seção, colado nesta página do mesmo jeito que você colaria no WordPress. Clique nos painéis:

Ele abre e fecha com zero JavaScript porque o elemento nativo <details> do navegador cuida do recolhimento para nós. Todo navegador tem suporte a ele há anos.

O código

<style>
.ll-acc { border: 1px solid rgba(128,128,128,.5); border-radius: 10px; overflow: hidden; }
.ll-acc details + details { border-top: 1px solid rgba(128,128,128,.5); }
.ll-acc summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; font-weight: 600; list-style: none; }
.ll-acc summary::-webkit-details-marker { display: none; }
.ll-acc summary::after { content: "+"; font-size: 1.3em; font-weight: 400; line-height: 1; }
.ll-acc details[open] > summary { background: rgba(128,128,128,.12); }
.ll-acc details[open] > summary::after { content: "–"; }
.ll-acc .ll-acc-body { padding: 12px 18px 16px; }
</style>

<div class="ll-acc">
  <details>
    <summary>Question one goes here</summary>
    <div class="ll-acc-body">Answer one goes here. Text, links, pictures, whatever you want.</div>
  </details>
  <details>
    <summary>Question two goes here</summary>
    <div class="ll-acc-body">Answer two. Add more panels by copying one whole details block.</div>
  </details>
  <details>
    <summary>Question three goes here</summary>
    <div class="ll-acc-body">Answer three. Delete panels the same way.</div>
  </details>
</div>

Coisas que você provavelmente vai querer mudar:

• As palavras. Troque as perguntas e respostas de exemplo direto no bloco. As áreas de resposta aceitam HTML normal, então links e imagens funcionam.
• Número de painéis. Copie um bloco <details>...</details> inteiro para adicionar um painel; apague um bloco para remover um.
• Começar aberto. Mude a tag de abertura de um painel para <details open> e ele carrega expandido.
• Cores. Os cinzas são propositalmente neutros para ficarem bem tanto em temas claros quanto escuros. Troque os valores de rgba(...) se quiser as cores da sua marca.

Coloque na sua página

Estas instruções de instalação são as que a própria IA escreveu quando pedi (veja o prompt abaixo). Segui elas em uma instalação padrão do WordPress e estavam corretas, o que, sinceramente, foi a parte que eu mais duvidava.

1. Faça login no WordPress e abra a página ou o post onde você quer o acordeão. Clique em Editar.
2. Clique no + onde o acordeão deve entrar e procure pelo bloco chamado HTML Personalizado.
3. Cole o trecho inteiro nele, tanto a parte do <style> quanto a parte do <div>.
4. Clique no alternador de Pré-visualização do bloco (ou na pré-visualização da página inteira) para ver ele renderizado em vez do código bruto.
5. Atualizar ou Publicar. Vá clicar nos seus painéis novos na página ao vivo e sinta-se satisfeito com o dinheiro de plugin que você não gastou.

O prompt que o escreveu

Um pouco de contexto. Eu não conseguia achar um plugin de acordeão que fosse gratuito e não ficasse insistindo, e me recusei a pagar uma assinatura por algo que é basicamente vinte e cinco linhas de HTML. Escrever essas linhas você mesmo é exatamente o tipo de tarefa pequena e autocontida em que a IA é genuinamente boa. O fluxo de trabalho:

Qualquer IA que escreva código serve:

• Rode uma localmente (grátis, privado): eu usei meu próprio DeepSeek 70B local. Se o seu computador tem fôlego para isso, aqui está meu guia de configuração: Rode o DeepSeek Localmente: um Guia de 4 Passos.
• Ou use uma opção gratuita online: o plano gratuito do ChatGPT resolve esse prompt sem reclamar.

Aqui está o prompt. A lista de requisitos é a parte importante; um vago "me faça um acordeão" te dá uma pilha frágil de JavaScript.

Write me an accordion I can paste into a WordPress "Custom HTML" block.

Requirements:
- Plain HTML and CSS only. No JavaScript, no external files, no plugin.
- Use <details> and <summary> so the browser handles opening and closing.
- Scope every CSS rule under one class so it can't restyle the rest of my theme.
- Neutral colors that look fine on a light theme or a dark theme.
- Three panels with placeholder questions and answers.
- Keep it under 40 lines.

Then explain, step by step, exactly how I install it on a WordPress page.
Assume I have never edited HTML before.

(O prompt fica em inglês, mas você também pode traduzir essa lista de requisitos para o português e enviar assim — funciona igual.)

Aquele último parágrafo é o truque do título deste post: a mesma IA que escreve o código escreve o manual de instalação dele, no nível de habilidade que você pedir. Se um passo te confundir, cole ele de volta e diga "explique o passo 3 como se eu nunca tivesse visto HTML". Ela vai, pacientemente, para sempre. Só isso já supera a maioria das documentações de plugin.

Um hábito que vale a pena roubar: antes que o código chegue perto do seu site de verdade, cole ele em um arquivo chamado test.html na sua área de trabalho e dê um duplo clique. Ele abre no seu navegador, sem precisar de servidor. Clique em cada painel. Se algo estiver errado, mostre para a IA e diga o que está errado. Só depois que ele se comportar direito é que vai para o WordPress. Esse é o laboratório de teste inteiro, e foi assim que verifiquei o bloco acima.

Pegadinhas

• Use o bloco HTML Personalizado, não um bloco de parágrafo. Cole código em um bloco de texto comum e o WordPress gentilmente escapa ele, então os visitantes veem código bruto em vez de um acordeão.
• Dois acordeões na mesma página é tranquilo. O trecho de <style> fica duplicado, o que é feio mas inofensivo. Se isso te incomodar, coloque o CSS uma única vez em Aparência → Personalizar → CSS Adicional e cole apenas a parte do <div> nos seus blocos.
• Alguns temas desenham sua própria seta de summary. O trecho esconde o marcador padrão de duas formas, mas um tema teimoso ainda pode desenhar seu próprio ícone ao lado do meu glifo +/–. Se você ver duplicado, peça para a IA: "meu tema adiciona sua própria seta aos elementos summary, esconda ela."
• Quer painéis um de cada vez? Adicione name="faq" dentro de cada tag <details>. Navegadores atuais fecham os outros painéis automaticamente; os mais antigos ignoram e nada quebra.
• Não cole cegamente a saída da IA em um site ao vivo. O teste do arquivo de rascunho acima leva dois minutos. Pedir para não ter JavaScript também reduz o que pode dar errado, o que é metade do motivo de eu ter exigido isso.