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.
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:
- Método 1: Como Mostrar Posts Relacionados no WordPress por Tags
- Método 2: Como Mostrar Posts Relacionados no WordPress por Categoria
- Guias de Especialistas sobre Posts Relacionados no WordPress
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.
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();.
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.
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.
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.
Guias de Especialistas sobre Posts Relacionados no WordPress
Quer saber mais sobre como exibir posts relacionados no WordPress? Confira estes tutoriais úteis sobre posts relacionados:
- Como Exibir Posts Relacionados no WordPress (Passo a Passo)
- Como Exibir Posts Relacionados do Mesmo Autor no WordPress
- Como Exibir Posts Recentes no WordPress
- Como Exibir Posts Recentes de uma Categoria Específica no WordPress
- Como Adicionar Posts Relacionados Inline em Posts de Blog do WordPress
- Como Exibir Posts Aleatórios 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 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.
imranhunzai
Absolutamente incrível! E sim, ajuda.
8MEDIA
amazing post ,, thanks
shaileshtr
É bom mostrar posts relacionados em um blog WordPress sem plugin. Isso consumirá menos largura de banda e tempo para carregar. http://shareitto.com Obrigado pela sua sugestão.
zioneyemedia
Tenho uma pergunta sobre isso: Estou lutando com o código para capturar posts de categorias filhas em vez de categorias pais. Algum conselho?
AmandaLong
Isso é demais... Obrigado!
dustinporchia
Estou tentando usar os posts relacionados por categoria e notei que você disse que o código tem que vir antes dos comentários no loop principal. No meu código, quero que os posts relacionados venham depois dos comentários no loop. Quando faço isso, percebo que meu plugin de comentários Disqus demora mais para carregar agora. Isso é por causa de um erro com os comentários ou é normal?
dustinporchia
Deixe pra lá… acabei de mudar para o livefyre, pois é mais o que procuro em um sistema de comentários de qualquer forma… obrigado!
subzerokh
por favor
alguém poderia ajudar um novato como eu a personalizar este script para que ele exiba posts relacionados de forma horizontal?
da esquerda para a direita..
em vez de mostrá-los de cima para baixo, verticalmente...
zioneyemedia
Olá,
O que eu fiz foi substituir os códigos e pelos meus próprios html e css. Os códigos criam listas para cada post, e isso geralmente é feito de forma vertical.
——————
<a href="” rel=”bookmark” title=””> <a href="” rel=”bookmark” title=””>
——————
Substituí o início de com e o fim de com, pois são minhas tags html. Em seguida, escrevi meu CSS para atender às necessidades específicas dessa classe div em seu site. Por exemplo, uma classe pleft de amostra poderia ser assim:
.pleft {float:left; padding:2px; margin:10px; width:278px; height:190px;}
Eu uso o seletor float: no meu CSS para mover os posts horizontalmente, e as margens e o padding para dar espaçamento entre cada post. Adicionei uma largura e altura específicas para exemplos adicionais.
Espero que isso ajude.
Simos
@zioneyemedia obrigado!
gcog
Eu tenho tags relacionadas, com certeza, mas quando adiciono o código, não vejo nada. Além disso, quando adiciono seu código para restringir a um tipo de post personalizado, ele me dá um erro. Eu alterei o tipo de post para o meu tipo de post específico.
subzerokh
@wpbeginner olá
obrigado pela sua rápida resposta...
mas eu sou um verdadeiro novato em tudo o que você está dizendo..
você pode me dar um pequeno exemplo?
para torná-los horizontais como no seu próprio blog?
pode entrar em contato pelo meu e-mail: khiloc at gmail dot com
wpbeginner
@subzerokh Você teria que editar o estilo. Não é tão difícil. Simplesmente envolva cada post em uma div. Especifique uma largura para essa div e, em seguida, defina uma propriedade float left. Ajuste as margens e outras coisas e pronto.
subzerokh
olá a todos!! obrigado por este script maravilhoso!!
É a única coisa que encontrei fazendo exatamente o que eu queria!!!
Mas ele está apenas mostrando posts relacionados de forma vertical (de cima para baixo)
Eu gostaria que fosse exibido da esquerda para a direita (horizontalmente)
Como fazer isso, por favor??
ConnectIndia
Erro Fatal error: Call to undefined function the_post_thumbnail() in /home/connec92/public_html/wp-content/themes/weekly/single.php on line 59 Alguém pode me ajudar. site http://www.connectindia.co.in
xavpro
olá,
ótimo post! talvez você possa me ajudar:
eu tenho uma miniatura automática se nenhuma for definida,
if ($thumb_array[‘thumb’] == ”) $thumb_array[‘thumb’] = ‘link para sua imagem de miniatura padrão’;return $thumb_array;
agora minha pergunta é como definir uma miniatura para cada categoria, que será usada se nenhuma for definida no post.
dehahs
funciona bem, obrigado por compartilhar!
AdnanAsif
Olá
obrigado pelo seu ótimo post..
Mas alguma alteração para obter posts por categorias, mas não em ul e li e não em miniatura..
Quero dizer posts completos exibidos em posts relacionados..exatamente como exibido na página inicial, com link de leia mais.
obrigado
aguardando sua resposta..
AdnanAsif
Olá
obrigado pelo seu ótimo post..
Mas alguma alteração para obter posts por categorias, mas não em ul e li e não em miniatura..
Quero dizer posts completos exibidos em posts relacionados..exatamente como exibido na página inicial, com link de leia mais.
obrigado
aguardando sua resposta..
ibadullah25
Posso ter um CSS para isso, por favor?
Equipe Editorial
O CSS que usamos foi para o site de um cliente. Você pode adicionar seu próprio CSS de como deseja exibir isso.
Admin
titusmagnet
Obrigado..estou procurando por esse tipo de código
jaffa
Isso é ótimo, exatamente o que eu estava procurando. Fico pensando, porém, como eu poderia combinar os dois acima e se não houver tags, então ele exibe posts da mesma categoria?
Tentando descobrir isso, mas ainda não cheguei muito longe
nikbanks
Obrigado pelo código, funcionou, mas como eu o estilizo? Eu gostaria que fossem 4 histórias lado a lado como as suas. No meu site, elas aparecem uma em cima da outra e não como as suas.
Equipe Editorial
Isso é CSS. Não estamos usando este código para mostrar histórias relacionadas. Segundo, acredito que você está falando sobre histórias em destaque na nossa barra lateral. Escrevemos outro post sobre isso em nosso site.
Admin
Coolguy
há uma maneira de exibir as miniaturas em posts relacionados sem usar imagens em destaque ou miniaturas de post??
ou seja, usar qualquer imagem usada no post...
Equipe Editorial
Sim, você pode utilizar as técnicas de fallback compartilhadas por outros desenvolvedores que buscam a primeira imagem do post. Mas recomendamos o uso de miniaturas de posts do WordPress...
Admin
Hetal
Obrigado por este artigo. Eu estava me perguntando se há uma maneira de marcar posts automaticamente sem ter que inseri-los manualmente.
Equipe Editorial
Não, você tem que marcar cada post manualmente.
Admin
Sisko
Ótimo!
E se eu quiser exibir posts relacionados por categoria sem miniaturas?
Obrigado
Equipe Editorial
Just remove the thumbnail code from the code above
Admin
Terry
Obrigado por postar este tutorial, ele me ajuda muito.
Adrian
Olá... Só queria dizer que tenho construído meu site WordPress do zero e este código funciona perfeitamente para mim usando WP 3.1... Tudo o que preciso fazer agora é estilizar o CSS e conseguir algumas miniaturas para os posts. Obrigado pela sua ajuda com o código.
new car release
obrigado, estou procurando este hack há tanto tempo e você me trouxe!
Patricia
Olá, existe uma maneira de excluir categorias? Tenho duas categorias principais onde todas as categorias são atribuídas. As categorias principais têm subcategorias e eu gostaria de mostrar apenas posts relacionados das subcategorias.
Isso é possível, excluindo os IDs das categorias principais?
Obrigado pelo seu conselho!
Aliás… adorei o código… e funciona muito bem!!!
Equipe Editorial
Você deve ser capaz de usar category not in <<
Admin
usman
Eu estava procurando por posts relacionados com plugins de miniaturas, mas o código que você colou acima resolveu meu problema.
John
Só uma pergunta, existe uma maneira de puxar apenas tags do mesmo tipo de post? Talvez usando algo como ‘post_type=videos’?
John
Aliás, descobri isso também:
Basta adicioná-lo ao array:
$args=array(
‘category__in’ => $category_ids,
‘post__not_in’ => array($post->ID),
‘posts_per_page’=> 2, // Número de posts relacionados que serão exibidos.
‘caller_get_posts’=>1,
‘post_type’=>’videos’
);
marion
Olá,
Obrigado por este tutorial. Estou me perguntando, no entanto, se há alguma maneira de os produtos relacionados serem aleatórios? Verifiquei diferentes produtos na mesma categoria e os mesmos produtos relacionados foram exibidos.
Obrigado
Equipe Editorial
Sim, use o parâmetro Query_Post para order e você pode aleatorizá-lo.
Admin
Clarence Johnson
Bom saber.
phdean
Olá,
Eu também gostaria de aleatorizar os posts que são exibidos para as categorias, pois, caso contrário, eles exibirão sempre os mesmos 2. Você pode me dar o código para fazer isso?
Many thanks in advance
John
Deixe pra lá, eu descobri. Obrigado pelo post!
Equipe Editorial
qual foi o problema?
Admin
John
Eu não tinha outros posts com as mesmas tags, ou seja, nenhum post relacionado. Erro bobo.
John
Copiei este código e o coloquei no meu single.php sem mudar nada e nada é exibido. Algo está errado com meu código? pastebin.com/kg0SkrAg
James
Isso não exibe uma miniatura — nem mesmo há uma chamada para uma imagem no código. Não vejo como alguém pode fazer isso funcionar.
Equipe Editorial
O código para a imagem é: the_post_thumbnail(); << Isso não é HTML estático onde você verá o código src da imagem. A função busca no banco de dados por uma imagem em destaque, também conhecida como miniatura, que está anexada a cada artigo. Se encontrada, ela exibirá a imagem. Agora, se você não tem miniaturas de post ativadas em seu tema, então você precisa adicioná-las primeiro:
https://www.wpbeginner.com/wp-themes/how-to-add-post-thumbnails-in-wordpress/
O artigo declarou claramente isso na seção Nota:. Você deve considerar lê-lo completamente.
Admin
Roberto Silva
Ei cara, eu amo seu blog!
Tenho uma pergunta?
Você pode fazer o mesmo truque, mas "POR Autor"?
mostrando os posts mais recentes por autor?
you will save my life
Aliás, obrigado por este site!
Equipe Editorial
Yes we will que the article soon
Admin
Roberto Silva
simmm, obrigado...
Será um ótimo artigo.
porque "posts mais recentes por autor sem plugin" é difícil de encontrar na internet.
você é o melhor.
Quinn
Obrigado por este código! Eu tentei e funciona mais ou menos.
Eu consigo que ele liste os artigos relacionados, um grande benefício.
Mas não consigo fazer com que nenhuma imagem apareça.
Os artigos têm imagens se este código raspa.
Eu também entrei e criei imagens para cada post com a tag personalizada "relatedthumb". Mas, ainda assim, nenhuma imagem.
Há algo mais que eu precise fazer?
Muito obrigado antecipadamente!
Quinn
Equipe Editorial
Este truque usa as miniaturas padrão do WordPress, que foram adicionadas no WP 2.9. Se você tiver uma imagem anexada como essa miniatura, ele a exibirá.
Admin
Anthony
É possível excluir uma categoria deste módulo?
Muito obrigado,
Anthony
Equipe Editorial
Ele só mostrará posts na categoria em que o outro post reside...
Admin
Madhav Tripathi
Olá, obrigado por este bom tutorial, atualmente estou usando o tema Thesis, então quero saber se há uma maneira no tema Thesis de implementar este código .php.
Sophie
Estou tentando modificar o código dele para usá-lo com categorias dentro de um tipo de post personalizado. Alguém pode ajudar? Sou bem novo em php.
Obrigado!
rulethenation
ok, consegui fazer funcionar, há alguma maneira de colocar uma imagem padrão se uma miniatura não estiver disponível?
Equipe Editorial
Sim, você pode usar o parâmetro 'if' para verificar se há plugins... se não houver, você pode exibir uma imagem padrão.
Admin
rulethenation
como eu faria isso? sou um noob em php lol
Quickbrown
Para usar imagens padrão quando não houver miniatura de postagem disponível, substitua por <?php if (has_post_thumbnail()) {the_post_thumbnail()} else {echo '’;} ?>
Em seguida, coloque um default-image.jpg na pasta de imagens do seu tema.
rulethenation
não consigo fazer isso funcionar, só bagunça todo o meu layout perto dos comentários, estou perdendo alguma coisa? tive que tirar do meu site
Clarence Johnson
Meus posts agora estão enriquecidos graças a você e a este tutorial.
Heather Hill
OI!
Obrigado por esta informação! É exatamente o que eu estava procurando.
Existe alguma maneira de adicionar um trecho a isso, junto com a foto?
Obrigado novamente pela sua ajuda!
Equipe Editorial
Sim. Basta adicionar the_excerpt(); onde você quer que o resumo seja exibido.
Admin
Jez
Obrigado por isso, exatamente o que eu estava procurando! Eu amo como seus artigos são diretos ao ponto, sem confusão.
Omer Greenwald
Obrigado por compartilhar. Estou usando este código há um tempo, mas ele tem um problema: ao adicionar tags a uma postagem, o WP as ordena alfabeticamente, independentemente da prioridade que adicionei. Portanto, este código exibe postagens relacionadas que correspondem apenas à primeira tag, o que às vezes é menos relevante.
Talvez você tenha uma ideia de como impedir essa ordenação automática de tags pelo WordPress ou alguma outra solução?
Equipe Editorial
Ele não está usando a primeira tag. Este código está usando todas as tags das postagens para encontrar postagens relacionadas.
Admin
Clarence Johnson
Estou tendo o mesmo problema também.
Doug C.
Todo aquele primeiro código apenas colocou duas instâncias da mesma postagem na página. Não mostrou nada relacionado.
Equipe Editorial
Doug, por favor, entre em contato conosco usando o formulário com um link de exemplo ativo, e podemos ajudar. Sabemos que este código está funcionando porque alguns sites de nossos clientes o estão usando.
Admin
Noor
Artigo muito útil, obrigado por atualizar
Liam
Ótimo tutorial. Alguém se importaria de me mostrar um single.php funcionando com este código?
Ainda estou aprendendo php.
Infelizmente
Erro de análise: erro de sintaxe, T_ENDIF inesperado em C:\xampplite\htdocs\mock\wp-content\themes\scwd\single.php na linha 76
Equipe Editorial
Aqui está um exemplo funcionando Flowtown Blog.
Note que este código é para funcionar dentro do loop. Onde você está tentando postar isso? Se for fora do loop, basta adicionar o código end if endif; << assim.
Admin
Liam
http://pastebin.com/m60c96f5f
Espero que o link funcione. Obrigado.
Equipe Editorial
Não sei o que pode estar dando errado. Depois da classe clearfloat, deve funcionar bem. É assim que colocamos no flowtown e está funcionando perfeitamente.
Liam
Vou terminar o tema e tentar em um site ativo em vez de xamp. Avisarei você.
Shahab
Ótimo tutorial!
No momento estou usando YARPP, mas adoraria experimentar este!
Obrigado
Suriya Kumar P
Vocês estão fazendo um ótimo trabalho. Muito obrigado.
Vivek @ InfoEduTech
Obrigado por este artigo. Estou procurando há muito tempo para mostrar as miniaturas com meu artigo, mas não consigo fazer isso. Tentei muitos plugins do WordPress, mas não consegui. Espero que isso me ajude.