Deseja exibir uma lista de posts relacionados em seu site WordPress e prefere usar código em vez de um plug-in?
Quando os visitantes do seu blog terminarem de ler um artigo de seu interesse, oferecer uma lista de publicações relacionadas os manterá envolvidos e os ajudará a encontrar novos conteúdos para ler.
Neste artigo, mostraremos como exibir posts relacionados no WordPress usando código, sem necessidade de plugin.
Por que mostrar posts relacionados no WordPress?
Quando o seu blog WordPress começa a crescer, pode ficar mais difícil para os usuários encontrarem outras publicações sobre o mesmo tópico.
Exibir uma lista de conteúdo relacionado no final de cada publicação de blog é uma ótima maneira de manter os visitantes em seu site e aumentar as visualizações de página. Isso também ajuda a melhorar a visibilidade de suas páginas mais importantes, exibindo seu melhor conteúdo onde as pessoas possam encontrá-lo facilmente.
Se você não estiver familiarizado com códigos, será mais simples escolher um dos muitos plug-ins de posts relacionados do WordPress que podem exibir posts relacionados sem código.
Mas, se você já se perguntou se pode exibir posts relacionados sem usar um plug-in, compartilharemos dois algoritmos diferentes que você pode usar para gerar posts relacionados com miniaturas usando apenas o código:
Observação: se você quiser mostrar uma miniatura com cada publicação relacionada, certifique-se de adicionar primeiro uma imagem em destaque a essas publicações.
Método 1: Como mostrar posts relacionados no WordPress por tags
Uma maneira eficiente de localizar conteúdo relacionado é procurar outras publicações que compartilhem as mesmas tags. As tags costumam ser usadas para focar nos detalhes específicos contidos em uma publicação.
Com isso em mente, talvez você queira adicionar algumas tags comuns às postagens que deseja relacionar umas às outras. Você pode inseri-las na caixa “Tags” no editor do WordPress.
Depois de adicionar tags às suas postagens, a próxima coisa a fazer é adicionar o seguinte trecho de código ao modelo single.php do seu tema.
Se precisar de ajuda para adicionar código ao seu site, consulte nosso guia sobre como colar trechos da Web no WordPress.
$orig_post = $post;
global $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=>5, // Number of related posts that will be shown.
'ignore_sticky_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="relatedposts"><h3>Related Posts</h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post(); ?>
<li><div class="relatedthumb"><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_post_thumbnail(); ?--></a></div>
<div class="relatedcontent">
<h3><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_title(); ?--></a></h3>
<!--?php the_time('M j, Y') ?-->
</div>
</li>
<!--?php }
echo '</ul--></ul></div>';
}
}
$post = $orig_post;
wp_reset_query();
Esse código procura as tags associadas a uma página e, em seguida, executa uma consulta ao banco de dados para buscar páginas com tags semelhantes.
Onde você deve colocar o código? Isso depende do seu tema, mas, na maioria dos casos, você deve conseguir colar o código no modelo single.php do seu tema após a publicação principal e logo acima da seção de comentários.
Se estiver usando o tema Twenty Twenty-One, como em nosso site de demonstração, um bom lugar para colar o código é no arquivo template-parts/content/content-single.php após o cabeçalho e logo após <?php the_content();.
Isso exibirá automaticamente o conteúdo relacionado em qualquer post do WordPress. Você precisará alterar o estilo e a aparência das postagens relacionadas para que correspondam ao seu tema, adicionando CSS personalizado.
Dica: em vez de editar os arquivos do tema, o que poderia danificar seu site, recomendamos o uso de um plug-in de trechos de código como o WPCode.
O WPCode torna seguro e fácil adicionar códigos personalizados no WordPress. Além disso, ele vem com opções de “Inserção” que permitem inserir e executar automaticamente trechos em locais específicos do seu site WordPress, como após uma postagem.
Para obter mais detalhes, consulte nosso guia sobre como adicionar código personalizado no WordPress. Você também pode conferir nossa análise detalhada do WPCode para saber mais sobre o plugin.
Método 2: Como mostrar posts relacionados no WordPress por categoria
Outra maneira de exibir conteúdo relacionado é listar as postagens que estão na mesma categoria. A vantagem desse método é que a lista de posts relacionados quase nunca estará em branco.
Como no Método 1, você precisa adicionar um trecho de código ao modelo single.php do seu tema ou em um plug-in de trechos de código como o WPCode. Para obter mais detalhes, consulte o Método 1 e nosso guia sobre como adicionar código personalizado no WordPress.
$orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=> 2, // Number of related posts that will be shown.
'ignore_sticky_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="related_posts"><h3>Related Posts</h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post();?>
<li><div class="relatedthumb"><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_post_thumbnail(); ?--></a></div>
<div class="relatedcontent">
<h3><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_title(); ?--></a></h3>
<!--?php the_time('M j, Y') ?-->
</div>
</li>
<!--?php }
echo '</ul--></ul></div>';
}
}
$post = $orig_post;
wp_reset_query();
Agora você verá uma lista de conteúdo relacionado na parte inferior de cada publicação.
Se quiser alterar o estilo e a aparência das páginas relacionadas, você precisará adicionar CSS personalizado para corresponder ao seu tema.
Guias especializados sobre posts relacionados no WordPress
Deseja saber mais sobre a exibição de postagens relacionadas no WordPress? Confira estes tutoriais úteis sobre postagens relacionadas:
- Como exibir posts relacionados no WordPress (passo a passo)
- Como exibir postagens relacionadas do mesmo autor no WordPress
- Como adicionar publicações relacionadas em linha em publicações de blog do WordPress
- Como exibir postagens aleatórias no WordPress
- Como mostrar páginas relacionadas no WordPress
Esperamos que este tutorial tenha ajudado você a aprender como exibir posts relacionados com miniaturas no WordPress sem plug-ins. Você também pode querer saber como rastrear os visitantes do seu site WordPress ou conferir nossa lista de 24 dicas para acelerar seu site.
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
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!
kabir bairwa
I was trying to correct WordPress-related posts but it was not happening when I saw this code and I used this code in my WordPressfile so now my WordPress-related posts coming properly
WPBeginner Support
Happy to hear our guide could help you!
Administrador
Jennifer
Is there a way to have related post based on the post title. I do not have tags and my categories really don’t do the trick since there is no distinction between them.
This would be of great help if you had a code to show related content based on the post title.
aman
I want code to display random posts and pages with thumbnail
WPBeginner Support
You would want to take a look at our guide below:
https://www.wpbeginner.com/wp-tutorials/how-to-display-random-posts-in-wordpress/
Administrador
karan4official
Instead of using <? use <?php everywhere
WPBeginner Support
Thank you for your feedback, this article should currently be using the php version everywhere
Administrador
Motahar Hossain
Thank you for your nice post.
Here “ignore_sticky_posts” should be used instead of “caller_get_posts”. Because “caller_get_posts” is deprecated.
WPBeginner Support
Thanks for pointing that out, we’ll be sure to look into updating the article
Administrador
Frank
Can you direct me as to where to add what categories I would like to limit the related posts to?
WPBeginner Support
This method limits the posts to the category the post is in. To limit the categories you would need to create an if statement to exclude certain categories.
Administrador
Greg
Is it possible where there are more than X related posts by category that are related that you can randomise say 3 posts?
WPBeginner Support
While it is possible, it would require adding far more to this, you may want to look into a plugin for that type of customization.
Administrador
Akiode obasanjo
No CSS is added
luigi
Hi, is it possible to limit them by date? Show only those of the last year?
Luis
I found a way to make the smaller thumbnails, but it shows them in a column and not horizontally. How can this be modified?
Luis
The script is working well. The only problem I have is that the thumb-nails are very large. Would there be some way to make them smaller?
WPBeginner Support
Hi Luis,
It uses the default post-thumbnail size. You can create a new thumbnail size and then use it in the code like this:
1-click Use in WordPress
Administrador
Ana
how to do for create a shortcode for this code, I created the function but I do not know how to return the print to the page.
Musarrof
Why I’m facing this problem. syntax error, unexpected end of file
Please help me.
Mike
Hello,
I’m a beginner in WorldPress.
I’d like to show Related Posts.
In the main menu I have Category A, and in Category A – Subcategories A, B and C. The posts are in Category A, but they can also be present in all 3 Subcategories.
When choosing one of the Related Posts something goes wrong and the posts from the initially chosen Subcategory don’t show correct anymore.
Anthony Reese
Thanks for the tutorial. This was incredibly useful and worked like a charm!
pawan singh
Hi Admin, Very informative article. I like your site because of simplicity and straightforwardness. All articles are to the point but when it comes to sharing the knowledge of code you become too technical. Just ignore the fact that much of the visitors are not coding expert. Wouldn’t it be much better if you just add 2or 3 more lines in your explanation to make it complete and easily understandable to all. Anyway, great article But I want to know which code or plugin is Wpbeginner using?
Ahmad
really helpful, thanks !
Tracy
what really sucks about your articles is you never actually say HOW to do something. It’s all well and good to tell me to put code into my single.php, but as a beginner I don’t know what that is or where to find it. You might want to think about putting this kind of critical information into your articles instead of assuming we know what it means, or that we have surfed every one of your articles to figure it out.
Victor Siyaya
I Agree. I have no idea where to paste this code too.
Rose
Thanks for the great post, very useful. I came across an error in the code so wanted to share in hope it may be useful for others in the future. The error was:
WP_Query was called with an argument that is deprecated since version 3.1.0! “caller_get_posts” is deprecated. Use “ignore_sticky_posts” instead.
So I simply replaced it and it worked fine. I am also using namespacing so I needed to change WP_Query to \WP_Query plus I changed the order of the below:
global $post;
$orig_post = $post;
Thanks again
Rose
sanjeev Kumar
sir
I am using the code of categories working properly but one thing is when on home page same category of 2 or 3 post then the link show balack but i want to show to show category which is next post
Luan
Hi,
Thanks for your post. I added the code in content-single.php and it worked. However, it displays as 1 column not 3 columns like your example. Could you please help me on this? I want my related posts to be displayed in 1 row, 3 columns. Thanks so much.
Claudio
Hello!
The first link on Aditional Sources, is broken.
Thank you by the code.
WPBeginner Support
Hi Claudio,
Thank you for notifying us. We have removed the broken link.
Administrador