Este tutorial é sobre como fazer estes posts destacados de uma forma fácil (e responsiva!), do qual você terá total autonomia para escolher qual post irá para a área destacada no seu blog. Ter uma área de posts em destaque é um dos artifícios para chamar o seu leitor à artigos que você crê que merece aquele olhar com mais cuidado. Vários blogs utilizam este recurso, pois, além de orientar o leitor aos melhores posts, também o incentiva a navegar mais. Neste tutorial você também verá vários macetes e dicas sobre responsividade e teorias de proporção para deixar tudo lindo em qualquer dispositivo!
O tutorial é um pouco grande, mas garanto que vale a pena! ♥
Visual dos posts em destaque que será ensinado neste tutorial // Fonte das imagens: 001, 002, 003, 004Introdução
Antes de tudo, é bom saber com o que você vai lidar. O CSS é responsivo, ou seja, ele vai se modificar de acordo com a largura do dispositivo. Na medida que a tela for diminuindo, o número de posts também diminuirá, e os recursos de mouseover (que é o descanso do mouse em cima de um item) são eliminados, pois no celular e tablets não temos algo que simule o hover de um mouse, mas sim um dedo que obrigatoriamente deverá dar um "tap" para que a ação aconteça. Além disso, vamos pensar também que a área destes posts destacados são uma espécie de lista, onde cada post é um item desta 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 poderá ser personalizado em duas formas: a primeira por seleção do último post de uma categoria, e segundo por várias categorias específicas.
O tipo de código para estes tipos de posts no WordPress é chamado de loop. Isso quer dizer que este local onde o código vai atuar receberá atualizações constantes e sempre de forma repetitiva, ou seja, a área de posts. O que você irá fazer em seu tema é uma nova chamada de loop personalizada para realizar uma tarefa específica.
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?
1) O CSS
Já que possuímos uma estrutura HTML pronta (vida acima), é hora de estiliza-la para fazer os efeitos que queremos. O código é grandinho porque eu deixei bem destrinchado (então, não me mate, please, haha). Cada detalhe está sendo explicado no código, então fique relax. Melhor explicar do que entregar o código e pronto, néah? Entendendo o código de cabo a rabo você poderá edita-lo da melhor forma para você! Segue abaixo todo o código base de CSS:
/* *****************************************
* POSTS DESTACADOS
* madlyluv.com
* *************************************** */
/*div que engloba a lista de posts*/
.wrap-posts-destaque {
max-width: 1000px; /*largura máxima definida (aplique aqui a largura que seu blog possui)*/
width: 100%; /*o que deteca largura dos despositivos menores que 1000px*/
margin: 20px auto; /*margens 20px para cima e para baixo, onde o "auto" realiza a centralização*/
}
/*definindo a div*/
.posts-destaque {
width: 100%;
height: auto;
position: relative;
margin: 0 auto
}
/*zerando definições padrões da lista de posts*/
.posts-destaque ul {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
/* clearfix - evitar que a lista ou itens fora dela flutuem ou se sobrepõem */
.posts-destaque ul:before,
.posts-destaque ul:after {
display: table;
content: " ";
}
.posts-destaque ul:after {
clear: both;
}
/*estilizando o item da lista por porcentagem*/
.posts-destaque ul li {
width: 25%;
float: left;
margin: 0;
padding: 0;
}
/*div que mostra o post*/
.posts-destaque ul li .mostra-post {
width: 100%;
height: 0; /*sempre mantenha altura zerada*/
margin: 0 auto;
padding-bottom: 65%; /*o padding-bottom que definirá altura, e isso faz com que o retângulo seja sempre porporcional*/
background: #fff;
overflow: hidden;
position: relative;
display: block;
}
/*definindo posicao do thumbnail*/
.posts-destaque ul li .mostra-post .thumb {
position: absolute;
top: 0;
left: 0
}
/*atribuindo valores à imagem*/
.posts-destaque ul li .mostra-post .thumb img {
width: 100%;
height: auto;
margin: 0;
display: block;
-webkit-transition: all 0.3s ease; /*faz a animação*/
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
opacity: .87; /*opacidade inicial*/
filter: alpha(opacity=87); /*opacidade inicial*/
}
/*definindo posicao de link (sempre na largura e altura do retangulo)*/
.posts-destaque ul li .mostra-post a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}
/*definindo posicao do titulo do post*/
.posts-destaque ul li .mostra-post a h4 {
font-size: 18px;
line-height: 14px;
color: #000;
text-align: center;
font-style: normal;
font-weight: bold;
width: 100%;
text-shadow: 1px 1px 2px #fff;
margin: 0;
vertical-align: middle;
position: absolute;
top: -50%; /*com top negativo o titulo fica oculto*/
-webkit-transition: all 0.3s ease; /*faz a animação*/
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
-ms-transform: translateY(-50%); /*o transform irá alinhar o titulo sempre ao centro*/
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
/*definindo posicao da data */
.posts-destaque ul li .mostra-post a h4 span {
font-size: 10px;
color: #666;
font-style: italic;
display: block;
margin-top: 5px;
font-weight: normal;
text-align: center;
}
/*tracinhos ao lado da data*/
.posts-destaque ul li .mostra-post a h4 span:before,
.posts-destaque ul li .mostra-post a h4 span:after {
content: "-";
padding: 0 5px;
}
/*NO HOVER DO <LI>, o thumb aumenta a opacidade*/
.posts-destaque ul li:hover .mostra-post .thumb img {
opacity: 0.2; /*opacidade final*/
filter: alpha(opacity=20); /*opacidade final*/
}
/*NO HOVER DO <LI>, o titulo do post aparece sempre centralizado*/
.posts-destaque ul li:hover .mostra-post a h4 {
top: 50%;
}
/*
* AREA RESPONSIVA DO POST EM DESTAQUE
*/
/*para dispositos com largura máxima de 620px*/
@media (max-width:620px) {
/*em vez de 4, transforma-se em 3 itens =>> 100% / 3 = 33.33% */
.posts-destaque ul li {
width: 33.33%;
}
/*tirando efeitos de hover e animação e aparecendo titulo desde o inicio*/
.posts-destaque ul li .mostra-post .thumb img {
opacity: 0.2;
filter: alpha(opacity=20);
}
.posts-destaque ul li .mostra-post a h4 {
top: 50%;
}
/*ultimo post é oculto*/
.posts-destaque ul li:nth-of-type(4) {
display: none;
}
}
/*para dispositos com largura máxima de 420px*/
@media (max-width:420px) {
.posts-destaque ul li {
width: 33.33%;
}
/*ultimo post adicionado (que aparece em primeiro da lista), é destacado como principal*/
.posts-destaque ul li:nth-of-type(1) {
width: 100%;
}
/*dois outros posts ficam abaixo do primeiro da lista */
.posts-destaque ul li:nth-of-type(2),
.posts-destaque ul li:nth-of-type(3) {
width: 50%;
}
.posts-destaque ul li:nth-of-type(4) {
display: none;
}
}Salve este código na folha de estilo padrão de seu layout, que normalmente chama-se style.css.
Trabalhando com responsivo
Quando trabalhamos responsividade, a maioria dos itens são tratados com tamanhos em escala de porcentagem, então não podemos fugir da matemática básica da famosa regrinha de três que vimos na escola. Imagina a largura total de seu blog (uma extremidade do post até a outra ponta da sidebar) seja igual a 1000px. Isso seria equivalente a 100%. Imaginou? Agora, vamos imaginar que queremos 4 posts em destaque que irão ocupar acima da área de posts e sidebar. Desta forma, vamos dividir o 100% por 4, e isso resultará no valor de 25%. Por isso que no item de lista <li> assume esta configuração:
.posts-destaque ul li {
width: 25%;
float: left;
margin: 0;
padding: 0;
}Mantendo a proporção dos retângulos
Não é fácil manter a proporcionalidade de um item no CSS responsivo quando ele não é um quadrado ou um círculo. A propriedade height (altura) é bastante relativa ao conteúdo da <div> que ela está englobando ao invés de se relacionar ao width (largura) do mesmo para conseguirmos uma proporção. Infelizmente isso é uma falha do CSS que conseguimos resolver só com trambicagem, haha. Para nos livrarmos deste problema nós zaramos a altura. Com a altura zerada, utilizamos a propriedade padding-bottom (que seria é margem interna de uma <div>, que é o espaço entre o conteúdo de fato e a borda), pois esta propriedade consegue captar a largura de nosso <div> e com isso conseguimos fazer uma relação de proporção. WHAT? Não entendi, Ana!!! Me dê um exemplo!
Vamos imaginar um retângulo do qual a sua altura queremos que seja exatamente metade do valor de eu comprimento. Como fazemos isso no CSS? Simples: qual é metade de 100? 50, certo? Então seu padding-bottom é igual a 50%, pois ele será exatamente a metade da largura da <div>. É mais ou menos o que aconteceu com nosso caso do formato de nossos thumbnails. Eu coloquei padding-bottom: 65%; para seguirmos um formato de uma foto em paisagem. Veja só:
.posts-destaque ul li .mostra-post {
width: 100%;
height: 0; /*sempre mantenha altura zerada*/
margin: 0 auto;
padding-bottom: 65%; /*o padding-bottom que definirá altura, e isso faz com que o retângulo seja sempre proporcional*/
background: #fff;
overflow: hidden;
position: relative;
display: block;
}Como saberei qual será a proporção em outros casos, Ana? Você poderá fazer pela regrinha de 3 mesmo, na qual a proporção de largura em pixels da foto é igual 100%, onde a altura em pixels será igual a x. Pelo seu editor de imagem você consegue pegar estes valores e fazer a conta. É só pegar uma imagem padrão da qual você costuma usar bastante em seus posts, pois o corte da imagem será feito no código PHP mesmo (utilizando o recurso da função BFI Thumb do qual já ensinei por aqui).
Seu blog não é responsivo? Não se preocupe!
É só você apagar toda a área responsiva que os valores em porcentagem irão continuar, mas os valores continuarão estáveis, então não se adaptarão à tela.
2) O código PHP dos posts
Antes de irmos direto para o código, é necessário fazer a pergunta: seu template tem suporte às imagens destacadas? Se sim, você já pode ir diretamente ao códigos dos posts no passo posterior a este. Se não, é só abrir o seu functions.php e adicionar a seguinte linha abaixo para habilitar:
// thumbnails no tema add_theme_support( 'post-thumbnails' );
Ter um suporte para thumbnails é muito importante de forma geral para todo nosso blog, pois toda vez que fazemos um post, precisamos cadastrar uma imagem destacada para ele para ilustrar. Esta imagem cadastrada pode ser usada para vários recursos no layout, como posts relacionados, destacados (que é o nosso caso), bem como compartilhamento nas redes sociais.
Feito isso, vamos para onde começa a mágica. Primeiramente, siga apenas o passo 2 do tutorial do recurso de crop de thumbnail que criei para habilitarmos o tamanho de thumbnail para esta área de posts destacados.
Depois do recurso de crop instalado, agora vamos para o código abaixo, do qual deve ser colocado acima dos posts e da sidebar. Normalmente nos templates WordPress o arquivo que devemos colocar as coisas acima destas duas colunas é o header.php.
<div class="wrap-posts-destaque">
<div class="posts-destaque">
<ul>
<?php $destacados = get_posts('offset=0&numberposts=4&cat=220'); foreach($destacados as $post) : setup_postdata($post);?>
<li>
<div class="mostra-post">
<div class="thumb">
<?php if(has_post_thumbnail()){the_post_thumbnail(array( 250, 163, 'bfi_thumb' => true ));} else {echo '<img src="'.get_bloginfo('template_url').'/img/thumb.jpg">';} ?>
</div>
<a href="http://link">
<h4>
<?php the_title(); ?>
<span>Em <?php the_time('d') ?>.<?php the_time('m') ?>.<?php the_time('Y') ?></span>
</h4>
</a>
</div>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>O código acima fará o resgate dos 4 últimos posts da categoria de ID 220, mostrada em get_posts() na área numberposts=4&cat=220. Você pode mudar para a categoria que você quiser, ou então criar uma especialmente para os posts destacados.
O código fará o resgate do thumbnail através da tag the_post_thumbnail(), que define que o thumbnail terá um tamanho de 250x163px com a ajuda do recurso de crop que instalamos agora à pouco chamado bfi_thumb. Caso não tenha nenhuma imagem destacada, irá pegar uma imagem padrão, definida depois da condição } else {.
Se eu não quiser uma categoria, mas sim uma Tag, pode?
Sim, é só trocar o cat para tag no código. Vale lembrar que, para categorias é necessário colocar o ID (número) (saiba como identificar através deste tutorial), e para tags é necessário colocar o slug, que o nome da categoria de fato, só que com o nome todo com letras minúsculas e espaços como tracinhos. Exemplo: Tag Moda e Beleza terá um slug padrão de moda-e-beleza.
Como destacar os últimos posts de minhas categorias preferidas?
Simples. Percebeu que no código original fizemos apenas um loop de categoria para chamar os últimos 4 posts de uma única categoria? Desta vez iremos utilizar 4 loops diferentes, sendo que cada um será chamado apenas o último post. Veja como que ficará:
<div class="wrap-posts-destaque">
<div class="posts-destaque">
<ul>
<?php $destacados = get_posts('offset=0&numberposts=1&cat=1'); foreach($destacados as $post) : setup_postdata($post);?>
<li>
<div class="mostra-post">
<div class="thumb">
<?php if(has_post_thumbnail()){the_post_thumbnail(array( 250, 163, 'bfi_thumb' => true ));} else {echo '<img src="'.get_bloginfo('template_url').'/img/thumb.jpg">';} ?>
</div>
<a href="http://link">
<h4>
<?php the_title(); ?>
<span>Em <?php the_time('d') ?>.<?php the_time('m') ?>.<?php the_time('Y') ?></span>
</h4>
</a>
</div>
</li>
<?php endforeach; ?>
<?php $destacadosdois = get_posts('offset=0&numberposts=1&cat=2'); foreach($destacadosdois as $post) : setup_postdata($post);?>
<li>
<div class="mostra-post">
<div class="thumb">
<?php if(has_post_thumbnail()){the_post_thumbnail(array( 250, 163, 'bfi_thumb' => true ));} else {echo '<img src="'.get_bloginfo('template_url').'/img/thumb.jpg">';} ?>
</div>
<a href="http://link">
<h4>
<?php the_title(); ?>
<span>Em <?php the_time('d') ?>.<?php the_time('m') ?>.<?php the_time('Y') ?></span>
</h4>
</a>
</div>
</li>
<?php endforeach; ?>
<?php $destacadostres = get_posts('offset=0&numberposts=1&cat=3'); foreach($destacadostres as $post) : setup_postdata($post);?>
<li>
<div class="mostra-post">
<div class="thumb">
<?php if(has_post_thumbnail()){the_post_thumbnail(array( 250, 163, 'bfi_thumb' => true ));} else {echo '<img src="'.get_bloginfo('template_url').'/img/thumb.jpg">';} ?>
</div>
<a href="http://link">
<h4>
<?php the_title(); ?>
<span>Em <?php the_time('d') ?>.<?php the_time('m') ?>.<?php the_time('Y') ?></span>
</h4>
</a>
</div>
</li>
<?php endforeach; ?>
<?php $destacadosquatro = get_posts('offset=0&numberposts=1&cat=4'); foreach($destacadosquatro as $post) : setup_postdata($post);?>
<li>
<div class="mostra-post">
<div class="thumb">
<?php if(has_post_thumbnail()){the_post_thumbnail(array( 250, 163, 'bfi_thumb' => true ));} else {echo '<img src="'.get_bloginfo('template_url').'/img/thumb.jpg">';} ?>
</div>
<a href="http://link">
<h4>
<?php the_title(); ?>
<span>Em <?php the_time('d') ?>.<?php the_time('m') ?>.<?php the_time('Y') ?></span>
</h4>
</a>
</div>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>Eu defini um loop para cada categoria, então criei o $destacadosdois, $destacadostres e $destacadosquatro. Nenhum loop criado pode conter nome no repetido no código porque senão entra em conflito. Você pode criar o nome do loop que quiser, mas lembre-se: o nome no código não pode ter caracteres diferentes como números, acentos ou tracinhos, nem espaço. Somente letras e sempre minusculas.
Prontinho! Me conta se usar este tutorial! Seria um prazer ver ele instalado no seu bloguitcho e ver que você aprendeu. Se tiver alguma dúvida é só dizer!
