Un précédent tutoriel évoquait une technique pour récupérer et afficher la première image d’un article sous WordPress via PHP. Je vous propose une autre méthode reposant sur la première image envoyée dans la bibliothèque de médias.

Partons du principe que vous avez envoyé des images via l’outil de mise en ligne de l’éditeur de WordPress. Jusque là rien de plus classique !

Imaginons à présent que vous souhaitiez afficher cette première image comme miniature sur votre page d’accueil et donc sans utiliser le module Image à la une de WordPress. Cela est d’autant plus utile si vous utilisez ce système avant l’apparition de ce module et qu’il serait donc chronophage d’éditer tous vos articles.

Méthode basée sur la première image envoyée via l’éditeur

Etant donné que les images envoyées sous WordPress sont le plus souvent associées à un article – sauf si vous passez directement par la bibliothèque de Médias, il nous faut donc aller récupérer cette dernière.

Pour ce faire, nous allons utiliser les lignes de code suivantes à insérer par exemple dans le fichier index.php à l’intérieur de la boucle de WordPress :

<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >

<?php
$attachments = get_children(array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order'));
if ( ! is_array($attachments) ) continue;
$count = count($attachments);
$first_attachment = array_shift($attachments);
?>
<div class="left"><?php echo wp_get_attachment_image($first_attachment->ID , 'thumbnail'); ?></div>
</a>

Comme vous le voyez, j’encadre le tout d’une balise de lien pour faire pointer vers l’article associé à l’image. Je vais ensuite chercher la première image insérée dans le billet puis je l’affiche avec la fonction wp_get_attachment_image que j’encadre d’une balise div pour la positionner sur la gauche.

Le paramètre thumbnail permet de sélectionner la taille dite miniature dont les dimensions sont fixées dans les réglages du back office de WordPress. Vous pouvez donc choisir d’autres tailles.

J’utilise cette technique sur le site de tutoriels informatiques Protuts.net pour afficher les tutoriels récents en page d’accueil. L’image sur l’accueil et la même que la première de l’article lié.

Méthode combinée avec le module Image à la une

Un deuxième bout de code proposé par Jonathan Buttigieg de chez GeekPress consiste à vérifier dans un premier temps si une image à la une est présente et si tel n’est pas le cas de récupérer la première image attachée :

<?php
// On vérifie si l'article contient une Image à la Une
if( has_post_thumbnail() ) { ?>

<div class="left">

<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><?php the_post_thumbnail(); ?></a>

</div>
<?php
}
else {
// Si l'article n'a pas d'Image à la Une, on récupère la 1ère image attachée
$attachments = get_children(
array(
'post_parent' => get_the_ID(),
'post_type' => 'attachment',
'post_mime_type' => 'image',
'orderby' => 'menu_order',
'order' => 'ASC',
'numberposts' => 1
)
);
if( $attachments ) {
foreach( $attachments as $attachment ) :
?>
<div class="left">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><?php echo wp_get_attachment_image($attachment->ID , 'thumbnail'); ?></a>
</div>

<?php
endforeach;
}
}
?>

Merci de sa collaboration !

Une fonction de WordPress très utile nous permettant de se passer du module Image à la une dont l’usage n’est pas toujours pertinent à utiliser. A utiliser !

A propos de l'auteur

Aurélien Denis est le fondateur du projet WordPress Channel proposant tutoriels et podcasts librement téléchargeables. En 2010, il fonde Neticpro, une agence Web spécialisée WordPress. Il est aussi co-fondateur du site Protuts.net (tutoriels PC/Mac/Linux) et community manager pour l’Imagine Cup 2011/2012, une compétition mondiale organisée par Microsoft. Voir tous les tutoriels de Aurélien Denis →