Um alternador de pesquisa deslizante pode dar ao seu site WordPress um visual mais limpo e moderno. Em vez de exibir uma barra de pesquisa completa no cabeçalho ou ocultar a pesquisa completamente, um alternador mantém o layout organizado, mas ainda assim facilita o acesso à pesquisa.
Esse tipo de escolha de design ajuda a reduzir a desordem visual, mantendo um recurso importante ao alcance, o que é especialmente útil em telas menores ou layouts minimalistas.
Melhor ainda, existem maneiras simples e eficientes de adicionar esse recurso no WordPress.
Neste tutorial, mostraremos como adicionar um efeito de alternador de pesquisa suave e deslizante ao seu site WordPress. Quer você esteja administrando um blog, um site de negócios ou uma loja online, essa pequena atualização pode melhorar a usabilidade, mantendo seu design limpo e consistente.
O que é o Efeito de Alternância de Pesquisa no WordPress?
O efeito de alternador de pesquisa é uma técnica de design web que permite exibir um ícone de pesquisa em vez de um formulário de pesquisa. Quando um usuário clica nele, o formulário de pesquisa desliza para fora com uma animação.
O formulário de pesquisa padrão do WordPress não tem uma boa aparência. Muitos temas populares do WordPress já substituem o formulário padrão por seus estilos.
No entanto, se o seu tema ainda usa um formulário de pesquisa estático e simples, você pode usar este tutorial para torná-lo mais amigável.
Com isso em mente, mostraremos como adicionar facilmente o efeito de alternância de pesquisa no WordPress e tornar seu site mais interativo. Aqui está uma visão geral rápida de todos os tópicos que abordaremos neste guia:
💡 Dica Interna: Embora este tutorial envolva adicionar um trecho de código personalizado, você não precisa ser um especialista. Guiamos você copiando e colando o código CSS necessário passo a passo.
Vamos começar.
Adicionando um Efeito de Alternância de Pesquisa no WordPress
Para adicionar um efeito de alternância de pesquisa no WordPress, você precisará colocar um bloco ou widget de formulário de pesquisa em seu site e, em seguida, adicionar algum código CSS personalizado.
Primeiro, vamos garantir que você tenha um formulário de pesquisa em seu site.
Adicionando um Formulário de Pesquisa em um Tema de Bloco com Edição Completa do Site
Se você estiver usando um tema de bloco do WordPress com o recurso de edição completa do site, é assim que você adicionará o formulário de pesquisa ao seu site.
Simplesmente visite Aparência » Editor no seu painel do WordPress. Na tela de edição, você desejará adicionar o bloco 'Pesquisar' onde deseja exibir o formulário de pesquisa.
Depois disso, não se esqueça de clicar no botão ‘Salvar’ para armazenar suas alterações.
Adicionando um Formulário de Pesquisa em Temas Clássicos do WordPress
Para temas do WordPress sem o recurso de edição completa do site, você pode adicionar o bloco ou widget de pesquisa à sua barra lateral ou a qualquer área pronta para widgets.
Para fazer isso, você precisará ir para Aparência » Widgets no seu painel do WordPress. Em seguida, você pode adicionar o bloco/widget 'Pesquisa' à barra lateral onde deseja exibir o formulário de pesquisa.
Em seguida, vamos encontrar uma imagem transparente para o ícone de pesquisa.
Para este tutorial, estamos usando esta imagem, pois é adequada para fundos escuros (sinta-se à vontade para usá-la em seu site).
Se você precisar criar seu próprio ícone de pesquisa, seria ótimo usar um PNG transparente com dimensões não maiores que 50×50 pixels.
O próximo passo é fazer o upload do ícone para o seu site. Simplesmente vá para Mídia » Adicionar Novo e clique em 'Selecionar Arquivos' para fazer o upload da sua imagem de ícone de pesquisa.
Uma vez carregado, clique no botão ‘Copiar URL para a área de transferência’ e, em seguida, cole o URL em um editor de texto simples como o Bloco de Notas ou o TextEdit.
Agora que tudo está no lugar, você precisará adicionar um CSS personalizado ao seu site WordPress. Recomendamos o uso do WPCode, o melhor plugin de trechos de código, para salvar seu CSS personalizado.
O WPCode permite que você adicione facilmente trechos de código personalizados no WordPress. É fácil de usar, e seu código não será afetado por atualizações de tema ou quando você mudar para um tema diferente.
Algumas de nossas marcas parceiras o utilizam para adicionar e gerenciar seus trechos personalizados. Tem funcionado excepcionalmente bem para elas, e você pode saber mais sobre isso em nossa análise detalhada do WPCode.
💡 Dica profissional: Estamos usando a versão gratuita do WPCode, pois funciona muito bem para a maioria dos sites. Se você acabar adicionando muitos trechos de código personalizados mais tarde, talvez queira fazer um upgrade para o WPCode Pro para extras como trechos agendados, histórico de versões e controles mais avançados.
Então, vamos instalar e ativar o plugin WPCode.
No seu painel do WordPress, vá para Plugins » Adicionar Novo Plugin.
Na próxima tela, use a barra de pesquisa para procurar por WPCode.
Assim que encontrá-lo nos resultados, clique no botão ‘Instalar agora’ e depois em ‘Ativar’ para ligá-lo.
Se precisar de ajuda, você pode ver nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, visite a página Trechos de Código » + Adicionar Trecho no seu painel de administração para abrir a Biblioteca de Trechos de Código do WPCode.
Passe o mouse sobre a opção ‘Adicionar seu código personalizado (Novo trecho)’ e clique no botão ‘+ Adicionar trecho personalizado’ quando ele aparecer.
Depois disso, uma lista de tipos de código aparecerá na tela.
Para este tutorial, vamos selecionar a opção ‘HTML Snippet’. Isso porque você carregará o CSS personalizado no cabeçalho do site usando HTML.
A partir daí, você precisa fornecer um título para este trecho de código.
Pode ser qualquer coisa que ajude você a identificar o trecho.
Agora, você pode colar o seguinte código na caixa ‘Pré-visualização do Código’:
<style>
.wp-block-search__inside-wrapper .wp-block-search__input {
background-color: transparent;
background-image: url('/url/to/search-icon.png'); /* replace with real icon URL */
background-position: 8px center;
background-repeat: no-repeat;
background-size: 18px 18px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding-left: 34px;
box-sizing: border-box;
transition: width 400ms ease, background-color 400ms ease;
width: 0;
min-width: 0;
overflow: hidden;
}
.wp-block-search__inside-wrapper .wp-block-search__input:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: none;
width: 230px;
}
.wp-block-search__inside-wrapper .wp-block-search__input::placeholder {
opacity: 0;
}
.search-form .search-submit,
.wp-block-search__button {
display: none;
}
</style>
⚠️ Importante: Não se esqueça de substituir /url/to/search-icon.png pelo URL da imagem que você copiou anteriormente. Certifique-se de manter as aspas simples ‘ ‘ ao redor do URL.
Depois disso, você precisará mudar o botão 'Inativo' para 'Ativo'.
Em seguida, não se esqueça de clicar no botão 'Salvar Snippet'.
E é isso!
Se você visitar seu site WordPress, poderá ver o efeito de alternância em ação no seu formulário de pesquisa.
Solução de Problemas do Efeito de Alternância do Formulário de Pesquisa
O método acima funcionaria com a maioria dos temas do WordPress que usam blocos de widgets modernos. No entanto, para alguns temas, este método pode não funcionar.
Isso pode acontecer se o formulário de pesquisa no seu tema do WordPress não tiver as classes wp-block-search__inside-wrapper e wp-block-search__input .
Nesse caso, você precisará usar a ferramenta Inspecionar para descobrir quais classes CSS são usadas pelo seu tema do WordPress.
Por exemplo, na captura de tela abaixo, nosso tema de demonstração usa essas classes CSS para o formulário de pesquisa.
Se o primeiro trecho de código não funcionou para você, você pode excluí-lo e tentar o seguinte código em vez disso.
Esta versão usa as classes CSS específicas encontradas no exemplo acima. Mas você deve substituí-las pelas classes do seu próprio tema:
<style>
.search-wrap input.s {
background-color: transparent;
background-image: url('/url/to/search-icon.png'); /* replace with real icon URL */
background-position: 8px center;
background-repeat: no-repeat;
background-size: 18px 18px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding-left: 34px;
box-sizing: border-box;
transition: width 400ms ease, background-color 400ms ease;
width: 0;
min-width: 0;
overflow: hidden;
}
.search-wrap input.s:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: none;
width: 230px;
}
.search-form .search-submit {
display: none;
}
</style>
⚠️ Importante: Lembre-se de substituir background-image: url('/url/to/search-icon.png'); pelo URL real do seu ícone. Certifique-se de manter as aspas simples ‘ ‘ ao redor do URL.
Veja como ficou em nosso site de teste:
Dica Bônus: Adicione uma Pesquisa WordPress Melhor para o Seu Site
O efeito de alternância apenas deixa seu formulário de pesquisa do WordPress bonito. Ele não afeta a qualidade dos resultados de pesquisa do seu site.
O WordPress vem com um recurso de pesquisa muito básico por padrão. Esse recurso geralmente é lento, impreciso e pode mostrar resultados em branco.
É aqui que entra o SearchWP, o melhor plugin de pesquisa do WordPress. Ele permite que você substitua facilmente o recurso de pesquisa padrão por um mecanismo de pesquisa poderoso.
Nós o testamos para explorar todos os seus recursos, e você pode ver nossa análise completa do SearchWP para saber mais.
O SearchWP substitui automaticamente os formulários de busca, então você não precisa editar nenhum arquivo do tema. Ele procura por correspondências em todo o seu site e melhora drasticamente a qualidade dos resultados da busca.
Ele também vem com uma extensão de busca ao vivo que exibe instantaneamente os resultados à medida que os usuários digitam suas consultas. Além disso, ele tem suporte completo para eCommerce, o que permite criar uma experiência de busca inteligente no WooCommerce em sua loja online.
Para instruções passo a passo, sinta-se à vontade para conferir nosso guia sobre como melhorar a busca do WordPress com SearchWP.
FAQ: Adicionando um Efeito de Alternância de Pesquisa no WordPress
Tem dúvidas sobre como o alternador de busca funciona ou como personalizá-lo em seu site WordPress? Aqui estão algumas perguntas comuns que recebemos, com respostas claras para ajudá-lo.
Preciso saber programar para adicionar um efeito de alternador de busca?
Na verdade, não. Embora um conhecimento básico de HTML ou CSS possa ajudar, você pode seguir as etapas deste guia sem nenhuma experiência de codificação.
E se o meu tema não exibir o efeito de alternador corretamente?
Alguns temas podem precisar de ajustes extras. Se o alternador não for exibido corretamente, você pode usar a ferramenta Inspecionar do navegador para encontrar as classes CSS do seu tema e ajustar o CSS personalizado conforme mostrado no tutorial.
Este alternador de busca funcionará em dispositivos móveis?
Sim! O efeito de alternância é responsivo e deve funcionar bem tanto em desktops quanto em dispositivos móveis. Apenas certifique-se de testá-lo em diferentes tamanhos de tela para confirmar que tudo parece bom.
Posso usar qualquer imagem para o ícone de busca?
Sim, mas é melhor usar um ícone PNG transparente que se destaque contra o fundo do seu site. Recomendamos mantê-lo com menos de 50x50 pixels para que pareça nítido e carregue rapidamente.
Mais Guias para Melhorar Sua Pesquisa no WordPress
Esperamos que este artigo tenha ajudado você a aprender como adicionar um efeito de alternador de busca no WordPress. Em seguida, você pode achar estes guias úteis:
- Como Pesquisar por Categoria no WordPress
- Como Adicionar Pesquisa Multilíngue no WordPress
- Como Incluir Tipos de Postagem Personalizados nos Resultados de Busca do WordPress
- Como Excluir Páginas dos Resultados de Pesquisa do WordPress
- Como Adicionar Capacidade de Pesquisa por Voz ao Seu Site 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.
Prad
Obrigado por isso.
A interface padrão do bloco de pesquisa é bem sem graça. Eu gosto desta implementação. No entanto, quando a opção 'Somente botão' está selecionada, ao clicar no ícone de pesquisa, a barra de pesquisa aparece à esquerda, empurrando o menu e isso estraga a interface. Existe alguma maneira de fazer a barra de pesquisa aparecer abaixo do botão de pesquisa, como em muitos sites? Essa abordagem parece muito mais limpa, na minha opinião.
Obrigado.
WPBeginner Support
That can be a little more complex depending on the implementation but we may look into something like that for a possible future update to the article
Admin
Dennis Muthomi
Eu tenho este efeito em um site de cliente.
Uma coisa que você deve considerar ao implementar este recurso é a experiência móvel.
Em telas menores, pode ser benéfico ajustar o CSS para garantir que a barra de pesquisa expandida não se sobreponha a outros elementos.
Jiří Vaněk
Eu estava procurando uma maneira de economizar espaço no meu menu principal, onde a caixa de pesquisa estava ocupando muito espaço. Honestamente, eu não conseguia pensar em como economizar espaço porque o menu era bem longo. Então tentei reduzir o tamanho da caixa de pesquisa. Depois de ler este artigo, apliquei sua solução e é exatamente o que eu estava procurando. A pesquisa no meu site não é usada com muita frequência, e esta é uma solução elegante para dar espaço ao menu principal e reduzir a caixa de pesquisa ao tamanho necessário. Ótimo trabalho.
WPBeginner Support
Fico feliz que tenha achado útil!
Admin
James Burns
Muito obrigado. Exatamente a informação que eu precisava, apresentada em um formato fácil de entender.
WPBeginner Support
You’re welcome, glad you found our content helpful
Admin
Osh
Olá,
Estou usando um tema filho, devo adicionar esses códigos aos arquivos do tema pai?
Tentei fazer isso e não está funcionando, por favor ajude!!!
Obrigado
WPBeginner Support
Você deve adicionar o código ao seu tema filho
Admin
Benjamin Rutledge
É possível implementar isso apenas no celular? Meu tema tem uma função de pesquisa animada legal no desktop, mas apenas um alternador para mostrar/ocultar a caixa de pesquisa no lugar do meu logotipo no celular.
Beth Terry
Olá. Muito obrigado por este código. Tive que mexer no posicionamento para fazer o botão de pesquisa aparecer onde eu queria e, como eu só queria que ele aparecesse na versão mobile, também adicionei CSS à media query para telas com mais de 800px para mostrar o campo de pesquisa completo em vez do ícone. Consegui fazer funcionar muito bem, mas acho que é um pouco complicado para quem quer algo para basicamente conectar e usar.
Você pode ver os resultados aqui:
Para todos que duvidam, javascript definitivamente não é necessário.
Beth Terry
Além disso, quero acrescentar que estou usando um tema filho do Twenty Twelve, que vem com o código de pesquisa HTML4. Adicionar o suporte HTML5 ao functions.php não resolveu, então copiei e colei o código de pesquisa HTML5 que você postou acima no cabeçalho do meu tema onde eu queria que a caixa de pesquisa ficasse.
Emily G
Olá – estou implementando isso em um site e gostaria de usar o FontAwesome em vez de uma imagem. Não consigo fazer o ícone aparecer. Você tem alguma dica? Estou adicionando a fonte e o ícone font-family: FontAwesome;
content: “\f002″; ao .search-form input[type=”search”]
Obrigado!
Bradley
Tente isto:
font: normal normal normal 1em/1 FontAwesome;
Steve
Eu estava esperando muito que isso funcionasse para mim. Colei o código na área CSS Adicional do meu tema (twentytwelvechild), adicionei o search-icon.png à pasta do meu tema usando FTM e adicionei add_theme_support(‘html5’, array(‘search-form’)); ao arquivo functions.php do meu tema. Não vejo nenhuma mudança e me pergunto o que perdi. Espero que alguém possa me dar uma pista. obrigado.
Harmandeep Singh
Não está funcionando.
Crowd
Muito obrigado, funciona perfeitamente.
Você acha que há uma maneira de fazer o campo de busca aparecer da direita para a esquerda (ao contrário de esquerda para direita como agora)?
Marimar
Alinhar o texto à direita
text-align: right;
Ele desliza para o outro lado.
Tony López
Obrigado! Funciona perfeitamente.
Cato
É… exatamente como eu pensei, isso não funciona de jeito nenhum. Como isso deveria funcionar sem JS de qualquer maneira?
Cato
Hmmm, isso é meio antigo, mas… não precisa de javascript aqui, né? Que tipo de magia negra é essa?
WPBeginner Support
Em vez de JS, esta técnica usa CSS.
Admin
SiRetu
Obrigado pelo código… Isso é responsivo? Quero dizer, eu quero que o campo de busca seja totalmente exibido no celular. É possível?
Panfi
Not working for me and wonder why
Cassy
Consegui fazer isso funcionar no Genesis, mas meu formulário de busca está na minha barra de navegação e, quando a largura da tela é relativamente pequena, o formulário de busca desce.
Sohan
Funciona!
Muitoooooooo obrigado!
Anur
Não acho que isso funcione no Genesis
Cassy
Consegui fazer funcionar no Genesis. Você tem que mover o search-icon.png para a pasta de imagens do seu tema filho do Genesis. Em seguida, dependendo de onde você colocar seu formulário de busca, o meu está na barra de navegação, então é um pouco diferente, você ajusta o estilo CSS ao seu gosto. Tive que modificar a classe ".genesis-nav-menu .search input" para fazer funcionar.
Laura
Oi Cassy, você pode dar mais informações sobre como você modificou a classe .genesis-nav-menu .search input? Não consigo fazer funcionar. Obrigado!
Maria
Oi! Estou usando o Genesis e não consigo fazer esse efeito funcionar. Alguma dica do porquê?
Anur
sim o mesmo problema estou no genesis com o tema enterprise pro não funciona.
Alguém que tenha solução para fazer isso funcionar no genesis..
Roy
isso é realmente ótimo! É possível fazer o ícone ficar estático à direita enquanto o formulário desliza para a esquerda? Não consigo descobrir!
Joshua Farr
Saudações – Obrigado por este ótimo trecho de código. Tentei inseri-lo no site de um cliente em que estou trabalhando, usando a versão HTML5 do código, coloquei o trecho extra em functions.php e adicionei todo o CSS. Coloquei um ícone de pesquisa e fiz o formulário aparecer como eu queria no site – ele até faz todo o efeito de alternância como desejado – mas quando insiro o texto que quero pesquisar para testar, não consigo enviar a pesquisa para ver os resultados. Estamos usando um tema woocommerce, “Mystile”, que tem um formulário de pesquisa padrão (que funciona quando inserido), mas eu prefiro muito a aparência e a funcionalidade do formulário como mencionado nesta página.
Tentamos colocar o código do formulário de pesquisa woocommerce lado a lado com o código que você forneceu acima, tentamos trocar partes para “mesclar” os dois… mas sem sucesso.
Qualquer recomendação seria extremamente útil.
Obrigado!
-Josh
WPBeginner Support
Pode haver muitas coisas que causam isso, não é possível para nós ajudarmos com problemas de compatibilidade de temas.
Admin
Rajeesh Nair
Agora isso é algo interessante. Embora eu seja apenas um iniciante e eu realmente use a opção de pesquisa que veio padrão com o tema do blog, que é como um pop-up (não exatamente um pop-up, pois é CSS e não javascript) e exibe a barra de pesquisa.
Mas o que eu estou exatamente procurando é como exibir a Pesquisa Google junto com a pesquisa do Blog, como encontrado em blogs populares como ListVerse e outros. Por favor, me guie nisso!
WPBeginner Support
Dê uma olhada em nosso guia sobre como adicionar pesquisa do Google no WordPress.
Admin
adolf witzeling
Outro ótimo tutorial. Vou adicionar isso ao meu site – apenas porque é legal.
alexisnicholson
O código parece fabuloso, aprecio seus esforços, com certeza vou tentar este para o meu projeto word press.
Codingbrains
Shahraar Khan
Uma demonstração seria útil.. Além disso, o que significa o uso do atributo role=\"search\" na tag form, para que serve o atributo \"role\"?
Susan Silver
Eu estava procurando um tutorial simples sobre isso. Obrigado! Você já fez algum sobre os menus deslizantes como os do aplicativo móvel do Facebook? Esses menus estão se tornando muito populares, até mesmo para aplicativos de desktop.
WPBeginner Support
Na verdade, temos, confira como adicionar um menu de painel deslizante no WordPress.
Admin