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á exatamente como adicionar a busca com preenchimento automático em tempo real ao WordPress, para que você possa entregar 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 busca com preenchimento automático em tempo real 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 busca, os resultados aparecem instantaneamente em um menu suspenso, para que eles possam clicar e ir direto para o conteúdo que precisam.

Esse tipo de experiência rápida e útil mantém as pessoas em seu site WordPress por mais tempo. Elas não precisam adivinhar a palavra-chave certa ou esperar por uma página de resultados lenta. E é menos provável que elas cheguem a um beco sem saída.

Infelizmente, a busca do WordPress é bastante limitada por padrão. Ela nem sempre busca em coisas como detalhes de produtos ou tipos de postagem personalizados, e tem dificuldades 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 autocompletar 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:

• Etapa 1: Instalar e Ativar o SearchWP Live Ajax Search
• Etapa 2: Configurar as Configurações Básicas de Pesquisa
• Step 3: Add the Live Search Bar to Your Site (Optional)
  • Adicionar Pesquisa de Preenchimento Automático ao Vivo a Áreas Prontas para Widgets
  • Adicionar Pesquisa de Preenchimento Automático ao Vivo Usando o Editor de Site Completo (FSE)
• Etapa 4: Testar e Solucionar Problemas da Sua Pesquisa ao Vivo
• Dica Bônus: Atualize para uma Pesquisa Ainda Mais Inteligente (Correspondência Difusa)
• Perguntas Frequentes sobre Como Adicionar Pesquisa de Preenchimento Automático ao Vivo no WordPress
• Mais Guias para Melhorar a Pesquisa no WordPress

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 e procurando 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ê usará isso para configurar suas opçõ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á algumas opções diferentes para configurar sua pesquisa.

Certifique-se de que você está na aba ‘Pesquisa ao Vivo’ e procure pelo interruptor ‘Habilitar Pesquisa ao Vivo’ 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 configurações padrão inteligentes que funcionam bem para diferentes tipos de sites logo de cara. Por padrão, ele pesquisará os títulos e o conteúdo de suas postagens para fornecer resultados relevantes.

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

O plugin SearchWP Live Ajax Search ativa automaticamente a pesquisa ao vivo em quaisquer formulários de pesquisa existentes no 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 pesquisa a áreas de widgets como sua barra lateral ou rodapé, você precisa ir para Aparência » Widgets no seu painel do WordPress.

Clique no botão ‘+’ na área do widget, como a barra lateral ou o rodapé. Em seguida, procure pelo widget de Pesquisa.

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

Por exemplo, se você administra um site de notícias, você 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 Completo do Site, então você pode 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.

Em seguida, você precisa abrir a aba ‘Modelos’.

A partir daqui, clique no modelo que você deseja editar, como o seu Cabeçalho ou um modelo de Página.

As opções exatas dependerão do tema que você está usando, mas recomendo escolher um modelo de Cabeçalho ou o menu de navegação para que a barra de pesquisa apareça em todo o seu site.

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

Clique no botão ‘+’ para adicionar um novo bloco e, em seguida, procure por ‘Pesquisa’ no inseridor de blocos.

Você pode mover o bloco de Pesquisa para cima e para baixo até a localização desejada dentro do modelo.

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ê gerencia um blog WordPress, talvez queira 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 ao vivo em diferentes dispositivos, incluindo telefone e tablet, para garantir que seja amigável para dispositivos móveis. Tente também em vários navegadores, como Chrome, Firefox e Safari, para garantir que os resultados ao vivo 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.

Seu navegador ou plugin de cache pode estar armazenando uma versão antiga dos arquivos do seu site (uma versão ‘em cache’) para acelerar os tempos de carregamento. Às vezes, isso pode impedir que o novo script de pesquisa ao vivo seja executado corretamente.

Limpar o cache do seu WordPress e o cache do navegador garante que seu site carregue a versão mais recente de seus arquivos, o que geralmente resolve o problema.

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

Para mais 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 busca ao vivo.

Para mais dicas de solução de problemas, consulte nosso guia sobre como corrigir a busca do WordPress que não funciona.

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 busca 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 impede que os usuários cheguem a um beco sem saída de 'sem resultados' 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 difusa 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 de campos personalizados ou análises detalhadas, então 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 autocompletar 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 do 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 mais detalhes, consulte nosso guia sobre como adicionar uma barra de pesquisa ao menu do seu site WordPress.

Mais Guias para Melhorar a Pesquisa no WordPress

Espero que este guia tenha ajudado você a adicionar pesquisa de autocompletar ao vivo ao seu site WordPress.

Você também pode querer 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 Incluir Tipos de Postagem Personalizados nos Resultados de Busca do WordPress
• Como Excluir Páginas Específicas, Autores e Mais da Pesquisa do WordPress
• Como Adicionar a Busca do WordPress à Página de Arquivos do Blog
• Como Adicionar um Efeito de Alternância de Pesquisa no WordPress
• 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.