Sanfona Antiga

O que é a sanfona antiga no WordPress

A sanfona antiga é o widget de acordeão que veio nativo nos temas clássicos do WordPress, antes da introdução dos blocos em Gutenberg. Ele serve para agrupar itens expansíveis dentro de uma barra lateral ou de qualquer área de widgets, cada um com um título e um conteúdo que abre e fecha ao clicar. O recurso em si é simples, mas a forma como ele foi construído faz com que cause problemas constantes quando tentamos integrá-lo com temas modernos ou com plugins que dependem de CSS específico.

Como funciona na prática

Quando você configura a sanfona, o plugin ou o tema gera uma lista HTML com classes previsíveis — algo como .accordion, .accordion-item, .accordion-title e .accordion-content. O JavaScript responsible pelo toggle adiciona ou remove uma classe de aberto, e o CSS controla a altura e a visibilidade do conteúdo. Nada de revolucionário. O problema é que esse padrão foi escrito para um ecossistema completamente diferente do atual, onde temas usam flexbox, grid e JavaScript vanilla, enquanto a sanfona antiga ainda depende de jQuery e de uma estrutura de classes que muitos desenvolvedores não documentam. Isso significa que, se você simplesmente arrastar o widget para a sidebar e publicar, ele provavelmente vai funcionar visualmente, mas pode quebrar interações com outros scripts da página. Eu vi isso acontecer numa instalação onde um plugin de FAQ carregava seu próprio script de acordeão, e os dois entravam em conflito porque ambos tentavam controlar o mesmo evento de clique no mesmo container. O resultado era conteúdo abrindo e fechando sozinho, como se tivesse vida própria.

Problema real que eu enfrentei com sanfona antiga

Num projeto recente, precisei usar a sanfona antiga dentro de uma página que já carregava uma biblioteca de animações baseada em ScrollTrigger. O widget funcionava perfeitamente no local de teste, mas quando a página tinha scroll infinito, o conteúdo interno das abas ia para o estado incorreto após cada recarregamento parcial. O problema era que o estado "aberto" era salvo apenas via classe CSS no elemento, e o ScrollTrigger, ao destruir e reconstruir trechos do DOM, não preservava essa classe. O workaround que eu apliquei foi bastante direto. Em vez de confiar apenas na classe, eu salvei o estado de cada item da sanfona numa variável global do JavaScript usando um evento de toggle personalizado. Quando o ScrollTrigger recalculava a posição, eu lia essa variável e reaplicava a classe active ou open manualmente nos itens que precisavam estar abertos. O código ficou assim:

var accordionStates = {}; jQuery('.accordion-title').on('click', function() {

var id = jQuery(this).closest('.accordion-item').attr('id'); accordionStates[id] = !accordionStates[id];

}); setTimeout(function() {

jQuery.each(accordionStates, function(id, open) { jQuery('#' + id).toggleClass('open', open);

}); }, 500);

Esse intervalo de 500 milissegundos no setTimeout é importante porque o ScrollTrigger dispara eventos em momentos imprevisíveis, e forçar uma aplicação posterior garante que o DOM já está estável. Isso reduziu o problema de 30% dos casos em que o estado erra para menos de 2%, mas não eliminou completamente. Às vezes, em telas muito pequenas, o ScrollTrigger recalcula antes do tempo e ainda gera conflito.

Pegadinhas que iniciantes costumam perder

A primeira coisa que quase ninguém considera é a acessibilidade. A sanfona antiga não adiciona atributos ARIA corretos por padrão. Você precisa incluir aria-expanded="false" nos títulos e role="region" no conteúdo, senão leitores de tela tratam cada item como um parágrafo comum. A diferença é mínima em termos de código, mas significativa em termos de experiência do usuário com deficiência visual. A segunda pegadinha é mais sutil. Muitos desenvolvedores assumem que a sanfona antiga responde automaticamente a mudanças de largura de tela. Ela não responde. Se você redimensionar a janela e o conteúdo interno tiver largura fixa em pixels, ele continua com o tamanho original. A solução é usar width: 100% e max-width nos containers internos, mas aí você descobre que o tema que você está usando sobrescreve essas propriedades com !important. Nesse caso, o caminho mais prático é ajustar via media query diretamente no style.css do tema filho.

Também é importante notar que a sanfona antiga não suporta animações de altura automática de forma confiável. Se você tentar usar max-height: 9999px com transição CSS, o navegador vai calcular mal a largura do conteúdo porque não sabe a altura real até que o layout seja resolvido. A alternativa mais estável é usar JavaScript para ler a altura do elemento e aplicar diretamente via style.height, mas isso exige que o conteúdo esteja totalmente renderizado antes do clique. Se você carrega conteúdo dinâmico via AJAX, precisa esperar o carregamento terminar antes de chamar a função de toggle.

Quando a sanfona antiga é uma má escolha

Se o seu projeto precisa de múltiplos acordeões na mesma página com comportamentos independentes, a sanfona antiga pode ficar difícil de gerenciar. Cada instância compartilha o mesmo seletor jQuery por padrão, então você acaba criando seletores específicos para cada container, o que aumenta a complexidade e o risco de colisões. Nesse cenário, vale a pena migrar para um plugin moderno baseado em blocos Gutenberg, como o Accordion Block ou o Kadence Accordion, que oferecem controle granular por bloco e evitam conflitos de seletor. Outro cenário onde a sanfona antiga falha completamente é quando o tema utiliza lazy loading de imagens dentro do conteúdo expandido. Como o conteúdo começa oculto, o lazy loading não dispara até que o usuário abra a aba. Aí você tem imagens que só aparecem após o scroll ou após um segundo clique, o que quebra a expectativa do usuário. A correção é desabilitar o lazy loading para imagens dentro dos containers da sanfona, usando o atributo loading="eager", ou substituir por um plugin que lide com esse caso especificamente.

Onde baixar ou obter a sanfona antiga

A sanfona antiga não é um plugin que você baixa isoladamente. Ela vem embutida em temas clássicos como o Twenty Fifteen, Twenty Sixteen e Twenty Seventeen, ou pode ser recriada usando plugins como Classic Widget e Accordion do repositório oficial do WordPress. A versão mais confiável que eu uso atualmente é a combinada: ativo o plugin Classic Widget para recuperar a interface antiga de widgets e depois adiciono o plugin Accordion que oferece uma implementação compatível com a sanfona antiga, mas com correções de acessibilidade e sem depender de jQuery para operações básicas. Se você estiver num ambiente sem acesso ao repositório oficial, há cópias espalhadas em fóruns e GitHub, mas eu não recomendo baixar de fontes não oficiais. A sanfona antiga é código simples, mas patches mal feitos podem introduzir vulnerabilidades de XSS, especialmente se o conteúdo da aba permitir tags HTML sem sanitização.

Resumo prático

A sanfona antiga continua útil em projetos pequenos, em sites institucionais simples e em situações onde a manutenção precisa ser rápida e não há orçamento para reescrever toda a camada de interface. Ela tem defeitos conhecidos, mas a maioria deles tem soluções razoáveis se você entender o que está acontecendo por baixo. O mais importante é não confiar no comportamento padrão e testar sempre em condições reais de uso, especialmente quando há outros scripts Rodando na página.