Como Criar uma Pesquisa Autocompletar ao Vivo no WordPress

Quando os visitantes não encontram o que procuram, eles não ficam por perto – eles saem, muitas vezes para sempre.

A busca padrão do WordPress não facilita as coisas. É lenta, desajeitada e desatualizada: digite uma palavra-chave, pressione Enter, espere o recarregamento completo da página… apenas para obter resultados que talvez nem sejam relevantes.

Agora imagine o oposto… resultados de busca que aparecem instantaneamente, no momento em que o visitante começa a digitar. Essa é a mágica da busca com preenchimento automático em tempo real (também conhecida como busca Ajax). Ela parece moderna, sem esforço e mantém as pessoas engajadas em seu site.

Neste guia, você aprenderá como adicionar pesquisa de autocompletar em tempo real ao WordPress, para que você possa oferecer resultados ultrarrápidos, melhorar a experiência do usuário e manter os visitantes navegando por mais tempo. 🧑‍💻

Por que adicionar a busca com preenchimento automático em tempo real no WordPress?

A pesquisa com autocomplete ao vivo ajuda os visitantes a encontrar o que procuram em seu site mais rapidamente, sem recarregar a página. Conforme os usuários digitam na barra de pesquisa, os resultados aparecem instantaneamente em um menu suspenso, para que possam clicar e ir direto para o conteúdo de que precisam.

Esse tipo de experiência rápida e útil mantém as pessoas em seu site WordPress por mais tempo e reduz a frustração.

Na verdade, pesquisas mostram que 40% dos usuários abandonarão um site se a experiência de pesquisa for ruim ou mostrar resultados irrelevantes. Com a pesquisa de autocompletar, os visitantes não precisam adivinhar a palavra-chave certa, esperar por uma página de resultados lenta ou chegar a um beco sem saída.

Infelizmente, a pesquisa do WordPress é bastante limitada por padrão. Ela nem sempre pesquisa em detalhes de produtos ou tipos de postagem personalizados e tem dificuldade com correspondências exatas.

Às vezes, ele até mostra uma página de “nenhum resultado encontrado”, mesmo quando o conteúdo está lá.

É aí que a pesquisa ao vivo pode ser muito útil. É especialmente útil para blogs, sites de notícias e lojas online, onde os visitantes querem encontrar algo específico, rapidamente.

Se você quer facilitar para as pessoas descobrirem seu melhor conteúdo, adicionar pesquisa ao vivo é uma maneira simples e eficaz de fazer isso.

Como Adicionar Pesquisa Autocompletar ao Vivo no WordPress

A maneira mais fácil de adicionar pesquisa com autocomplete ao vivo (Ajax) ao seu site é usando um plugin. Neste tutorial, usarei o plugin gratuito SearchWP Live Ajax Search, que é um dos melhores plugins de pesquisa do WordPress.

Ele funciona imediatamente, atualizando automaticamente quaisquer formulários de pesquisa existentes no seu site, como o do cabeçalho ou da barra lateral do seu tema. Isso significa que você pode obter sugestões de pesquisa ao vivo instantaneamente, sem precisar codificar ou alterar nenhuma configuração.

Agora, vou guiá-lo por como criar uma pesquisa de preenchimento automático ao vivo no WordPress.

Aqui está uma visão geral rápida de todas as coisas que abordarei:

Vamos começar!

Etapa 1: Instalar e Ativar o SearchWP Live Ajax Search

Primeiro, você precisa instalar e ativar o plugin SearchWP Live Ajax Search.

Você pode encontrar este plugin diretamente no seu painel do WordPress indo em Plugins » Adicionar Novo.

Na próxima tela, procure por “SearchWP Live Ajax Search”.

Assim que encontrar o plugin nos resultados da pesquisa, clique no botão ‘Instalar Agora’. Após a conclusão da instalação, clique em ‘Ativar’ para habilitar o plugin em seu site.

Para instruções detalhadas de instalação, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.

O plugin é totalmente gratuito e desenvolvido pela mesma equipe por trás do plugin premium SearchWP. Ele funciona de forma independente, então você não precisa comprar nada para começar com a funcionalidade de pesquisa ao vivo.

Após a ativação, um novo item de menu ‘SearchWP’ aparecerá em sua área de administração do WordPress. Você o usará para configurar suas configurações na próxima etapa.

Etapa 2: Configurar as Configurações Básicas de Pesquisa

Agora que o plugin está instalado, você precisa habilitar a funcionalidade de pesquisa ao vivo.

Vá para SearchWP » Configurações no seu painel do WordPress.

Na página de configurações, você verá as opções de configuração. Certifique-se de que você está na aba ‘Live Search’ e procure pelo alternador ‘Enable Live Search’ perto do topo da página.

