Le blog de Nukleo

Utilisation des vignettes (post thumbnails) de WordPress

24 décembre 2010 dans WordPress |

Depuis la version 2.9 de WordPress nous avons à notre disposition les post thumbnails, à savoir des petites vignettes servant à illustrer l’introduction d’un article. Elle servent notamment sur la page qui liste les articles mais peuvent être utilisées où bon vous semble. Voici comment activer et utiliser cette fonction.

Activation des post thumbnails

De base la fonctionnalité n’est pas active, certainement pour des raisons de rétro-compatibilité. Pour l’activer éditez le fichier functions.php de votre thème en ajoutant cette ligne :

// activation des post thumbnails si la fonction est disponible (wp 2.9+)
if( function_exists('add_theme_support') ) {
  add_theme_support('post-thumbnails');
}

Cette ligne ajoutera dans la sidebar de votre page d’édition d’article un onglet ‘Image à la une‘. Il suffira de cliquer sur ‘Mettre une image à la une‘ pour sélectionner (ou uploader) votre vignette. Je conseille de créer votre vignette manuellement pour en maîtriser les dimensions et la qualité.

Intégration des vignettes

Pour afficher vos belles vignettes, éditez le fichier contenantt la boucle qui liste vos articles (souvent index.php) en ajoutant à l’endroit approprié ceci :

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

Paramètres

Le template tag the_post_thumbnail() accepte des paramètres optionnels permettant de modifier la taille de la vignette ainsi que certains attributs : classe CSS, les attributs title et alt ainsi que la source de l’image. Voir le codex pour en savoir plus.

Un exemple

Pour transformer la vignette en lien vers l’article et lui donner le titre (alt et title) de l’article, utilisez le code suivant :

<?php if(has_post_thumbnail()) : ?>
<a href="<?php the_permalink() ?>"
<?php the_post_thumbnail( '', array('alt' => $post->post_title, 'title' => $post->post_title) ); ?>
</a>
<?php endif; ?>

Mots-clés : ,

Vous avez aimé l'article ? Partagez-le : 

Les commentaires sont fermés.