18 de mar de 2015

Como fazer posts destacados responsivos no WordPress

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

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:

Ver Demonstração

<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:

  1. Por seleção do último post de uma ou várias categorias específicas;
  2. 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?

Saiba mais…