En el manual de hoy, voy a tratar de poner por escrito la última mejora que he desarrollado en esta web, que son los tres posts relacionados que hay debajo de cada post, justo antes de los comentarios.

Para eso, lo primero es definir lo que queremos hacer, la idea es que cada noticia, busque entre las demás, alguna que tenga como coincidencia una etiqueta, de ese modo sabemos que esa noticia tiene alguna relación.

Pongámonos manos a la obra, lo primero será crear la función en el fichero functions.php, a la que llamaremos desde cualquier parte que queramos en nuestra plantilla.

function franmoreno_get_related()
{
	global $post;
	$tags = wp_get_post_tags($post->ID);

	$related = '';

	if ($tags):
		foreach ($tags as $tag):
			$tag_ids[] = $tag->term_id;
		endforeach;
		$args=array(
			'tag__in' => $tag_ids,
			'post__not_in' => array($post->ID), // Omitimos el post actual
			'showposts'=>3 //Cuantos artículos queremos mostrar
		);
		$q = new WP_Query($args);
		if ($q->have_posts()):
			while ($q->have_posts()): $q->the_post();
				if (has_post_thumbnail()):
					$related .= '<a href="' . get_permalink() . '" title="' . get_the_title() . '">' .
 get_the_post_thumbnail(get_the_ID(),'thumbnail',array('title'=>get_the_title())) .
'<span class="title">' . get_the_title() . '</span></a>';
				endif;
			endwhile;
		endif;
		wp_reset_query();
	endif;
	return $related;
}

La función anterior, hace varias cosas:

1. Obtenemos las etiquetas del post actual con la función wp_get_post_tags().
2. Almacenamos los ids de estas etiquetas en una variable ($tag_ids) para poder pasarselos a la función que hace la búsqueda.
3. Definimos los argumentos que recibe la consulta que busca las entradas, en este caso, definimos las etiquetas que debe contener, el post a omitir y la cantidad de posts a obtener con la consulta.
4. Obtenemos los posts y hacemos un recorrido como ya se explicó en el post sobre cómo listar posts en WordPress.
5. Devolvemos el string generado para mostrarlo en la plantilla.

<?php
  $related = franmoreno_get_related();
  if ($related):
?>
<section class="related">
  <h2>Posts relacionados</h2>
  <?php echo $related; ?>
</section>
<?php endif; ?>

.related{
	padding: 20px 0;
}

.related h2{
	margin-bottom: 20px;
}

.related a{
	margin: 0 45px;
	width: 150px;
	padding: 5px;
	border: solid 1px #ccc;
	display: block;
	float: left;
	position: relative;
	text-decoration: none;
}

.related a img{
	width: 150px;
	height: 150px;
}

.related a .title{
	display: none;
	width: 140px;
	height: 140px;
	background: #000;
	background: rgba(0,0,0,0.6);
	color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	text-decoration: none;
	line-height: 20px;
	padding: 10px;
	vertical-align: bottom;
}

var $j = jQuery.noConflict();

$j(function(){
	$j('.related a').hover(function(){
		$j(this).children('.title').fadeIn('slow');
	}, function(){
		$j(this).children('.title').fadeOut('slow');
	});
});