Como adicionar uma barra de pesquisa ao WordPress (5 maneiras)

Publicados: 2023-07-12

Se você administra um site grande ou complexo, provavelmente tem muitas páginas para os visitantes classificarem. Às vezes, pode ser frustrante e demorado para eles encontrarem o que estão procurando.

Uma barra de pesquisa é uma ótima maneira de combater esse problema, e adicionar uma ao WordPress é simples. Se você é iniciante, pode usar o recurso Bloco de pesquisa ou instalar um plug-in. Se estiver procurando algo um pouco mais avançado, você pode adicionar um ícone de pesquisa ao seu menu de navegação ou editar seus arquivos de tema para incluir as personalizações que desejar.

Nesta postagem, veremos mais de perto o papel que uma barra de pesquisa desempenha em seu site. Em seguida, mostraremos cinco métodos para adicionar um no WordPress.

Por que é importante incluir uma barra de pesquisa em seu site WordPress

Se o seu site tiver apenas algumas páginas, provavelmente será fácil para os visitantes encontrarem o conteúdo ou as informações que procuram. Por outro lado, para sites de negócios em crescimento, lojas de comércio eletrônico complexas ou blogs populares, pode levar muito tempo para os visitantes navegarem em suas páginas usando apenas o menu.

Barra de Pesquisa Nalgene

A regra dos três cliques é um princípio usado pela maioria dos web designers. Esta regra sugere que um usuário deve ser capaz de encontrar qualquer informação desejada em seu site usando três (ou menos) cliques do mouse. Caso contrário, eles podem ficar frustrados e abandonar seu site.

Isso significa que uma barra de pesquisa é uma ótima maneira de melhorar a experiência do usuário (UX).

Com esse recurso, você pode atender seu público com o conteúdo que ele deseja com muito mais rapidez, reduzindo as taxas de rejeição e aumentando o tempo gasto em seu site.

Melhor ainda, você pode monitorar os dados de pesquisa do seu site para acompanhar os termos e frases que os visitantes usam com mais frequência. Esta é uma ótima maneira de descobrir lacunas entre o que seus convidados estão procurando e o que você está oferecendo a eles. Com esse conhecimento, você pode planejar com confiança novas iniciativas para atender seus visitantes e aumentar seus esforços.

Onde colocar sua barra de pesquisa

É importante garantir que sua barra de pesquisa seja facilmente acessível. Portanto, você deseja que ele ocupe uma posição privilegiada. Mas você também não quer que esse recurso distraia seu conteúdo principal, como postagens de blog e páginas de produtos.

Com isso em mente, geralmente é uma boa ideia colocar uma barra de pesquisa no cabeçalho do seu site. Dessa forma, será um dos primeiros elementos que seus visitantes verão.

Barra de pesquisa da Rolling Stone

Além disso, isso permite que você coloque sua barra de pesquisa ao lado do menu de navegação. Isso é eficaz porque permite manter a consistência da experiência do usuário. Quando eles chegarem ao seu site, saberão que devem ir automaticamente para o topo da página.


Por outro lado, você pode preferir usar o rodapé ou a barra lateral para acomodar a funcionalidade de pesquisa. Essas posições também são muito utilizadas para dar suporte aos menus de navegação, já que não interferem muito no conteúdo da página. Se você optar por essa abordagem, é melhor garantir que o recurso de pesquisa seja particularmente proeminente, para que não seja perdido.

Como adicionar uma barra de pesquisa ao WordPress (5 maneiras)

Agora, vamos dar uma olhada em cinco maneiras de adicionar uma barra de pesquisa no WordPress. Começaremos com a abordagem mais simples e seguiremos para opções mais personalizáveis. É uma boa ideia familiarizar-se com todas essas abordagens, para que você possa selecionar aquela que melhor se adapta às suas necessidades e experiência.

1. Adicione uma barra de pesquisa usando o bloco Pesquisar

A primeira maneira de adicionar uma barra de pesquisa ao WordPress é usar o bloco de pesquisa. Como qualquer usuário do WordPress já está familiarizado com os blocos, essa é uma das opções mais rápidas e simples.

