Como Criar Uma Lista de Postagens Recentes Com Imagens

Antes de fazer qualquer modificação em seu tema, salve uma cópia e guarde em lugar seguro. Caso algo dê errado, é só utilizar o backup.

Uma maneira de segurar o leitor em seu blog por mais tempo e, eventualmente, transformá-lo em leitor fiel, é oferecer textos ao invés de esperar que ele os descubra.

Uma maneira fácil de fazer isso é exibir, logo abaixo dos seus posts, uma lista com as postagens mais recentes, além daquela habitual gerada por plugins no estilo Related Posts.

Só que essa listagem vai ter “um plus a mais”, exibindo uma imagem associada a cada post. Imagens são um grande atrativo, principalmente para leitores que chegam via mecanismos de busca. Já ouviu falar em paraquedistas ?

O resultado é semelhante ao que você vê nesse link. Legal, não?

Então vamos lá.

1. “Chamando” os Posts

Para criar uma lista dos posts recentes, vamos utilizar uma segunda chamada do loop do WordPress. O loop, para quem não sabe, é o responsável pela exibição do post.

Copie o código abaixo e cole no seu single.php, antes ou depois do código do Related Posts. Se você não utiliza esse plugin, cole antes do início dos comentários.

<div class="recent_post">

<?php $the_query = new WP_Query('showposts=5&orderby=post_date&order=desc');
while ($the_query->have_posts()) : $the_query->the_post();
$thumb = get_post_meta($post->ID, 'Thumbnail', $single = true);?>

<div class="recent">

<a href="<?php the_permalink(); ?>" rel="bookmark" title="Link Permanente Para<?php the_title(); ?>">

<?php if($thumb !== '') { ?>
<img src="<?php echo $thumb; ?>"
class="left" alt="<?php the_title(); ?>"/>

<?php } else { echo ''; } ?>

</div>

<h3><a href="<?php the_permalink(); ?>" rel="bookmark" title="Link Permanente Para <?php the_title(); ?>"><?php the_title(); ?></a></h3>

<div class="recent_date">
<?php the_time('d m Y'); ?>
</div>

<?php endwhile; ?>

</div>

Localize o trecho de código responsável pelos comentários:

<?php comments_template(); ?>

Antes dele, copie e cole o código abaixo:

<?php rewind_posts(); the_post(); ?>

Essa parte é importante, se você não fizer isso, seus comentários passarão a ser exibidos em função do último post da lista de postagens recentes, em todos seus posts.

O que esse código faz é “rebobinar” os posts, fazendo com que os comentários corretos sejam exibidos.

Nesse momento, se você fez tudo direitinho, já é possível observar uma lista das 5 postagens mais recentes logo abaixo de seus posts.

2. Exibindo as Imagens

Para exibir as imagens, é necessário utilizar os “custom fields” do WordPress. Não se assuste, eles não mordem.

Edite seus post mais recente e, no editor de postagens, role a página até encontrar um campo semelhante ao mostrado na imagem abaixo (clique para ver melhor).

Faça upload de uma imagem de 60 x 60 px e copie o endereço da mesma.

No campo “Key”, digite “Thumbnail”, sem as aspas, no campo “Value”, cole o endereço da imagem. Clique em “Add Custom Field”.

Salve o post e veja como ficou. Deve estar tudo bagunçado, já que nada foi estilizado com CSS.

3. Enfeitando a Bagaça

O código abaixo dá um estilo simples, com as imagens alinhadas à esquerda, margens e o título à direita de cada imagem. Você pode modificar à vontade, mas cuidado ao mudar o tamanho das imagens utilizadas. Será necessário alterar os outros valores.

.recent_post { padding: 0.1em 0 1.2em 0; margin: 0 0 0.8em 0; }
.recent { padding: 0 10px 0 0; margin: 0 0 0.25em 0; float: left; }
.left {float: left;width: 60px;height: 60px;margin: 0 15px 0 0;border:1px solid #ccc;}
.recent_date { padding: 0; margin: 0; color: #666; font-size: 0.9em; }

Antes de utilizar esse código, confira se seu tema não usa classes com o mesmo nome. Se for o caso, altere o nome das classes, sem esquecer de alterar no código.

Feito isso, copie e cole no seu style.css.

Agora é só alterar os outros 4 posts para incluir as imagens. Não será necessário criar o custom field “Thumbnail” novamente, basta selecioná-lo do menu dropdown e depois colar o endereço da respectiva imagem em “Value”.

Não esqueça, daqui para a frente, é necessário criar um custom field com uma imagem para cada post publicado. Dá um pouco de trabalho mas o resultado compensa.

Se eventualmente você não adicionar nenhuma imagem ao post, será exibido apenas o título do mesmo.

Qualquer dúvida, utilize os comentários. Eles serão respondidos o mais rápido possível.

Fontes: Justin Tadlock, WordPress Codex.