Criando um site do zero com WordPress - #13 Estilizando posts da pesquisa

Neste tutorial aprenderemos como estilizar o post proveniente de uma pesquisa. Neste intuito, utilizaremos HTML5, CSS e as funções the_post_thumbnail e wp_get_attachment_image_src.

Usar the_post_thumbnail ou wp_get_attachment_image_src?

Sempre que possível, o ideal é utilizar a função wp_get_attachment_image_src, pois ela nos fornece maior liberdade para trabalharmos com os dados da imagem. Abaixo demonstro a utilização das duas funções:

the_post_thumbnail('medium');
$MediumImage=wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'medium');

Criando as divs que receberão os posts da pesquisa

Abaixo demonstro o código das divs que receberão os posts da pesquisa:

<?php
foreach($Resultado as $post){
    setup_postdata($post);
    $MediumImage=wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'medium');
?>
    <a href="<?php the_permalink(); ?>">
        <div class="Post" style="background: url('<?php echo $MediumImage[0]; ?>') center center no-repeat;">
            <div class="PostTitle"><?php the_title(); ?></div>
        </div>
    </a>
<?php
}
?>

Repare que a div acima está dentro de um loop foreach e o style background dela vai receber a nossa variável $MediumImage que contém o atribuito thumbnail.

Estilizando no CSS

De forma responsiva, estilizaremos nossa folha de estilo da seguinte maneira:

@media only screen and (max-width: 480px){
    .Post{position:relative; float:left; width: 100%; height: 180px; background-size: cover!important; cursor: pointer; border: 2px solid #fff;}
        .PostTitle{position: absolute; bottom: 0; width: 100%; padding: 10px; background: rgba(0,0,0,0.6); font-weight: bold; color:#fff; text-align: center;}
}

@media only screen and (min-width: 481px) and (max-width: 768px){
    .Post{position:relative; float:left; width: 33.33333%; height: 180px; background-size: cover!important; cursor: pointer; border: 2px solid #fff;}
        .PostTitle{position: absolute; bottom: 0; width: 100%; padding: 10px; background: rgba(0,0,0,0.6); font-weight: bold; color:#fff; text-align: center;}
}

@media only screen and (min-width: 769px) and (max-width: 1199px){
    .Post{position:relative; float:left; width: 20%; height: 180px; background-size: cover!important; cursor: pointer; border: 2px solid #fff;}
        .Post:hover .PostTitle{visibility: visible; opacity: 1; transition: 1s ease;}
        .PostTitle{position: absolute; visibility: hidden; opacity: 0; bottom: 0; width: 100%; padding: 10px; background: rgba(0,0,0,0.6); font-weight: bold; color:#fff; text-align: center;}
}

@media only screen and (min-width: 1200px){
    .Post{position:relative; float:left; width: 20%; height: 200px; background-size: cover!important; cursor: pointer; border: 2px solid #fff;}
        .Post:hover .PostTitle{visibility: visible; opacity: 1; transition: 1s ease;}
        .PostTitle{position: absolute; visibility: hidden; opacity: 0; bottom: 0; width: 100%; padding: 10px; background: rgba(0,0,0,0.6); font-weight: bold; color:#fff; text-align: center;}
}