Existem duas maneiras de adicionar um bloco de pesquisa ao seu site. Primeiro, você pode adicionar o bloco a uma página ou postagem específica. Em segundo lugar, você pode adicionar o bloco de pesquisa a uma parte do modelo (como seu cabeçalho) usando o Editor do site. Vamos explorar como essas duas técnicas funcionam.

Adicionar um bloco de pesquisa a uma postagem ou página

Uma maneira de usar o recurso de bloqueio de pesquisa é adicioná-lo a uma postagem ou página específica (como sua página inicial). Para fazer isso, você precisará abrir a postagem ou página relevante para edição ou criar uma nova.

Em seguida, clique no sinal de mais (+) ícone para adicionar um novo bloco. Digite “pesquisar” e selecione a opção Pesquisar .

Bloco de pesquisa

Isso colocará uma barra de pesquisa diretamente na sua página. Em seguida, você pode usar a barra de ferramentas para alterar a posição do botão, adicionar um ícone de botão e ajustar o alinhamento.

Bloco de pesquisa

Além disso, você pode usar as configurações de bloco à esquerda da tela para alterar a largura da barra de pesquisa, alterar suas cores e até mesmo trocar a seleção de fonte.

Adicionar um bloco de pesquisa usando o Editor do site

Se você estiver usando um tema de bloco, também poderá adicionar o bloco de pesquisa a uma parte do modelo como seu cabeçalho. Dessa forma, você pode exibir a barra de pesquisa em todas as páginas do seu site.

Primeiro, você precisa ter certeza de ter um tema de bloco ativado. Caso contrário, você não conseguirá acessar o Editor do Site.

Em seguida, navegue até Aparência → Editor no painel do WordPress. Clique em Partes do modelo → Cabeçalho e selecione o ícone de lápis para editar o cabeçalho do site atual.

Isso abrirá seu cabeçalho dentro do Editor de bloco, onde você poderá fazer várias personalizações na parte do modelo.

Parte do modelo de cabeçalho

Escolha o ícone de mais ( + ) para navegar em seus blocos do WordPress para a opção Pesquisar .

Parte do modelo de cabeçalho

Agora, tudo o que você precisa fazer é arrastar o bloco de pesquisa para a área do cabeçalho.

Parte do modelo de cabeçalho

Você pode usar as setas na barra de ferramentas para mover a barra de pesquisa para a borda do menu. Em seguida, você pode acessar todas as mesmas configurações de quando adiciona o bloco de pesquisa a uma página ou postagem.

Assim, você pode alterar o ícone do botão, ajustar a posição e alternar o rótulo de pesquisa na barra de ferramentas. Além disso, nas configurações do bloco, você pode alterar a largura do bloco e alterar as cores e fontes.

Quando estiver satisfeito com sua barra de pesquisa, clique em Salvar . Em seguida, visite seu site em um navegador para visualizar a barra de pesquisa no front-end.

Pagina inicial

Se quiser fazer mais alterações, você pode revisitar o Editor do site a qualquer momento. Você também pode usar esse método para colocar sua barra de pesquisa em outro lugar, como no rodapé.

2. Adicione uma barra de pesquisa usando o painel de widget

Outra maneira de adicionar uma barra de pesquisa ao WordPress é usar o painel de widgets. Esta é uma opção amigável para iniciantes que é mais adequada para aqueles que usam temas clássicos do WordPress.

Para adicionar uma barra de pesquisa usando o painel de widget, você começará no painel do WordPress. Em seguida, vá para Aparência → Widgets .

Aqui, expanda a seção onde deseja adicionar um widget de pesquisa. E clique no ícone + na parte inferior. Isso abrirá uma lista de bloqueios para o seu site. Pesquise por "Pesquisar". Selecione o bloco de pesquisa.

Widgets de pesquisa

Agora, você pode estilizar e personalizar o bloco de pesquisa como quiser e salvar para adicioná-lo a essa seção do seu site.

Estilização do Widget de Pesquisa

Se você quiser alterar o botão, a posição ou o estilo do seu widget de pesquisa, volte para a tela Widgets e use a barra de ferramentas para personalizar sua barra de pesquisa.

