Blog what I write

Post – Thumbnail en WordPress; Mostrar 5 últimos posts con thumbnails

post - - 5 replies -
thumbnail-wp

La semana pasada implemente una funcionalidad en la que puede aprovechar los nuevos post-thumbnails de la versión 2.9 de WordPress.

¿Qué es un post-thumbnail?

Es una imagen en miniatura que puedes asociar a cada post.

Esta nueva característica es muy interesante puesto que te ahorras códigos y métodos un tanto rebuscados si lo único que quieres es asociar a un post una imagen.
Por ejemplo en el apartado portfolio de este sitio web veis que aparecen un thumbnail por cada proyecto. Para lograrlo he subido el thumbnail como una imagen más y a través de “query y el menu-order” cojo la primera imagen del post, luego en la ficha del proyecto me salto la primera y coloco el resto.
Otra formula para establecer thumbnails es usar algún plugin disponible.

Y ahora por fin en WordPress ya tenemos incorporada de base esta característica.

Método de empleo

Dando soporte a post-thumbnails en nuestro theme activo

Lo primero es indicar a WordPress que deseamos usar esta funcionalidad. Para ello usamos la siguiente instrucción que debemos incorporar al fichero function.php de nuestro theme.

add_theme_support( 'post-thumbnails' );

Incluir el thumbnail en un post

Se hace a través de la interfaz del panel de control, facilitando así la tarea para los editores del blog.
Cuando escribamos un post o lo editemos en el panel de control de WordPress, veremos al margen derecho un nuevo bloque llamado “Post Thumbnail”, en el podemos incluir la imagen en miniatura.

Mostrar los últimos 5 posts (con thumbnails)

function related_posts() {
	global $wpdb, $post;
	
	$category = get_the_category(); 	

	$last_posts = $wpdb->get_results("
		select $wpdb->posts.ID, $wpdb->posts.post_title, $wpdb->posts.guid, date_format($wpdb->posts.post_date, '%e-%m-%Y') as post_date
		from $wpdb->posts
		join $wpdb->term_relationships
			on $wpdb->posts.ID = $wpdb->term_relationships.object_id  
		where 
			$wpdb->term_relationships.term_taxonomy_id = ".$category[0]->cat_ID." and
			$wpdb->posts.post_type = 'post' and 
			$wpdb->posts.post_status = 'publish' and 
			$wpdb->posts.ID != ".$post->ID."
		group by $wpdb->posts.ID 
		order by $wpdb->posts.ID desc
		limit 5");
					
	echo '<ul>';
		foreach ($last_posts as $last_post_current) {
			echo '<li>';
				echo '<a href="'.$last_post_current->guid.'" rel="bookmark">';
					if (has_post_thumbnail($last_post_current->ID)) { 
						echo get_the_post_thumbnail($last_post_current->ID, array(40,40)); 
					}
					echo $last_post_current->post_title;
				echo '</a>'; 
				echo '<span class="date">'.$last_post_current->post_date.'</span>';
			echo '</li>';
		}
	echo '</ul>';		
}

A partir de un query se obtienen los últimos 5 posts publicados de la categoría activa get_the_category();.
Luego en el bucle que recorre cada post, se muestra el titulo, thumbnail y el enlace correspondiente a cada post.

Fijémonos en fragmento de código que nos interesa:

if (has_post_thumbnail($last_post_current->ID)) { 
	echo get_the_post_thumbnail($last_post_current->ID, array(40,40)); 
}

La función has_post_thumbnail(); a la que le pasamos como parámetro el post_id nos devuelve true si ese post contiene un thumbnail asociado. En ese caso se ejecuta la función get_the_post_thumbnail(); a la que se le pasa como primer parámetro el post_id y como segundo un tamaño para la imagen en miniatura (en forma de array), en este caso 40*40 pixel.

Podéis ver más información detallada sobre post-thumbnails en New in WordPress 2.9: Post Thumbnail Images.