Como: Posts Relacionados com Miniaturas no WordPress sem Plugins

Você deseja exibir uma lista de posts relacionados em seu site WordPress e prefere usar código em vez de um plugin?

No WPBeginner, frequentemente enfatizamos a importância de engajar seu público e mantê-lo explorando seu conteúdo. Uma estratégia eficaz que vimos ser usada em inúmeros sites WordPress de sucesso é a exibição de posts relacionados.

Quando os visitantes do seu blog terminam de ler um artigo de seu interesse, oferecer uma lista de posts relacionados os manterá engajados e os ajudará a encontrar novo conteúdo para ler.

Neste artigo, mostraremos como exibir posts relacionados no WordPress usando código, sem a necessidade de plugin.

Como: Posts Relacionados com Miniaturas no WordPress Sem Plugins

Por que Exibir Posts Relacionados no WordPress?

Quando seu blog WordPress começa a crescer, pode se tornar mais difícil para os usuários encontrarem outros posts sobre o mesmo tópico.

Exibir uma lista de conteúdo relacionado no final de cada postagem do blog é uma ótima maneira de manter seus visitantes em seu site e aumentar as visualizações de página. Também ajuda a melhorar a visibilidade de suas páginas mais importantes, exibindo seu melhor conteúdo onde as pessoas podem encontrá-lo facilmente.

Se você não está familiarizado com código, então achará mais simples escolher um dos muitos plugins de posts relacionados para WordPress que podem exibir posts relacionados sem código.

Mas, se você já se perguntou se pode exibir posts relacionados sem usar um plugin, compartilharemos dois algoritmos diferentes que você pode usar para gerar posts relacionados com miniaturas usando apenas código:

Observação: Se você deseja mostrar uma miniatura com cada post relacionado, certifique-se de primeiro adicionar uma imagem em destaque a esses posts.

Método 1: Como Mostrar Posts Relacionados no WordPress por Tags

Uma maneira eficiente de localizar conteúdo relacionado é procurar outros posts que compartilham as mesmas tags. Tags são frequentemente usadas para focar nos detalhes específicos contidos em um post.

Com isso em mente, você pode querer adicionar algumas tags comuns aos posts que deseja relacionar. Você pode inseri-las na caixa 'Tags' no editor do WordPress.

A Caixa de Configurações 'Tags' no Editor do WordPress

Depois de adicionar tags aos seus posts, a próxima coisa a fazer é adicionar o seguinte trecho de código ao template single.php do seu tema.

Se precisar de ajuda para adicionar código ao seu site, consulte nosso guia sobre como colar snippets 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();

Este código procura 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ê poderá colar o código no template single.php do seu tema, após a postagem principal e logo acima da seção de comentários.

Se você estiver usando o tema Twenty Twenty-One, como estamos 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();.

Visualização de Conteúdo Relacionado por Tags

Isso exibirá automaticamente conteúdo relacionado em qualquer postagem do WordPress.

Você precisará alterar o estilo e a aparência de suas postagens relacionadas para que correspondam ao seu tema, adicionando CSS personalizado.

Exemplo de Posts Relacionados

Dica: Em vez de editar os arquivos do seu tema, o que pode quebrar seu site, recomendamos o uso de um plugin de snippets de código como o WPCode.

O WPCode torna seguro e fácil adicionar código personalizado no WordPress. Além disso, ele vem com opções de 'Inserção' que permitem inserir e executar automaticamente snippets em locais específicos do seu site WordPress, como após uma postagem.

Opções de inserção do WPCode para trechos de código personalizados

Para mais detalhes, veja 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 forma de exibir conteúdo relacionado é listar postagens que estão na mesma categoria. A vantagem desse método é que a lista de postagens relacionadas quase nunca ficará em branco.

Assim como o Método 1, você precisa adicionar um snippet de código ao template single.php do seu tema ou em um plugin de snippets de código como o WPCode. Para 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 no final de cada postagem.

Se você quiser alterar a estilização e a aparência de suas páginas relacionadas, precisará adicionar CSS personalizado para combinar com seu tema.

Quer saber mais sobre como exibir posts relacionados no WordPress? Confira estes tutoriais úteis sobre posts relacionados:

