Como criar um formulário de pesquisa personalizado do WordPress (passo a passo)

Publicados: 2021-11-04

Você precisa criar um formulário de pesquisa personalizado para o seu site WordPress?

A pesquisa é como a maioria dos usuários encontrará conteúdo em seu site. Se eles não encontrarem facilmente o que estão procurando, eles podem passar para outro site.

Neste artigo, mostraremos como melhorar a pesquisa do seu site criando um formulário de pesquisa personalizado do WordPress, passo a passo.

Como criar um formulário de pesquisa personalizado do WordPress (passo a passo)

Por que criar um formulário de pesquisa personalizado para WordPress?

O recurso de pesquisa padrão do WordPress é bastante limitado e nem sempre encontra o conteúdo mais relevante.

À medida que você adiciona mais conteúdo ao seu site, precisará de maneiras melhores de ajudar os visitantes do seu site a encontrar facilmente o conteúdo em seu site.

Isso se torna ainda mais importante se você estiver administrando uma loja online ou um site de associação onde deseja que os usuários encontrem o produto ou curso certo.

Você também pode personalizar o algoritmo de pesquisa para mostrar conteúdo específico superior a outros ou personalizar a aparência do seu formulário de pesquisa.

Dito isto, vamos dar uma olhada em como personalizar o formulário de pesquisa do WordPress e a página de resultados. Abordaremos dois métodos que você pode escolher usando os links abaixo:

Como personalizar o formulário e os resultados de pesquisa do WordPress

SearchWP é o melhor plugin de pesquisa personalizado para WordPress. É fácil de usar, oferece controle total sobre os resultados da pesquisa e é mais preciso do que a pesquisa padrão do WordPress.

O primeiro passo é instalar o plugin SearchWP. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin WordPress.

Após a ativação, você precisa visitar a página Configurações »SearchWP e clicar na opção de menu 'Licença'.

Digite a chave de licença do SearchWP

Em seguida, insira sua chave de licença na caixa 'Licença' e clique no botão 'Ativar'. Você pode encontrar essas informações em sua conta no site SearchWP.

Personalizando o mecanismo de pesquisa

Depois de fazer isso, você precisa clicar na opção de menu 'Engines'. Uma vez lá, você deve clicar no botão 'Adicionar novo' para criar um novo mecanismo de pesquisa.

SearchWP Adicionar novo mecanismo

Isso criará um novo mecanismo de pesquisa chamado 'suplementar'. Para alterar o nome, você precisa clicar no botão 'Fontes e configurações'.

Mecanismo de pesquisa complementar SearchWP

Isso leva você a uma página que também permite escolher se deseja pesquisar postagens, páginas, arquivos de mídia, comentários e usuários. Vamos deixar as configurações padrão como estão.

Alteraremos o nome do mecanismo de pesquisa para 'Personalizado'. Vá em frente e digite isso no campo 'Engine Label'.

Rótulo do mecanismo de pesquisaWP

Observe que a opção 'Keyword Stems' foi selecionada para você. Isso desconsiderará as terminações de palavras quando seus usuários fizerem uma pesquisa para que os resultados de pesquisa mais relevantes sejam exibidos.

Certifique-se de clicar no botão 'Concluído' quando terminar.

A página de configurações do mecanismo de pesquisa contém seções para Postagens, Páginas, Mídia e Usuários. Em cada seção, você pode priorizar diferentes atributos de postagem ou incluir apenas determinadas categorias ou tags em seus resultados de pesquisa.

Você pode fazer isso ajustando os controles deslizantes de 'Relevância do atributo'.

Isso muda a forma como os mecanismos de pesquisa valorizam e classificam o conteúdo. Por exemplo, se você deseja valorizar o título da postagem acima do conteúdo, pode ajustar o controle deslizante de acordo.

Você deve trabalhar em cada seção e fazer os ajustes que desejar nos controles deslizantes.

Controles deslizantes de relevância do atributo SearchWP

