tutoriais category image
15 / February / 2011 | Tags:

Mostra posts relacionados com imagem (thumbnail) e sem a necessidade de plugin.

01. Há duas formas de usar essa função, pode ser relacionando os posts por tags ou por categorias. Adicione uma das duas no seu arquivo index.php e/ou single.php:

Por Tags

<?php $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'=> 4, // Numero de posts relacionados.
'caller_get_posts'=>1
);
$my_query = new wp_query( $args );
f( $my_query->have_posts() ) {
echo '<h3>Posts Relacionados</h3><br />';
while( $my_query->have_posts() ) {
$my_query->the_post();?>
<div class="relacionados">
<a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>">
<?php if(has_post_thumbnail()) {
the_post_thumbnail(array(120,120), array( 'class' => 'thumb' ));
} else {echo '<img src="/imagens/default.jpg" width="120" height ="120" class="thumb"/>';
}?></a>
<span class="titulo"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></span>
</div>
<?
}
echo '';
}
}
$post = $orig_post;
wp_reset_query(); ?>

Por Categorias

<?php $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'=> 4, // Numero de posts relacionados.
'caller_get_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<h3>Posts Relacionados</h3><br />';
while( $my_query->have_posts() ) {
$my_query->the_post();?>
<div class="relacionados">
<a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>">
<?php if(has_post_thumbnail()) {
the_post_thumbnail(array(120,120), array( 'class' => 'thumb' ));
} else {echo '<img src="/imagens/default.jpg" width="120" height ="120" class="thumb"/>';
}?></a>
<span class="titulo"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></span>
</div>
<?
}
echo '';
}
}
$post = $orig_post;
wp_reset_query(); ?>

Observe que na linha "10" é possível alterar a quantidade de posts a serem mostrados.
Na linha "21" em 120,120 você define largura e altura.
E por fim, na linha "22" altere o endereço "/imagens/default.jpg" pelo endereço de sua imagem default, que aparecerá no caso do post não possuir uma.

2. Adicione ao seu CSS:

.relacionados {
margin:0 5px 0 0;
padding: 0 9px;
width:120px;
float:left;
}
.relacionados .titulo {
padding:0 0 0 5px;
font-size: 11px;
width:130px;
text-align: center;
}
.thumb{
float: left;
margin: 0px 8px 5px 3px;
background-color: #f8f8f8;
padding: 6px;
}

Altere como achar necessário.

Obs. Para este tutorial funcionar corretamente, você tem que habilitar o uso de thumbnails no seu tema: http://true-luv.com/post-thumbnail/

Traduzido e modificado daqui: wpbeginner.com

A imagem "sem imagem" utilizada aqui no TL não está disponível para ser usada em outros blogs/sites. Obrigada.

Posts Relacionados




28 Comentários em “Posts Relacionados com Thumbnail”



Paulo • 18-10-2012 | 16:53 • Responder

Parabéns pelo post me ajudou muito.
Tem um probleminha no código “Por Tags” para o título:

f( $my_query->have_posts() ) {

Acho que seria:

if( $my_query->have_posts() ) {

Fica a dica!

Poly • 24-01-2014 | 14:59 • Responder

Tamara, coloquei o código de thumbnail e funcionou perfeitamente, mas toda vez que eu coloco o código de posts relacionados no meu index ou single o blog não abre :(
Estou colocando abaixo da div class de comentários e antes do endwhile
Saberia me dizer pq isso acontece?

(comentei de novo pq não foi completo)

Tamara • 25-01-2014 | 20:12 • Responder

É exatamente como posicionei o que uso aqui no blog. Seu WP está atualizado?

Poly • 01-02-2014 | 00:00 • Responder

Descobri o erro! Quando eu insiro o

{
the_post_thumbnail(array(120,120), array( ‘class’ => ‘thumb’ ));
} else {echo ”;
}

a página não abre :/

Tamara • 01-02-2014 | 12:52 •

Você adicionou a função Post Thumbnail ao seu tema? O link é a Obs. do post.

Keyko • 29-07-2014 | 01:24 • Responder

Dá erro. Invalida a página toda e a mensagem de erro é: Parse error: syntax error, unexpected ‘endwhile’ (T_ENDWHILE) in C:\Program Files\EasyPHP-DevServer-14.1VC9\data\localweb\wordpress\wp-content\themes\l2aelba-1\index.php on line 71

A linha 71 é: echo ”;

Já coloquei a função do thumbnail. Será q é a versão do wp q pode estar conflitando?

Tamara • 29-07-2014 | 07:22 • Responder

Acho difícil ser a versão do WP, só se você usa uma muito antiga. Eu uso essa função desde 2011 e nunca tive problemas.

Keyko • 29-07-2014 | 12:50 • Responder

Achei uma variação do código que inclui uma lista após o título e acrescenta na linha 71 echo ”; Com essa indicação de lista ele aceitou, se eu tiro volta a dar erro. =S




Comentar


Os comentários desse blog são moderados e serão publicados somente após a aprovação.