WordPress : Afficher la première image d’un article en image à la une

image-thumbnail-function

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.

Mat_

Au départ on sort avec un diplôme d’ingénieur de l’ESIL (devenu Polytech’Marseille) en Informatique, réseau et multimédia, spécialisé dans les Systèmes d’Informations et Services E-Business.
En même temps on bosse, on développe, on apprend. Et maintenant on entreprend.

Passionné de nouvelles technologies, et évangéliste de WordPress, j’aime découvrir, tester, rechercher.

Vous aimerez aussi...

2 réponses

  1. Pourquoi activer / désactiver l’output buffering ligne 4 et 5 ?

  2. KuneStudio dit :

    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.

Suivez Kune.fr sur les réseaux sociaux !

Kune.fr est votre site de ressources web. Vous y trouverez de nombreux outils utiles pour le web.
Alors n'hésitez plus, aimez notre page !

  • Ressources Wordpress, tutoriels, plugins et thèmes
  • Ressources design, packs d'icônes, kits UI ...
Fermer cette popup
%d blogueurs aiment cette page :