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:
1 | <div class="wrap-posts-destaque"> |
2 | <div class="posts-destaque"> |
5 | <div class="mostra-post"> |
8 | <h4>Titulo post <span>Data</span></h4> |
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?
1. O CSS
Já que possuímos uma estrutura HTML predefinida, é hora de aplicar o CSS para estiliza-lo para fazer os efeitos que queremos. O código é grandinho porque eu deixei bem destrinchado
(então, não me mate, please, haha) 
Garanto que cada detalhe está sendo explicado no código, hehe. Melhor explicar do que entregar o código e pronto, néah? Entendendo o código você poderá edita-lo da forma que preferir! Te garanto que terá menos dúvidas, mas caso tenha é só dizer, ok? Segue abaixo todo o código de CSS:
Salve este arquivo da folha de estilo de seu layout, que normalmente é style.css.
Trabalhando com responsivo
Quando trabalhamos com itens responsivos, tudo é tratado com porcentagem — então não podemos fugir da matemática básica e regrinha de 3 que vimos na escola. Imagina a largura de seu blog, que é a soma de uma extremidade do post até a outra ponta da sidebar, seja 100% (mesmo sendo numa largura de 980px num blog não responsivo, por exemplo). Imaginou? Agora, vamos imaginar que queremos 4 posts em destaque que irão ocupar acima da área de posts do blog e também a sidebar. Desta forma, vamos então dividir o 100% por 4, e isso resulta 25%. Por isso que no item de lista <li> assume esta configuração:
1 | /*estilizando o item da lista por porcentagem*/ |
Mantendo a proporção dos retângulos
É muito difícil manter a proporcionalidade de um item que não seja um quadrado ou um círculo nos itens responsivos quando se trata do CSS. A propriedade height é muito relativa ao conteúdo da div que ela está englobando ao invés de se ligar à largura do mesmo, e para nos livrarmos disso de uma vez por todas zeramos a altura. Com a altura zerada, utilizamos a propriedade padding-bottom (que é margem interna, o espaço entre o conteúdo e a borda de uma div), pois esta propriedade consegue captar a largura de nosso div. WHAT? Não entendi, Ana!!! Me dê um exemplo!
Vamos supor que queremos um retângulo, do qual sua altura gostaríamos que seja exatamente metade do valor de eu comprimento (largura). Como fazemos isso no CSS? Simples: qual é metade de 100? 50, certo? Então seupadding-bottom é igual a 50%! É mais ou menos o que aconteceu com nosso caso do formato de nossos thumbnails. Eu coloquei padding-bottom: 65%; para seguir o formato de uma foto em paisagem. Veja só:
1 | /*div que mostra o post*/ |
2 | .posts-destaque ul li .mostra-post { |
4 | height: 0; /*sempre mantenha altura zerada*/ |
6 | padding-bottom: 65%; /*o padding-bottom que definirá altura, e isso faz com que o retângulo seja sempre porporcional*/ |
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 comprimento em pixels da foto é igual 100%, onde a altura em pixels será igual a x. Mas há uma forma menos chatinha de conta, haha. Como dentro da div da foto sempre colocamos que a imagem se ajusta 100% à largura da div, nós veremos o local exato onde a foto termina. E, com o inspetor de código do Chrome ou do Firefox (ambos navegadores já vem com seus inspetores, então é só ativar com botão direito do mouse clicando em “Inspect Element”), podemos fazer a edição temporária do CSS para ele se ajustar ao tamanho que queremos. Foi testando pelo inspetor de código que julguei que minha melhor altura seria em 65%!
Exemplo de inspeção de código pelo Chrome. Obs: Vale lembrar que o inspetor não salva a edição do CSS em nenhum lugar, pois ele é só para testes. Depois que atualiza a página tudo volta ao normal.
E veja abaixo um exemplo de como seria se nossa largura com um padding-bottom: 100%;. Note que eu coloquei uma cor cinza de fundo e na div da primeira foto eu coloquei uma borda preta para visualizar os limites entre topo e rodapé da mesma.
Percebeu que a div de cada foto formaria um quadrado? Isso porque tanto a largura, como altura correspondem a 100%! Graças ao inspetor do navegador sabemos qual é a proporção certa! :D
Seu blog não é responsivo? Não se preocupe!
É só você substituir as linhas 8 e 9 do código do CSS (onde define largura máxima) e coloque apenas a largura exata em pixels de seu layout do blog — e também pode apagar toda a área responsiva, a partir da linha 124. Os demais itens funcionam normalmente, inclusive os itens em porcentagem podem continuar pois serão relativos à largura que você for definir em .wrap-posts-destaque.
2. O código PHP dos posts
Mas antes de mais nada, é 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 seguinte. Se não, é só abrir o seu functions.php e adicionar a seguinte linha abaixo para habilitar:
2 | add_theme_support( 'post-thumbnails' ); |
Ter um suporte para thumbnails é muito importante, pois toda vez que fazemos um post, devemos cadastrar uma imagem destacada para ele. E esta mesma pode ser usada para posts relacionados, destacados, bem como compartilhamento nas redes sociais.
Feito isso vamos aonde começa a mágica dos posts, haha. Tal código abaixo deve ser colocado acima dos posts e da sidebar, e normalmente nos templates wordpress o arquivo que devemos colocar as coisas acima das colunas é em header.php.
1 | <div class="wrap-posts-destaque"> |
2 | <div class="posts-destaque"> |
4 | <?php $postsdestacados = get_posts('cat=3&numberposts=4&offset=0');foreach($postsdestacados as $post) : setup_postdata($post);?> |
6 | <div class="mostra-post"> |
7 | <div class="thumb"><?php if (has_post_thumbnail()) { the_post_thumbnail( 'medium' ); } else { echo '<img src="http://imagem-padrao.jpg" />';}?></div> |
8 | <a href="<?php the_permalink(); ?>"><h4><?php the_title(); ?><span>Em <?php the_time('d') ?>.<?php the_time('m') ?>.<?php the_time('Y') ?></span></h4></a> |
O código acima fará o resgate dos 4 últimos posts da categoria de ID 3, mostrada em WP_Query na áreacat=3&numberposts=4. Você pode mudar para a categoria que você quiser, ou então criar uma especialmente para os posts destacados — que, particularmente, acho que é bem melhor — pois, quando você postar é só adicionar a categoria que você criou para os destaque!
O código também fará o resgate do thumbnail e coloquei no tamanho
medium, que é o tamanho médio da foto destacada, que possui uma largura cerca de 300px (e será adaptada no CSS automaticamente). Caso você queira ter mais liberdade em mexer com os tamanhos do thumbnails e proporções, sugiro que você leia um tutorial que fiz sobre
como ter vários tamanhos diferentes de thumbnails.
E caso você queria fazer a chamada dos posts com uma tag, é só trocar o cat para tag. Vale lembrar que, para categorias é necessário colocar o ID (número), e para tags é necessário colocar o slug (nome em letras minusculas).
Descobrindo ID da categoria e Slug da tag
Para descobrir uma ID de uma categoria, vá no painel de controle em Posts > Categorias e clique na categoria que você quer. Vai aparecer a página de edição da categoria, e na URL dela, vai aparecer a id da categoria. Veja abaixo:
Pegando a ID de uma categoria no WordPress.
Percebeu acima a parte da url selecionada? Onde há ID=5, significa que minha categoria possui o ID 5. Agora, nas tags, para saber o slug é só fazer o mesmo procedimento das categorias, só que em vez de ver o ID na url, você vê na área Slug, logo abaixo do nome.
Pegar slug de uma tag no WordPress
Como destacar os últimos posts de minhas categorias preferidas?
Simples. Percebeu que no código original fizemos um loop de categoria, e por isso colocamos apenas um item de lista? Desta vez você irá utilizar 4 loops, sendo que cada um terá a sua própria lista, bem como o número de posts será limitado apenas 1. Veja como que ficará:
1 | <div class="wrap-posts-destaque"> |
2 | <div class="posts-destaque"> |
4 | <?php $destaquecategoriaum = get_posts('cat=1&numberposts=1&offset=0');foreach($destaquecategoriaum as $post) : setup_postdata($post);?> |
6 | <div class="mostra-post"> |
7 | <div class="thumb"><?php if (has_post_thumbnail()) { the_post_thumbnail( 'medium' ); } else { echo '<img src="http://imagem-padrao.jpg" />';}?></div> |
8 | <a href="<?php the_permalink(); ?>"><h4><?php the_title(); ?><span>Em <?php the_time('d') ?>.<?php the_time('m') ?>.<?php the_time('Y') ?></span></h4></a> |
15 | <?php $destaquecategoriadois = get_posts('cat=2&numberposts=1&offset=0');foreach($destaquecategoriadois as $post) : setup_postdata($post);?> |
17 | <div class="mostra-post"> |
18 | <div class="thumb"><?php if (has_post_thumbnail()) { the_post_thumbnail( 'medium' ); } else { echo '<img src="http://imagem-padrao.jpg" />';}?></div> |
19 | <a href="<?php the_permalink(); ?>"><h4><?php the_title(); ?><span>Em <?php the_time('d') ?>.<?php the_time('m') ?>.<?php the_time('Y') ?></span></h4></a> |
26 | <?php $destaquecategoriatres = get_posts('cat=3&numberposts=1&offset=0');foreach($destaquecategoriatres as $post) : setup_postdata($post);?> |
28 | <div class="mostra-post"> |
29 | <div class="thumb"><?php if (has_post_thumbnail()) { the_post_thumbnail( 'medium' ); } else { echo '<img src="http://imagem-padrao.jpg" />';}?></div> |
30 | <a href="<?php the_permalink(); ?>"><h4><?php the_title(); ?><span>Em <?php the_time('d') ?>.<?php the_time('m') ?>.<?php the_time('Y') ?></span></h4></a> |
37 | <?php $destaquecategoriaquatro = get_posts('cat=4&numberposts=1&offset=0');foreach($destaquecategoriaquatro as $post) : setup_postdata($post);?> |
39 | <div class="mostra-post"> |
40 | <div class="thumb"><?php if (has_post_thumbnail()) { the_post_thumbnail( 'medium' ); } else { echo '<img src="http://imagem-padrao.jpg" />';}?></div> |
41 | <a href="<?php the_permalink(); ?>"><h4><?php the_title(); ?><span>Em <?php the_time('d') ?>.<?php the_time('m') ?>.<?php the_time('Y') ?></span></h4></a> |
Eu defini um loop para cada categoria, então criei o
$destaquecategoriaum,
$destaquecategoriadois,
$destaquecategoriatres e
$destaquecategoriaquatro. Nenhum loop pode conter código repetido para não entrar em conflito, e o nome do loop não pode ter nome com caracteres diferentes como espaços, números, acentos ou tracinhos. Sempre tem que ser tudo junto e com letra minúscula para evitar qualquer tipo de erro.
Ufa! Finalmente terminado, haha. Mas fala que não vale a pena? Me conta se usar este tutorial! Seria um prazer ver ele instalado no seu bloguitcho e ver que você aprendeu
E tem alguma dúvida? É só dizer!
0 comentários: