[WordPress] Articles relatifs et thumbnails !

Je travail toujours sur l’évolution et les corrections à apporter au thème actuel de ce blog.

Dans ce travail j’ai récemment ajouté une petite fonction qui, au lieu d’afficher une liste d’articles relatifs via un plugin, va afficher des vignettes et ce sans plugin !

Comme on peut le voir sur l’image ci dessus nous avons donc de belles miniatures d’affichées au dessus du titre du billet.

Pour faire ceci il faut déjà avoir activer la gestion des « post thumbnail » pour son WordPress.

Cela se passe dans le fichier functions.php du thème.

if ( function_exists( 'add_theme_support' ) ) { // Added in 2.9
	add_theme_support( 'post-thumbnails' );
	set_post_thumbnail_size( 50, 50 ); // Normal post thumbnails
	add_image_size( 'thumb620', 620, 9999 ); // Permalink thumbnail size
	add_image_size( 'thumb80', 80, 80 ); // Permalink thumbnail size
	add_image_size( 'thumb160', 160, 9999 ); // Permalink thumbnail size
}

Ensuite dans la boucle WordPress du template on appelle une image de billet de la manière suivante :

<?php if ( has_post_thumbnail() ): ?>
	<? php the_post_thumbnail('thumb160'); ?>
<?php else : ?>
	
<?php endif; ?>

Ce code affiche l’image de billet si elle a été définie sinon elle affiche une image par défaut.

Pour avoir le résultat présenté dans la capture d’écran il faut donc utiliser le code qui suit dans votre template :

<?php
$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, // Number of related posts that will be shown.
			'caller_get_posts'=>1
	);
	$my_query = new wp_query($args);
	if( $my_query->have_posts() ) {
		while ($my_query->have_posts()) {
			$my_query->the_post();?>

				
				<?php if ( has_post_thumbnail() ): ?>
					<?php the_post_thumbnail('thumb160'); ?>
				<?php else : ?>
					
				<?php endif; ?>

<?php the_title();?>

				
			

		<?php
		}
	}
}
?>

Puis mettre ceci dans son fichier css :

.relative-wp-caption {
   width:180px;
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}

.alignleft {float: left;}