WordPress : Afficher la première image d’un article en image à la une
Lorsque vous écrivez un article pour votre site, un des premiers réflexe à avoir est de rajouter une image à la une. Une pratique simple mais souvent compliquée à expliquer aux clients qui peuvent oublier régulièrement. Je vais donc vous montrer comment récupérer la première image d’un article pour l’afficher en image à la une, si cette dernière n’existe pas.
[symple_box color= »yellow » text_align= »left » width= »100% » float= »none »]
Edit : Merci à Francis pour avoir noté une petite erreur dans la fonction, mise à jour maintenant.
[/symple_box]
Copiez simplement ce code dans votre fichier functions.php
:
function catch_that_image() { global $post; $first_img = ''; $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); $first_img = $matches [1] [0]; if(empty($first_img)){ $first_img = "URL DE VOTRE IMAGE PAR DEFAUT"; } return $first_img; }
Si votre article comporte une image, elle sera retournée, sinon, c’est l’image que vous avez défini ligne 8 qui sera renvoyée (pensez à remplacer par l’url que vous souhaitez).
Dans votre template, à l’endroit où vous voulez voir votre image s’afficher, utilisez ce code :
if(has_post_thumbnail()) echo get_the_post_thumbnail( get_the_ID(), array(295,120) ); else { $imgthumb = catch_that_image(); echo "<img src='".$imgthumb."' alt='".get_the_title()."'>"; }
Si l’image à la une existe, elle sera utilisée. Sinon, c’est la première image de l’article (ou l’image par défaut) qui le sera. Pensez à remplacer <code>array(295,120)</code> par la taille de l’image que vous souhaitez, et d’appliquer cette même taille à l’image via CSS.
Pourquoi activer / désactiver l’output buffering ligne 4 et 5 ?
Effectivement, pas utile du tout. Je vais éditer la fonction pour supprimer ça, et surement la mettre à jour pour couvrir plus de cas! Merci pour ton commentaire.