Deseja adicionar uma barra de pesquisa ao seu menu de navegação do WordPress?
Por padrão, o WordPress permite que você adicione a pesquisa à barra lateral, ao rodapé e a outras áreas prontas para widgets do seu site. No entanto, muitos usuários preferem ter a caixa de pesquisa do WordPress no menu de navegação porque é mais fácil de ser encontrada pelos visitantes.
Neste artigo, mostraremos como adicionar facilmente uma barra de pesquisa ao menu do WordPress sem ter nenhum conhecimento de programaçã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 estão procurando sem sair do seu site WordPress. Isso pode melhorar a experiência do usuário, manter os visitantes no seu site por mais tempo e aumentar o engajamento.
É por isso que a maioria dos designers e especialistas em sites recomenda 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 menu será diferente. Se você usar um tema clássico, precisará de um plug-in de pesquisa do WordPress.
Quanto aos usuários de temas de blocos, basta usar o Full Site Editor (FSE).
Com isso em mente, vamos examinar os dois métodos um a um. Você pode usar os links rápidos abaixo para pular para a seção desejada:
Método 1: Adicionar uma barra de pesquisa no menu de um tema clássico do WordPress
Esse primeiro método é para aqueles que usam um tema clássico do WordPress. Isso significa que você vê o menu Appearance “ Customize ( Aparência “ Personalizar ) no painel do WordPress e pode acessar o Theme Customizer (Personalizador de tema).
Se você usar um tema clássico, só poderá adicionar o widget de pesquisa do WordPress a áreas prontas para widgets, como a barra lateral, e não ao menu do WordPress.
Para contornar esse problema, você precisará de um plug-in que permita adicionar uma barra de pesquisa a outras áreas do seu site, inclusive aos menus de navegação.
OSearchWP Modal Search Form é a nossa melhor recomendação. Esse plug-in gratuito é fácil de usar, fica ótimo com qualquer tema e não afeta negativamente o desempenho do seu site. Além disso, ele não requer o plug-in SearchWP premium.
Observação: Você pode notar que o plug-in não foi testado com a versão mais recente do WordPress. Mas nós mesmos o testamos e ele funciona bem para essa finalidade.
Se tiver alguma dúvida, leia nosso artigo sobre se você deve instalar plug-ins não testados do WordPress.
A primeira coisa que você precisa fazer é instalar e ativar o plug-in SearchWP Modal Search Form. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.
Após a ativação, você precisa adicionar a barra de pesquisa ao menu do WordPress. Basta ir para Appearance ” Menus e, em seguida, certificar-se de selecionar o menu Primary no menu suspenso “Select menu to edit”.
Depois disso, clique no botão “Select” (Selecionar).
Em seguida, clique na caixa SearchWP Modal Search Forms à esquerda da tela.
Você pode ver que o plug-in adicionou automaticamente um modelo de pesquisa “Native WordPress”. Vá em frente e marque a caixa “Native WordPress”.
Em seguida, clique no botão “Add to menu” (Adicionar ao menu).
O WordPress agora adicionará um novo item “Native WordPress” ao menu.
Para configurar esse item, dê um clique nele. Para começar, é uma boa ideia alterar o rótulo de navegação para “Search” para que os visitantes saibam que esse é um campo de pesquisa.
Para fazer essa alteração, basta digitar “Search” (Pesquisar) no campo “Navigation Label” (Rótulo de navegação).
Depois disso, clique no botão “Save Menu” para salvar suas alterações. Agora, se você visitar seu blog do WordPress, verá uma nova barra de pesquisa no menu de navegação.
O SearchWP estilizará automaticamente a pesquisa para se adequar ao seu tema do WordPress, como você pode ver nas imagens a seguir.
Método 2: Adicionar uma barra de pesquisa em um menu de tema de bloco do WordPress
Se você usar um tema WordPress de bloco, poderá usar o Full Site Editor para adicionar uma barra de pesquisa ao menu de navegação.
Para fazer isso, basta acessar Appearance “ Editor na área de administração do WordPress.
Agora você verá uma lista de opções para personalizar o tema.
Aqui, basta clicar em “Navegação”.
Em seguida, clique no botão de lápis “Edit” (Editar).
Isso o direcionará para o editor de blocos.
Nesta etapa, você pode clicar no botão “+ Add Block” em qualquer lugar da tela.
Depois disso, selecione o bloco Search.
Seu menu de navegação deve ter uma barra de pesquisa agora.
Além disso, você pode editar o texto do espaço reservado e alterá-lo para algo como “What are you searching for?” (O que você está procurando?). Na barra lateral de configurações do bloco, fique à vontade para personalizar a aparência da barra de pesquisa.
Quando estiver satisfeito com o bloco de pesquisa, basta clicar em “Salvar”.
Dicas de especialistas para melhorar sua pesquisa no WordPress
Além de adicionar uma barra de pesquisa ao seu menu de navegação, há muitas outras maneiras de aprimorar sua experiência de pesquisa no WordPress.
Uma delas é usar o SearchWP. Esse plug-in ajuda você a personalizar o algoritmo de pesquisa do WordPress sem mexer em nenhum código.
Por exemplo, você pode tornar seu formulário de pesquisa ainda mais fácil de usar adicionando resultados de pesquisa ao vivo usando a tecnologia Ajax. Isso mostrará automaticamente ao visitante resultados de pesquisa relevantes à medida que ele digitar a consulta, exatamente como o Google.
Para obter mais informações, leia nosso artigo sobre como adicionar pesquisa Ajax ao vivo ao seu site WordPress.
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 criar um formulário de pesquisa personalizado no WordPress (passo a passo)
- Como pesquisar por categoria no WordPress (melhor método)
Esperamos que este artigo tenha ajudado você a aprender como adicionar uma barra de pesquisa a um menu do WordPress. Talvez você também queira ver nossa seleção especializada do melhor software de bate-papo ao vivo para pequenas empresas ou nossa lista de dicas úteis para acelerar o WordPress e aumentar o desempenho.
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.
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!
Angel Rodriguez says
Thanks for this, this plugin worked great and saved me from having to replace or edit my theme again.
WPBeginner Support says
Glad our recommendation was helpful!
Administrador
Maricel says
Thank you! Very helpful and very easy.
WPBeginner Support says
Glad to hear our article was helpful!
Administrador
Rawan says
These plugins are untested for WP version 5.8.1
Is it still ok to install them or is there other plugins that are tested for that version?
jafrin says
hi
This video is very helpful for me.But I want bar menu is like amazon page .Please help me .How do create big search bar like in amazon page
WPBeginner Support says
It would depend on the specifics you’re looking for but for a starting point we would recommend taking a look at our article below:
https://www.wpbeginner.com/plugins/how-to-let-users-filter-posts-and-pages-in-wordpress/
Administrador
Erin says
Is there a way to display the results that are generated by the plugin differently? I get a list of images and descriptions but they display images in all different sizes. I would like them to display in the same way as my product pages do with 24 results per page, and 4 columns.
thank you
WPBeginner Support says
For customizing the results page you would want to check with the plugin’s support and they should be able to assist.
Administrador
Okereke Divine says
As usual, wpbeginner has always been helpful. Thanks alot
WPBeginner Support says
You’re welcome, glad our guide could be helpful
Administrador
Parwez says
Sir, how did u create logo, search bar and menu in header side by side
WPBeginner Support says
Our theme is custom created so we manually set that up with the creation of the theme
Administrador
Angelica says
Really helpful! I find the default style is not visually pleasing, but the sliding option works a treat. Thanks for this.
WPBeginner Support says
You’re welcome, glad our article could be helpful
Administrador
Rochelle says
I would like the search item to appear as the first item in the menu, not the last. Is this possible?
WPBeginner Support says
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
Administrador
Anupam Kumar says
Hi,
How to style the social icons like you did in your site for, with those gaps and lines , i dont know css,
Thanks
WPBeginner Support says
For understanding CSS and how we set up our icons, you would want to take a look at our article here: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administrador
Rubb says
The explain it not right, the screens images is wrong and I think it is the wrong plugin
WPBeginner Support says
It appears the plugin has updated since this article was last updated, we will take a look into updating this post.
Administrador
James King says
This doesn’t work guys. There’s no such plugin for a start.
WPBeginner Support says
Thank you for letting us know, it appears the plugin has been renamed since we created this article. We’ll look into updating this
Administrador
Raymond says
Why is every solution on this website a plugin? Plugins bloat websites and slow them down; one would expect you to know that. There are better solutions than installing a plugin for everything!
WPBeginner Support says
We strive to make the solutions as simple as possible for our users which is why our articles tend toward plugins. This way if a user is not comfortable editing their site’s files they have a plugin option that can be easily removed from their site should it not work for them.
Also, it’s not as simple as all plugins slow down your site. Poorly coded plugins slow down your site. https://www.wpbeginner.com/opinion/how-many-wordpress-plugins-should-you-install-on-your-site/
Administrador
Ann says
why does my setting doesnt have an ADD TO SEARCH MENU
Dan Conway says
Not sure if it is due to an update but I noticed the same thing. But it seems the option can be found under ‘Ivory Search > Settings’ then you should be presented with the first settings which are ‘Menu search’ and the first expandable option to select a menu to add it to.
Aditi Bisen says
Hi,
Can we choose whether the search appears only for mobile/tablet version and not for desktop?
Ihsan says
unfortunately, it doesn’t display correctly as it mess up with the nav menu. I’ve tried different plugins and all of those are the same. For newbie, seems like no other way but asking to the theme developer or professional help to code it manually.
Damith says
No, You don’t need to become developer or professional to make small custom CSS.