Afficher des vignettes dans un thème Wordpress
Il ne vous aura sans doute pas échappé que ma barre latérale présente les derniers billets publiés sous la forme de chouettes vignettes cliquables. Je ne suis évidemment pas le seul blogueur à avoir opté pour cette solution et je suppose que vous vous en êtes déjà rendu compte. Seulement là où la plupart d’entre eux mettent en place cette fonctionnalité à l’aide des champs personnalisés natifs à Wordpress, je leur ai préféré une solution beaucoup plus souple qui présente comme principal atout d’être entièrement automatisée. Ce qui valait bien un billet.
D’après différentes études très sérieuses, il semblerait qu’une image retienne mieux l’attention des internautes que du texte. Et c’est sans doute la raison pour laquelle les blogueurs ont de plus en plus tendance à présenter la liste de leurs derniers billets sous la forme de miniatures cliquables. Ce n’est pas le cas de mon autre blog (la Fredzone pour ceux qui ne suivent pas) mais on le retrouve sur pas mal d’autres blogs, tels Fubiz ou encore Nowhere Else (sur les tests de produits). Une tendance qui nous vient tout droit des Etats-Unis et qui commence à s’étendre à travers la blogosphère francophone.
Mais en dehors de l’affichage des derniers billets, les miniatures (ou vignettes) sont également intéressantes lorsqu’on opte pour un thème dit « magazine ». Là encore, on ne peut pas se contenter d’afficher les premières lignes de ses billets. Afin de donner envie aux internautes de les lire, il est préférable de les accompagner d’une image pertinente.
Pour mettre en place ces vignettes, de nombreux blogueurs optent pour les champs personnalisés. Si cette solution reste relativement souple, elle nécessite toutefois un effort constant de la part du blogueur qui devra indiquer, en dur, le chemin de l’image à intégrer, pour chacun de ses billets. Pouvoir afficher des miniatures de manière automatique représente donc un gain de temps non négligeable et c’est la raison pour laquelle j’ai préféré opter pour cette solution.
En la matière, pas mal de scripts existent. Celui que j’ai utilisé n’est pas de mon fait, je l’ai simplement trouvé sur un sujet des forums du support Wordpress. Son point fort réside en le fait qu’il ira directement chercher la première image des billets de votre choix et que le redimensionnement se fera ensuite en HTML pur. En quelques secondes, vous pourrez donc l’adapter à n’importe quel thème et apporter toutes les modifications de votre choix sans perdre de temps. Pour le déployer sur votre propre thème, c’est simple, il suffit de suivre les étapes suivantes :
1. Création de la fonction
Tout va commencer par la création de la fonction que vous pourrez ensuite appeler où bon vous semble dans votre thème Wordpress. La procédure est relativement simple, il suffit de créer le fichier « functions.php » dans le dossier de votre thème et d’y coller le code suivant :
function get_first_image($lookthat) { $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('', $lookthat, $matches); $first_img = $matches[1][0]; if(empty($first_img)){ //Defines a default image $first_img = "/images/default.jpg"; } echo $first_img; }
Comme je l’ai déjà précisé, cette fonction ira automatiquement chercher la première image du billet. Dans le cas où il n’y en aurait pas, alors elle chargera à la place l’image dont la source est indiquée dans la variable « $first_img ».
2. Appel de la fonction
Là encore, rien de très compliqué. Une fois votre fonction créée et enregistrée, il vous suffira de saisir les quelques lignes suivantes pour l’appeler à n’importe quel endroit de votre thème. Précisons également qu’il est possible d’utiliser cette fonction dans une boucle et à plusieurs endroits différents de vos pages :
<?php // On appelle les "x" derniers billets global $post; $myposts = get_posts('numberposts=6&orderby=post_date&order=DESC'); foreach($myposts as $post) : ?> // On affiche les "x" derniers billets <a title="<?php the_title();?>;" rel="bookmark" href="<?php the_permalink(); ?>;"> <img style="border: 3px solid #2d2d2d;" src="<?php get_first_image($post->post_content);?>;" alt="" width="140px" height="91px" /> </a>
Le morceau de code précédent est suffisamment simple pour ne pas avoir besoin d’être expliqué. On peut juste remarquer que la fonction « get_first_image » est appelée directement au niveau de la balise « img » et que cette dernière contient également la largeur et la hauteur imposée (respectivement « width » et « height »). Libre à vous de les modifier comme bon vous semble pour adapter ces vignettes à votre propre thème.
#1
Excellent Fred, je vais essayer d’intégrer ça sur le mien.
Ah et fait gaffe, t’as les caractères spéciaux style > < etc qui passent pas dans ton code.
#2
Erf en effet, ça vient du plugin que j’utilise apparemment :s
Faudrait que je fouine pour en trouver des meilleurs pour quand j’ai besoin d’intégrer du code à mes billets.
#3
Remarque absolument non-pertinente par rapport au contenu du billet: rigolo d’avoir pris une image de VB(A) pour illustrer un article qui traite de php.
#4
Ouais, j’suis bourré d’humour moi ^^
#5
bonjour,
je suis sur overblog et pas un super pro de l’informatique.j’aimerai beaucoup intégrer cette fonction sur mon blog.
je ne sais pas comment faire et si sur la plateforme overblog c’est
possible.
creer un fichier php ok mais je le met ou sur overblog??
si vous pouviez m’aider cela serait sympa.
votre blog est plus qu’intéressant.
bonne journée
Mehdi
#6
salut,
voila j’ai voulut l’insérer sur mon blog, mais impossible :!!!
<a title=" » rel= »bookmark » href= »">
<img style="border: 3px solid #2d2d2d;" src="post_content); ?> » alt= »" width= »140px » height= »91px » />
pourtant je ne voit pas d’erreur dans le code !! et quand je le mais il me mais un petit careé avec en lien le 1er poste, mais aucune image ! et il m’affiche qu’un seul article ( comment faire pour en mettre plusieur ?
merci de votre aide .
#7
@Mehdi : Je ne suis pas certain que Overblog te permette d’éditer ton code alors tu risques d’avoir du mal à mettre cette fonction en place.
@Anis : Pourrais-tu m’envoyer l’ensemble de ton script sur mon mail : frederic.pereira(@)gmail(.)com ? Ce sera plus simple pour moi ^^
#8
@Anis: tu as juste recopié le bout de code que tu as mis là ? si oui, normal que tu n’aies qu’un poste, vu qu’il n’y a pas la boucle… il faut que tu copies les lignes après php… le chiffre 6 indique qu’il uy aura 6 vignettes !
Pour le petit carré qui s’affiche sans image, je pense que cest parce ke tu fais appel à une image externe et non interne ( ton image est hébergée sur le meme serveur que ton site ou sur un autre serveur ?)
j’ai le même pb avec un plugin !
#9
@weetabix : en faite c’est bon j’avais as mis la boucle est pas bien configurer mon fonction.php, mais la c’est bon j’ai régler le problème si tu veux la solution dit moi
#10
@anis: ok , cool !
pr mon pb, c’est réglé aussi ..j’utilisais timthumb qui prend pas les images externes et suis donc passé à phpthumb..
#11
@Weetabix : A la base, je n’avais pas mis la boucle, c’était donc un oubli de ma part et je l’ai rajouté quand Anis me l’a fait remarquer
Par contre, c’est bon à savoir pour PHP Thumb.
@Anis : Alors tu t’en es sorti ? C’est cool, faudra que tu me montres le résultat un de ces quatre.
#12
ben tu peux le voir sur la page d’accueil mais la c’est encore pas parfait mais je travaille sur un truck pour afficher le titre sur l’image genre comme toi
====> http://www.astuz.fr
#13
ok bien noté
#14
@anis : Désolé, ton commentaire était tombé dans mon antispam. Ouais donc ça rend vraiment très bien, propre et tout et tout. Super boulot
#15
@fred : ok merci !
#16
Bonjour,
est-il possible d’utiliser le script pour récupérer les premières images des pages créés, et non pas des post ?
merci
#17
@GAMm: Bonne question, je n’ai malheureusement pas le temps de me pencher sur la question mais je pense qu’il faut modifier la boucle en conséquence pour appeler la page et non l’article.
#18
Super
merci, c’est bien ce que je pensais !
\grrr:suis1n00b/
>keep_searchin^
#19
Je confirme qu’il faut bien modifier la boucle pour que cela fonctionne parfaitement !