Você com certeza já se deparou com esse recurso em diversos sites, mas talvez não tenha entendida a importância desse recurso para um site. O recurso de relacionar o conteúdo do seu site é uma aplicação prática de uma técnica fundamental usada para melhorar o engajamento de sites. Para sites WordPress o conteúdo relacionado ou também conhecido como Posts relacionados exibem, em um determinado local de uma página, uma lista de outras páginas ou artigos que tenha conteúdo relacionado com o conteúdo da páginas que está sendo visitada.
Se você fizer um bom trabalho de organização das categorias e tags do seu WordPress e fizer uso do recurso de posts relacionados, você estará dando a possibilidades de seus vistantes acessarem outras páginas do seu site que tenham alguma relevância com o conteúdo que elas já visitaram. Em resumo isso significa que seus visitantes ficarão mais em seu site, o que reduz a taxa de rejeição e pode melhorar o posicionamento do seu site.
Como adicionar o Post Relacionados no WordPress sem Plugins
Uma das grandes vantagens de usar WordPress são os plugins, mas sabemos também que o uso de muitos plug-ins em uma única instalação do WordPress, faz com que você corra o risco de tornar seu site mais pesado e lento, prejudicando a qualidade da experiência do seu site. Então vou trazer uma solução que encontrei e implementei em alguns sites, uma função que realiza essa tarefa de forma a não deixar nada a deseja para nenhum plugin.
Para poder adicionar esta funcionalidade no seu site WordPress, você precisará acessar a pasta de seu templates (Cujo caminho padrão é: www.seusite.com/wp-contant/themes/seutemplate). Selecione o arquivo functions.php, crie um backup dele e vamos começar a inserir o código abaixo:
function my_related_posts() {
}
Esta será a função que irá exibir o conteúdo relacionado a cada um de seus posts quando alguém estiver na visitando-o
Nesta função vamos passar algumas informações de como queremos que estes posts relacionados sejam exibidos, em primeiro lugar, a quantidade de posts que desejamos exibir e em segundo lugar, quais são as condições para que os artigos sejam exibidos:
$args = array(
'posts_per_page' => 5,
'post_in' => get_the_tag_list()
);
O próximo passo é criar uma variável, chamada $the_query que será usada pelo WordPress para ele exibir as mensagens.
$the_query = new WP_Query( $args );
Em seguida o que precisamos fazer é exibir as mensagens. Para fazer isso, usamos um while com o código abaixo:
echo '<ul>';
while ( $the_query->have_posts() ) : $the_query->the_post();
?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </li>
<?php
endwhile;
echo '</ul>';
Insira na ultima linha da função o código abaixo para preparar uma nova consulta.
wp_reset_postdata();
O código acima irá exibir uma lista simples. Mas preciso de um pouco de estilo então, para isso você vai inserir no arquivo algumas modificações do arquivo functions.php que editamos no seu template os códigos abaixo:
echo '<h2>Related Posts</h2>';
Para inserirmos uma miniatura da imagem destaque do artigo usaremos o código abaixo:
while ( $the_query->have_posts() ) : $the_query->the_post();
?>
<li>
<?php if ( has_post_thumbnail() ) { ?>
<div><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a></div>
<?php } ?>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>
<?php
endwhile;
Com esse estilo teremos um resultado semelhante ao layout abaixo. Fique a vontade para editar o CSS e fazer o layout de acordo com seu site.
Recapitulando. Teremos então o código final da função que irá inserir os posts relacionados:
function ll_related_posts() {
$args = array(
'posts_per_page' => 5,
'post_in' => get_the_tag_list(),
);
$the_query = new WP_Query( $args );
echo '<section id="related_posts">';
echo '<h2>Related Posts</h2>';
while ( $the_query->have_posts() ) : $the_query->the_post();
?>
<section class="item">
<?php if ( has_post_thumbnail() ) { ?>
<section class="related_thumb"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'related-post' ); ?></a></section>
<?php } else { ?>
<section class="related_thumb"><a href="<?php the_permalink(); ?>"><img src="<?php bloginfo('template_directory')?>/lib/images/thumb.png" /></a></section>
<?php } ?>
<?php the_title(); ?>
</section>
<?php
endwhile;
echo '<div class="clear"></div></section>';
wp_reset_postdata();
}
Use o código CCS a seguir para ter o resultado esperado, mas sinta-se livre para editá-lo de acordo com a identidade visual do seu site:
#related_posts {
margin-top: -10px;
margin-bottom: 10px;
padding-bottom: 20px;
border-bottom: 20px solid #E2E2E2;
}
#related_posts .item {
width: 132px;
max-height: 200px;
overflow: hidden;
float: left;
margin: 6px;
font-weight:bold;
text-align:center;
}
#related_posts .item img {
-webkit-box-shadow: 0 0 4px #999;
box-shadow: 0 0 4px #999;
border: white solid 1px;
padding: 4px;
margin: 0 auto;
background: #f2f2f2;
}
Plungin para Posts Relacionados
Eu não deixaria vocês apenas com a difícil tarefa de editar os arquivos do WordPress para conseguir o que tanto precisam. Mas lembre-se que é a possibilidade mais eficiente para seu site.
Vejamos então quais os plugins que cumprem com louvor a tarefa de relacionar o conteúdo do seu site, usando o recurso de Posts Relacionados:
nRelate
nRelate é um dos melhores plugins para exibição de posts relacionados no WordPress porque ele não usa todos os recursos do seu servidor.
Além de oferecer uma série de layouts diferentes para seus posts relacionados. Eu indique que procure uma opção não muito pesada e modere também na quantidade de posts relacionados.
Related Posts for WordPress
Este plugin torna a tarefa de relacionar os posts algo muito fácil, mas neste plugin a seleção é feita manualmente. O que não pense você que seja uma opção ruim, pelo contrário, permite a você mais autoridade sobre essa tarefa tão importante.
Conclusão
Espero que não sintam dificuldades para usar o código e também os plug-ins, deixem nos comentários como foram os resultados nos índices do site, principalmente a taxa de rejeição.
Abraços!
