Tag : thème

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!

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('//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()){ ?>


              
               
              


< ?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