Como colocar pesquisa no menu no WordPress
Sempre defendi aqui no Escola Sites, sites pouco poluídos, chamados minimalistas, inclusive escrevi um artigo mostrando sites para a inspiração, que você pode conferir aqui: 10 Excelentes sites minimalistas. Em um blog, onde você precisa mostrar muitos conteúdos ao mesmo tempo, a tarefa de deixar o template o mais simples possível para não confundir o usuário e o deixar mais a vontade pode parecer difícil.
Hoje mostrarei como aproveitar o espaço em seu menu horizontal WordPress para incluir a caixa de pesquisa e economizar espaço na sidebar. Com esse espaço disponível você pode inserir mais publicidade e aumentar os ganhos, ou mesmo deixar o site mais limpo como nós fizemos.
A IMPORTÂNCIA DA PESQUISA EM SEU SITE
Ter uma caixa de pesquisa em seu site é de suma importância, pois faz com que o usuário que já está acessando algum conteúdo em seu site, busque mais informação em seu próprio site ao invés de buscar o que quer em outro site. Além disso pode ser mais uma oportunidade do visitante lhe gerar alguma renda, já que ao pesquisar ele mostra interesse em “produtos”, logo é uma ótima hora para inserir alguma publicidade como o ADSENSE.
A IMPORTÂNCIA DE TER UM SITE LIMPO
Alguns amigos blogueiros fazem de seu site um verdadeiro carnaval, são tantas informações que o usuário fica na verdade perdido, comparo isso a um leitor que ao ler um livro, destaca com um marca-texto todas as linhas da página, afinal ele está destacando tudo, ou deixando tudo ao mesmo nível e tornando sua leitura ainda mais confusa?
Ao colocar publicidade, pesquisa, informações ao usuário, tudo junto em sua sidebar, ela acaba virando uma arvore de natal que você vai ornamentando conforme o tempo passa.
VAMOS DEIXAR NOSSO BLOG UM POUCO MAIS LIMPO
Digo que já cai no erro de deixar muitas coisas na sidebar aqui do Escola Sites, e busco constantemente possibilidades de melhorar isso e achei mais uma forma. Confesso que pensava ser a tarefa um pouco mais difícil mas foi um tanto quanto simples, como vou mostrar pra vocês agora.
Para baixar todos os códigos, CLIQUE AQUI
Código inserido no functions.php
{code type=php}
add_filter(‘wp_nav_menu_items’,’search_box_function’, 10, 2);
function search_box_function( $nav, $args ) {
if( $args->theme_location == ‘main-menu’ )
return $nav. ‘
‘;
return $nav;
}
{/code}
O que você precisa fazer é estilizar um pouco para que sua caixa de pesquisa não fique tão simples, vou mostrar aqui o CSS aplicado no Escola Sites, mas acredito que para outro blog seja preciso alguma alteração.
Style.css
{code type=css}
.menu .search-input {
width: 211px;
padding: 8px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgb(204, 204, 204) 0px 0px 8px 0px inset;
box-shadow: rgb(204, 204, 204) 0px 0px 8px 0px inset;
-moz-box-shadow: rgb(204, 204, 204) 0px 0px 8px 0px inset;
border: 1px solid #CCC;
font-size: 12px;
height: 15px;
border-image: initial;
float: left;
margin-top: -10px 6px 0px 42px;
}
{/code}
