Você gostaria de exibir miniaturas com os links para as postagens anteriores e seguintes no WordPress?
Na parte inferior de cada postagem, o WordPress exibe links para as postagens anteriores e seguintes para facilitar a navegação. A adição de miniaturas a esses links os tornará mais atraentes para seus leitores.
Neste artigo, mostraremos como usar miniaturas com links de postagens anteriores e seguintes no WordPress.
Por que exibir miniaturas com os links de postagem anterior e seguinte?
Seu blog WordPress oferece alguns recursos úteis para ajudar os visitantes a encontrar novos conteúdos e navegar pelo site.
Esses recursos incluem menus de navegação, uma barra de pesquisa e um widget de arquivos de postagens.
Outro recurso de navegação útil é encontrado na parte inferior de cada post do blog do WordPress. Lá, você encontrará links para as postagens anteriores e seguintes do blog em seu site.
Esses links aumentam o envolvimento do usuário porque, quando os visitantes terminarem de ler uma publicação do blog, eles estarão procurando outra coisa para ler. No entanto, os links parecerão mais interativos se você adicionar miniaturas.
Também é uma boa maneira de chamar a atenção para suas postagens de blog com melhor desempenho. Por exemplo, talvez você tenha um conteúdo de pilar que já esteja gerando muito tráfego e convertendo esses leitores em assinantes de e-mail. A adição de miniaturas com links de posts só ajudaria a criar sua lista de e-mails e a expandir sua pequena empresa.
Dito isso, vamos dar uma olhada em como adicionar miniaturas aos links de postagem anterior e seguinte no WordPress.
Uso de miniaturas com links de postagem anterior e seguinte no WordPress
Para adicionar miniaturas aos links de postagem anterior e seguinte, você terá de adicionar código aos arquivos do tema do WordPress. Se você nunca fez isso antes, consulte nosso guia sobre como copiar e colar código no WordPress.
Adição de código usando WPCode
A primeira etapa é adicionar o seguinte trecho de código com um plug-in como o WPCode.
O WPCode é o melhor plugin de snippets de código que permite adicionar código sem quebrar seu site. Ele também vem com vários modelos prontos, para que você não precise escrever códigos do zero.
Para começar, você precisará instalar e ativar o plug-in WPCode. Para obter mais detalhes, consulte nosso artigo sobre como instalar um plug-in do WordPress.
A partir daí, vá para a página Code Snippets “ + Code Snippets. Em seguida, clique em “Add New” (Adicionar novo).
Aqui, você será levado a uma biblioteca de trechos de código, onde poderá encontrar vários modelos predefinidos para escolher.
Em “Add Your Custom Code” (Adicionar seu código personalizado), clique em “Use Snippet” (Usar snippet).
Dê um nome ao snippet de código para que você possa consultá-lo mais tarde.
Em seguida, copie o código a seguir no editor de texto WPCode. Certifique-se de selecionar “PHP Snippet” como o tipo de código.
function wpb_posts_nav(){
$next_post = get_next_post();
$prev_post = get_previous_post();
if ( $next_post || $prev_post ) : ?>
<div class="wpb-posts-nav">
<div>
<?php if ( ! empty( $prev_post ) ) : ?>
<a href="<?php echo get_permalink( $prev_post ); ?>">
<div>
<div class="wpb-posts-nav__thumbnail wpb-posts-nav__prev">
<?php echo get_the_post_thumbnail( $prev_post, [ 100, 100 ] ); ?>
</div>
</div>
<div>
<strong>
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M13.775,18.707,8.482,13.414a2,2,0,0,1,0-2.828l5.293-5.293,1.414,1.414L9.9,12l5.293,5.293Z"/></svg>
<?php _e( 'Previous article', 'textdomain' ) ?>
</strong>
<h4><?php echo get_the_title( $prev_post ); ?></h4>
</div>
</a>
<?php endif; ?>
</div>
<div>
<?php if ( ! empty( $next_post ) ) : ?>
<a href="<?php echo get_permalink( $next_post ); ?>">
<div>
<strong>
<?php _e( 'Next article', 'textdomain' ) ?>
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M10.811,18.707,9.4,17.293,14.689,12,9.4,6.707l1.415-1.414L16.1,10.586a2,2,0,0,1,0,2.828Z"/></svg>
</strong>
<h4><?php echo get_the_title( $next_post ); ?></h4>
</div>
<div>
<div class="wpb-posts-nav__thumbnail wpb-posts-nav__next">
<?php echo get_the_post_thumbnail( $next_post, [ 100, 100 ] ); ?>
</div>
</div>
</a>
<?php endif; ?>
</div>
</div> <!-- .wpb-posts-nav -->
<?php endif;
}
Em seguida, alterne o botão de “Inativo” para “Ativo”.
Isso fará com que o trecho de código tenha efeito.
Em seguida, basta pressionar o botão “Atualizar”.
Agora, precisaremos voltar à página Code Snippets “ +Add Snippet.
Novamente, na opção “Add Your Custom Code”, você selecionará “Use Snippet”.
Dê um nome ao snippet de código para que você possa consultá-lo mais tarde.
Em seguida, copie o código a seguir no editor de texto WPCode. Certifique-se de selecionar “PHP Snippet” como o tipo de código.
wpb_posts_nav();
Esse código informa ao WordPress onde mostrar a navegação com a imagem em destaque.
Em seguida, role para baixo até a seção Inserção. Você precisará clicar no menu suspenso ao lado de Location.
A partir daí, vá para Page-Specific e escolha Insert After Post. Dessa forma, as miniaturas aparecerão corretamente ao lado dos links.
Por fim, torne o trecho de código ativo ativando o botão “Active” (Ativo).
Em seguida, clique em “Atualizar”.
Depois de salvar as alterações, essa função pode ser chamada a partir do modelo em que você deseja exibir links de postagens anteriores e seguintes com miniaturas.
Agora, quando você visualizar uma postagem em seu site, verá que os links anterior e seguinte na parte inferior da postagem agora têm miniaturas.
Agora, quando você visualizar uma postagem em seu site, verá que os links anterior e seguinte na parte inferior da postagem agora têm miniaturas.
Observação: Se uma das postagens vinculadas ainda não tiver uma imagem em destaque, você não verá uma miniatura.
Para saber como adicionar miniaturas a uma postagem, consulte nosso guia sobre como adicionar imagens em destaque ou miniaturas de postagens no WordPress.
Alternativa: Exibição de postagens populares com miniaturas
Outra maneira de envolver seus leitores após a leitura de uma publicação é exibir uma lista de publicações populares após cada artigo. Isso dará aos seus leitores a chance de ver seu melhor conteúdo, em vez de apenas os artigos anteriores e seguintes que foram publicados.
Suas postagens populares contêm seu conteúdo de maior sucesso. Exibi-los para seus visitantes criará confiança, melhorará a prova social e garantirá que os visitantes permaneçam no site por mais tempo.
Ao verificar o primeiro método em nosso guia sobre como exibir posts por visualizações no WordPress, você saberá como é fácil adicionar posts populares usando o plugin MonsterInsights.
O widget Popular Posts do MonsterInsights oferece uma ampla variedade de temas atraentes e muitas opções de personalização.
Talvez você também queira consultar nosso guia sobre como adicionar widgets pós-post personalizados no WordPress, onde poderá aprender a adicionar vários tipos de conteúdo ao final de cada post do blog.
Esperamos que este tutorial tenha ajudado você a aprender como usar miniaturas com links de postagens anteriores e seguintes no WordPress. Você também pode querer saber como acelerar o desempenho do WordPress ou conferir nossa lista dos melhores plug-ins de mídia social para WordPress.
Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Atesz says
Hello,
thnak you for this code. I would like to add the post navigation in the middle of my page as a block. So I tried to create a shortcode calling the wpb_posts_nav funtion:
add_shortcode( ‘custom-post-nav’, ‘wpb_posts_nav’ );
but if I use the shortcode [custom-post-nav] in the block editor, I cannot publish the post and I get the following: “Updating failed. The response is not a valid JSON response”
The post nav still appears but only If I paste the code at the end of the page and then they go to wrong place (to the top).
Do you know where is the problem?
Thank you in advance!
WPBeginner Support says
For your JSON response error, we would recommend going through our troubleshooting guide below!
https://www.wpbeginner.com/wp-tutorials/how-to-fix-the-invalid-json-error-in-wordpress-beginners-guide/
Administrador
Sekh Sahajahan says
Hello sir have you any solution to remove the 3 line navigation bar from menu bar because it automatically added.
Markus Martin says
Hi Syed. Does this still work especally with the new version of wordpress?
patricia says
Hello! How would I do, if i want to use this for custom post type? thanks
MarykeVanRensburg says
I got it to work. It seems the } in this “<?php } ?>” was the problem. I removed it and it works. Now just to figure out how to only show next and previous in same category. Thanks
bowetech says
HOw would i set it up so that it will actually get the next post from its current category ?
Japh says
Nice and simple solution, I really like it. Great answer for your Facebook asker
Wordpress Themes Labs says
nice guide
MarykeVanRensburg says
Can you tell me how to only show previous and next in the same category? Thanks for this code. I’m going to try it.
wpbeginner says
@MarykeVanRensburg I think the TRUE variable there means in category browsing.
MarykeVanRensburg says
@wpbeginner I used the code, but it doesn’t work in an Artisteer created theme. The code in my theme is as follows:
‘next_link’ => theme_get_previous_post_link(‘« %link’), ‘prev_link’ => theme_get_next_post_link(‘%link »’),
and I need to change it to show a thumbnail and only a certain category. Thanks.
wpbeginner says
@MarykeVanRensburg AFter the link area just add ,true
our code above will do only category browsing. Unfortunately we do not provide support for specific frameworks.
Sugeng Santoso says
I love this.
Dragon Blogger says
Really cool, I do think using thumbnails with latest/next post may be overkill if you already use it with “related posts” there is limited real estate which is especially true for the growing trend of mobile browsing.
wpbeginner says
@Dragon Blogger That is only if you are assuming that the site has related posts. Some may not. We are using it on our List25 site which is relatively new site, so related articles is not very helpful at the time. That is why we are using single post navigation.
Dragon Blogger says
@wpbeginner @Dragon Blogger
Dragon Blogger says
@wpbeginner your are right and make a good point about newer sites without enough content to do images for related content.