Se a sua barra de pesquisa estiver escondida em uma barra lateral ou rodapé, seus visitantes podem ter dificuldade em encontrar seu conteúdo ou navegar pelo seu site.
Em nossa experiência gerenciando inúmeros sites WordPress, uma barra de pesquisa bem posicionada pode fazer uma grande diferença no engajamento do usuário e na navegação do site.
Testamos isso em dezenas de sites, e os resultados são sempre os mesmos: quando os usuários podem pesquisar diretamente do menu principal, eles interagem mais e ficam mais tempo. É um pequeno ajuste que leva a grandes melhorias.
Pronto para tornar seu site WordPress mais amigável? Neste guia passo a passo, mostraremos exatamente como adicionar uma barra de pesquisa ao seu menu do WordPress, sem necessidade de codificação.
Por que Adicionar uma Barra de Pesquisa ao Menu de Navegação do WordPress?
Uma barra de pesquisa ajuda os usuários a encontrar o que procuram sem sair do seu site WordPress. Isso pode melhorar a experiência do usuário, manter os visitantes em seu site por mais tempo e aumentar o engajamento.
É por isso que a maioria dos designers e especialistas em sites recomendam adicionar uma barra de pesquisa ao menu de navegação, onde os usuários podem encontrá-la facilmente.
Dependendo do tema que você usa, a forma de adicionar uma barra de pesquisa ao seu menu será diferente. Se você usa um tema clássico, então precisará de um plugin de pesquisa do WordPress.
Quanto aos usuários de temas de bloco, você pode simplesmente usar o Editor de Site Completo (FSE).
Com isso em mente, abordaremos os dois métodos um por um. Você pode usar os links rápidos abaixo para pular para a seção desejada:
- Método 1: Adicionando uma Barra de Pesquisa no Menu de um Tema Clássico do WordPress
- Método 2: Adicionando uma Barra de Pesquisa no Menu de um Tema de Bloco do WordPress
- Dica Bônus: Use o SearchWP para Melhorar a Pesquisa do Seu WordPress
Vamos começar.
Método 1: Adicionando uma Barra de Pesquisa no Menu de um Tema Clássico do WordPress
Este primeiro método é para aqueles que usam um tema clássico do WordPress. Isso significa que você vê o menu Aparência » Personalizar no seu painel do WordPress e pode acessar o Personalizador de Tema.
Se você usa um tema clássico, só pode adicionar o widget de pesquisa do WordPress a áreas prontas para widgets, como a barra lateral, não ao menu do WordPress.
Para contornar esse problema, você precisará de um plugin que permita adicionar uma barra de pesquisa a outras áreas do seu site, incluindo menus de navegação.
SearchWP Modal Search Form é a nossa melhor recomendação. Este plugin gratuito é fácil de usar, fica ótimo com qualquer tema e não afetará negativamente o desempenho do seu site. Além disso, ele não requer o plugin premium SearchWP.
A primeira coisa que você precisa fazer é instalar e ativar o plugin SearchWP Modal Search Form. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, você precisa adicionar a barra de pesquisa ao seu menu do WordPress. Simplesmente vá em Aparência » Menus e certifique-se de selecionar o menu Primário no menu suspenso ‘Selecionar menu para editar’.
Depois disso, clique no botão ‘Selecionar’.
Em seguida, clique na caixa SearchWP Modal Search Forms no lado esquerdo da tela.
Você pode ver que o plugin adicionou automaticamente um modelo de pesquisa ‘Native WordPress’. Prossiga e marque a caixa ‘Native WordPress’.
Em seguida, clique no botão ‘Adicionar ao menu’.
O WordPress agora adicionará um novo item ‘Native WordPress’ ao menu.
Para configurar este item, clique nele. Para começar, é uma boa ideia mudar o rótulo de navegação para ‘Pesquisar’ para que os visitantes saibam que este é um campo de pesquisa.
To make this change, simply type ‘Search’ into the ‘Navigation Label’ field.
After that, click on the ‘Save Menu’ button to save your changes. Now, if you visit your WordPress blog, you’ll see a new Search bar in the navigation menu.
SearchWP will automatically style the search to suit your WordPress theme, as you can see in the following images.
Method 2: Adding a Search Bar in a Block WordPress Theme’s Menu
If you use a block WordPress theme, then you can use the Full Site Editor to add a search bar to your navigation menu.
To do it, simply go to Appearance » Editor in the WordPress admin area.
You will now see a list of options to customize your theme.
Here, just click on ‘Navigation.’
Next, click the pencil ‘Edit’ button.
This will direct you to the block editor.
At this stage, you can click the ‘+ Add Block’ button anywhere on the screen.
After that, choose the Search block.
Your navigation menu should now have a search bar.
Additionally, you can edit the placeholder text and change it into something like ‘What are you searching for?’ On the block settings sidebar, feel free to customize how the search bar looks.
Once you are happy with the search block, just click ‘Save.’
Dica Bônus: Use o SearchWP para Melhorar a Pesquisa do Seu WordPress
Além de adicionar uma barra de pesquisa ao seu menu de navegação, existem muitas outras maneiras de melhorar sua experiência de pesquisa no WordPress.
Uma delas é usar o SearchWP. É o melhor plugin de pesquisa do WordPress para personalizar seu algoritmo de pesquisa sem tocar em nenhum código.
Saiba mais sobre o plugin em nossa análise detalhada do SearchWP.
Por exemplo, você pode tornar seu formulário de pesquisa ainda mais amigável adicionando resultados de pesquisa ao vivo usando a tecnologia Ajax. Isso mostrará automaticamente ao visitante os resultados de pesquisa relevantes enquanto ele digita a consulta, assim como o Google.
Para mais informações, você pode ler nosso artigo sobre como adicionar pesquisa Ajax ao vivo ao seu site WordPress.
Adicionar uma barra de pesquisa SearchWP também é fácil. Se você usar o Formulário de Modal de Pesquisa SearchWP no Método 1, então você também pode usar o plugin SearchWP com ele.
Se você usar um tema de blocos, o SearchWP vem com um bloco de formulário de pesquisa integrado que você pode adicionar em qualquer lugar do seu site, incluindo o menu de navegação.
Aqui estão outras dicas e truques para aprimorar a pesquisa no WordPress:
- Como Personalizar a Página de Resultados de Pesquisa no WordPress
- Como Pesquisar por Categoria no WordPress
- Como Usar Múltiplos Formulários de Pesquisa no WordPress
- Como Adicionar Pesquisa Multilíngue no WordPress
- Como Excluir Páginas dos Resultados de Pesquisa do WordPress
- Como Adicionar Capacidade de Pesquisa por Voz ao Seu Site WordPress
Esperamos que este artigo tenha ajudado você a aprender como adicionar uma barra de pesquisa a um menu do WordPress. Você também pode querer ver nossos guias sobre como estilizar menus de navegação e como permitir que os usuários filtrem posts e páginas no WordPress.
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.
Angel Rodriguez
Obrigado por isso, este plugin funcionou muito bem e me poupou de ter que substituir ou editar meu tema novamente.
WPBeginner Support
Ficamos felizes que nossa recomendação tenha sido útil!
Admin
Maricel
Obrigado! Muito útil e muito fácil.
WPBeginner Support
Que bom saber que nosso artigo foi útil!
Admin
Rawan
Estes plugins não foram testados para a versão 5.8.1 do WP
Ainda é seguro instalá-los ou existem outros plugins testados para essa versão?
jafrin
oi
Este vídeo é muito útil para mim. Mas eu quero que o menu da barra seja como a página da Amazon. Por favor, me ajude. Como criar uma barra de pesquisa grande como na página da Amazon
WPBeginner Support
Dependeria das especificações que você procura, mas para começar, recomendamos dar uma olhada em nosso artigo abaixo:
https://www.wpbeginner.com/plugins/how-to-let-users-filter-posts-and-pages-in-wordpress/
Admin
Erin
Existe uma maneira de exibir os resultados gerados pelo plugin de forma diferente? Eu recebo uma lista de imagens e descrições, mas elas exibem imagens em tamanhos muito diferentes. Eu gostaria que elas fossem exibidas da mesma forma que minhas páginas de produto, com 24 resultados por página e 4 colunas.
obrigado
WPBeginner Support
Para personalizar a página de resultados, você deve verificar com o suporte do plugin, e eles deverão ser capazes de ajudar.
Admin
Okereke Divine
Como sempre, wpbeginner tem sido muito útil. Muito obrigado
WPBeginner Support
You’re welcome, glad our guide could be helpful
Admin
Parwez
Senhor, como o senhor criou o logotipo, a barra de pesquisa e o menu no cabeçalho lado a lado?
WPBeginner Support
Our theme is custom created so we manually set that up with the creation of the theme
Admin
Angelica
Realmente útil! Acho que o estilo padrão não é visualmente agradável, mas a opção de deslizar funciona maravilhosamente. Obrigado por isso.
WPBeginner Support
You’re welcome, glad our article could be helpful
Admin
Rochelle
Eu gostaria que o item de pesquisa aparecesse como o primeiro item no menu, não o último. Isso é possível?
WPBeginner Support
It would depend on your specific theme but if you reach out to the plugin’s support they will be able to help you change the placement
Admin
Anupam Kumar
Olá,
Como estilizar os ícones sociais como você fez no seu site, com aqueles espaços e linhas, eu não sei CSS.
Obrigado
WPBeginner Support
Para entender CSS e como configuramos nossos ícones, você deve dar uma olhada em nosso artigo aqui: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Rubb
A explicação não está correta, as imagens da tela estão erradas e eu acho que é o plugin errado
WPBeginner Support
Parece que o plugin foi atualizado desde que este artigo foi atualizado pela última vez, vamos dar uma olhada em atualizar esta postagem.
Admin
James King
Isso não funciona, pessoal. Não existe tal plugin para começar.
WPBeginner Support
Thank you for letting us know, it appears the plugin has been renamed since we created this article. We’ll look into updating this
Admin
Raymond
Por que toda solução neste site é um plugin? Plugins incham sites e os deixam lentos; espera-se que você saiba disso. Existem soluções melhores do que instalar um plugin para tudo!
WPBeginner Support
Nós nos esforçamos para tornar as soluções o mais simples possível para nossos usuários, e é por isso que nossos artigos tendem a focar em plugins. Dessa forma, se um usuário não se sentir confortável editando os arquivos do site, ele terá a opção de um plugin que pode ser facilmente removido do site caso não funcione para ele.
Além disso, não é tão simples quanto todos os plugins deixam seu site lento. Plugins mal codificados deixam seu site lento. https://www.wpbeginner.com/opinion/how-many-wordpress-plugins-should-you-install-on-your-site/
Admin
Ann
por que minha configuração não tem ADICIONAR AO MENU DE PESQUISA
Dan Conway
Não tenho certeza se é devido a uma atualização, mas notei a mesma coisa. Mas parece que a opção pode ser encontrada em ‘Ivory Search > Settings’ e então você verá as primeiras configurações que são ‘Menu search’ e a primeira opção expansível para selecionar um menu para adicioná-la.
Aditi Bisen
Olá,
Podemos escolher se a busca aparece apenas para a versão mobile/tablet e não para desktop?
Ihsan
Infelizmente, ele não é exibido corretamente, pois interfere no menu de navegação. Já tentei diferentes plugins e todos são iguais. Para um iniciante, parece não haver outra maneira senão pedir ajuda ao desenvolvedor do tema ou a um profissional para codificá-lo manualmente.
Damith
Não, você não precisa se tornar um desenvolvedor ou profissional para fazer um pequeno CSS personalizado.