La page naviguer vous propose de nombreuses façons de découvrir le site dans sa richesse et sa diversité. Il faut dire qu’avec 1506 articles, il y a de quoi se perdre ! Une façon de découvrir le site peut-être de se laisser porter par le hasard en découvrant des articles de façon aléatoire. Un « bouton » placé ici et là, un lien dans le pied de page, une page dédiée. Je vous explique comment j’ai fait ça de façon légère.
Un bouton
En cliquant sur ce bouton, on peut donc découvrir un article au hasard. Ce bouton est présent dans la page naviguer ou dans la page 404, celle où on arrive en cas d’erreur ou de problème de lien.
La page dédiée
Dans le même esprit, une page non indexée mais présente en lien dans le menu du pied de page, vous permet d’accéder à un article au hasard.
Elle est au lien https://vincentbreton.fr/un-article-au-hasard/
Une incitation à découvrir le site
Je voulais proposer ce petit dispositif comme une incitation à découvrir le site.
Je sais qu’il existe des extensions ou des plugins avec WordPress qui permettent d’ajouter des fonctionnalités sans coder. L’ennui c’est que leur code est parfois lourd, introduit de temps à autre des vulnérabilités. Parfois certaines extensions se marient mal entre elles et engendrent des erreurs. Une extension doit être régulièrement mise à jour.
Pas de plugin mais du code
Il y a plusieurs façons de faire. Je ne sais si la mienne est académique mais l’idée est d’utiliser des bouts de code à rajouter au site, sans l’alourdir.
J’ai déjà procédé ainsi pour faire apparaitre le nombre d’articles, estimer le temps de lecture d’un texte ou lire des listes d’audios. Ça m’a permis d’alléger le site.
Je dis tout ça pour celles et ceux qui réfléchissent à la façon de gérer leur site WordPress et veulent des choses simples. Il n’y a évidemment pas de cookie ou autres traceurs.
Un peu de recherche sur le net, et pour le coup d’aide de l’intelligence artificielle (il faut lui passer des commandes précises) et j’ai trouvé une solution simple que je vous laisse en partage.
J’ai demandé à disposer d’un bout de code me permettant d’avoir un bouton à placer où je voulais ou carrément le code d’une page. J’ai précisé par exemple que je voulais que les boutons soient de la même couleur que ceux présents ailleurs sur le site.
Voilà le code pour mon site. Au demeurant, vous pouvez l’adapter à votre site en modifiant les infos liées à votre situation. Vous pouvez aussi modifier la couleur ou d’autres paramètres…
/**
* Shortcode pour afficher un lien vers un article aléatoire
* Usage : [article_aleatoire] ou [article_aleatoire texte="Découvrir un article"]
*/
function article_aleatoire_shortcode($atts) {
$atts = shortcode_atts(array(
'texte' => 'Article au hasard',
'classe' => 'btn-article-aleatoire'
), $atts);
$args = array(
'post_type' => 'post',
'posts_per_page' => 1,
'orderby' => 'rand',
'post_status' => 'publish'
);
$random_post = new WP_Query($args);
if ($random_post->have_posts()) {
$random_post->the_post();
$permalink = get_permalink();
$output = sprintf(
'<a href="%s" class="%s">%s</a>',
esc_url($permalink),
esc_attr($atts['classe']),
esc_html($atts['texte'])
);
wp_reset_postdata();
return $output;
}
return '';
}
add_shortcode('article_aleatoire', 'article_aleatoire_shortcode');
/**
* Shortcode pour afficher directement un article aléatoire complet
* Usage : [article_aleatoire_complet]
*/
function article_aleatoire_complet_shortcode($atts) {
$atts = shortcode_atts(array(
'bouton_recharger' => 'Charger un autre article',
'afficher_image' => 'oui',
'afficher_meta' => 'oui'
), $atts);
$args = array(
'post_type' => 'post',
'posts_per_page' => 1,
'orderby' => 'rand',
'post_status' => 'publish'
);
$random_post = new WP_Query($args);
if ($random_post->have_posts()) {
ob_start();
while ($random_post->have_posts()) {
$random_post->the_post();
?>
<article id="post-<?php the_ID(); ?>" <?php post_class('article-aleatoire-complet'); ?>>
<?php if ($atts['afficher_image'] === 'oui' && has_post_thumbnail()) : ?>
<div class="article-aleatoire-image">
<?php the_post_thumbnail('large'); ?>
</div>
<?php endif; ?>
<header class="article-aleatoire-header">
<h2 class="article-aleatoire-titre">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h2>
<?php if ($atts['afficher_meta'] === 'oui') : ?>
<div class="article-aleatoire-meta">
<time datetime="<?php echo get_the_date('c'); ?>">
<?php echo get_the_date(); ?>
</time>
<?php
$categories = get_the_category();
if ($categories) {
echo ' • ';
$cat_links = array();
foreach ($categories as $cat) {
$cat_links[] = '<a href="' . get_category_link($cat->term_id) . '">' . $cat->name . '</a>';
}
echo implode(', ', $cat_links);
}
?>
</div>
<?php endif; ?>
</header>
<div class="article-aleatoire-contenu">
<?php
global $wp_embed;
$content = get_the_content();
$content = apply_filters('the_content', $content);
$content = $wp_embed->autoembed($content);
echo $content;
?>
</div>
<footer class="article-aleatoire-footer">
<a href="<?php echo esc_url(get_permalink()); ?>" class="btn-voir-article">
Voir l'article complet
</a>
<a href="<?php echo esc_url(add_query_arg('refresh', time())); ?>" class="btn-recharger-article">
<?php echo esc_html($atts['bouton_recharger']); ?>
</a>
</footer>
</article>
<?php
}
wp_reset_postdata();
return ob_get_clean();
}
return '<p>Aucun article trouvé.</p>';
}
add_shortcode('article_aleatoire_complet', 'article_aleatoire_complet_shortcode');
/**
* Styles pour les articles aléatoires
*/
function article_aleatoire_styles() {
?>
<style>
/* Bouton lien simple */
.btn-article-aleatoire {
display: inline-block;
padding: 0.75em 1.5em;
background-color: #4a608c;
color: #fff;
text-decoration: none;
border-radius: 4px;
transition: opacity 0.2s;
}
.btn-article-aleatoire:hover {
opacity: 0.8;
}
/* Article aléatoire complet */
.article-aleatoire-complet {
max-width: 800px;
margin: 0 auto;
padding: 2em 0;
}
.article-aleatoire-image {
margin-bottom: 2em;
}
.article-aleatoire-image img {
width: 100%;
height: auto;
border-radius: 8px;
}
.article-aleatoire-header {
margin-bottom: 2em;
}
.article-aleatoire-titre {
font-size: 2em;
margin-bottom: 0.5em;
line-height: 1.2;
}
.article-aleatoire-titre a {
color: var(—wp—preset—color—contrast, #000);
text-decoration: none;
}
.article-aleatoire-titre a:hover {
opacity: 0.7;
}
.article-aleatoire-meta {
font-size: 0.9em;
color: var(—wp—preset—color—contrast-2, #666);
}
.article-aleatoire-meta a {
color: inherit;
text-decoration: none;
}
.article-aleatoire-meta a:hover {
text-decoration: underline;
}
.article-aleatoire-contenu {
margin-bottom: 2em;
line-height: 1.6;
}
.article-aleatoire-footer {
display: flex;
gap: 1em;
flex-wrap: wrap;
padding-top: 2em;
border-top: 1px solid var(—wp—preset—color—contrast-3, #ddd);
}
.btn-voir-article,
.btn-recharger-article {
display: inline-block;
padding: 0.75em 1.5em;
background-color: #4a608c;
color: #fff;
text-decoration: none;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
transition: opacity 0.2s;
font-family: inherit;
}
.btn-voir-article:hover,
.btn-recharger-article:hover {
opacity: 0.8;
}
.btn-recharger-article {
background-color: #5a7099;
}
@media (max-width: 768px) {
.article-aleatoire-complet {
padding: 1em;
}
.article-aleatoire-titre {
font-size: 1.5em;
}
.article-aleatoire-footer {
flex-direction: column;
}
.btn-voir-article,
.btn-recharger-article {
width: 100%;
text-align: center;
}
}
</style>
<?php
}
add_action('wp_head', 'article_aleatoire_styles');Pour les intimes on appelle ça un « snippett ». C’est même ici un « PHP Snippet ». On peut l’implémenter de plusieurs façons notamment via l’éditeur du site et le fichier fonctions.php ou via un plugin chargé de gérer ces bouts de code. Vous pouvez copier ce code en l’adaptant.
Selon les thèmes, vous pourriez devoir modifier ce code. Mais vous pouvez aussi « passer commande » à une IA en donnant tous les détails sur votre site.
Ce que ça va permettre :
✅ Affiche uniquement les articles (pas les pages)
✅ Compatible avec les variables CSS de Twenty Twenty-Five et Twentig (mon thème et le plugin de mise en forme)
✅ Style par défaut qui s’adapte aux couleurs du thème
✅ Léger et performant
✅ Sécurisé
Au lieu d’aller bricoler à l’aveugle, j’utilise pour le coup une extension qui permet de gérer et placer facilement des bouts de code. C’est gratuit et l’avantage est que si ça coince on peut l’enlever sans souci. Les mises à jour du thème ou de WordPress ne modifieront pas ce code.
WP Code
Avec ce plugin on peut même gratuitement manipuler des bouts de code : php, html, css…
Les paramètres sont assez simples à configurer pour savoir où les placer. On peut aussi modifier les en-têtes ou pieds de page.
Des codes courts :
On va ensuite utiliser des codes courts, l’un pour afficher le bouton, l’autre pour afficher la page avec un nouvel article à chaque fois.
Pour le bouton j’insère le code court
[article_aleatoire]Pour la page j’insère le code court
[article_aleatoire_complet] en utilisant à chaque fois le bloc [/] ou coude court (ou short code).
En conclusion
Si cela peut sembler un peu complexe pour les néophytes ou trop simple pour les experts qui sauront mettre en place des effets « spectaculaires », on a là une façon de répondre à une demande précise, de la manière la plus propre possible. En tout cas, ça ajoute une fonction qui servira probablement à celles et ceux qui découvrent le site.
Un mot en retour ?