Você também pode criar regras para cada seção que determinam se determinado conteúdo é incluído ou excluído dos resultados da pesquisa.

Por exemplo, você pode permitir que seus visitantes pesquisem facilmente conteúdo sobre o mesmo tópico sobre o qual estavam lendo. Ou em uma loja online, você pode ajudar seus clientes a encontrar rapidamente outros produtos da mesma categoria.

Vá em frente e clique no botão 'Editar regras' na seção Postagens.

Você notará que pode criar regras sobre as categorias, tags e formato da postagem, a data de publicação e o ID da postagem.

Regras de edição do SearchWP

Você pode permitir que seus visitantes pesquisem categorias específicas de sites. Por exemplo, você pode adicionar um recurso de pesquisa de categoria às suas páginas de arquivo para ajudar seus visitantes a encontrar rapidamente o que estão procurando.

Para saber como fazer isso, consulte o Método 1 em nosso guia passo a passo sobre como pesquisar por categoria no WordPress.

Quando terminar de personalizar as configurações padrão do mecanismo de pesquisa, clique no botão "Salvar mecanismos" na parte superior da página para criar seu mecanismo de pesquisa personalizado.

Clique no botão Salvar Motores

Adicionando o formulário de pesquisa com código de acesso

A extensão SearchWP Shortcodes simplifica o trabalho de adicionar seu novo formulário de pesquisa de postagem personalizado ao seu site WordPress.

Basta visitar o site SearchWP Shortcodes Extension e clicar no botão 'Download disponível com licença ativa'.

Baixar extensão de códigos de acesso do SearchWP

Depois disso, você precisa instalar e ativar a extensão da mesma forma que instalou o plugin acima.

Agora você pode adicionar um formulário de pesquisa personalizado às suas postagens, páginas e widgets usando códigos de acesso. Se você nunca usou códigos de acesso antes, pode aprender mais em nosso guia para iniciantes sobre como adicionar um código de acesso no WordPress.

Basta editar uma postagem e colocar o cursor onde deseja adicionar o formulário de pesquisa. Depois disso, clique no ícone de adição ' + ' Adicionar bloco para abrir o menu de blocos.

Adicionar um bloco HTML personalizado

Em seguida, digite 'html' na caixa de pesquisa e clique no bloco 'HTML personalizado' para adicioná-lo à postagem.

Depois de adicionar o novo bloco, você deve colar os seguintes códigos de acesso e HTML nele.


[searchwp_search_form engine="custom" var="searchvar" button_text="Custom Search"]
  
<div class="search-results-wrapper">
 [searchwp_search_results engine="custom" var="searchvar" posts_per_page=4]
  <h2>[searchwp_search_result_link direct="true"]</h2>
  [searchwp_search_result_excerpt]
 [/searchwp_search_results]
</div>
  
<div class="no-search-results-found">
 [searchwp_search_results_none]
 No results found, please search again.
 [/searchwp_search_results_none]
</div>
  
<div class="search-results-pagination">
 [searchwp_search_results_pagination direction="prev" link_text="Previous" var="searchvar" engine="custom"]
 [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="custom"]
</div>

Esse código adicionará seu formulário de pesquisa personalizado à postagem, criará uma seção para exibir os resultados da pesquisa, mostrará uma mensagem de ausência de resultados, se necessário, e adicionará paginação se os resultados forem para várias páginas.

Se você deu um nome diferente ao seu mecanismo de pesquisa, precisará alterar engine=“custom” para o nome do seu próprio mecanismo em quatro lugares.

Você também pode optar por alterar o texto do botão de pesquisa para algo mais descritivo editando button_text=“Custom Search” . O resto do código pode permanecer o mesmo.

Certifique-se de clicar em Publicar ou Atualizar para salvar sua postagem e torná-la ativa.

Clique em Publicar ou Atualizar para salvar sua postagem

Para ver o formulário de pesquisa em ação, basta visualizar a postagem em seu site WordPress. É assim que fica em nosso site de demonstração executando o tema Twenty Twenty-One.

Visualização do formulário de pesquisa personalizada do SearchWP

Adicionando pesquisa Ajax ao vivo

A pesquisa Live Ajax melhora seu formulário de pesquisa fornecendo automaticamente resultados de pesquisa suspensos à medida que o usuário digita sua consulta.

Exemplo de página de pesquisa ao vivo

A maneira mais fácil de adicionar a pesquisa ao vivo do Ajax ao WordPress é o plugin gratuito SearchWP Live Ajax Lite Search, pois ele permite a pesquisa ao vivo automaticamente.

Para obter instruções passo a passo sobre como instalá-lo, consulte nosso guia sobre como adicionar pesquisa Ajax ao vivo ao seu site WordPress.

Usando configurações avançadas para SearchWP

Agora você deve navegar para Configurações »PesquisarWP e clicar na guia Avançado. Nesta página, você pode ativar algumas configurações que tornarão mais fácil para seus usuários encontrarem o que estão procurando.

Configurações avançadas do SearchWP

Marque qualquer uma destas opções que você gostaria:

  • As correspondências parciais também exibirão resultados que não correspondem exatamente ao termo que está sendo pesquisado.
  • Automático “Você quis dizer?” as correções sugerirão um termo de pesquisa ligeiramente diferente que corresponderá a mais postagens em seu site.
  • O suporte a “pesquisas com citações/frases” permitirá que seus usuários usem aspas ao pesquisar frases exatas.
  • Destacar termos nos resultados tornará mais fácil para seus visitantes encontrarem o que estão procurando nos resultados da pesquisa.

Estilizando o formulário de pesquisa e a página de resultados

Seu tema WordPress controla a aparência do seu site, incluindo o formulário de pesquisa e a página de resultados da pesquisa. Eles armazenam as regras de formatação para todos os elementos do seu site WordPress em uma folha de estilo CSS.

Você pode adicionar seu próprio CSS personalizado para substituir as regras de estilo do seu tema.

Se você ainda não fez isso, veja nosso artigo sobre como adicionar CSS personalizado no WordPress para iniciantes.

Por exemplo, aqui está um CSS personalizado que funcionará com a maioria dos temas. A primeira seção altera o estilo do formulário de pesquisa e a segunda seção personaliza os resultados da pesquisa.


.searchform {
font-family:arial;
font-size:16px;
background:#ace5e3;
color:#ffffff;
border:1px solid #61c3c0;
padding:10px;
height:90px;
width:600px;
}

.search-results {
font-family:arial;
font-size:16px;
background:#ace5e3;
color:#000000;
border:1px solid #61c3c0;
padding:10px;
width:600px;
}

Você pode alterar a formatação no código para se adequar ao seu próprio site. Você também pode excluir todas as linhas que não deseja modificar. Por exemplo, se você não quiser alterar a altura e a largura do formulário de pesquisa, basta excluir essas linhas.

Aqui estão as capturas de tela do nosso site de demonstração antes e depois de adicionar o CSS personalizado.

Visualização CSS personalizada do SearchWP

Como medir os resultados da pesquisa e melhorar as conversões

Depois de configurar seu formulário de pesquisa personalizado do WordPress, o próximo passo é medir os resultados.

O SearchWP vem com uma extensão de métricas de pesquisa que mostra exatamente como está o desempenho da pesquisa do seu site.

SearchWP Metrics

Você também pode usar as métricas de pesquisa para melhorar automaticamente os resultados da pesquisa, promovendo resultados que levam mais cliques ao topo.

Os sites de comércio eletrônico também implementam pop-ups de intenção de saída e campanhas gamificadas para envolver os usuários nas páginas de pesquisa, para que eles possam se converter em assinantes de e-mail e clientes logo depois.

OptinMonster spin to win popup example

Esperamos que este tutorial tenha ajudado você a aprender como criar um formulário de pesquisa personalizado do WordPress. Você também pode querer ver nossa escolha especializada dos melhores serviços de telefone comercial para pequenas empresas e nossa comparação dos melhores registradores de domínio.

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