Tout savoir sur WordPress
Tutoriel WordPress

Afficher uniquement les articles avec une image à la une

Découvrez la démarche à suivre pour récupérer et afficher uniquement les articles possédant une image à la une.

En fonction de la thèmatique de votre site, il se peut que vos articles soient obligatoirement accompagnés d’une image à la une. Dans ce cas, il serait judicieux d’optimiser la requête affichant vos articles en lui indiquant la contrainte suivante : « tu dois récupérer les articles qui contiennent une image à la une ». Pour cela, on utilise les arguments 'meta_key', 'meta_value_num' et 'meta_compare' de la fonction query_posts().

Dans l’exemple ci-dessous, on affiche le titre et l’image à la une des articles qui en possèdent une :

<?php
query_posts( array(
    'post_type'        => 'post',
    'meta_key'         => '_thumbnail_id',
    'meta_value_num'   => 0,
    'meta_compare'     => '!=' 
) );

while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
<?php 
endwhile; 
?>

A noter que cette astuce peut servir pour la création d’un carrousel composé d’articles avec une image à la une. En effet, c’est un moyen simple et rapide de récupérer les articles qui possèdent une image à la une !

Cet article a été mis à jour il y a 1978 jours - Il n'est peut être plus à jour !

Article écrit par Jonathan B.

Jonathan est le co-fondateur de WP Media, startup connue pour être l’auteur de WP Rocket et Imagify. Il est aussi co-organisateur du WordCamp Lyon et Paris.

29 Commentaires

  1. « optimiser la requête » : C’est mieux que faire une requête de tous les posts puis pour chacun vérifier avec has_post_thumbnail().
    Sympa cette astuce pour le carrousel oui !

  2. Je suppose qu’un query normal demandant d’afficher l’image à la une suffit et que la soluce proposée ici vaut pour le cas où on teste si le billet a bien une image à la une ?

  3. @Li-an : Qu’est-ce que tu entends par « query normal demandant d’afficher l’image à la une » ?

    Pour répondre à ta question, cette soluce permet d’afficher uniquement les articles possédant une image à la une.

  4. Je n’avais jamais vu que l’on pouvait faire une requête où l’on peut vérifier la valeur d’une meta avec meta_compare. Bravo pour l’astuce.

  5. J’ai une petite question, pour le thème japibas par exemple, il y a ce query_post:

    	
    query_posts(
    			array_merge(
    				array( 'category__not_in' => (array) japibas_get_setting( 'exclude_cats' ) ),
    				$wp_query->query
    			)
    		);
    

    Du coup, comment faire pour combiner les 2 querys? merci

  6. En fait si, ca fonctionne sur mes nouveaux articles, les anciens je les ai importés d’un autre site donc meme si ils n’affichent pas l’image, ils ont peut être l’info en base

  7. @Denny : il suffit de mettre les informations nécessaires dans le premier array du array_merge comme ceci :

    query_posts(
    	array_merge(
    		array( 
    			'category__not_in' => (array) japibas_get_setting( 'exclude_cats' ),
    			'meta_key'           => '_thumbnail_id',
    			'meta_value_num'     => 0,
    			'meta_compare'       => '!=' 
    		),
    		$wp_query->query
    	)
    );
  8. Bonjour,
    Moi je cherche une astuce pour récuperer la 1ere image d’article de plusieurs categories a afficher aléatoirement (avec un href de l’article sur l’image ce serait bien aussi …)
    Peut etre que quelqu’un a une astuce …
    Bj

  9. En fait je voudrais afficher uniquement les 10 premiers articles mais en forme d’image (en sachant que chaque article possède au moins une image)

  10. Merci pour cette fonction, c’est exactement ce que je recherchais ! Pourriez-vous m’indiquer comment je peux faire en sorte que quand la personne clique sur l’image, ça la renvoie vers une page et non un article ? Bien cordialement, Anais

  11. @Anais : L’image est automatiquement associée à la page ou à l’article. Donc il suffit de mettre le thumbnail dans un lien hypertexte qui contient le permalien du post et le tour est joué.

  12. Merci pour votre réponse, j’ai juste changé le contenu de la balise pointant vers : /visiter. Cependant, c’est idiot puisque toutes mes images pointent vers la page « visiter ». J’essaie de faireun slideshow : http://pastebin.com/4LhXT1tq

    Mon carroussel marche mais les defilent les uns en dessous des autres, en boucle…

    Auriez-vous une solution ? Du type : pouvoir affiner ensuite pour n’afficher qu’un article par plutôt que « récupère tous les articles ayant une image à la une » et qu’il me les affiche tous les uns sous les autres dans le carrousel ?

    C’est difficile à expliquer désolée..

  13. :/ Mais dans ce cas il pointe vers l’article en question alors que moi je veux qu’il pointe vers une page…

  14. J’ai un slideshow qui récupère les articles qui ont une image à la Une (ça c’est parfait, grâce à votre code) sauf que je veux que le lien de chaque article ne redirige pas vers l’article en question mais vers une page.

    2. J’ai détecté où était mon problème, je crois que je n’intégrais pas la fonction au bon endroit. Est-ce qu’intégrée ainsi, c’est ok pour éviter la répétition des articles défilants ? : http://pastebin.com/S3kT6pxN

  15. Comment faire pour forcer la résolution maximum de l’image à la une, je voudrais m’en servir pour mon annuaire, car certains mettent des photos en 5000×1200 j’avais déjà vu quelque part comment faire mais plus moyen de mettre la main dessus ! Je sais qu’on peux filtrer la taille, mais la source est très lourde.

  16. Est-ce que ça modifie aussi le poids lors de la requête ? Je sais que WordPress duplique à certains moment une « image-150×150.png » mais dans le cas d’une image à la une le fait il aussi en passant par les réglages ?

  17. Je ne comprends pas du tout la dernière question…

    Pour la requête, cela ne modifie en rien le « poids » ou le temps de chargement.

  18. Je cherche à réduire au maximum le poids des images en page d’accueil (sur le site de mon ancre) si quelqu’un a une idée.

    Sauf si tu me confirmes que celles ci s’adaptent au format défini dans les réglages.

    Désolé je n’ai pas dormi depuis 2 jours ça commence à se voir ^^

  19. @jo @rodrigue: car le thème est tout pourri et il inclus les images et non les thumbs.
    http://dl.dropbox.com/u/45956904/ScreenShots/baw_121129-013401.png
    Ca c’est ton option, si tu y mets l’image taille full, ça sera la full, à toi d’y insérer la taille désirée
    Me trompe-je ?
    Aussi tu parles des images à la une et je les vois avec le bonne taille, attention de ne pas confondre « image à la une » et « les images sur la une du site » ce qui n’a rien à voir.

  20. @Julio : En effet sur ce type d’entrée:
    http://hpics.li/f841f83
    J’ai mis la taille désiré.

    Mais ce qui me fait ch… c’est lorsqu’un « éditeur » place une « image à la une » de 5000×1200, reprise sur la home dans le slide, c’est le but, dans mes médias, j’aimerais que la taille soit réduite (reseizé) automatiquement en 1200×600 par ex, car smush-it ne fais un gain que de 4.6% en moyenne.

    @Julio, tu as eu des news de Christian (voir par mail sinon)

  21. @rodrigue, sinon tu crées une taille de 1200×600 et tu l’appliques dans le slider
    par contre, il faudrait rajouter l’option crop mais l’image risque d’etre déformée…

a85d712ba1ca5aed86fbac11a0e05ba8LLLLLLLLLLLLLLLLLLLLLLLLL