Você já viu o ícone de alternância de pesquisa em muitos sites populares? Dê uma olhada no nosso projeto irmão List25 para ver um exemplo. A idéia é exibir um ícone de pesquisa simples e, quando o usuário clica nele, os formulários de pesquisa deslizam para fora, também conhecido como efeito de alternância. É um efeito puro que também economiza espaço e permite que os usuários se concentrem no conteúdo. Sem mencionar, isso é ideal para tópicos que respondem a dispositivos móveis. Neste artigo, mostraremos como adicionar um efeito de alternância de pesquisa nos Temas do WordPress.
Nota: Este tutorial é para usuários intermediários com conhecimento prático de tags de modelo do WordPress, HTML e CSS. Usuários de nível iniciante são incentivados a praticar primeiro no servidor local.
Mostrar formulário de pesquisa do WordPress
O WordPress adiciona classes CSS padrão ao HTML gerado por várias tags de modelo em um tema. Use o modelo de tag de tema do WordPress para exibir o formulário de pesquisa. Você pode gerar dois formulários de pesquisa diferentes, um para temas HTML4 e outro para temas compatíveis com HTML5. Se o seu tema tiver a linha add_theme_support ('html5', matriz ('formulário de pesquisa')) no arquivo functions.php, essa tag de modelo gerará um formulário de pesquisa em HTML5. Caso contrário, ele irá gerar o formulário de pesquisa HTML4.
Outra maneira de descobrir qual formulário seu tópico gera é examinando o código-fonte do formulário de pesquisa.
Esta é a tag de modelo de formulário get_search_form () que será exibida quando o seu tema não tiver suporte para HTML5:
E é assim que ele será gerado para um tema com suporte a HTML5.
Para fins deste tutorial, usaremos o formulário de pesquisa HTML5. Se o seu tema gerar um formulário de pesquisa HTML4, adicione esta linha de código no arquivo functions.php do seu tema:
add_theme_support ('html5', array ('formulário de pesquisa'));
Depois de garantir que seu formulário de pesquisa gere um formulário HTML5, a próxima etapa é colocar o formulário de pesquisa onde você deseja exibi-lo com o efeito de alternância.
Adicionar efeito de alternância ao formulário de pesquisa do WordPress
A primeira coisa que você precisará é de um ícone de pesquisa. O tema padrão Twenty Treze no WordPress vem com um pequeno ícone muito bom, e nós o usaremos em nosso tutorial. No entanto, sinta-se à vontade para criar o seu no Photoshop ou fazer o download de um da web. Apenas certifique-se de que o arquivo tenha o nome search-icon.png.
Agora você precisa carregar este ícone de pesquisa na pasta de imagens do seu tema. Conecte-se ao seu site usando um cliente FTP como o Filezilla e abra o diretório de temas.
Agora, este é o passo final e mais crucial. Você precisa adicionar este CSS à folha de estilos do seu tema:
.site-header .search-form {
posição: absoluta;
direita: 200 px;
superior: 200 px;
}
.site-header .search-field {
cor de fundo: transparente;
imagem de fundo: url (images / search-icon.png);
posição de fundo: centro de 5 px;
repetição em segundo plano: sem repetição;
tamanho do plano de fundo: 24 px 24 px;
borda: nenhuma;
cursor: ponteiro;
altura: 37px;
margem: 3px 0;
preenchimento: 0 0 0 34px;
posição: relativa;
-webkit-transição: largura de 400ms, facilidade de fundo de 400ms;
transição: largura 400ms facilidade, fundo 400ms facilidade;
largura: 0;
}
.site-header .search-field: focus {
cor de fundo: #fff;
borda: sólido 2px # c3c0ab;
cursor: texto;
esboço: 0;
largura: 230px;
}
.Formulário de pesquisa
.search-submit {
Mostrar nenhum;
}
O importante a ter em mente sobre esse CSS são os efeitos de transição do CSS3 que nos permitem criar facilmente o efeito de alternância. Observe também que você ainda precisará ajustar a posição do ícone e do formulário de pesquisa de acordo com o design do tema.
Esperamos que este artigo tenha ajudado a adicionar um efeito de alternância de pesquisa ao seu tema WordPress. O que você acha do formulário de alternância de pesquisa? Estamos vendo mais e mais sites usando esse efeito. Deixe seus comentários e perguntas nos comentários abaixo ou participe da conversa no Google+.
