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 - #12 Pesquisa de Posts

22/03/2018

Na vídeo-aula de hoje aprenderemos como realizar uma busca simples, porém personalizada no nosso WordPress. Para tanto, criaremos uma página de busca e associaremos a um arquivo page_busca.php e posteriormente implementaremos nosso código php para realizar a busca.

Criando e Associando uma Página de Busca no Wordpress

O primeiro passo é ir ao nosso painel localhost/wp-admin, inserir nosso usuário e senha e acessar a aba páginas. Neste local criaremos uma página Busca atentando para que o endereço slug seja http://localhost/busca

Ao mesmo tempo, criaremos na raiz do nosso template tyr o arquivo page_busca.php. Esse arquivo será responsável por associar nossa nova página criada as definições que setaremos no arquivo php. O código do arquivo page_busca.php será o seguinte:

<?php /* Template Name: Busca Simples */  ?>
<?php get_header(); ?>
<?php
$CampoBusca='%'.$_GET['CampoBusca'].'%';
$Resultado=$wpdb->get_results("select * from wp_posts where (post_title like '$CampoBusca' or post_content like '$CampoBusca') and post_status='publish' and post_type='post'");
foreach($Resultado as $post){
    setup_postdata($post);
    the_title();
    the_content();
}
?>

No código acima recebemos a variável CampoBusca do get do nosso formulário e fizemos um select buscando no título e no conteúdo dos posts a palavra aproximada (%). Setamos na query também que a pesquisa buscará apenas posts publicados.

Nosso formulário de busca

Nosso formulário de busca no HTML5 seguirá o método get e será implementado da seguinte maneira:

<div class="Busca">
    <form action="busca" name="formsearch" id="formsearch" method="get">
        <input type="text" id="CampoBusca" name="CampoBusca" placeholder="Encontre a sua natureza!">
        <input type="submit" value="Buscar">
    </form>
</div>

Habilitando Imagem Destacado no Post do Wordpress

Habilitaremos também a opção de imagem destacada no nosso painel de posts. Para isso, inseriremos um código simples no nosso arquivo functions.php

#Adicionar Imagem Destacada
add_theme_support("post-thumbnails");

Após isso apertaremos F5 e perceberemos que do lado direito do nosso painel de posts aparecerá a opção de imagem destacada. Mais pra frente trabalharemos com ela.

Retirando background das páginas internas do WP

No nosso exemplo, queremos que o fundo permaneça apenas na página inicial, para tanto, no nosso arquivo header definiremos a body class apenas para a index, da seguinte forma:

<body <?php if(is_home() || is_front_page()){body_class();} ?>>

Na próxima aula estilizaremos nosso post.

Receba as aulas da Webdesign em Foco em Seu Email
Suporte Webdesign em Foco

Posts Relacionados

Criando um site do zero em WordPress - Aula 11 - Fatiando o layout III
Nessa vídeo-aula, finalizaremos a disposição do nosso layout utilizando HTML5 e CSS.
Saiba mais!
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!
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!