[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 : ?>
	Pas d'illustration pour ce billet
<?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 
		}
	}
}
?>	

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;}
8 commentaires Ajoutez les votres

  1. Mutalisk:

    Hello, je voulais appliquer ca sur mon site, mais je trouve pas ou activé les tumbnails !

    Merci

    Comme indiqué dans l’article il faut activer les fonctions de miniatures dans le fichier functions.php du thème. Si ce fichier n’existe pas tu peux le créer et y copier coller le code indiqué plus haut.

    Ton site est sympas au passage 😉

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.