Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como adicionar o Live Ajax Search ao seu site WordPress (da maneira mais fácil)

Nota editorial: Ganhamos uma comissão de links de parceiros no WPBeginner. As comissões não afetam as opiniões ou avaliações de nossos editores. Saiba mais sobre Processo editorial.

Deseja adicionar pesquisa Ajax ao vivo em seu site WordPress?

A pesquisa instantânea mostra os resultados à medida que o visitante digita na barra de pesquisa, semelhante ao funcionamento do Google. Isso ajuda os visitantes a encontrar rapidamente páginas, posts, produtos e muito mais.

Neste artigo, mostraremos como adicionar a pesquisa Ajax ao vivo ao seu site WordPress.

How to add live Ajax search to your WordPress site (the easy way)

Por que adicionar o Live Ajax Search ao WordPress?

A pesquisa Live Ajax, também chamada de pesquisa instantânea, aprimora a pesquisa integrada do WordPress adicionando um recurso de menu suspenso e preenchimento automático comum em mecanismos de pesquisa como o Google.

Aqui está um exemplo de pesquisa Ajax ao vivo em ação:

Google search live example

A pesquisa em tempo real adivinha o que os usuários estão procurando à medida que digitam, o que os ajuda a encontrar conteúdo relevante mais rapidamente. Isso geralmente aumenta as visualizações de página e reduz a taxa de rejeição.

Com a pesquisa ao vivo do Ajax, você pode mostrar resultados relevantes mesmo sem recarregar a página. Isso a torna uma ótima opção para lojas on-line, pois os compradores podem ver instantaneamente os produtos que correspondem à consulta de pesquisa. Dessa forma, a pesquisa instantânea pode ajudá-lo a criar uma pesquisa de produtos mais inteligente.

Dito isso, vamos dar uma olhada em como você pode adicionar a pesquisa Ajax ao WordPress.

Como adicionar a pesquisa Ajax ao WordPress com um plug-in do WordPress

A maneira mais fácil de adicionar a pesquisa ao vivo do Ajax ao WordPress é usar o SearchWP Live Ajax Lite Search. Esse plug-in gratuito adiciona automaticamente a pesquisa instantânea ao seu site e funciona perfeitamente com qualquer tema do WordPress.

A primeira coisa que você precisa fazer é instalar e ativar o plug-in. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, o formulário de pesquisa padrão do WordPress usará automaticamente o recurso de pesquisa ao vivo do Ajax. Se você visitar seu site e começar a digitar na barra de pesquisa, verá a pesquisa instantânea em ação.

A live Ajax search created with SearchWP

Por padrão, o SearchWP mostrará os resultados do Ajax ao vivo abaixo do formulário de pesquisa. Se, em vez disso, você preferir mostrá-los abaixo do formulário de pesquisa, acesse SearchWP Live Search no painel do WordPress.

Aqui, abra o menu suspenso “Positioning” (Posicionamento) e escolha “Above the search form” (Acima do formulário de pesquisa).

The SearchWP live Ajax settings

Feito isso, clique em “Save Settings” (Salvar configurações) para armazenar suas alterações.

Basta acessar seu site, mercado on-line ou blog e você verá que os resultados da pesquisa em tempo real agora aparecem acima do formulário de pesquisa.

Exibindo o Ajax Live Search em seu site WordPress

Após a ativação do plug-in, todas as barras de pesquisa do seu site usarão automaticamente a pesquisa Ajax em tempo real, inclusive os formulários de pesquisa personalizados do WordPress que você tiver criado.

A maioria dos temas do WordPress tem uma barra de pesquisa integrada. No entanto, depois de ativar a pesquisa Ajax ao vivo, talvez você queira adicionar uma barra de pesquisa a outras áreas do seu site WordPress.

Adição de Live Ajax Search à barra lateral do WordPress

Muitos proprietários de sites adicionam uma barra de pesquisa à barra lateral do site.

Live widget search example

Isso permite que os visitantes realizem uma pesquisa independentemente de onde estejam em seu site.

Para adicionar o widget de pesquisa ao WordPress, basta acessar Appearance ” Widgets.

Customize widget blocks

Esta página mostra todas as diferentes áreas prontas para widgets de seu tema do WordPress. As opções que você vê podem variar, mas a maioria dos temas terá uma barra lateral, uma barra lateral direita, uma barra lateral esquerda ou uma seção semelhante.

Basta clicar para expandir a área em que você deseja adicionar a barra de pesquisa Ajax ao vivo. Em seguida, clique no ícone “+”.

Add sidebar widget block

Na janela pop-up que aparece, digite “SearchWP” e clique no ícone “SearchWP Live Search” quando ele aparecer.

Isso adicionará automaticamente o widget de pesquisa Ajax ao vivo à barra lateral ou a uma seção semelhante.

Add SearchWP live search widget

Você pode adicionar um título opcional à barra de pesquisa digitando no campo “Título”.

Quando terminar, clique no botão “Update” (Atualizar) para salvar as alterações e ativar a barra de pesquisa Ajax em seu blog ou site do WordPress.

Customize and save live search widget

Agora, se você visitar seu site, verá uma barra de pesquisa Ajax ativa na barra lateral ou em uma seção semelhante.

Você pode seguir o mesmo processo para adicionar a barra de pesquisa a qualquer outra área pronta para widgets.

Para adicionar uma barra de pesquisa ao seu menu de navegação, consulte nosso guia sobre como adicionar uma barra de pesquisa ao seu menu do WordPress.

Como adicionar o Live Search à barra lateral do WordPress usando o Full Site Editor

