Générer automatiquement des miniatures sur la page d’accueil de son blog wordpress

On le sait tous les images ont de l'importance pour le lecteur qui aura peut être envie de poursuivre la lecture de votre blog en y voyant une belle illustration. Par principe illustrer ses articles est quelque chose à faire le plus souvent possible, mais quid de la page d'accueil qui nécessite tout autant d'attention que la page d'article? Voici un petit tutoriel qui va vous présenter comment faire pour afficher une miniature de la première image de l'article, le tout sans avoir besoin de plugin!

vignette sur la homepage de blog4auto.fr

Premièrement il va falloir éditer la page appelée function.php qui se trouve dans votre thème mais aussi dans l'éditeur de thème dans l'interface d'administration de votre blog "Appearance/Editor/Function.php". A la fin de ce fichier il va falloir coller ce bout de code :

// Recherche de la premiere image
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];
// Si zero image
if(empty($first_img)){
$first_img = "";
}
$first_img = str_replace('http://www.domaine.fr', '', $first_img);
return $first_img;
}

Simplement l'objectif de cette fonction est de retrouver la première image de votre article et de récupérer l'url de cette dernière. S'il n'y a pas d'image vous pouvez afficher une image par défaut $first_img = "image/defaut.jpg"; mais dans ce cas je préfère ne rien afficher.

Donc on a maintenant grâce à cette fonction les adresses des premières images de chaque article, il faut donc générer la miniature sinon vous allez avoir les images dans la taille utilisée dans l'article. Pour générer les miniatures à une taille spécifique il va falloir utiliser un petit script qui va travailler à votre place, celui-ci s'appelle timthumb, ce script en php va donc prendre votre image et la recouper à la taille désirée. Vous pouvez télécharger la version disponible sur Google Code ou bien prendre ma version qui comporte quelques modifications (génération de thumb si l'image est trop petite notamment).

Pour installer ce script vous allez devoir créer un dossier "scripts" dans le répertoire de votre thème de votre blog mondomaine.fr/wp-content/themes/montheme/script et un répertoire "cache" pour stocker les images mondomaine.fr/wp-content/themes/montheme/script/cache, ces deux répertoires doivent être en 777 pour que l'on puisse y déposer les images générées. Une fois les deux répertoires créés il faut déposer le fichier timthumb.php dans script.

Maintenant il ne reste plus qu'à modifier votre page d'accueil, "Appearance/Editor" puis Main Index Template (index.php) pour appeler la fonction en y ajoutant ce bout de code à l'endroit où vous souhaitez afficher la vignette :

< ?php if (catch_that_image()){ ?>
<!-- Begin Thumb Container -->
<div class="postthumb">
              <a href="<?php the_permalink(); ?>">
               <img src="<?php bloginfo('template_directory'); ?/>/scripts/timthumb.php?src=< ?php echo catch_that_image() ?>&w=500&h=150&zc=1&q=100" alt="< ?php the_title(); ?>"/>
              </a>
</div><!-- End Thumb Container -->
<div class="clear"></div>
< ?php }; ?>

Notez que je fais un test pour savoir s'il y a une image ou pas et dans le cas où il n'y en ait pas je n'affiche rien (à adapter en fonction de vos besoins). Pour définir la taille des thumbs (vignettes) rien de plus simple dans la ligne : w=500&h=150&zc=1&q=100 il suffit de remplacer "w" par la largeur de votre choix et "h" par la hauteur de votre choix.

Avec cette méthode vous pouvez dire adieu aux champs personnalisés qui sont au niveau de la préhistoire pour l'affichage des vignettes sur la page d'accueil!

Source le forum de wordpress.org

# Autres articles pour aller plus loin...

• Ajoutez un effet d’apparition fluide sur vos images
• Enlever la mise en forme de la syntaxe dans l’éditeur de thème de Wordpress
• Tutoriel : Changer le thème de son blackberry
• Comment mettre de la neige sur votre blog?
• Image related post, plus d’effet pour la navigation connexe