Ter uma área de posts em destaque é maravilhosa para chamar o seu leitor à assuntos que você acredita que merece aquele olhar diferente. Vários blogs adotam esta técnica pois, além de direcionar o leitor aos melhores posts, também incentiva o leitor a navegar mais no blog. O tutorial de hoje é sobre como fazer estes posts destacados de uma forma fácil (e responsiva!), onde você vai ter total autonomia para selecionar qual post irá para o destaque no topo do blog. E neste tutorial também explicarei várias coisas sobre responsividade e teorias de proporção para deixar tudo lindo em qualquer dispositivo!
O tutorial é grandinho, mas garanto que vale muito a pena! ♥
Visual dos posts em destaque que será ensinado neste tutorial // Fonte das imagens: 001, 002, 003, 004
Introdução
Antes de mais nada, é bom saber o que você está lidando por aqui. O CSS é responsivo, ou seja, ele vai mudar de acordo com a largura do dispositivo para adequar. Na medida que ele for diminuindo, o número de posts também diminui, e os recursos de mouseover são eliminados, já que no celular não temos um pouse para pousar em cima do elemento, mas sim um dedo que obrigatoriamente deverá dar um “tap” — um clique — para que a ação aconteça. Além disso, vamos pensar também que estes são uma espécie de lista, onde cada um é um item de lista. Veja abaixo a demonstração que fiz para você visualizar, bem como é a estrutura do html abaixo:
<div class="wrap-posts-destaque"> <div class="posts-destaque"> <ul> <li> <div class="mostra-post"> <div class="thumb"><img src="http://imagem-thumbnail.jpg" alt=""></div> <a href="http://link"> <h4>Titulo post <span>Data</span></h4> </a> </div> </li> </ul> </div> </div>
O código PHP do posts em destaque pode ser personalizado em duas formas:
- Por seleção do último post de uma ou várias categorias específicas;
- Por posts que receberam mais visualizações.
O código para estes tipos de posts no WordPress é chamado de loop. Isso significa que este recebe uma atualização constante e sempre de forma repetitiva, como na área de posts nativa em que aparece nossas postagens do blog. O que vamos fazer em nosso tema é fazer uma nova chamada de loop para personalizar e realizar uma tarefa específica. O loop que usaremos no tutorial de hoje é o primeiro item da lista: seleção do último post de uma ou várias categorias específicas.
Os códigos podem parecer um pouco complicados, mas prometo que o deixarei o mais explicadinho possível para não houver confusão hehe. Vamos botar a mão na massa agora?