Se você estiver usando um tema baseado em blocos, como o ThemeIsle Hestia Pro, poderá adicionar uma pesquisa Ajax em tempo real a qualquer área do tema usando o editor completo do site.

Você pode até mesmo adicionar uma barra de pesquisa a áreas que não podem ser editadas usando o editor de conteúdo padrão do WordPress. Por exemplo, você pode adicionar um campo de pesquisa ao seu modelo de página 404.

Para começar, vá para Appearance ” Editor no painel do WordPress.

Adding live Ajax search using the full-site editor (FSE)

Por padrão, o editor de site completo mostra o modelo inicial do seu tema, mas você pode adicionar um bloco de pesquisa a qualquer modelo.

Para ver todas as opções disponíveis, selecione “Templates” no menu à esquerda.

Adding live Ajax search to your WordPress blog or website

Agora você pode clicar no modelo em que deseja adicionar a pesquisa Ajax ao vivo.

O WordPress mostrará uma visualização do design e de todas as configurações de página que você pode editar. Para prosseguir e editar esse modelo, clique no pequeno ícone de lápis.

Adding live Ajax search to a block-based WordPress theme

Feito isso, clique no ícone azul “+”.

No painel que aparece, digite “Search” (Pesquisar).

Adding a search bar to the full-site editor (FSE)

Quando o bloco “Search” for exibido, arraste-o para a área em que você deseja exibir o campo.

Para personalizar o título do bloco ou o texto do espaço reservado, basta digitar a nova mensagem no bloco de pesquisa.

Adding live ajax search to a full-site WordPress theme

Quando você estiver satisfeito com a aparência do bloco, clique em “Save” (Salvar) para ativar a barra de pesquisa Ajax.

Adição de Live Ajax Search às páginas do WordPress

Talvez você também queira adicionar uma caixa de pesquisa Ajax em tempo real a páginas específicas do seu site. Por exemplo, você pode adicionar uma barra à sua página de arquivo personalizada para que os visitantes possam pesquisar facilmente nos arquivos.

Para fazer isso, você precisará abrir o post ou a página em que deseja adicionar a barra de pesquisa. Para este exemplo, mostraremos como adicionar a pesquisa ao vivo a uma página do WordPress, mas as etapas serão semelhantes para as publicações.

Primeiro, vá para Pages ” All Pages e selecione a página que você deseja editar.

Open up WordPress page

No editor de conteúdo do WordPress, clique no ícone “+”.

Isso abrirá o menu de blocos.

Adding a new block to a WordPress blog or website

Aqui, digite “Search” na caixa e clique no ícone “Search” para adicioná-lo à sua página.

O WordPress colocará automaticamente a barra de pesquisa para você.

Adding a search block to a WordPress page or post

Por padrão, a caixa tem um título “Pesquisar”. Você pode alterar isso digitando no campo de rótulo ou pode excluir completamente o texto do título.

Você também pode digitar um espaço reservado opcional, que é o texto que o WordPress mostrará antes de os visitantes começarem a digitar a consulta de pesquisa. Por exemplo, se você tiver uma loja on-line, talvez queira usar algo como “Pesquisar produtos” ou “Encontrar ótimas ofertas”.

Quando você estiver satisfeito com a configuração da barra de pesquisa, clique no botão “Update” (Atualizar).

Customizing the WordPress search block

Agora, seus visitantes podem usar a barra de pesquisa ativa para encontrar rapidamente o que estão procurando.

Você pode usar o mesmo processo para adicionar uma barra de pesquisa a qualquer post ou página.

Live search page example

Personalização dos resultados de pesquisa instantânea do WordPress

O SearchWP Live Ajax Search se integra perfeitamente à pesquisa integrada do WordPress. No entanto, essa pesquisa padrão é bastante limitada e não é boa em mostrar resultados de pesquisa precisos.

É aqui que entra o SearchWP.

É o melhor plug-in de pesquisa do WordPress no mercado, usado por mais de 30.000 sites.

Esse plug-in permite que os visitantes pesquisem conteúdo que o WordPress ignora por padrão, incluindo campos personalizados, arquivos de texto, documentos PDF, produtos WooCommerce e muito mais.

Ao instalar o SearchWP, você pode personalizar completamente o novo recurso instantâneo do seu site sem escrever nenhum código.

The SearchWP WordPress search plugin

O SearchWP também tem análises e estatísticas avançadas que permitem ver o que os visitantes estão pesquisando.

Você pode usar esse insight para ajustar a configuração da pesquisa do seu site e identificar o conteúdo mais popular do seu site. Isso pode ajudá-lo a gerar novas ideias de posts de blog com base no que os visitantes já estão pesquisando.

The SearchWP metrics and statistics page

Para obter mais informações, consulte nosso guia sobre como melhorar a pesquisa no WordPress com o SearchWP.

Esperamos que este artigo tenha ajudado você a aprender como adicionar a pesquisa Ajax ao vivo ao seu site WordPress. Talvez você também queira ver nosso guia sobre como rastrear os visitantes do site e nossas escolhas de especialistas para os plug-ins obrigatórios do WordPress para sites de negócios.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

4 ComentáriosDeixe uma resposta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Mrteesurez says

    Thanks for this post.
    I love Ajax search as it makes users search and find the content in real time. I recommend this to all blogs to have it implemented.
    I also support adding an ajax search field to a 404 page, the user landed on the page can just search and find a post related to what he is looking for.

  3. Eric Malta says

    Hi, after activated this comment function in ajax, my server CPU usages went high, so i have to terminated it. I thing this is for big hosting servers.

    • WPBeginner Support says

      Sadly, any ajax solution will increase your CPU usage but thank you for sharing this for anyone who has concerns for their hosting CPU usage :)

      Administrador

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.