3. Adicione uma barra de pesquisa usando um plug-in

Se você está procurando uma opção mais flexível, mas ainda simples, talvez prefira usar um plug-in para adicionar uma barra de pesquisa ao WordPress. Usar um plug-in é rápido e não requer nenhum conhecimento especial, mas oferece mais controle sobre sua barra de pesquisa do que você obteria com as configurações padrão do WordPress.

Adicione uma barra de pesquisa com o Jetpack Search

O Jetpack Search, por exemplo, permite que os proprietários de sites direcionem os visitantes na direção certa, personalizando os resultados e fornecendo opções de filtragem fáceis de usar e intuitivas. Também é inteligente o suficiente para entender o que os visitantes estão procurando, mesmo se eles digitarem uma palavra incorretamente ou digitarem uma pesquisa complexa e multifacetada, como "frascos a granel de tempero picante para aves por menos de US $ 50".

Designer de interiores líder, Kylie. M. Interiors usa o Jetpack Search para navegar com mais eficiência para os visitantes em um dos mais de 3.000 artigos e reduzir a carga de trabalho para ela e sua equipe.

O Jetpack Search também oferece suporte a dezenas de idiomas e funciona muito rápido, fornecendo resultados lógicos que são atualizados à medida que os visitantes digitam. Assim, as pessoas podem encontrar as respostas certas antes mesmo de terminarem de enviar a pesquisa.

Ele também se integra perfeitamente ao seu site WordPress para consistência de marca e fornece informações aos proprietários do site sobre o que os visitantes estão procurando.

Talvez o mais impressionante seja que todo esse poder vem com um impacto mínimo no desempenho do seu site porque ele opera na nuvem. Portanto, mesmo que milhares de novos visitantes estejam procurando por conteúdo todos os dias, os recursos do seu servidor não serão prejudicados.

Você precisará começar instalando o Jetpack Search em seu site e tem duas opções aqui:

  • Adicione o plug-in Jetpack Search. Isso adiciona apenas a funcionalidade de pesquisa ao seu site e tem planos gratuitos e premium disponíveis, dependendo do seu uso.
  • Adquira o plano Jetpack Completo. O Jetpack Search está incluído neste plano, juntamente com recursos adicionais do site para segurança, crescimento e muito mais.

Nas etapas a seguir, digamos que você escolha o plug-in Jetpack Search. No painel do WordPress, vá para Plugins → Adicionar novo e procure por “Pesquisa do Jetpack”. Em seguida, clique em Instalar agora → Ativar.

Você será solicitado a se conectar a uma conta do WordPress.com e poderá adquirir um plano premium se desejar. Depois que o plug-in estiver configurado, vá para Jetpack → Pesquisar no seu painel. Aqui, você pode ativar o recurso, ativar a pesquisa instantânea, visualizar dados sobre as pesquisas feitas em seu site e muito mais.

Ativar pesquisa do Jetpack

Se quiser personalizar a experiência de pesquisa, clique no botão Personalizar resultados de pesquisa . Isso abrirá uma nova tela com muitas opções adicionais de estilo, tipos de postagem incluídos e muito mais. Por exemplo, você pode optar por destacar os termos de pesquisa na cor da sua marca, mostrar informações adicionais para resultados de produtos e excluir arquivos de mídia dos resultados.

Personalizar resultados de pesquisa

Adicione sua barra de pesquisa ao seu site

Agora, você pode adicionar a nova experiência de pesquisa do Jetpack em qualquer lugar que desejar em seu site, assim como fizemos anteriormente neste artigo. Você simplesmente adicionará um bloco de pesquisa usando o Editor de bloco, Editor de site ou painel Widget, dependendo de sua situação específica. O Jetpack Search substituirá automaticamente a configuração padrão do WordPress pela nova experiência de pesquisa instantânea.

Pesquisa de produtos

4. Adicione um ícone de pesquisa ao seu cabeçalho ou menu sem um tema de bloco

Um cabeçalho ou menu de navegação é o local ideal para um ícone de pesquisa, pois fica instantaneamente visível para todos que acessam seu site.

