Home
Button Mobile Webdesign em Foco
Newsletter Webdesign em Foco
Support Webdesign em Foco
Contribuition Webdesign em Foco
Doe para a Webdesign em Foco
Suporte da Webdesign em Foco
Fechar

Criando um site do zero com WordPress - #14 Busca com filtros no WordPress

22/03/2018

Nesta 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;}
Receba as aulas da Webdesign em Foco em Seu Email
Suporte Webdesign em Foco

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.
Saiba mais!
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.
Saiba mais!
WordPress do Zero
Neste curso aprenderemos como criar um site no CMS WordPress do zero, começando pela instalação, criação do tema e publicação no ar.
Saiba mais!