Depuis la version 2.9 de WordPress, les miniatures d’articles ont fait leur apparition sous la forme d’un module « Image à la une » dans l’éditeur. Ces miniatures nécessitent que le thème prenne en charge une telle fonctionnalité ce qui est encore loin d’être le cas. Je vous propose donc de suivre ce tutoriel pour rendre compatible votre thème et de bénéficier ainsi d’une fonctionnalité au combien utile.
La plupart des blogs actuels affichent une miniature pour accrocher le lecteur à côté du titre et de la description d’un article. C’est le cas sur WordPress Channel et sur un nombre incalculable de blogs.
Activer la prise en charge des miniatures d’articles
Pour activer la prise en charge des miniatures, rendez-vous dans le module Apparence puis Éditeur. Vous pouvez également passer par votre client FTP favori pour éditer les fichiers du thèmes qui se trouvent dans le dossier /wp-content/themes/NOM_DU_THEME. Vous serez alors en mesure d’effectuer une sauvegarde au préalable.
Editez ensuite le fichier functions.php et rajoutez les lignes de code suivantes :
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
}
Ce bout de code active le module Image à la une dans l’éditeur de WordPress.
Choisissez un fichier image à définir comme une image à la une
Afficher les miniatures d’articles
Maintenant que vous disposez du module d’ajout de miniatures, il nous faut indiquer où nous souhaitons les voir apparaître sur le site. Typiquement, il nous faut intervenir dans la boucle de WordPress.
Pour rappel, la boucle ou loop affiche vos articles dans les différentes pages du site : accueil, catégorie, tags, etc.
Pour ne pas rentrer dans la technique, localisez tout d’abord la ligne qui appelle le contenu ou l’extrait de votre article dans le fichier index.php :
<?php the_content(); ?>
Ou
<?php the_excerpt(); ?>
Placez ensuite cette ligne de code avant l’une ou l’autre de ces 2 fonctions :
<?php
if ( has_post_thumbnail() ) { // Vérifies qu'une miniature est associée à l'article.
the_post_thumbnail();
}
?>
N’oubliez pas de sauvegarder le fichier en question puis réitérez l’opération pour l’ensemble des fichiers qui affichent la boucle (category.php, home.php si présent, etc.).
Utiliser différentes tailles de miniatures
Différentes tailles de miniatures existent. En réalité, il faut savoir que les miniatures d’articles peuvent servir à beaucoup de chose : pensez l’outil comme étant un module où l’utilisateur va indiquer une image.
La fonction d’affichage que nous venons de mettre dans le code peut donc être placée n’importe où, d’autant plus que des paramètres de taille existent.
the_post_thumbnail(); // la miniature par défaut
the_post_thumbnail('thumbnail'); // Miniature (150px x 150px max)
the_post_thumbnail('medium'); // Taille moyenne (300px x 300px max)
the_post_thumbnail('large'); // Taille large (default 640px x 640px max)
the_post_thumbnail( array(100,100) ); // Autres tailles
Comme vous pouvez le constater, les tailles se basent sur les paramètres définis dans le back office de WordPress sous Réglages puis Médias. Prenez soin de les modifier à votre guise ou d’en définir une sur-mesure avec le dernier paramètre.
N.B : attention toutefois à ne pas créer des tailles à la chaine sans prendre soin de vérifier l’espace de stockage fourni par votre hébergeur. Chaque taille créé un fichier image de plus sur votre serveur.
Que faire pour récupérer les anciennes miniatures ?
Si comme moi vous avez utilisé pendant des années des champs personnalisés pour indiquer l’URL de vos miniatures d’articles – basé sur le script timthumb.php par exemple, il existe le plugin Get the Image de Justin Tadlock. Pour autant, je n’ai pas encore testé une telle extension. Il s’agit donc d’une piste que je vous donne pour creuser un peu plus sur le sujet.
Sans l’usage d’un plugin, vous perdrez tout vos paramètres préalablement définis.
Il est recommandé de toujours utiliser un thème WordPress basé sur la fonction de miniature fournie en natif. De cette manière, vous bénéficiez d’une plus grande stabilité pour les versions à venir et une meilleure compatibilité avec les plugins qui utilisent de plus en plus cette fonctionnalité. Vous pouvez également lire ce tutoriel sur la manière de récupérer la première image d’un article via PHP, évitant ainsi d’avoir recours aux miniatures.
Crédits photo : Motorito
Merci pour l’astuce, wordpress avance bien!
Merci pour cet article très clair. Mon thème ne propose pas l’extrait et les miniatures. Voici mon problème résolu.
Oui c’est beaucoup mieux quand un thème a les miniatures en natif. J’ai essayé sur un thème normal sans succès…
Merci pour l’astuce en tout cas
Salut,
Je suis Nul en technique et je ne vois pas ou placer la ligne dans code dans le fichier PHP ??
Quelqu’un peut m’aider ?
Merci
Tu le places entre les balises PHP ouvrantes et fermantes. Cela dépend des fichiers fonctions.
Le mieux est d’essayer en ayant fait une copie préalable.
bonjour,
comment modifier ce code
<img src="ID, ‘nivoimage’, true); ?>" alt="" title="" /></pour que la fonction « image à la une » soit active avec,merci.
j’ai cherché sur google mais pour l’instant,rien trouvé.
Désolé le code ne passe pas dans le commentaire car il faut le formater en HTML (facile en collant le code en mode Visuel puis en récupérant ce dernier dans l’onglet HTML de l’éditeur de WordPress).
Sinon, il y a le forum francophone de WordPress ou le Questions / réponses de GeekPress.
j’ai avancé de tout façon,j’ai pourtant mis les balises codes pour poster ce code.j’ai fait avec la balise,que l’on voit dans les thèmes par défaut,à la hauteur des commentaires,à la ligne
« Vous pouvez utiliser ces balises et attributs HTML : »
Justement car j’ai pensé que c’est du HTML.
je connais le forum wordpress-fr.net . Pour geekpress vous êtes sérieux ??
Oui sur GeekPress il y a un Q&A.
Et pour le code dans les commentaires, il faut utiliser la balise code mais aussi convertir les données en HTML.
alors j’ai une mauvaise opinion sur geekpress,je pensais que ce n’était qu’un site qui récupérait des codes que l’on trouve à gauche et à droite sur le net,c’est tout,sans vraiment de connaissances.
Sinon c’est bon,j’ai trouvé un site qui m’a donné la solution.
http://return-true.com/2010/09/getting-jquery-nivo-slider-to-work-inside-your-wordpress-theme/
Bonjour,
Je me permet de vous contacter après multiples recherche…
Je dispose d’un blog WordPress utilisant les thumbnails sur ma page d’accueil.
Cependant je ne trouve pas le moyen de créer 2 sortes d’articles pour la page d’accueil permettant par exemple de poster une vidéo directement lisible sans passer par l’intérieur de l’article.
Connaissez vous un moyen ?.
Merci pour toute ces aides bien utiles..
A bientôt.
En fait, il faut utiliser les metaboxes qui permettent d’ajouter des champs dans l’éditeur dont on pourra récupérer les valeurs dans le thème – et donc sur le site. Elles reposent directement sur les champs personnalisé. On peut donc imaginer créer un champ video avec pour valeur le code embed.
Pour l’affichage dans le code, cette page du codex est essentielle car elle renvoie vers la documentation adéquate : http://codex.wordpress.org/Custom_Fields
Des plugins doivent le faire aussi je pense…
bonjour,
vous avez modifié votre thème ? Sans créer de thème enfant?
http://wpchannel.com/creer-themes-enfants-child-themes-wordpress/
Bonjour
Mes thumbnails ne s’affichent pas…
J’ai tout essayé… je comprend pas… Bon je suis plutot novice, je n’y comprend pas toujours grand chose en php…
Voici le code que je voulais mettre dans un widget (j’ai ajouté des espace en espérant que ça s’affiche dans mon commentaire) :
’15′, ‘orderby’ => ‘rand’, ‘showposts’ => 1 ) ) ; ? >
< a href=" » >
—
Le titre s’affiche bien mais pas l’image.
J’ai aussi essayé en remplaçant the_post_thumbnail ( array ( 30, 30 ) ) par
if ( has_post_thumbnail() ) { the_post_thumbnail ( ) ; }
mais ça ne marche pas non plus…
Je ne sais pas comment faire…
Pouvez-vous m’aider?
Bon et bien l’affichage du code n’a pas fonctionné dans mon commentaire…
Je voudrais afficher l’image d’un post de façon « random » 1 seul à la fois, bon ça, ça marche le titre s’affiche en random. Mais l’image ne s’affiche pas..
Bon dsl du dérangement :-/
Il suffi que je demande de l’aide pour que tout de suite après je trouve la solution et je comprenne où étais mon erreur. lol
Alors que j’y suis depuis tout l’après midi à cherche partout comment faire!
Mais c’est quand même garce à ce blog que j’ai trouvé ma solution et que j’ai compris. Je ne savais pas que thumbnail concernait uniquement les image à la une lol.
Donc j’ai trouvé ma solution ici :
http://wpchannel.com/recuperer-premiere-image-article-wordpress/#more-12993
Merci beaucoup