Customizando o campo de busca (search form) no WordPress
É muito fácil customizar a forma de apresentação do campo de busca (search form) no WordPress.
Primeiro, para chamar o campo de busca no seu tema de WordPress você usa o código:
<?php get_search_form(); ?>Caso você não tenha no seu tema um arquivo chamado de searchform.php, o WordPress por padrão vai apresentar o template do campo de busca dessa forma:
<form role="search" method="get" id="searchform" action="http://www.example.com/" >
<div><label for="s">Search for:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>Para mudar esse template você pode fazer de 2 formas. Primeiro, você pode criar um arquivo searchform.php e adicionar o código abaixo:
/**
Template Name: Search Form
**/
<form action="/" method="get" accept-charset="utf-8" id="searchform" role="search">
<div>
<label for="s">Search for:</label>
<input type="text" name="s" id="s" value="<?php the_search_query(); ?>" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>E então é só editar da maneira que desejar o HTML e o CSS.
Outra maneira é criar uma função dentro do arquivo functions.php no seu tema. Dentro dele adicione o código:
function my_search_form($form) {
$form = '<form method="get" id="searchform" action="' . get_option('home') . '/" >
<div><label for="s">' . __('Search for:') . '</label>
<input type="text" value="' . attribute_escape(apply_filters('the_search_query', get_search_query())) . '" name="s" id="s" />
<input type="submit" id="searchsubmit" value="'.attribute_escape(__('Search')).'" />
</div>
</form>';
return $form;
}Para chamar a função que você criou no seu tema, em vez do get_search_form(), você precisa usar o seguinte código:
<?php add_filter('get_search_form', 'my_search_form'); ?>* Nota: o nome my_search_form tem de ser o mesmo nome da função que você criou no arquivo functions.php.
Ruan Mér
Trabalho na área de desenvolvimento web a mais de 5 anos, especificamente com diagramação de interface web (front-end), usando as tecnologias xHTML, CSS, javascript com a biblioteca jQuery e a criação de sites com WordPress. Ver portfólio >>
Parabéns pela iniciativa!
Eu usei o código do artigo mas quando clico no botão “buscar” ele mostra a home e não o resultado da busca. Testei das 3 maneiras e em todas elas é o mesmo problema: o resultado da busca não aparece. Sabe me dizer porque?? Obrigada
vc tem criado uma search.php?? precisa dela caso o layout da busca seja diferente ao que vc usou na index.php
Ruan, muito bem explicado seu artigo, porém encontrei um problema. O mesmo nao funciona no firefox. Voce sabe o que pode ser?
Obrigado!
Amigo, criei um tema.
Ai jogo a widgets de search na sidebar, mas ela fica sem cor sem formatação nenhuma. Como faço pra estilizar com o css?/
Tem como me ajudar?
Agraço desde já
olá muito boa suas dicas ,parabéns
eu gostaria de saber como posso criar um link para contato usando e-mail como criar um link é simples o meu problema é como fazer esse link levar para um formulario de contato ?? pode me dar uma dica
Valeu!
Ok, coloquei a function mas e o outro código pra chamar a função eu coloco onde? Onde eu quero que apareça o formulário, como por ex. na sidebar.php? xx
Abre o sidebar.php, e onde você quer que fique o formulário cole o código abaixo.
Bom dia
preciso de ajuda para fazer o formulario de busca interna abaixo funcionar, alguem poderia me ajudar? Eu estava acompanhando algumas video aulas mas o professor parou de postar e não ensinou a configurar esse formulario. A unica coisa que tenho é esse codigo do formulario de busca no meu header.
Aguardo
show de bola!!! parabens pela iniciativa…..
Boa Noite.
Estou com um problema num form poderia me ajudar?
Tenho este codigo form.
Alguém pra dar uma força?
Estou mexendo em um tema do wordpress e gostaria de dar uma personalizada no form dele.
Tenho este codigo:
<input name="s" type="text" id="s" tabindex="1" class="editbox_search" style="” value=”” onfocus=”if (this.value == ”) {this.value = ”;}” onblur=”if (this.value == ”) {this.value = ”;}” />
Este codigo busca tudo no site, mais gostaria de duplica-lo e fazer com ele busque apenas por cidade.
Tipo este codigo vai buscar o produto e o outro campo buscar a cidade desejada.
Poderia me ajudar amigo?
Valew…
E se eu quiser ter outros campos para filtro da busca? Ex: buscar por nome e por categoria… com alguma informação contida nos custom fields….???
Pessoal estou com uma dificuldade, segue um exemplo abaixo
Tenho um Post type ( Lojas )
Nele cadastrei um Post com o Titulo
Casas Bahia
Tenho o Formulário que busca no post type especifico abaixo.
<form role="search" method="get" id="searchform" action="”>
Search for:
o que quero é que só me traga o resultado se eu digitar Casas Bahia, e que caso eu digitar apenas casas ou digitar Bahia NÂO me traga nenhum post é possível?
Boa tarde.
Tem como faze a busca nos títulos e nos autores?
Poderia me ajudar?
Obrigado!
Meu campo de busca no wordpress simplesmente parou de funcionar, tudo que pesquisa não encontra resultados, descobri que não estava funcionando logo apos um usuario me informar, não fiz nenhuma alteração, meu wordpress e padrão e atualiza sozinho. sabe o que pode ser ? tem alguma dica ?
Olá.
Como deveria ficar um campo de busca similar ao da home do site viva real?
https://www.vivareal.com.br/
O meu só tem uma area de texto e no viva real tem 3:
2 menus suspensose 1 área de texto que autocompleta
Transação – tipo de imóveis – localização
Meu código está assim:
<form method="get" action="” class=”searchoneform”>
<input type="hidden" value="” name=”page_id”>
<input type="text" value="" class="form-control" name="specification-search" placeholder="”>
Alguém pode me ajudar como eu poderia inserir mais 2 áreas de pesquisa na mesma linha, ao lado da primeira e antes do botão Submit?
Ficando assim:
Menu suspenso – Menu suspenso – Text – Button
Muito obrigado, funcionou perfeitamente!
Como eu faço pra ele exibir nos resultados o seguinte texto?
FORAM ENCONTRADOS 15 RESULTADOS PARA A SUA BUSCA
Gostei muito do que li aqui no seu site.Estou estudando o assunto,Mas quero agradecer por que seu texto foi muito valido. Obrigado :)