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:
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(); ?>">« 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 »</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á!