Esperamos que este tutorial tenha ajudado você a aprender como exibir posts relacionados com miniaturas no WordPress sem plugins. Você também pode querer aprender como rastrear visitantes em seu site WordPress, ou conferir nossa lista de 24 dicas para acelerar seu site.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.

Aviso: Nosso conteúdo é apoiado pelos leitores. Isso significa que, se você clicar em alguns de nossos links, poderemos ganhar uma comissão. Veja como o WPBeginner é financiado, por que isso importa e como você pode nos apoiar. Aqui está nosso processo editorial.

O Kit de Ferramentas Definitivo para WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Interações do Leitor

184 CommentsLeave a Reply

  1. Posts relacionados são uma maneira incrível de atrair usuários para mais conteúdo em seu site. Depois de ler vários de seus artigos sobre este tópico, finalmente entendi o poder desse recurso e o implementei em minha página 404. Agora, em vez de mostrar o conteúdo que não existe mais, ele oferece alternativas e artigos semelhantes aos meus usuários. Isso reduziu drasticamente a taxa de rejeição do meu site. Obrigado não apenas por este artigo, mas também pelos outros artigos que você escreveu sobre este tópico. Eles me ajudaram a melhorar minha página 404.

  2. Eu estava tentando corrigir posts relacionados ao WordPress, mas não estava funcionando quando vi este código e o usei em meu arquivo WordPress, então agora meus posts relacionados ao WordPress estão aparecendo corretamente.

  3. Existe uma maneira de ter posts relacionados com base no título do post? Eu não tenho tags e minhas categorias realmente não funcionam, pois não há distinção entre elas.

    Isso seria de grande ajuda se você tivesse um código para mostrar conteúdo relacionado com base no título do post.

  4. Obrigado pelo seu belo post.

    Aqui, "ignore_sticky_posts" deve ser usado em vez de "caller_get_posts". Porque "caller_get_posts" está obsoleto.

    • Este método limita os posts à categoria em que o post se encontra. Para limitar as categorias, você precisaria criar uma instrução if para excluir certas categorias.

      Admin

  5. É possível onde há mais de X posts relacionados por categoria que estão relacionados que você pode randomizar, digamos, 3 posts?

    • Embora seja possível, exigiria adicionar muito mais a isso; você pode querer procurar um plugin para esse tipo de personalização.

      Admin

  6. Encontrei uma maneira de fazer as miniaturas menores, mas elas são exibidas em coluna e não horizontalmente. Como isso pode ser modificado?

  7. O script está funcionando bem. O único problema que tenho é que as miniaturas são muito grandes. Haveria alguma maneira de torná-las menores?

  8. como fazer para criar um shortcode para este código, criei a função mas não sei como retornar o print para a página.

  9. Olá,
    Sou iniciante no WordPress.
    Gostaria de mostrar Posts Relacionados.
    No menu principal tenho a Categoria A, e na Categoria A – Subcategorias A, B e C. Os posts estão na Categoria A, mas também podem estar presentes em todas as 3 Subcategorias.
    Ao escolher um dos Posts Relacionados algo dá errado e os posts da Subcategoria inicialmente escolhida não são exibidos corretamente.

  10. Olá Administrador, Artigo muito informativo. Gosto do seu site pela simplicidade e clareza. Todos os artigos são diretos ao ponto, mas quando se trata de compartilhar conhecimento de código, você se torna muito técnico. Apenas ignore o fato de que muitos visitantes não são especialistas em codificação. Não seria muito melhor se você adicionasse apenas mais 2 ou 3 linhas à sua explicação para torná-la completa e facilmente compreensível para todos. De qualquer forma, ótimo artigo, mas quero saber qual código ou plugin o Wpbeginner está usando?

  11. o que realmente chateia nos seus artigos é que você nunca diz COMO fazer algo. É tudo muito bom me dizer para colocar código no meu single.php, mas como iniciante, eu não sei o que é isso ou onde encontrá-lo. Você pode querer pensar em colocar esse tipo de informação crítica em seus artigos em vez de assumir que sabemos o que isso significa, ou que já lemos todos os seus artigos para descobrir.

  12. Obrigado pelo ótimo post, muito útil. Deparei-me com um erro no código e queria partilhá-lo na esperança de que possa ser útil para outros no futuro. O erro foi:

    WP_Query foi chamado com um argumento que está obsoleto desde a versão 3.1.0! “caller_get_posts” está obsoleto. Use “ignore_sticky_posts” em vez disso.

    Então, simplesmente substituí-o e funcionou bem. Também estou a usar namespaces, então precisei de mudar WP_Query para \WP_Query, além de ter mudado a ordem do seguinte:

    global $post;
    $orig_post = $post;

    Obrigado novamente
    Rose

  13. senhor
    Estou usando o código de categorias funcionando corretamente, mas uma coisa é quando na página inicial a mesma categoria de 2 ou 3 posts, então o link aparece preto, mas eu quero que apareça a categoria que é o próximo post

  14. Olá,

    Obrigado pelo seu post. Adicionei o código em content-single.php e funcionou. No entanto, ele é exibido como 1 coluna, não 3 colunas como no seu exemplo. Poderia, por favor, ajudar-me com isto? Quero que os meus posts relacionados sejam exibidos em 1 linha, 3 colunas. Muito obrigado.

  15. Olá,

    Eu tenho uma opção de ‘Post relacionado’ do meu tema do WordPress e já a estou usando. Exibi 6 posts após o conteúdo. O problema é que ele mostra apenas 3 posts relacionados e os próximos três podem ser vistos quando você desliza horizontalmente. Eu não quero essa opção, quero que o site exiba todos os 6 posts de uma vez. Você pode me dizer como fazer isso?

  16. Olá,

    Sua orientação foi incrível, mas como posso excluir uma categoria específica dos posts relacionados para não exibi-la?

    Obrigado, desde já!
    Atenciosamente,
    LAszlo Gyuricza

  17. Boa solução, mas não definitiva para minha exigência. Na verdade, o principal problema é que este código ordena os posts relacionados a partir dos mais recentes na mesma categoria ou tags. O resultado é que, quando você navega dentro de uma categoria/tag, você sempre exibirá os mesmos poucos posts mais recentes, limitando severamente os posts mais antigos do seu site. Essa é uma conclusão correta? Por favor, se você tentou, compartilhe sua opinião!

    • 1. Após ‘caller_get_posts’=>1, coloque uma vírgula(,)
      2. Aperte o botão Enter [próxima linha]
      3. Adicione ‘orderby’=>’rand’
      Pronto. Agora os posts relacionados serão exibidos aleatoriamente. Obrigado.

  18. Este código funciona muito bem. Eu estava me perguntando se você poderia explicar o que esta parte do código faz?

    $orig_post = $post;
    global $post;

    $post = $orig_post;

    Acho que entendi o que o resto está fazendo, mas isso está me confundindo.

    Obrigado por todo o seu ótimo conteúdo!

  19. no tema padrão Twentyfifteen, onde devo inserir este código no arquivo single.php? Se eu inserir acima do endwhile;, ele mostra erro de sintaxe, 'endwhile' inesperado e se eu inserir abaixo do endwhile; mas acima do endif;, ele mostra erro de sintaxe, 'endif' inesperado

    Alguma solução para isso?

    Obrigado

  20. no tema padrão Twentyfifteen, onde devo inserir este código no arquivo single.php? Se eu inserir acima do enwhile;, ele mostra erro de sintaxe, 'endwhile' inesperado e se eu inserir abaixo do enwwile mas acima do endif;, ele mostra erro de sintaxe, 'endif' inesperado

    Alguma solução para isso?

    Obrigado

  21. Oi! Ótimo post!

    Existe alguma maneira de combinar as duas opções, a fim de chamar tags relacionadas apenas na categoria atual?

  22. meu layout do single.php :

    //the_content bla bla bla código aqui

    //Copiar colar código de Posts Relacionados por Tags aqui

    //comments_template bla bla bla código aqui

    ——————————-
    o resultado que obtive foi um erro:
    Erro de análise: erro de sintaxe, inesperado ‘endwhile’ (T_ENDWHILE) em …
    ——————————-
    após eu mudar " <? } " para " <?php } " funcionou,

    just sugestion, maybe it better if you put complete php open tag
    thanks :)

  23. Funciona perfeitamente. Como excluir a tag definida de Posts Relacionados por Tags? Quero dizer, como mudar o código para que o algoritmo encontre outros posts com qualquer uma das tags (exceto a tag 595, por exemplo) que o post atual tenha e os liste.

  24. Obrigado pelo ótimo código
    Funciona muito bem, mas você não abordou nenhum código CSS para um visual mais bonito para esta seção. Você pode fazer isso? Sou novato em programação e tentei alguns códigos, mas eles não funcionaram. Em seus códigos há:
    echo ‘Related Posts’;
    mas em alguns códigos semelhantes que encontrei em outros recursos há:

    e em CSS alguns códigos como este:
    .relatedposts {
    font-size: 12px;
    width: 640px;
    }
    .relatedposts h3 {
    font-size: 20px;
    margin: 0 0 5px;
    }
    terão uma aparência agradável, mas não funcionou com o seu código.
    Obrigado

  25. Caro colega, este é um erro que estou recebendo ao colar este código no arquivo single.php. Por favor, diga-me exatamente onde devo colar este código.

    Erro de análise: erro de sintaxe, fim inesperado do arquivo em C:\xampp\htdocs\beingusefull\wp-content\themes\TechPlus\single.php na linha 78

  26. Isso dependerá do seu tema e modelo individuais. Você precisa adicionar a tag condicional após o início do loop do WordPress. Após esta linha:
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    • Eu também recebi esse erro e este é o meu código atualizado:
      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, // Número de posts relacionados que serão exibidos.
      ‘caller_get_posts’=>1
      );
      $my_query = new wp_query( $args );
      if( $my_query->have_posts() ) { ?>
      Posts Relacionados
      have_posts() ) : $my_query->the_post(); ?>
      <a href="” rel=”bookmark” title=””>

      <a href="” rel=”bookmark” title=””>

    • Se você estiver usando o plugin Yoast’s WordPress SEO, você pode especificar a URL da miniatura na aba social da postagem. Se a aba social não for exibida, você precisará clicar no link Yoast SEO no menu de administração do WordPress e, em seguida, clicar em “Social”. Na página social, marque a opção “Add Open Graph meta data” e salve. Volte para sua postagem e você poderá especificar a imagem em miniatura que deseja usar quando a postagem for compartilhada. Se você não definir explicitamente a imagem da postagem, o usuário terá a opção de selecionar qualquer imagem que apareça na página, é por isso que as imagens de suas postagens recentes estão sendo puxadas quando você compartilha o link do artigo.

  27. Alguma ideia sobre qual seria a carga de banco de dados/servidor para um site auto-hospedado grande? Estou procurando uma alternativa para posts relacionados agora que o #nRelate não está mais disponível.

  28. Isso não funciona no single.php para mim, pois os posts relacionados aparecem no final da página. Funciona com loop.php, mas então eles também aparecem na página inicial – alguma ideia de uma correção para que apareça apenas em posts individuais e não na página inicial?

  29. Olá, devo ser o único que não está fazendo isso corretamente. Meu tema suporta imagens em destaque, adicionei este código antes dos comentários dentro do arquivo single.php. Alguma dica de exatamente onde inserir o código?

  30. Existe uma maneira de adicionar paginação à consulta de posts relacionados? Não consigo fazer a paginação funcionar em uma consulta secundária dentro de single.php. Obrigado!

  31. Olá, gostaria de perguntar se há uma maneira de fazer com que os posts relacionados sejam por categoria e tags em um só lugar? Obrigado.

  32. Existe uma maneira de escolher uma única categoria (vamos chamá-la de Marcas) e então exibir posts relacionados apenas afiliados às subcategorias de Marcas? Então, a hierarquia das categorias seria Marcas > JCPenny. Eu quero mostrar apenas posts relacionados para JCPenny. Mas, essa subcategoria pode ser diferente por post. Então, se um post usa uma subcategoria diferente, ele mostrará posts relacionados para essa subcategoria. Este código pode ser modificado para lidar com isso de alguma forma?

  33. Olá, obrigado pelo código, mas em vez de pegar a imagem destacada como miniatura, posso pegar a primeira imagem dos meus posts? Obrigado

Deixar uma resposta

Obrigado por escolher deixar um comentário. Por favor, tenha em mente que todos os comentários são moderados de acordo com nossa política de comentários, e seu endereço de e-mail NÃO será publicado. Por favor, NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.