Se você estiver usando um tema de bloco, poderá adicionar uma barra de pesquisa ao cabeçalho usando as etapas detalhadas acima. Se você estiver usando um tema clássico, precisará instalar um plug-in como o Ivory Search.

Para começar, você precisará instalar e ativar o Ivory Search no WordPress. Em seguida, vá para Ivory Search → Menu Search e escolha o menu onde deseja exibir sua barra de pesquisa.

Pesquisa de Marfim

Clique em Salvar para ver todas as configurações disponíveis. Por exemplo, você pode selecionar estilos de formulário de pesquisa, como suspenso e largura total.

Mais abaixo, use o botão de alternância para exibir um ícone de fechamento do formulário de pesquisa. Em seguida, clique em Selecionar cor para aplicar uma cor de ícone de lupa de menu.

Ícone de fechamento de marfim

Você também pode adicionar um título de menu para exibir em vez do ícone de pesquisa.

Por fim, selecione o formulário de pesquisa que controlará a funcionalidade de pesquisa do menu. Use o menu suspenso para fazer sua seleção.

Opções de funcionalidade de pesquisa

Em seguida, clique em Criar novo . Isso o levará a uma nova tela onde você pode dar um nome ao seu formulário de pesquisa e configurar seu conteúdo pesquisável.

Configuração de pesquisa

Escolha Salvar formulário para gerar o código de acesso do formulário de pesquisa. Em seguida, você pode adicioná-lo a uma área de widget, como seu cabeçalho.

Você pode visualizar seu site no front-end para ver os resultados:

Pesquisa na página inicial

Você deve ver o ícone de pesquisa na cor de sua preferência. Ao clicar nesse ícone, uma barra de pesquisa completa aparecerá.

5. Adicione uma barra de pesquisa manualmente usando um código personalizado

Todos os métodos que vimos até agora são adequados para iniciantes. No entanto, esta próxima opção requer algum conhecimento técnico, pois você precisará adicionar e editar o código em seus arquivos de tema. Você desejará fazer todas as alterações usando um tema filho, para que, ao atualizar seu tema no futuro, seu código não seja perdido.

Antes de começar, é importante fazer um backup do seu site WordPress. Dessa forma, se você inserir uma linha de código errada, poderá facilmente restaurar seu site para uma versão anterior.

Para adicionar uma barra de pesquisa manualmente, conecte-se ao seu site via FTP ou cPanel do seu provedor de hospedagem. Navegue até os arquivos do seu site (normalmente a pasta public_html ) e escolha /wp-content/themes/your-theme. Navegue pelos arquivos e encontre o header.php ou footer.php arquivo (dependendo de onde você deseja adicionar sua barra de pesquisa).

Depois de encontrar o arquivo que deseja usar, abra-o e adicione esta função:

<?php get_search_form(); ?>

Isso chamará o formulário de pesquisa de seu modelo searchform.php . Se você ainda não tem esse modelo, a função criará um.

Sua barra de pesquisa agora deve estar visível no front-end.

Pesquisar a partir da função php

A partir daqui, você pode continuar ajustando seu formulário de pesquisa por meio de um código personalizado para ter a aparência e o funcionamento exatamente como preferir.

Como oferecer a melhor experiência de busca para seus visitantes

A experiência de pesquisa é uma parte crucial do seu site, pois afeta a maneira como os clientes encontram e interagem com seu conteúdo. Uma das maneiras mais fáceis de levar sua experiência de pesquisa para o próximo nível é usar uma ferramenta útil como o Jetpack Search.

Pesquisa Jetpack

O Jetpack Search é uma solução excelente para sites grandes e complexos. Depois de instalado, você pode apresentar resultados de pesquisa instantâneos com filtragem avançada para ajudar os visitantes a encontrar exatamente o que procuram.

Existe uma versão gratuita que pode lidar com 5.000 registros e 500 solicitações por mês.

A versão premium pode lidar com sites maiores e um maior volume de pesquisa, além de exibir uma barra de pesquisa sem marca, para que a experiência se encaixe perfeitamente no restante do site.

