tutoriais category image
Posts Relacionados com Thumbnail
15 de Fevereiro de 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




21 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!




Comentar


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