Por norma, os conteúdos apresentados em formato de imagem, geram mais interesse do que simples links. Essa é a grande razão porque artigos relacionados funcionam melhor com pequenos thumbnails (miniaturas) do que links de texto apenas. Dar aos seus usuários a oportunidade de pesquisarem pelos seus conteúdos de forma linear e visualmente atrativa, ajuda-os não só a encontrar conteúdos mais relevantes, mas também a permanecer no seu blog por mais tempo. Neste pequeno tutorial, vamos explicar-lhe como programar uma navegação do tipo “próximo artigo” e “artigo anterior”, usando thumbnails dos seus artigos, para tornar essa mesma navegação mais atraente para os seus usuários e logicamente para o seu blog.

O resultado final será algo semelhante a isto, sendo que você poderá estilizar posteriormente o CSS dos seus artigos do jeito que bem entender:

thumbnails

VERIFICAR A NAVEGAÇÃO

$prevPost = get_previous_post(true);
$nextPost = get_next_post(true);

Estas duas variáveis puxam o próximo artigo e o artigo anterior caso eles existam. Agora, podemos verificar se eles existem, e usar o ID com a função get_posts() para mostrar as informações que bem desejarmos sobre cada um dos artigos.

PUXAR OS THUMBNAILS E OUTRAS INFORMAÇÕES

<div id="post-nav">
	<?php $prevPost = get_previous_post(true);
		if($prevPost) {
			$args = array(
				'posts_per_page' => 1,
				'include' => $prevPost->ID
			);
			$prevPost = get_posts($args);
			foreach ($prevPost as $post) {
				setup_postdata($post);
	?>
		<div class="post-previous">
			<a class="previous" href="<?php the_permalink(); ?>">&laquo; Artigo Anterior</a>
			<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
			<h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
			<small><?php the_date('F j, Y'); ?></small>
		</div>
	<?php
				wp_reset_postdata();
			} //end foreach
		} // end if

		$nextPost = get_next_post(true);
		if($nextPost) {
			$args = array(
				'posts_per_page' => 1,
				'include' => $nextPost->ID
			);
			$nextPost = get_posts($args);
			foreach ($nextPost as $post) {
				setup_postdata($post);
	?>
		<div class="post-next">
			<a class="next" href="<?php the_permalink(); ?>">Próximo Artigo &raquo;</a>
			<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
			<h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
			<small><?php the_date('F j, Y'); ?></strong>
		</div>
	<?php
				wp_reset_postdata();
			} //end foreach
		} // end if
	?>
</div>

Este código você deverá colocar no ficheiro single.php do seu template. Caso o artigo seguinte ou anterior existam, iremos usar o ID para puxar esse artigo e depois criar um ciclo para puxar as seguintes informações:

  • Um link genérico de “Próximo/Anterior”
  • O thumbnail com link para o artigo
  • O título do artigo envolvido numa tag h2 e com link para o próprio artigo
  • A data do artigo

Logicamente, você poderá realizar as mudanças que considerar oportunas ao CSS do seu conteúdo, bem como à função que puxa o artigo. Se desejar poderá puxar um excerto, ou qualquer outra informação que considerar importante e relevante para os seus usuários.

Até Já!