Criar navegação de ‘próximo artigo’ e ‘artigo anterior’ com Thumbnails

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. Hoje 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 imagem abaixo, sendo que você poderá estilizar posteriormente o CSS dos seus artigos do jeito que bem entender:

Verificando 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 Tumbnails 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 arquivo 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á!