Organizar o conteúdo com um acordeão de FAQ pode melhorar a experiência do usuário em seu site WordPress. Esse recurso permite exibir perguntas e respostas em um formato compacto, facilitando para os visitantes encontrarem informações rapidamente.
Além disso, usar jQuery para o seu acordeão torna seus FAQs interativos e fáceis de navegar.
Na WPBeginner, mantemos um blog há mais de 16 anos e escrevemos centenas de artigos, guias e tutoriais. Em alguns deles, você notará que usamos acordeões de FAQ com jQuery para responder a perguntas comuns de nossos leitores.
Essa abordagem nos ajudou a atrair mais visitantes, melhorar nossas classificações de busca e até gerar leads. Em resumo, sabemos o quão valioso um acordeão de FAQ dinâmico pode ser.
Neste artigo, mostraremos como adicionar facilmente um acordeão de FAQ com jQuery no WordPress, passo a passo.
Por que usar um acordeão de FAQ com jQuery no WordPress?
No design de sites, um acordeão é uma ferramenta para organizar o conteúdo de forma organizada. Ele se parece com uma lista onde cada item se expande para mostrar mais detalhes quando você clica nele e depois se recolhe quando você termina. É uma maneira simples de ocultar ou mostrar informações extras sem poluir a página.
Enquanto isso, jQuery é uma biblioteca JavaScript que simplifica a adição de recursos interativos ao seu site. Por exemplo, ela permite que você adicione coisas como animações, menus suspensos e botões clicáveis – sem ter que escrever código complexo do zero.
Isso significa que usar um acordeão de Perguntas Frequentes (FAQ) com jQuery no WordPress pode tornar seu site mais organizado e fácil de usar. Ele permite que você exiba perguntas frequentes em um formato recolhível, economizando espaço e reduzindo a desordem.
Dessa forma, os visitantes podem encontrar rapidamente as respostas de que precisam sem ter que rolar longos blocos de texto. Isso pode dar ao seu site um visual limpo e melhorar o SEO, tornando seu conteúdo mais estruturado, o que os motores de busca favorecem.
Dito isso, vamos dar uma olhada em como adicionar facilmente um acordeão de FAQ com jQuery no WordPress. Discutiremos vários métodos neste tutorial, mas você pode usar os links abaixo para pular para o de sua escolha:
- Método 1: Adicionar um Acordeão de FAQ com jQuery usando WPCode (Recomendado)
- Método 2: Adicionar um Acordeão de FAQ com jQuery usando um Plugin Gratuito (Fácil)
- Método 3: Adicionar um Acordeão de FAQ com jQuery usando SeedProd
- Bônus: Adicionar Schema de FAQ no WordPress
Método 1: Adicionar um Acordeão de FAQ com jQuery usando WPCode (Recomendado)
Se você está procurando uma maneira fácil e confiável de adicionar um acordeão de FAQ com jQuery, então este método é para você.
Para esta abordagem, você precisará do WPCode, que é o melhor plugin de snippets de código para WordPress do mercado. É a maneira mais fácil e segura de adicionar código personalizado ao seu site. Além disso, ele vem com um snippet de código pré-fabricado para um acordeão de FAQ, tornando-o uma escolha ideal.
Primeiro, você precisa instalar e ativar o plugin WPCode. Para mais detalhes, veja nosso tutorial sobre como instalar um plugin do WordPress.
Observação: O WPCode tem um plano gratuito, mas você precisará da versão premium para desbloquear a biblioteca de snippets de código na nuvem.
Após a ativação, visite a página Snippets de Código » + Adicionar Snippet no painel do WordPress e use o formulário de pesquisa para localizar o snippet 'FAQ Accordion'.
Assim que fizer isso, basta clicar no botão ‘Usar Snippet’ abaixo dele.
Isso o direcionará para a página ‘Editar Snippet’, onde o código personalizado para um acordeão de FAQ já estará adicionado na caixa ‘Prévia do Código’.
Aqui, você só precisa digitar as perguntas e respostas para o seu acordeão dentro do código. Assim que fizer isso, mude a chave no topo para ‘Ativo’ e clique no botão ‘Atualizar’.
Agora abra a página ou post onde você deseja adicionar a seção de acordeão de FAQ no editor de blocos.
Aqui, clique no botão ‘Adicionar Bloco’ (+) para abrir o menu de blocos e adicione o bloco ‘WPCode’ à página. Agora, abra o menu suspenso dentro do bloco para escolher o snippet de código ‘Acordeão de FAQ’ que você criou anteriormente.
Assim que isso for feito, clique no botão ‘Atualizar’ ou ‘Publicar’ no topo para salvar suas configurações.
Agora visite seu site WordPress para ver o acordeão de FAQ em ação.
Lembre-se de que você precisará repetir o processo para criar um acordeão para outras páginas.
Método 2: Adicionar um Acordeão de FAQ com jQuery usando um Plugin Gratuito (Fácil)
Se você não quiser usar nenhum código personalizado em seu site, então este método é para você.
Primeiro, você precisará instalar e ativar o plugin Advanced Accordion Gutenberg Block. Para mais informações, consulte nosso guia para iniciantes sobre como instalar um plugin do WordPress.
Após a ativação, abra a página ou post onde você deseja adicionar FAQs e clique no botão ‘Adicionar Bloco’ (+) no topo. Assim que o menu de blocos aparecer, localize e adicione o bloco ‘Separate Accordion’ à página.
Em seguida, digite sua primeira pergunta e resposta dentro do bloco de acordeão.
Em seguida, você pode adicionar um schema de FAQ no painel do bloco, expandindo a aba com o mesmo nome e ativando o interruptor ‘Tornar ativo’.
Depois disso, mude para a seção ‘Estilos’ dentro da coluna da direita. A partir daqui, você pode personalizar a cor do texto do acordeão, cor de fundo, cor do ícone e muito mais.
Em seguida, você pode repetir este processo para adicionar quantos FAQs desejar.
Finalmente, clique no botão ‘Atualizar’ ou Publicar’ no topo da página para salvar suas configurações.
Agora, visite sua página de FAQs para ver o acordeão jQuery em ação.
Método 3: Adicionar um Acordeão de FAQ com jQuery usando SeedProd
Se você deseja adicionar uma seção de FAQ interativa a uma página personalizada, então este método é para você.
Para fazer isso, você pode usar o SeedProd. Ele é o melhor construtor de páginas do WordPress que também vem com um bloco de acordeão especial para adicionar seções de texto que expandem e colapsam em suas páginas.
Primeiro, você precisa instalar e ativar o plugin SeedProd. Para saber mais, consulte nosso guia sobre como instalar um plugin do WordPress.
Observação: O SeedProd tem um plano gratuito. No entanto, você precisará da versão pro para desbloquear o bloco ‘Accordion’.
Após a ativação, acesse a página SeedProd » Configurações para inserir sua chave de licença. Você pode encontrar essas informações em sua conta no site do SeedProd.
Depois disso, visite a tela SeedProd » Landing Pages na barra lateral de administração do WordPress.
A partir daqui, clique no botão ‘Adicionar Nova Landing Page’.
Isso o levará a uma nova tela onde você verá uma lista de modelos pré-fabricados para escolher.
Assim que fizer uma escolha, você verá um prompt pedindo para inserir um nome e URL para a página. Insira os detalhes e clique no botão ‘Salvar e Começar a Editar a Página’ para continuar.
O construtor de arrastar e soltar do SeedProd agora será aberto em sua tela. Aqui, você verá uma coluna de blocos à esquerda com uma prévia da página à direita.
Agora você pode adicionar qualquer elemento à sua página, incluindo uma imagem, vídeo, botão de CTA, título ou bloco de texto. Depois disso, arraste e solte o bloco ‘Accordion‘ onde você deseja adicionar suas FAQs.
Em seguida, clique no bloco novamente para abrir suas configurações na coluna da esquerda. A partir daqui, expanda a aba ‘Acordeão 1’ e comece a digitar sua primeira FAQ.
Agora você pode repetir o processo para adicionar outras entradas.
Por padrão, o bloco adiciona apenas dois acordiões, mas você pode clicar no botão ‘Adicionar Novo Item’ para adicionar quantas FAQs desejar.
Você pode até configurar o tamanho da fonte e o espaçamento entre cada acordeão usando os controles deslizantes fornecidos.
Em seguida, mude para a aba ‘Avançado’ no topo.
A partir daqui, você pode alterar a cor do texto, a cor do cabeçalho, a cor de fundo e a cor do divisor do acordeão.
Quando terminar, basta clicar no botão ‘Salvar’ e depois em ‘Publicar’ no topo.
Agora você pode visitar a página personalizada recém-criada para ver seu acordeão de FAQ em jQuery.
Bônus: Adicionar Schema de FAQ no WordPress
Depois de adicionar esses acordeões de FAQ em jQuery, é uma boa ideia adicionar um esquema de FAQ para eles. Isso pode impulsionar suas classificações de SEO e a taxa de cliques orgânicos, fazendo com que suas perguntas frequentes apareçam diretamente nos resultados de pesquisa do Google.
Para isso, recomendamos o All in One SEO, que é o melhor plugin de SEO do mercado. É uma solução completa que otimiza seu site para os motores de busca e ajuda a classificá-lo mais alto com apenas alguns cliques.
Temos usado esta ferramenta no WPBeginner nos últimos anos e, desde então, vimos melhorias notáveis em nossos rankings de busca. Para mais detalhes, veja nossa análise do AIOSEO.
A ferramenta vem com um recurso de marcação de schema integrado que pode ajudar os motores de busca a entender melhor seu conteúdo. Após a ativação do plugin, basta abrir sua página de Perguntas Frequentes no editor de blocos.
Em seguida, role para baixo até a seção 'Configurações do AIOSEO' e mude para a aba 'Schema'. A partir daqui, clique no botão 'Gerar Schema'.
Isso abrirá o 'Catálogo de Schema', onde você precisa encontrar a opção FAQ e clicar no botão 'Adicionar Schema' ao lado dela.
Depois disso, você pode adicionar suas Perguntas Frequentes conforme elas aparecem em seu acordeão. Quando terminar, basta clicar no botão 'Adicionar Schema' para salvar suas configurações.
Agora, os motores de busca indexarão essas perguntas e as exibirão nas páginas de resultados de busca, melhorando seus rankings.
Para mais detalhes, veja nosso tutorial sobre como adicionar schema de FAQ no WordPress.
Esperamos que este artigo tenha ajudado você a aprender como adicionar um acordeão de FAQ em jQuery no WordPress. Você também pode gostar de ver nosso guia sobre como exibir código facilmente em seu site WordPress e nossas principais escolhas para melhores ferramentas de desenvolvimento WordPress.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Dennis Muthomi
O Método 1 com WPCode foi muito útil, é um ótimo equilíbrio entre fácil e personalizável.
Como desenvolvedor WordPress, já fiz coisas semelhantes antes, mas seu guia passo a passo o torna acessível para iniciantes também.
Uma coisa que adicionarei ao que já fiz antes é usar transições CSS para suavizar as animações de abrir/fechar do acordeão, isso o tornará ainda melhor. Este será um ótimo recurso para meus projetos futuros.
Zac Smith
Olá, instalei o plugin Quick and Easy FAQ e depois segui este vídeo. Não consigo um FAQ em acordeão, em vez disso, a única coisa que aparece é a primeira pergunta e resposta do FAQ... e a pergunta está hiperlinkada.
Daniel
Ótimo tutorial!
Meu depurador reclamou sobre a variável indefinida $faq.
Variável definida no início da função accordion_shortcode() com $faq = "";
Além disso, minha versão do plugin FAQ insere o valor 'faq' em vez de 'query' no campo post_type da tabela postes.
Linha 23 ajustada:
'post_type' => 'faq',
Johan Johnsson
É bobo que você nos faça instalar um plugin para uma página de FAQ e seguir seu tutorial anterior sobre como fazer essa página de FAQ, e depois copiar (essencialmente baixar) o plugin que você fez para este tutorial. Então, estamos essencialmente baixando 2 plugins já prontos.
Eu não acho que as pessoas vêm aqui para baixar 2 plugins, mas sim para APRENDER a fazer um menu de acordeão personalizado. Não vejo por que eu deveria seguir este “guia de como fazer” quando posso simplesmente baixar outro plugin do WordPress que faz o mesmo trabalho, se não melhor.
E o fato de este plugin depender do plugin de FAQ parece bastante desnecessário. Por que você não fez um plugin independente e o tornou dinâmico? Assim, você pode usá-lo para qualquer conteúdo em qualquer página.
WPBeginner Support
Olá Johan,
A maioria dos nossos usuários são iniciantes que achariam difícil copiar e colar código. É por isso que o transformamos em um plugin para que os usuários possam baixá-lo e instalá-lo. Se você gostaria de usar o método do código, o código está aqui para você estudar e usá-lo em seu tema ou em um plugin específico para o site. Nos avise se precisar de ajuda com isso.
Admin
Kim
Como faço para que, quando eu clicar no título, ele se feche – eu vejo que ele se fecha quando você clica em outra parte do acordeão, mas estou procurando a função para fechar quando cada título é clicado.
christina
Obrigado pelo tutorial. Sou muito novo em programação e design de páginas web. Segui as instruções para colar os códigos no meu bloco de notas no meu Mac. Existe uma maneira diferente de salvar o arquivo além do bloco de notas como um arquivo php ou js na pasta? Além disso, você poderia me informar passo a passo como abrir o cliente FTP (o que é isso, aliás?) e como fazer o upload da minha pasta my-accordian para /wp-contnt/plugins/directory no site WP. Muito obrigado.
christina
quando salvo o arquivo textedit, ele salva como my-accordion.php.rtf. Está correto?
WPBeginner Support
Não. Você precisa salvá-lo como my-accordion.php. Programas do Windows às vezes adicionam essa extensão ao seu arquivo de texto. Tente usar a opção Salvar Arquivo Como.
Admin
WPBeginner Support
No Mac, você tem um programa chamado TextEdit. Para FTP, veja nosso guia sobre como usar FTP para fazer upload de arquivos do WordPress.
Admin
Nurul Amin
Ativei esses plugins com sucesso, mas não estão funcionando. Não exibe nada na minha página de FAQs.
Equipe WPBeginner
A captura de tela do código que você compartilhou não se parece com o código que compartilhamos acima. No entanto, o código na captura de tela tem tags HTML que não deveriam estar lá. Deveria ser assim:
‘posts_per_page’ => ’10’,
Stefan 13
Isso é bem estranho. Seus comentários me deixaram confuso, pois eu estava vendo claramente o código ali na minha tela. Percebi então que todas aquelas tags de conversor de moeda vieram de outro dos meus plugins do Firefox, que adiciona dinamicamente um menu de contexto a números em páginas da web – daí a origem parecer diferente.
Obrigado pela sua ajuda!
Stefan 13
Quando tento ativar o plugin no WP 4.1, recebo esta mensagem de erro:
O plugin não pôde ser ativado porque acionou um erro fatal.
Parse error: syntax error, unexpected ‘<‘ in /home2/laurepc3/public_html/shala/wp-content/plugins/my-accordion/my-accordion.php on line 20
Alguma ideia que possa ajudar com isso?
Equipe WPBeginner
O código que você colou tem um caractere inesperado 10,
Certifique-se de que posts_per_page esteja entre aspas simples. Certifique-se de que haja um sinal de igual antes do sinal de maior que e certifique-se de que haja uma vírgula no final da linha.
Convidado
Eu não tenho isso na linha 20. O que eu posso ver na linha 20 na postagem acima e no meu arquivo é isto:
‘posts_per_page’ => 10,
Captura de tela anexada também.
Então, a postagem acima exibe conteúdo de arquivo incorreto?
Stefan 13
O código no meu arquivo não se parece com o que você postou para a linha 20, mas é o mesmo código que está acima:
‘posts_per_page’ => 10,
‘orderby’ => ‘menu_order’,
Isso significa que o código no artigo está desatualizado?
Obrigado por esclarecer!
Captura de tela anexada:
Caroline
Obrigado por este tutorial! Ele realmente ajuda com o meu problema!
Eu quero colocar tópicos como este: Tópico “Eventos”: uma caixa de acordeão e “Eventos Passados”: outra caixa de acordeão com o tópico Eventos Passados. Eu tentei o shortcode [faq_accordion + topic=”events”] mas nada aconteceu. O que posso fazer? Muito obrigado!!!
raouf
olá .. obrigado por este tutorial, é útil. mas eu fiz uma modificação simples para fazer um acordeão para uma categoria específica. funciona, mas mostra o editor clássico do meu post, não o editor visual. você pode me ajudar
Mahesh Waghmare
Obrigado...
Rana
Oi
Há alguma maneira de eu apenas exibir o "título da categoria, ou seja, Tópico de FAQ" e o tópico listado abaixo de cada um.
Eu não quero o conteúdo inteiro, apenas o título da categoria e clicar nele mostraria o título do tópico)
Raba
Chris
Qual é a melhor maneira de fazer o CSS funcionar? Eu tenho um tema filho com meu código CSS personalizado. Preciso fazer algo nesse arquivo, já que não vejo nenhum CSS do Google.
WPBeginner Support
Chris, o CSS do Google está na fila e só é buscado quando seu acordeão de FAQ é exibido. Abra a página que contém seu Acordeão de FAQ e clique com o botão direito, em seguida, selecione Exibir código fonte. Na página de código fonte, procure por
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/humanity/jquery-ui.cssse estiver lá, isso significa que você carregou com sucesso o tema CSS.Admin
Chris S.
Eu consigo fazer seu plugin funcionar corretamente com o Gerenciador de FAQ, mas tenho algumas perguntas. Ele exibirá apenas 10 FAQs (que presumo ser um número padrão). Se eu usar o shortcode integrado que vem com o plugin Gerenciador de FAQ, consigo exibir a lista completa
Para exibir TUDO: coloque [faq limit="-1"] em um post / página
Você tem alguma sugestão sobre como lidar com isso?
Além disso, o gerenciador de FAQ permite a criação de diferentes listas por tópico. Haveria uma maneira simples de modificar seu plugin para fazer uso disso?
Liste todos de uma única categoria de tópico de FAQ: coloque [faq faq_topic=”topic-slug”] em uma postagem / página
Ótimo trabalho, de resto!
WPBeginner Support
Para exibir FAQs com tópicos, o FAQ Manager usa estes parâmetros no shortcode:
[faq faq_topic="topic-slug"][faq limit=”-1″] é bastante autoexplicativo. Ele exibirá todos os FAQs.
No entanto, se você quiser exibir mais FAQs no acordeão, você precisa modificar o parâmetro de consulta no plugin FAQ Accordion do WPBeginner, assim:
1-click Use in WordPress
Admin
Chris S.
Ótimo - obrigado pela sua ajuda com isso!
Garrett
Isso não está funcionando para mim exatamente como pretendido. O plugin é ativado com sucesso e o shortcode está sendo processado, mas aqui está o que a saída parece...
Optei por usar o plugin FAQ manager com seu código para corrigir a estilização horrível que o plugin gera.
Mas, no final das contas, é assim que fica. Alguma dica?
http://screencast.com/t/K2VfuBOptcn
Muito obrigado(a) desde já!!
~Garrett
Atlanta, GA
Garrett
Parece que a lista não está herdando nenhuma informação de estilo do jquery-ui.css, embora eu tenha verificado que um link para o arquivo jquery-ui.css ESTÁ presente na página.
Linha onde o jquery-ui.css é incluído:
Explorando regras CSS:
Como isso é possível?
Obrigado(a)!
~Garrett
WPBeginner Support
Tente mudar para um tema padrão do WordPress para ver se funciona então.
Admin
Richard Morrison
Isso quebrou após a última atualização do Wordpress. Não consigo mais exibir o acordeão. O shortcode agora exibe apenas o texto do FAQ manager.
Piet
a linha 20 do seu arquivo my-accordion.php diz: ‘numberposts’
essa função foi depreciada há... muito tempo.
já que vocês estão no ramo de dar tutoriais para iniciantes, vocês podem pelo menos acertar as funções?
obviamente isso deveria ser ‘posts_per_page’
Equipe Editorial
Artigo atualizado.
Admin
Mary-Anne
Agradeceria alguma ajuda com isso. Estou tentando instalar em um 3.5.2 em um site de rede. O Administrador da Rede tem o Plugin listado e Ativado na Rede.
No entanto, ele não está listado nos sub-sites.
Isso já foi testado com sites de Rede? Parece exatamente o que é necessário. Obrigado por todos os seus esforços com WPBEGINNER.
Obrigado.
Equipe Editorial
Isso parece uma pergunta de suporte que precisa ser postada no fórum do plugin.
Admin
birge
Olá,
Eu fiz meu-accordion.php e accordion.js, fiz o upload deles e tudo mais, mas ainda não consigo ver o plugin na lista de plugins. O que deu errado?
Obrigado,
birge
Equipe Editorial
Você tem certeza de que a localização do arquivo do plugin é algo como: /wp-content/plugins/accordion/my-accordion.php
Admin
birge
Exatamente.
alin
I do just what you said but I can’t activate the plugin from plugins dashboard because I can’t se it
curdaneta
Você esqueceu de incluir o arquivo de script “accordion.js” …
Equipe Editorial
Nós compartilhamos o código do accordion.js lá. Ele também está sendo incluído usando enqueue script.
Admin
curdaneta
Desculpe, mas eu encontro o link para o arquivo
Equipe Editorial
Não há link para o arquivo. Nós compartilhamos o código que você precisa colar em um novo arquivo que você criará chamado accordion.js
curdaneta
Desculpe, falha minha
Eu não li com atenção. Agora tudo funciona como esperado
curdaneta
curdaneta
Olá
Não funcionou para mim usando o shortcode em vários parágrafos
Atenciosamente
curdaneta
Gaelyn
Obrigado. Posso ver como isso será muito útil.
Drake
Obrigado pelo artigo. Seria bom ter um semelhante que explique como introduzir abas jQuery em páginas/posts.