Como adicionar o WordPress Next Previous Post com Thumbnail

Adicionar paginação ao seu site WordPress não deve ser um processo complicado. Na verdade, com conhecimento mínimo de programação , você pode facilmente alterar sua paginação de postagem padrão para paginação numerada do WordPress , conforme ilustrado no meu tutorial anterior sobre paginação numérica do WordPress . Hoje, quero que nos concentremos na criação de paginação para o único post que apresenta imagens que você provavelmente encontrou em vários temas de revista WordPress.

É comum ver o próximo post anterior do WordPress com miniatura e um título abaixo do único post ou no topo dependendo do design do tema.

WordPress Próximo Post anterior com exemplo de miniatura

Por exemplo, em um dos temas mais vendidos da revista WordPress – Jornal , você pode ver que o único post tem uma paginação com uma miniatura conforme mostrado na imagem abaixo:

A imagem acima representa um bom exemplo de um post único do WordPress com a próxima paginação anterior que possui uma miniatura.

Ao final deste tutorial de desenvolvimento do WordPress, você deve adicionar facilmente o código que criamos ao seu plugin ou tema do WordPress e exibir o próximo post anterior do WordPress com miniatura, como visto no tema do WordPress do jornal.

Próximo Anterior Código de paginação do WordPress

Em poucas palavras, os dois trechos de código importantes que você precisa ter é um que obtém o post anterior ou o próximo e outro que recupera a imagem em destaque do post específico (próximo ou anterior)

Para ilustração neste tutorial, vamos usar o tema padrão do WordPress Twenty Seventeen, que é o meu favorito por vários motivos; uma das razões é a sua simplicidade.

Este código definitivamente funcionará em todos os outros temas ou plugins do WordPress. Então, para começar, temos o tema instalado e ativado com um único post de amostra publicado.

Começando

Como você pode ver na imagem abaixo indicado pela seta, abaixo do post não há paginação para os próximos posts anteriores. Nesta seção, adicionaremos o próximo post anterior do WordPress com paginação em miniatura.

O primeiro passo é localizar o arquivo single.php em seu tema, pois é o arquivo onde iremos adicionar o código logo abaixo de the_content() e dentro do loop.

Depois de localizar o arquivo single.php, o próximo passo é criar duas variáveis $next e $prev que são atribuídas a duas funções principais do WordPress; get_next_post() e get_previous_post() respectivamente, conforme mostrado no trecho de código abaixo:

 <?php
$prev = get_previous_post();
$next = get_next_post();
?>

Essas duas funções são semelhantes na maneira como funcionam; a função anterior recupera a postagem anterior enquanto a próxima função recupera a próxima postagem como objects .

Para demonstração publiquei os três posts como mostra a imagem abaixo:

Agora precisamos obter o título do post anterior e a miniatura e também garantir que os envolvamos em a href tag com o respectivo permalink que ajuda a tornar os links clicáveis:

 <a href="<?php echo get_permalink( $prev->ID); ?>">

<?php echo apply_filters( 'the_title', $prev->post_title ); ?>

<?php echo get_the_post_thumbnail($prev->ID, 'miniatura'); ?>

</a>

Em seguida, obtemos o título do próximo post e a miniatura e também envolvemos com uma tag href e o permalink para o próximo post como o valor da tag href:

 <a href="<?php echo get_permalink( $next->ID); ?>">

<?php echo apply_filters( 'the_title', $next->post_title ); ?>

<?php echo get_the_post_thumbnail($next->ID, 'miniatura'); ?>

</a>

Até este ponto, temos o código que está funcionando que pode exibir o WordPress no próximo post anterior com miniatura. O código completo até esta etapa deve ser como mostrado abaixo:

 <?php

$prev = get_previous_post();
$next = get_next_post();

// o título e a miniatura do post anterior

?>

<?php echo get_the_post_thumbnail($prev->ID, 'miniatura'); ?>

<a href="<?php echo get_permalink( $prev->ID); ?>">

<?php echo apply_filters( 'the_title', $prev->post_title ); ?>

</a>

<?php

// o próximo título e miniatura do post

?>

<?php echo get_the_post_thumbnail($next->ID, 'miniatura'); ?>

<a href="<?php echo get_permalink( $next->ID); ?>">

<?php echo apply_filters( 'the_title', $next->post_title ); ?>

</a>

<?php

Adicione este código ao arquivo single.php e certifique-se de escapar do HTML com as tags apropriadas de abertura e fechamento do PHP e atualize o arquivo e verifique as alterações no frontend.

Você deve ver a postagem anterior e a próxima miniatura da postagem com o título exibido conforme mostrado na imagem abaixo:

Estilizando o WordPress Anterior Próximo Post

Agora precisamos introduzir dois divs e adicionar os estilos apropriados para garantir que cada um dos posts flutue em cada lado. Podemos conseguir isso envolvendo o código com duas divs , conforme mostrado abaixo:

 <div class="clearfix">

<?php

$prev = get_previous_post();

$next = get_next_post();

// o título e a miniatura do post anterior

?>

<div class="post-box prevPost">

<a href="<?php echo get_permalink( $prev->ID); ?>">

<?php echo apply_filters( 'the_title', $prev->post_title ); ?>

<?php echo get_the_post_thumbnail($prev->ID, 'miniatura'); ?>

</a>

</div>

<?php

// o próximo título e miniatura do post

?>

<div class="post-box nextPost">

<a href="<?php echo get_permalink( $next->ID); ?>">

<?php echo apply_filters( 'the_title', $next->post_title ); ?>

<?php echo get_the_post_thumbnail($next->ID, 'miniatura'); ?>

</a>

</div>

</div>

<?php

Depois de adicionar as classes para as divs, agora podemos aplicar os estilos usando CSS conforme mostrado abaixo:

 * {
  dimensionamento de caixa: caixa de borda;
} 

.caixa postal {
  flutuar: esquerda;
  largura: 50%;
}

.clearfix::depois de {
  contente: "";
  limpar ambos;
  exibição: mesa;
}
.post-box.prevPost img {
    largura máxima: 40%;
    altura: automático;
}
.post-box.nextPost img {
    largura máxima: 40%;
    altura: automático;
}

Conclusão

Com este código, você pode facilmente adicionar a paginação do próximo post anterior do WordPress com uma miniatura. Você também pode adicionar estilos melhores para melhorar a apresentação visual da paginação de postagem única. Após adicionar o código CSS você deverá ver o layout dos dois posts aparecer como mostrado na imagem abaixo

Também é importante verificar se a miniatura ou postagem existe adicionando uma instrução condicional. Por exemplo, você pode envolver a seção $prev com uma condição conforme mostrado abaixo:

 <?php

$prev_ = get_previous_post();

if ( ! empty( $prev ) ): ?>

    <a href="<?php echo get_permalink( $prev->ID); ?>">

        <?php echo apply_filters( 'the_title', $prev_post->post_title ); ?>

    </a>

<?php endif; ?>

A validação de código é uma parte importante do desenvolvimento do WordPress e não deve ser negligenciada. Espero que esta postagem tenha lhe dado algumas dicas e agora você possa adicionar paginação de postagem única com uma miniatura em seu site ou tema. Se você quiser aprender como criar paginação de blog WordPress, você pode conferir este tutorial anterior – como criar paginação numérica no WordPress.

Se você precisar de mais assistência, pode obter ajuda de um desenvolvedor de temas do WordPress, especialmente para aqueles usuários que não entendem como o código funciona. Você também pode entrar em contato comigo para obter ajuda.