Comment afficher des articles aléatoires sur WordPress ?


L’un des grands challenges quand on tient un blog est de mettre en valeur les articles déjà rédigés. En effet, comme le nouveau contenu s’affiche avant les articles plus anciens, ceux-ci peuvent très vite se retrouver enfouis dans les profondeurs de votre site. Une manière très simple de leur donner un peu d’exposition est d’afficher un widget « Articles aléatoires » sur son blog. Il va piocher des articles au hasard dans votre contenu et les afficher à vos visiteurs.

Dans cet article, je vais vous apprendre à le faire sur un blog WordPress ! Si vous êtes sur la plateforme gratuite WordPress.com, consultez cette partie de l’article. Si vous avez installé WordPress chez un hébergeur, ça se passe ici !

Afficher un article aléatoire sur WordPress.com

Sur la plateforme gratuite WordPress.com, vous pouvez afficher un article au hasard mais sous une forme limitée. Vous pouvez proposer à vos visiteurs un lien ou une image cliquable qui renvoie vers un article choisi au hasard parmi tous vos posts. En revanche, impossible de savoir a priori sur quoi portera l’article, WordPress effectue un choix automatique au moment où l’internaute clique sur le lien ou l’image.

Option #1 – Afficher un lien vers un article au hasard

Allez dans le menu Apparence > Widgets et ajoutez un widget HTML personnalisé à l’endroit où vous voulez que le lien s’affiche, par exemple dans la sidebar (= sur le côté) du blog.

Widget HTML personnalisé
Widget HTML personnalisé

Dans ce widget, copiez le bout de code suivant :

<a href="/?random" title="Article aléatoire du blog XXX">Article au hasard</a>

Remplacez juste « XXX » par le nom de votre blog et, si vous le souhaitez, remplacez « Article au hasard » par les mots de votre choix (c’est le texte que verra le visiteur de votre blog). Vous n’avez plus qu’à valider. Votre sidebar affiche désormais un lien. En cliquant dessus, WordPress sélectionne automatiquement un article au hasard parmi vos posts.

Option #2 – Afficher une image

Le lien reste assez peu visible donc pour donner un peu plus de dynamisme à l’ensemble, on peut le remplacer par une image. Il faut d’abord créer l’image : ça peut être une photo sur laquelle vous ajoutez du texte, un simple fond coloré avec du texte. Vous pouvez par exemple créer un joli visuel sur le site Canva.com.

Pour mon exemple, je vais utiliser cette image :

Afficher un article au hasard sur WordPress
Afficher un article au hasard sur WordPress

Allez ensuite dans le menu Médias > Ajouter et faites glisser votre image pour la mettre en ligne. Ensuite, cliquez sur le lien « Modifier » à côté de l’image. Pensez à donner un titre explicite à l’image (« Article au hasard sur le blog » par exemple) et un texte alternatif (il s’affichera à la place de l’image s’il y a un problème avec celle-ci).

Uploader une image sur WordPress
Uploader une image sur WordPress

Ensuite, dans la colonne de droite, récupérez le lien de l’image qui se trouve sous l’intitulé « Adresse web du fichier ». Gardez-le dans un coin, nous allons en avoir besoin.

Allez dans le menu Apparence > Widgets et ajoutez un widget « HTML Personnalisé » à votre sidebar. Dans ce widget, vous allez copier le code ci-dessous en remplaçant le ABCDEFGH par le lien de votre image :

<a href="/?random" title="Article aléatoire du blog"><img src="ABCDEFGH" alt="Article aléatoire"></a>

Vous n’avez plus qu’à valider ! Dans votre sidebar, votre image apparaît et en cliquant dessus, elle emmène le visiteur vers un article choisi au hasard parmi vos posts.

Afficher des articles au hasard sur WordPress.org

Cette partie du tutoriel s’adresse à ceux qui ont un blog WordPress installé chez un hébergeur. Même si j’ai essayé de rendre les explications aussi simples que possible, le tuto risque d’être difficile d’accès pour les débutants.

