Como lo pueden notar estoy un poco ausente de Eliseos más que nada por motivos personales, y (sorpresa) estoy diseñando un Theme nuevo para Eliseos.net que estaré presentando la próxima semana.

En el transcurso del diseño necesitaba crear una función que me permita mostrar post relacionados para una entrada, pero con Thumbnails en lugar de los clásicos links.

Si bien ya existen varios plugin que nos permiten hacer esto, siempre estoy buscando la forma de evitar sobrecargar el Blog cuando se puede usar el mismo Core de Wordpress.

Con pocas líneas de código se puede lograr algo como esto: (es una versión previa ya que estoy desarrollando el Theme, pero el código es completamente funcional).

Básicamente lo que haremos será insertar un función en el archivo functions.php para que “lea” toda la entrada, busque una imagen (en el caso de que no exista, nos muestre una por defecto) y no devuelva la ruta de la misma.

Luego un poco mas de código, para que compare la entrada con otras teniendo en cuenta los Tags de las mismas, si coinciden en los Tags que se muestre.

Instrucciones:

Abrimos nuestro archivo functions.php e insertamos:

//Cazar la primera imagen del post//
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
 
// No hay imagenes? Bueno, mostrar esta en su lugar
if(empty($first_img)){
$first_img = "/images/default.jpg";
}
return $first_img;
}

Como lo mencione anteriormente, nos devolverá la ruta de la imagen, solo resta envolverla dentro de los Tags correspondientes y tendremos una imagen.

La ruta de la imagen estar representada por:

<?php echo catch_that_image() ?>

Ahora lo que necesitamos es que nos muestre las entradas relacionadas y añadiremos la ruta de la imagen mencionada anteriormente, para eso insertamos estas líneas, por ejemplo en el archivo single.php

<?php
$backup = $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),
		'showposts'=>6, // Cantidad de entradas a mostrar.
		'caller_get_posts'=>1
	);
	$my_query = new wp_query($args);
	if( $my_query->have_posts() ) {
		echo '<h2>Relacionado</h2><ul id="related">';
		while ($my_query->have_posts()) {
			$my_query->the_post();
		?>
			<li>
			<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><img src="<?php echo catch_that_image() ?>" alt="<?php the_title(); ?>" width="70" height="70" /></a></li>
		<?php
		}
		echo '</ul>';
	}
}
$post = $backup;
wp_reset_query(); 
?>

Nota: la primera y las últimas dos líneas cumplen la función de resetear la query ya que puede interferir con varios plugin o con el mismo loop de Wordpress, si tenes problemas, bórralas.

Solo resta aplicarle un poco de formato vía CSS y estaríamos listos!

De esta forma estaremos logrando los mismo resultamos que lograríamos con un plugin, pero de manera casera y artesanal.

Si tenes alguna duda o consulta, no dudes en preguntar.