Para começar a usar o Jetpack Search, tudo o que você precisa fazer é instalá-lo e ativá-lo. Em seguida, vá para Jetpack → Pesquisar e role para baixo até as configurações.

Ativar pesquisa do Jetpack

Aqui, você pode usar o botão para ativar a pesquisa do Jetpack. Você também pode ativar a experiência de pesquisa instantânea. Isso permitirá a sobreposição dinâmica para pesquisa, classificação e filtragem, sem forçar os visitantes a recarregar a página. Suas alterações serão atualizadas automaticamente, fornecendo aos visitantes uma experiência de pesquisa avançada imediatamente.

Perguntas frequentes (FAQs) sobre a pesquisa do WordPress

Caso você ainda tenha algumas dúvidas, vejamos algumas dúvidas comuns dos leitores sobre a funcionalidade de pesquisa.

Por que devo adicionar uma barra de pesquisa no WordPress?

Uma barra de pesquisa é uma maneira fácil de melhorar a experiência do usuário. Pequenos sites podem ser capazes de combinar os visitantes com o conteúdo que eles procuram rapidamente.

No entanto, sites grandes e complexos, como lojas de comércio eletrônico, podem ter centenas ou até milhares de páginas. Portanto, os visitantes podem ficar frustrados ao tentar encontrar conteúdo usando apenas o menu de navegação.

Uma barra de pesquisa pode fornecer resultados instantâneos e direcionar os visitantes para onde eles desejam estar em seu site. Dessa forma, você pode reduzir as taxas de rejeição e aumentar o tempo gasto no site.

Qual é a diferença entre uma barra de pesquisa e uma caixa de pesquisa?

'Barra de pesquisa' e 'caixa de pesquisa' são termos intercambiáveis. Ambos descrevem um campo que é colocado em seu site (geralmente em seu menu ou cabeçalho). Os visitantes podem inserir termos de pesquisa e palavras-chave neste campo para descobrir o conteúdo do seu site.

É importante observar que uma barra de pesquisa é diferente de uma barra de endereço. Uma barra de endereço é o campo próximo ao topo do navegador onde você pode digitar um URL específico ou inserir termos de pesquisa. Em seguida, um mecanismo de pesquisa (como o Google) combina você com o conteúdo em seu índice. A barra de endereços pesquisa toda a web, enquanto a barra de pesquisa (ou caixa) está vinculada a um único site.

Como posso melhorar a experiência de pesquisa do WordPress para meus visitantes?

Uma barra de pesquisa é uma ótima maneira de fornecer uma excelente experiência ao usuário, mas também existem maneiras de otimizar a experiência de pesquisa.

Por exemplo, você pode colocar sua barra de pesquisa em algum lugar de fácil acesso, como cabeçalho, rodapé ou barra lateral. Além disso, você pode melhorar a experiência de pesquisa do WordPress fornecendo sugestões de pesquisa ao vivo.

A correção ortográfica é outra ótima ferramenta para tornar a experiência de pesquisa mais precisa. Além disso, você pode oferecer suporte a pesquisas filtradas, para que os clientes possam encontrar conteúdo pesquisando tags, categorias, datas e muito mais.

Jetpack Search: um poderoso e personalizável plug-in de pesquisa do WordPress

Uma das maneiras mais fáceis de manter os visitantes em seu site é simplificar a navegação. Uma barra de pesquisa permite que você faça isso porque conecta rapidamente os visitantes com o conteúdo que procuram. Melhor ainda, existem várias maneiras fáceis de adicionar uma barra de pesquisa ao seu site.

Por exemplo, você pode adicionar uma barra de pesquisa ao WordPress usando o bloco Pesquisar ou usar um código personalizado e ajustá-lo para atender às suas necessidades.

Como alternativa, você pode preferir criar esse recurso com um plug-in, que pode ser uma das melhores maneiras de implementar uma poderosa função de pesquisa em seu site. Com uma solução como o Jetpack Search, você pode implementar resultados rápidos e filtragem poderosa para manter os visitantes em seu site.

Além disso, você pode habilitar uma experiência de pesquisa instantânea com uma sobreposição dinâmica para gerar resultados ainda mais rapidamente. Confira os planos hoje para começar!