Si vous ne voulez pas toucher au code, il existe plein de plugins WordPress pour afficher des articles aléatoires. Ici, je vais vous montrer comment le faire sans plugin !

Articles au hasard sur WordPress

La réalisation d’un widget Articles Aléatoires nécessite deux choses :

  • D’abord, nous allons créer un code qui va dire à WordPress ce que l’on veut afficher dans notre widget : veut-on juste des titres d’articles ? Veut-on aussi afficher un extrait de l’article en question ? Veut-on ajouter une image ?
  • Ensuite, il va falloir afficher ce code sur le blog lui-même, dans la sidebar.

Etape 1 – Créer le code du widget « Articles aléatoires »

Ici, il y a deux possibilités : si vous n’avez aucune connaissance informatique, vous allez simplement utiliser en l’état le code que je vous propose. Si vous avez de bonnes bases en HTML et CSS, vous allez sans doute comprendre assez facilement comment personnaliser l’affichage.

Afficher juste des liens vers des articles au hasard

Le code ci-dessous vous permettra d’afficher une simple liste de liens, comme ceci par exemple.

Articles aléatoires sous forme de liens

Il suffit de remplacer « XX » par le nombre de liens que vous souhaitez afficher.

<ul>
<?php query_posts('showposts=XX&orderby=rand'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; endif; ?>
</ul>

Si vous parlez anglais, vous allez voir que ce code est assez facile à comprendre (oui, dans ce domaine là aussi, l’anglais est très utile !).

Regardons de plus près ce qu’il veut dire : je demande à WordPress (query = demander) de me montrer XX posts (show posts = montrer des posts) en les classant dans un ordre aléatoire (order = classer ; rand = abréviation de random = aléatoire). S’il y a effectivement des posts à afficher (if = si ; have posts = avoir des posts), alors WordPress doit nous afficher tant qu’il trouve des posts le titre (title = titre) avec un lien dessus (= permalink).

La façon dont le code va s’afficher par défaut dépendra de la façon dont votre thème WordPress affiche habituellement les listes.

Afficher les liens et un extrait de chaque article

Si vous souhaitez un affichage un peu plus complet incluant un court extrait du post (« excerpt » en anglais), on peut le faire facilement avec le code ci-dessous. Là encore, vous pouvez personnaliser deux paramètres :

  • Le nombre d’articles à afficher (3 dans mon exemple ci-dessous) ;
  • La longueur de l’extrait (100 caractères dans mon exemple).
<ul>
<?php query_posts('showposts=3&orderby=rand'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><b><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></b><br><br>
<p><?php global $post; $excerpt = $post->post_excerpt;
if($excerpt==''){$excerpt = get_the_content('');}
echo wp_html_excerpt(strip_shortcodes($excerpt),100); ?>...</p></li>
<?php endwhile; endif; ?>
</ul>

Le principe reste le même : on demande à WordPress d’aller chercher les articles (« query posts ») et s’il en trouve, de les présenter sous forme de liste (« li ») avec les éléments qui nous intéressent : le titre (« title ») et l’extrait (« excerpt »).

Afficher un lien et une image

Imaginons maintenant que nous ayons envie d’afficher le titre de l’article, la date de publication de l’article juste en-dessous puis une image miniature.

Articles aléatoires avec miniature

Dans ce cas, j’utiliserai ce code :

<ul>
<?php query_posts('showposts=3&orderby=rand'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink(); ?>">
<b><?php the_title(); ?></b><br />
<?php the_date(); ?><br />
<?php if ( has_post_thumbnail() ) : ?><?php the_post_thumbnail('thumbnail'); ?><?php endif; ?></a></li>
<?php endwhile; endif; ?>
</ul>

Le bout de code que j’ai ajouté signifie « S’il y a une miniature sur l’article (« thumbnail » = miniature en anglais), il faut afficher la miniature ».

Il faut savoir que lorsque vous mettez en ligne une image sur WordPress, WordPress crée automatiquement des miniatures de cette image. Elles peuvent ensuite être utilisées à différents endroits de votre site (quand on fait une recherche, quand on affiche les articles associés à un même mot clé, etc). Par défaut, les images existent en 4 tailles :

  • « full » (la taille maximale, celle de l’image que vous mettez en ligne) ;
  • « large » (une miniature mesurant au maximum 640 x 640 pixels).
  • « medium » (miniature mesurant au maximum 300 x 300 pixels).
  • « thumbnail » (150 x 150 pixels maximum).

Ces valeurs par défaut sont définies dans le menu Réglages > Médias. Votre thème WordPress peut aussi avoir créé des tailles d’images supplémentaires, qui portent d’autres noms. Dans mon exemple, j’ai choisi d’afficher la plus petite taille de miniature disponible par défaut (« thumbnail »). C’est pour ça que mon code comporte le texte <?php the_post_thumbnail('thumbnail'); ?>. Si j’avais voulu afficher une autre taille d’image, par exemple la taille medium, j’aurais écrit <?php the_post_thumbnail('medium'); ?> à la place.

Afficher le nombre de commentaires

Continuons sur notre lancée… en ajoutant au code précédent le nombre de commentaires de l’article (« comments » en anglais).

<ul>
<?php query_posts('showposts=3&orderby=rand'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink(); ?>">
<b><?php the_title(); ?></b><br />
<?php the_date(); ?><br />
<?php if ( has_post_thumbnail() ) : ?><?php the_post_thumbnail('thumbnail'); ?><?php endif; ?><br />
<?php comments_number('0 commentaire', '1 commentaire', '% commentaires'); ?> 
</a></li>
<?php endwhile; endif; ?>
</ul>

Comme vous pouvez le voir, après les mots « comments_number » (= nombre de commentaires), il y a trois éléments dans la parenthèse. Ils correspondent aux trois situations qui peuvent se produire sur votre blog : l’article ne comporte aucun commentaire ; l’article n’a qu’un commentaire ; l’article a plusieurs commentaires.

Vous pouvez modifier ce texte à votre convenance. Par exemple, je trouve que « 0 commentaire » a tendance à renvoyer l’image d’un blog peu actif. Je préfère donc indiquer « Commenter » – qui incite à participer – ou ne rien afficher du tout si l’article n’a pas de commentaires.

Quant au signe « % », il ne faut pas le supprimer. WordPress calcule automatiquement à cet endroit le nombre de commentaires.

Afficher les posts d’une ou plusieurs catégories précises

(Rien ne m’arrête, rien ne m’arrête !). Sur un blog, on peut avoir envie de mettre en avant des articles au hasard provenant d’une seule catégorie ou de quelques catégories précises. Dans ce cas, il faut d’abord récupérer le numéro de la ou des catégorie(s) concerné(es). Allez dans le menu Articles > Catégories et choisissez la catégorie qui vous intéresse : si vous survolez le lien ou que vous cliquez dessus, la page de la catégorie a une adresse qui ressemble à ça :

notuxedo.com/wp-admin/edit-tags.php?action=edit&taxonomy=category&tag_ID=723&post_type=post

Le numéro qui s’affiche après tag_ID est celui qui nous intéresse (723 dans l’exemple ci-dessus) !

Toute la partie du code à partir de « if (have_posts()) » ne bouge pas par rapport aux exemples précédents. C’est la partie située avant qui va être modifiée. Au lieu de dire à WordPress « va me chercher tous les posts du blog et affiche-moi trois d’entre eux dans un ordre aléatoire », je lui précise cette fois-ci qu’il ne faut piocher que parmi les articles de la catégorie portant un numéro précis.

Si vous ne visez qu’une seule catégorie, le code ressemblera par exemple à ça :

<ul>
<?php query_posts(array(
'showposts' => 3,
'orderby' => 'rand',
'category__in' => 723
)); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; endif; ?>
</ul>

Et si vous voulez afficher des articles choisis au hasard dans les catégories 723 et 727 par exemple, il faudra le demander comme ça :

<ul>
<?php query_posts(array(
'showposts' => 3,
'orderby' => 'rand',
'category__in' => array(723,727)
)); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink(); ?>">
<?php the_title(); ?></a></li>
<?php endwhile; endif; ?>
</ul>

D’autres personnalisations possibles

Même si je vous ai montré pas mal de variantes, mieux vaut ne pas fournir trop d’informations dans un tel widget, vous risqueriez d’en faire une vraie « usine à gaz » qui ralentit votre site alors qu’il vise avant tout à donner un aperçu rapide de quelques articles.

Si vous avez de bonnes bases en HTML et CSS, vous allez facilement pouvoir personnaliser chaque élément, soit en y ajoutant une classe CSS, soit en l’encadrant par une balise « div ». Vous pourrez par exemple mettre la date en majuscules, faire en sorte que l’image « flotte » à droite ou à gauche du contenu. Si vous avez compris la logique générale, vous allez aussi pouvoir modifier l’ordre d’affichage des éléments (exemple : mettre la miniature en premier puis le titre au lieu de faire l’inverse).

C’est la grande force de WordPress : il nous fournit des codes « prêts à l’emploi » sur un site que l’on appelle le « Codex ». Ce Codex est une sorte de grande encyclopédie de tout ce que l’on peut faire avec WordPress. Bien sûr, le Codex ne vous donne pas un mode d’emploi pas à pas mais il vous dit par exemple « pour afficher une miniature, c’est tel code qu’il faut utiliser ». Pour cette raison, j’arrive assez facilement à personnaliser mon blog alors que je suis très loin d’être développeur web !

Nous allons maintenant passer à l’étape la plus facile : copier-coller notre code dans un widget !

Etape 2 – Insérer le code dans un widget

Le code que je vous ai présenté dans l’article fait appel au langage informatique PHP. Par défaut, WordPress n’est pas capable de comprendre le PHP quand on le copie dans un widget. Pour contourner ce problème, vous pouvez installer un plugin comme Enhanced Text Widget. Installez-le et activez-le.

Mettre du PHP dans un widget WordPress
Mettre du PHP dans un widget WordPress

Ensuite, allez dans le menu Apparence > Widgets de WordPress. Vous allez voir apparaître un nouveau type de widget intitulé « Enhanced Text ». Faites-le glisser vers la sidebar de votre blog.

Mettre du PHP dans un widget WordPress

Enfin, il n’y a plus qu’à copier-coller le code que vous avez choisi à l’étape 1 et donner un titre à votre widget, comme ceci par exemple :

Mettre du PHP dans un widget WordPress

En validant, votre sidebar devrait désormais afficher des articles aléatoires ! C’est une manière pratique de mettre en valeur le contenu de son blog.

Thèmes : WordPress 

Poster un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

22 commentaires sur “Comment afficher des articles aléatoires sur WordPress ?

  • Nico

    super astuce ! merci à toi

    Répondre à Nico
  • bibliblog

    Génial, Marlène ! Ça fonctionne très bien et tes explications sont (comme toujours) très claires. Je me demandais depuis un petit moment comment mettre en place un tel widget, ton blog est vraiment une mine !

    Répondre à bibliblog
    • Marlène

      Merci beaucoup, je suis contente de savoir que ça fonctionne bien car ça fait un moment que je n’ai pas remis cet article à jour, il est justement dans ma « to do list » de mises à jour d’ici la fin de l’année :)

      Répondre à Marlène
  • NoemiePom

    Bonjour !
    Un grand merci pour tous ces articles qui m’aident beaucoup ! Je suis en train de créer mon propre site et No Tuxedo est devenu une source d’information et d’aide incontournable pour moi !

    Répondre à NoemiePom
    • Marlène

      Bonjour Noémie, contente de pouvoir t’être utile ! Passe un bon week-end.

      Répondre à Marlène
  • Chadi

    Hello Marlène. Merci pour ce super article et beaucoup d’autres ( notamment pour la protection wordpress pour éviter les attaques « brute force »… ca marche nickel !).
    J’ai un petit « soucis » et peut-être que tu as la réponse et peut-être même que ça pourra faire un super sujet d’article qui sait :p
    J’ai trouvé ton article en fouillant sur Google comment créer une « catégorie » permettant d’accéder à un article du blog au hasard. Malheureusement ce n’est pas vraiment le cas dans ton article.
    Je m’explique, ma fiancé à un blog de cuisine et une de ses lectrices lui a suggéré de faire une catégorie « au harsard » dans le menu principal afin d’accéder à n’importe quelle recette du blog par un simple clic. C’est donc différent de cet article qui te permets de faire un widget et une liste d’articles au hasard.
    C’est très dure d’expliquer à l’écrit…^^
    J’ai contacté le créateur du thème qu’elle utilise et il me dit que mon « wp supercache » m’empêche de pouvoir faire cela. J’ai plutôt l’impression qu’il ne sait pas ou ne veut pas perdre son temps pour me répondre :)
    Alors je tente quand même ma chance ici.
    Peut-être que tu n’auras pas la réponse mais j’aurai tenté !
    Encore une fois merci pour ton blog qui est une véritable mine d’or pour les débutants passionnés comme moi ;) beaucoup de choses sont devenues claires grâce à toi :)
    Belle journée !

    Répondre à Chadi
    • Marlène

      Hello, je ne pense pas que ce soit possible avec une catégorie dédiée.

      En revanche, il y a un tuto (un peu vieux) pour faire grosso modo ce que tu demandes sur WP Beginner (en anglais mais le bout de code est valable pour tout le monde) : ça permet de créer une URL du type nomdetonblog.com/random (random = aléatoire en anglais)… Cliquer sur cette URL affiche un post aléatoire du blog. Dans le tuto de WP Beginner, ils créent un bouton sur lequel on clique pour accéder à l’article aléatoire… mais à mon avis ça peut tout à fait marcher en incluant ce lien dans le menu.

      Il y a apparemment des infos complémentaires utiles dans les commentaires qui tiennent compte d’évolutions plus récentes de WordPress.

      Répondre à Marlène
  • Julie

    Ton site est une vraie mine d’or, vraiment! Je garde ça sous le coude car je suis en plein changement de plateforme. J’ai déjà suivi pas mal de tes conseils!!

    Un grand merci!

    Répondre à Julie
    • Marlène

      Merci Julie ! S’il y a d’autres questions que tu te poses, n’hésite pas à demander, j’en fais parfois des tutos quand ça peut intéresser d’autres personnes !

      Répondre à Marlène
  • Madagascarian

    Bonjour toi ! j’espère que tu va bien :) merci pour ce tuto, j’aime bien et il est pas compliqué !

    bisous :)

    Répondre à Madagascarian
    • Marlène

      Hello, merci de ton commentaire et tant mieux si ça t’aide :)

      Répondre à Marlène
  • Estelle

    Coucou Lou,
    J’espère que tu vas bien.
    Merci pour ce super tuto complet.
    Je progresse avec WP, je manque juste de temps, mais c’est vraiment THE top, je ne regrette rien !
    A bientôt !

    Répondre à Estelle
    • Marlène

      Nooooon rien de rieeeen, nooooon je ne regrette rieeeen ! Oops pardon, il fallait que je la fasse ;) Contente que tu te sois lancé ce défi WP et que tu le relèves avec brio !

      Répondre à Marlène
  • Toute Ouïe

    Tutoriel très clair effectivement! Merci!

    Répondre à Toute
  • Letizia

    Au non? Elles n’ont rien à voir? Et bien grâce à ton code j’ai les lignes que j’avais avant dans mon widget « articles récents » et que j’avais perdu dans le code que j’avais trouvé et bidouillé :)
    J’ai mis le code (‘Commenter l'article’) au lieu de (L\’article) ça marche aussi pour l’apostrophe, il faut que je change? Il y a des choses, je ne sais pas si ça alourdit ou pas alors je ne sais pas trop quoi choisir, c’est un autre monde le code quand même :)
    Merci pour le code pour la miniature d’image. Je vais voir ce que ça donne et comment ajouter ça à mon fichier function.php mais avant il faut que je fasse un childtheme de cette page là aussi pour ne pas risquer de tout foirer mon thème. Je note tous tes conseils! Top!

    Répondre à Letizia
    • Marlène

      Pour l’apostrophe, peut-être que le plugin Enhanced Text Widget ajoute automatiquement un antislash, je ne sais pas à vrai dire… Si ça marche en l’état, tant mieux mais dans un « vrai » fichier PHP, une apostrophe peut donner une page blanche et un message d’erreur si elle n’est pas fermée au bon endroit :)

      Répondre à Marlène
  • Letizia

    Merci Lou ce « widget-fonction » article aléatoire est vraiment trop bien!!! J’ai changé le code qu’il y avait sur mon site pour mettre le tiens, j’aime bien le fait qu’il affiche des lignes entre les titres des articles! Par contre, l’image « thumbnail » est trop grande pour que je puisse l’afficher, il faudra que je regarde si j’arrive à changer ça dans le code de mon blog… Merci aussi pour toutes les explications des codes, c’est un peu moins du chinois pour moi :) On trouve souvent des codes tout prêt qui ne permettent pas aux débutants comme moi de faire des progrès alors que là, j’ai compris les fonctions. J’ai essayé de mettre le nombre de commentaires (que j’ai réussis à aligner à droite grâce à la fonction text-align:right et j’ai même réussis à personnaliser le 0 commentaire en « commenter l’article » youhouhou!) et les titres des articles en gras mais j’ai mis le widget en attente, il faut que je regarde ça de plus près, peut-être quand il y aura plus de commentaires sur mon blog :)

    Répondre à Letizia
    • Marlène

      Normalement, les lignes n’ont rien à voir avec mon code :) Elles sont affichées dans mon exemple parce que le thème WordPress de l’exemple prévoit justement que chaque élément d’une liste soit séparé par une ligne.

      Pour ce qui est du texte de « remplacement », il faut juste faire attention quand tu mets une apostrophe dans un code PHP à l’indiquer de préférence comme ça : « L\’article » au lieu de « L’article ». Sinon, comme tu utilises déjà des apostrophes pour définir chaque élément à l’intérieur de ta parenthèse (le fameux ‘O commentaire’, ‘1 commentaire’, etc), il va croire que tu as fermé l’apostrophe après la lettre L.

      Concernant les miniatures, on peut définir une nouvelle taille de miniature personnalisée dans le fichier functions.php en ajoutant par exemple ce bout de code (toujours penser à faire une sauvegarde avant de le modifier) :
      add_image_size('related-thumb', 300, 150, true);

      « related-thumb » est le nom que je donne à cette nouvelle taille de vignette, ce qui veut dire que dans le code, il faudra écrire the_post_thumbnail(‘related-thumb’). La largeur et la hauteur, à toi de les définir en pixels selon tes besoins (300 pixels de large et 150 de hauteur dans mon exemple). Ensuite, tu peux ajouter true ou false à la fin de la parenthèse selon le type de redimensionnement que tu veux : si tu écris « true », WordPress fera en sorte de « couper » une partie de l’image si nécessaire pour ne pas qu’elle dépasse les dimensions spécifiées. Si tu écris « false » à la place de true, il redimensionnera l’image en gardant ses proportions (= une image verticale restera verticale).

      Après avoir ajouté une taille, il faut régénérer toutes les miniatures du blog (pour que WordPress « fabrique » la nouvelle miniature). Le plugin « Force Regenerate Thumbnails » est très bien pour ça.

      Répondre à Marlène
  • Aline - Inspiré et Créé

    Super génial ce widget!
    Je mets ce tuto en favoris pour le faire plus tard, merci à toi pour tes ces tutos!

    Répondre à Aline
Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.