Simplesmente clique no interruptor para ativá-lo e, em seguida, certifique-se de clicar no botão ‘Salvar’ para armazenar suas configurações.

Uma vez habilitada, a pesquisa Ajax ao vivo começará a funcionar automaticamente com seus formulários de pesquisa existentes em todo o seu site WordPress.

O plugin usa padrões inteligentes que funcionam bem para diferentes tipos de sites logo de cara. Por padrão, o plugin é configurado para consultar os Títulos de Postagem, Títulos de Página e Conteúdo para fornecer sugestões relevantes.

Etapa 3: Adicione a Barra de Pesquisa ao Vivo ao Seu Site (Opcional)

O plugin SearchWP Live Ajax Search habilita automaticamente a pesquisa ao vivo em quaisquer formulários de pesquisa *existentes* em seu tema do WordPress.

No entanto, você também pode querer adicionar uma barra de pesquisa a um novo local, como sua barra lateral, rodapé ou uma página de destino personalizada. Esta etapa mostrará como fazer isso.

Adicionar Pesquisa de Preenchimento Automático ao Vivo a Áreas Prontas para Widgets

Para adicionar uma caixa de busca a áreas de widgets como sua barra lateral ou rodapé, você precisa ir em Aparência » Widgets no seu painel de administração do WordPress.

Clique no botão ‘+’ na área de widget, como a barra lateral ou o rodapé, e então procure pelo widget padrão ‘Pesquisar’.

O SearchWP foi projetado para detectar automaticamente este widget padrão e aprimorá-lo com recursos de autocompletar em tempo real. Portanto, você não precisa procurar por um bloco específico do “SearchWP”.

Uma vez adicionado, você pode personalizar o texto de placeholder.

Por exemplo, se você administra um site de notícias, pode personalizar o título do widget com algo como "Pesquisar Últimas Notícias" ou "Encontrar Artigos de Notícias".

Ou você pode simplesmente deixá-lo como “Pesquisar”.

Não se esqueça de clicar no botão ‘Atualizar’ para salvar suas alterações. A caixa de pesquisa ao vivo agora aparecerá na sua área de widgets.

Veja como fica no meu site de demonstração:

Adicionar Pesquisa de Preenchimento Automático ao Vivo Usando o Editor de Site Completo (FSE)

Se você estiver usando um tema baseado em blocos que suporta o Editor de Site Completo, poderá adicionar caixas de pesquisa a diferentes partes do seu site, como o cabeçalho, a barra lateral e muito mais.

Primeiro, vá para Aparência » Editor no seu painel do WordPress.

Isso abrirá o Editor Completo do Site.

A partir daqui, clique em 'Templates' ou vá para Padrões » Cabeçalho – dependendo do seu tema de blocos ativo.

Em seguida, você pode selecionar o template que deseja editar, como seu Cabeçalho ou um template de Página.

As opções exatas dependerão do seu tema, mas recomendo selecionar a parte do template ‘Cabeçalho’. Isso garante que a barra de busca aparecerá em todas as páginas do seu site.

Assim que você clicar no modelo, verá um editor visual com blocos.

Vá em frente e clique no botão ‘+’ para adicionar um novo bloco, e então procure por ‘Pesquisar’ no inseridor de blocos. Você pode então mover o bloco de Pesquisa para cima e para baixo para a localização desejada dentro do template.

A partir daqui, você pode personalizar a aparência do bloco de pesquisa usando o painel de configurações do bloco.

Por exemplo, você pode ajustar o texto de espaço reservado.

Se você administra um blog WordPress, então pode querer usar algo como “Pesquisar no blog” ou “Encontrar artigos úteis”. Ou você também pode simplesmente deixar como “Pesquisar”.

Você também pode personalizar o estilo da barra de pesquisa e as opções de layout para combinar com o design do seu site.

Assim que estiver satisfeito com a aparência, clique no botão ‘Atualizar’ para salvar suas alterações.

Etapa 4: Testar e Solucionar Problemas da Sua Pesquisa ao Vivo

Agora é hora de testar seu novo recurso de pesquisa ao vivo para garantir que ele esteja funcionando corretamente.

Recomendo abrir seu site em uma janela anônima e digitar alguns caracteres na caixa de pesquisa. Se tudo estiver funcionando, você verá os resultados aparecerem instantaneamente em um menu suspenso. Isso significa que o Ajax está funcionando corretamente.

É uma boa ideia testar sua pesquisa em tempo real em diferentes dispositivos, como celulares e tablets, para garantir que seja amigável para dispositivos móveis. Verifique se o teclado na tela não oculta o menu suspenso de resultados da pesquisa quando um usuário está digitando.

Você também pode testar em vários navegadores, como Chrome, Firefox e Safari, para garantir que os resultados em tempo real apareçam de forma consistente.

