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.

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 :

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).

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 !

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.

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 des articles aléatoires, 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.

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 pour articles aléatoires 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.

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.

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 :

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.

Gardez cependant en tête qu'il est préférable de faire des liens vers des pages de même thématique que celle où l'on se trouve, afin que le site ait plus de cohérence thématique. C'est une bonne pratique en termes de référencement et je vous conseille donc de bien veiller à ce point lorsque vous affichez des articles aléatoires sur WordPress !