Um botão de pesquisa limpo e deslizante pode instantaneamente fazer seu site WordPress parecer elegante e moderno. Em vez de exibir uma barra de pesquisa completa em seu cabeçalho ou escondê-la completamente, um efeito de alternância mantém seu design organizado, ao mesmo tempo que facilita o acesso à pesquisa.
Vimos esse pequeno detalhe de interface do usuário fazer uma grande diferença, dando aos sites uma aparência mais polida e profissional sem adicionar desordem.
A melhor parte? Existem maneiras de fazer isso de forma inteligente e eficiente.
Neste tutorial, mostraremos exatamente como adicionar um efeito de alternância de pesquisa suave e deslizante no WordPress. Se você administra um blog, site de negócios ou loja online, esta atualização ajudará a melhorar sua experiência de usuário com um toque simples e elegante. 🎨
O que é o Efeito de Alternância de Pesquisa no WordPress?
O efeito de alternância de pesquisa é uma técnica de design web que permite, em vez de exibir um formulário de pesquisa, mostrar um ícone de pesquisa. Quando um usuário clica nele, o formulário de pesquisa aparece com uma animação deslizante.
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:
- Adicionando um Efeito de Alternância de Pesquisa no WordPress
- Solução de Problemas do Efeito de Alternância do Formulário de Pesquisa
- Dica Bônus: Adicione uma Pesquisa WordPress Melhor para o Seu Site
- FAQ: Adicionando um Efeito de Alternância de Pesquisa no WordPress
- Mais Guias para Melhorar Sua Pesquisa no WordPress
💡 Dica de especialista: Este tutorial é mais adequado para usuários intermediários e avançados do WordPress, pois requer algum conhecimento básico de HTML / CSS.
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 Outros Temas 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ê desejará ir para Aparência » Widgets no seu painel do WordPress. Em seguida, você pode adicionar o bloco/widget 'Pesquisar' à 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 criar uma imagem PNG transparente com dimensões de no máximo 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, você desejará clicar no botão ‘Copiar URL para a área de transferência’ e colar 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.
Então, vamos instalar e ativar o plugin gratuito WPCode. Se precisar de ajuda, você pode ver nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, basta visitar a página Trechos de Código » + Adicionar Trecho no seu painel de administração do WordPress.
Na próxima tela, você verá a Biblioteca de Trechos do WPCode.
Passe o mouse sobre a opção ‘Adicionar Seu Código Personalizado (Novo Trecho)’ na biblioteca e clique no botão ‘Adicionar Trecho Personalizado’ quando ele aparecer.
Depois disso, uma lista de tipos de código aparecerá na tela. Você precisa selecionar a opção ‘Trecho de HTML’ para este tutorial.
Isso ocorre 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 type="text/css">
.wp-block-search__inside-wrapper
.wp-block-search__input {
background-color: transparent;
background-image: url(/url/to/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
}
.wp-block-search__inside-wrapper
.wp-block-search__input:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form
.search-submit {
display:none;
}
</style>
⚠️ Importante: Não se esqueça de substituir /url/to/search-icon.png pelo URL da imagem que você copiou anteriormente.
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, poderá ver seu formulário de pesquisa com o efeito de alternância em ação.
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.
Agora, você pode modificar o código abaixo e usar essas classes CSS em vez disso.
Aqui está um exemplo:
<style type="text/css">
.search-wrap input.s {
background-color: transparent;
background-image: url(/url/to/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
}
.search-wrap input.s:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form
.search-submit {
display:none;
}
</style>
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 sobre ele.
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 alternador é 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 Adicionar uma Barra de Pesquisa ao Menu do WordPress
- 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 Criar um Diretório de Membros Pesquisável no WordPress
- Como Criar um Banco de Dados Pesquisável no WordPress
- Como Excluir Páginas dos Resultados de Pesquisa do WordPress
- Como Adicionar Capacidade de Pesquisa por Voz ao Seu Site WordPress
- Melhores Plugins de Busca para Usuários do 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