Se a pesquisa ao vivo não estiver aparecendo ou funcionando como esperado, os culpados mais comuns são problemas de cache e conflitos de plugins.

Plugins de cache armazenam cópias estáticas de suas páginas para acelerar o carregamento. No entanto, isso pode, às vezes, impedir a execução dos scripts de pesquisa “em tempo real”, o que significa que os resultados não aparecerão instantaneamente.

Um bom plugin para isso é o WP Rocket. Ele é fácil de usar e permite limpar o cache, otimizar scripts e controlar como os arquivos são carregados para um melhor desempenho.

Para detalhes, você pode ver nosso guia sobre como limpar o cache do WordPress.

Se isso não resolver o problema, tente desativar outros plugins um por um para verificar conflitos. Isso pode ajudar a identificar se outro plugin está interferindo na sua pesquisa em tempo real.

Para mais dicas de solução de problemas, consulte nosso guia sobre como corrigir a pesquisa do WordPress que não está funcionando.

Dica Bônus: Atualize para uma Pesquisa Ainda Mais Inteligente (Correspondência Difusa)

Sua nova busca ao vivo oferece uma experiência de usuário muito melhor para seus visitantes. Mas o que acontece se alguém cometer um erro de digitação? Por padrão, o WordPress pode não retornar resultados para “wordpres” em vez de “wordpress”.

É aqui que entra a pesquisa fuzzy, e é um recurso poderoso disponível no plugin premium SearchWP.

A busca fuzzy ajuda seu site a entender o que seus usuários estão tentando encontrar, mesmo que eles errem a grafia ou usem palavras parciais.

Por exemplo, se alguém procurar por “móveis vntage”, um site com busca fuzzy ainda mostrará resultados relevantes para “móveis vintage”.

Isso evita que os usuários cheguem a um beco sem saída de "nenhum resultado" e os ajuda a encontrar conteúdo, melhorando a experiência do usuário e mantendo-os em seu site.

Para instruções passo a passo, você pode ver nosso guia sobre como adicionar pesquisa fuzzy no WordPress.

Perguntas Frequentes sobre Como Adicionar Pesquisa de Preenchimento Automático ao Vivo no WordPress

Recebo muitas perguntas de nossos leitores sobre a funcionalidade de pesquisa do WordPress, então compilei respostas para as mais comuns.

Qual é o melhor plugin de pesquisa para WordPress?

Para funcionalidade de pesquisa em tempo real, recomendo o SearchWP Live Ajax Search porque é gratuito e funciona muito bem logo de cara.

Se você precisar de recursos mais avançados, como pesquisa em campos personalizados ou análises detalhadas, o plugin premium SearchWP é excelente.

Como posso adicionar preenchimento automático aos campos de endereço no WordPress?

A autocompletar de endereço é diferente da pesquisa de conteúdo. Ela usa serviços como a API do Google Places para sugerir endereços reais conforme os usuários digitam.

Você precisará de um plugin de formulário como WPForms ou Gravity Forms que inclua recursos de preenchimento automático de endereço. Isso se conecta a serviços de mapeamento para fornecer sugestões de endereços de rua, o que é separado da pesquisa de conteúdo do seu site.

Posso criar um formulário que permita aos usuários pesquisar dentro de uma categoria específica?

Se você quiser adicionar um menu suspenso para que os usuários possam pesquisar por categoria, você precisará do plugin SearchWP Pro.

O plugin gratuito SearchWP Live Ajax Search (o que cobrimos neste guia) mostrará os nomes das categorias nos resultados ao vivo, mas não permite que você crie um formulário de pesquisa completo com filtros de categoria.

Para obter esse recurso, você precisará fazer o upgrade para o plugin SearchWP completo e seguir nosso tutorial sobre como pesquisar por categoria no WordPress.

Como adiciono um recurso de pesquisa ao meu site WordPress?

A maioria dos temas WordPress inclui um widget de pesquisa integrado que você pode adicionar ao seu menu, barra lateral, cabeçalho ou rodapé.

Para detalhes, veja nosso guia sobre como adicionar uma barra de pesquisa ao seu menu do WordPress.

Mais Guias para Melhorar a Pesquisa no WordPress

Espero que este guia tenha ajudado você a adicionar pesquisa de preenchimento automático ao vivo ao seu site WordPress. Você também pode conferir nossos outros guias relacionados para melhorar a pesquisa do seu site:

• Como Pesquisar por Categoria no WordPress
• Como Adicionar Indexação e Pesquisa de PDF no WordPress
• Como Tornar os Comentários do Seu Blog Pesquisáveis no WordPress
• Como Adicionar a Busca do WordPress à Página de Arquivos do Blog
• Como Ver Análises de Pesquisa no WordPress (Maneiras Fáceis)

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.