Criando um site do zero com WordPress - #14 Busca com filtros no WordPress
22/03/2018Nesta aula realizaremos o início da configuração da nossa busca com filtro no WordPress. Para tanto, vamos criar algumas categorias aleatórias no nosso wp-admin e vamos retorná-las automaticamente. Vamos também, estilizar uma barrra abaixo do menu que será responsável pelo filtro.
Listando as categorias automáticamente.
Para listar nossas categorias automaticamente, realizaremos uma busca na tabela wp_terms do WP e vamos inserir a lista nos nossos options do select do formulário.
<div class="BuscaFiltro">
<form name="FiltroBusca" id="FiltroBusca" action="<?php echo site_url().'/controllerFiltro'; ?>" method="post">
<input type="hidden" id="CampoBuscaFiltro" name="CampoBuscaFiltro" value="<?php echo $_GET['CampoBusca']; ?>">
<select name="Categoria" id="Categoria" required>
<option value="">Categoria</option>
<?php
$BFetch=$wpdb->get_results("select * from wp_terms where term_id >=4");
foreach($BFetch as $Fetch){
echo "<option value='$Fetch->term_id'>$Fetch->name</option>";
}
?>
</select>
<input type="submit" value="Filtrar">
</form>
</div>
Estilizando nossa barra de filtros
Vamos também estilizar nossa barra de filtro com o CSS.
.BuscaFiltro{float:left; width: 100%; background: #333; color:#fff; font-weight: bold; text-align: center; padding: 10px 5%;}
.BuscaFiltro input[type='submit']{display:inline-block; width: 20%; height: 40px; font-size: 17px; color:#FFF; font-weight: bold; text-align: center; border:0; cursor:pointer; background: #83AA4B;}
.BuscaFiltro select{display:inline-block; width: 30%; height: 40px; vertical-align: top;}
Posts Relacionados
Criando um site do zero com WordPress - #13 Estilizando posts da pesquisa
Nesse tutorial aprenderemos como estilizar os posts após uma pesquisa no WordPress. Para isso, utilizaremos HTML5 e CSS.
Criando um site do zero com WordPress - #15 Busca com filtros no WordPress II
Nessa vídeo-aula vamos implementar o PHP que irá realizar o filtro de posts no banco de dados. Iremos também linkar o jQuery no WP.