afficher une liste d'article aléatoire dans la colonne latéral de wordpress

Afficher une liste d’articles de manière aléatoire sur WordPress

ParOyonyx Publié le Mis à jour le

Je vous propose une solution, presque sans plugin car nous allons tout de même en utiliser un mais qui pourra vous rendre d’autres services à l’avenir, pour créer une liste d’articles qui va afficher aléatoirement des articles. Je cherchai une solution simple à mettre en oeuvre car par défaut le widget de WordPress ne permet que de faire 4 tris : du plus vieux au plus récent, du plus récent au plus vieux, de A à Z ou de Z à A.

Je voulais quelque chose permettant d’afficher aléatoirement 4 articles dans la barre latérale. J’ai donc créé un code pour répondre à mon besoin.

Installer WPcode

Pour afficher notre liste d’articles aléatoirement dans un widget sur WordPress, nous allons utilisé la version gratuite du plugin WPcode disponible dans la bibliothéque des extensions WordPress. Ce plugin est très pratique pour ajouter des fonctions sans toucher au fichier functions.php du thème et donc sans avoir besoin d’un thème enfant.

Vous pourrez l’utiliser pour d’autres actions en ajoutant des morceaux de code. Il y a même quelques extraits de code déjà inclus qui peuvent être utile.

Le code pour afficher aléatoirement une liste d’articles sur WordPress

Pour mettre en place le code, vous devez accéder à WPCode dans le tableau de bord WordPress. Passez la souris sur « Ajoutez votre code personnalisé (nouvel extrait) » et cliquez sur « Add Custom Snippet » qui est apparu.

Ajouter un titre pour retrouver facilement votre extrait dans le futur.

Type de code : choisir « Extrait php »

Coller le code ci-dessous :

function random_posts_shortcode($atts) {
    // Définir les attributs par défaut
    $atts = shortcode_atts(
        array(
            'count' => 5, // Valeur par défaut
        ),
        $atts,
        'random_posts'
    );

    ob_start();
    
    // Arguments de la requête
    $args = array(
        'posts_per_page' => intval($atts['count']),
        'orderby'        => 'rand',
        'post_status'    => 'publish',
    );

    // Nouvelle requête WP_Query
    $random_posts = new WP_Query($args);

    if ($random_posts->have_posts()) {
        echo '<div class="random-posts-widget">';
        while ($random_posts->have_posts()) {
            $random_posts->the_post();
            ?>
            <div class="random-post">
                <a href="<?php the_permalink(); ?>">
                    <?php the_post_thumbnail('medium'); ?>
                </a>
                <div class="random-post-title">
                    <a href="<?php the_permalink(); ?>">
                        <?php the_title(); ?>
                    </a>
                </div>
            </div>
            <?php
        }
        echo '</div>';
        wp_reset_postdata();
    }
    return ob_get_clean();
}

add_shortcode('random_posts', 'random_posts_shortcode');

Pour la méthode d’insertion : « insertion automatique » et pour le lieu « Exécuter partout ».

Enregistrez votre extrait et passez le au statut actif

Ensuite, il reste à Insérer le shortcode dans un widget code court pour afficher la liste des articles dans la barre latérale.

Par défaut, le shortcode [random_posts] affichera 5 articles aléatoirement. Pour apporter de la diversité, vous pouvez utiliser [random_posts count="10"], et vous pouvez le nombre qui vous convient dans count.

Styliser avec du CSS

Pour améliorer l’affichage, vous pouvez ajouter ce code CSS dans le CSS personnalisé de votre thème WordPress :

.random-posts-widget {
    display: block;
}

.random-post {
    margin-bottom: 20px;
    text-align: center;
}

.random-post img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.random-post-title {
    font-size: 1.2em;
    margin: 10px 0;
}

Et voilà, vous venez d’ajouter une liste d’articles aléatoires dans votre barre latérale.

Comme il s’agit d’un shortcode, vous pouvez l’utiliser à différents endroits sur votre site. Il fonctionne également dans une page ou un article. Il faudra peut-être adapté l’affichage via le code CSS.

A noter que le code CSS peut être inséré dans un extrait de code sur le plugin WPCode.

Version avancée du code : afficher les articles de la même catégorie

J’ai fais une version plus avancée du code qui permet toujours d’afficher de manière aléatoire les articles sur toutes les pages mais qui va également afficher des articles de la même catégorie pour un article.

function random_posts_shortcode($atts) {
    // Définir les attributs par défaut
    $atts = shortcode_atts(
        array(
            'count' => 5, // Valeur par défaut
        ),
        $atts,
        'random_posts'
    );

    ob_start();
    
    // Vérifier si nous sommes sur une page d'article
    if (is_single() && get_post_type() == 'post') {
        $categories = wp_get_post_categories(get_the_ID());
        
        if (!empty($categories)) {
            // Si l'article a des catégories, choisir la première pour la requête
            $args = array(
                'posts_per_page' => intval($atts['count']),
                'category__in'   => $categories,
                'post__not_in'   => array(get_the_ID()), // Exclure l'article actuel
                'orderby'        => 'rand',
                'post_status'    => 'publish',
            );
        } else {
            // Si l'article n'a pas de catégorie, afficher des articles aléatoires
            $args = array(
                'posts_per_page' => intval($atts['count']),
                'orderby'        => 'rand',
                'post_status'    => 'publish',
            );
        }
    } else {
        // Si nous ne sommes pas sur une page d'article, afficher des articles aléatoires
        $args = array(
            'posts_per_page' => intval($atts['count']),
            'orderby'        => 'rand',
            'post_status'    => 'publish',
        );
    }

    // Nouvelle requête WP_Query
    $random_posts = new WP_Query($args);

    if ($random_posts->have_posts()) {
        echo '<div class="random-posts-widget">';
        while ($random_posts->have_posts()) {
            $random_posts->the_post();
            ?>
            <div class="random-post">
                <a href="<?php the_permalink(); ?>">
                    <?php the_post_thumbnail('medium'); ?>
                </a>
                <div class="random-post-title">
                    <a href="<?php the_permalink(); ?>">
                        <?php the_title(); ?>
                    </a>
                </div>
            </div>
            <?php
        }
        echo '</div>';
        wp_reset_postdata();
    }
    return ob_get_clean();
}

add_shortcode('random_posts', 'random_posts_shortcode');

Le code CSS reste le même que précédemment et vous pouvez l’ajuster à vos besoins.

Explication des changements

  1. Détection de la page d’article :
    • Utilisation de is_single() et get_post_type() == 'post' pour vérifier si nous sommes sur une page d’article.
  2. Obtention des catégories de l’article :
    • Utilisation de wp_get_post_categories(get_the_ID()) pour obtenir les catégories de l’article actuel.
  3. Condition de requête basée sur les catégories :
    • Si l’article a des catégories, nous construisons la requête pour obtenir des articles de la même catégorie en excluant l’article actuel.
    • Si l’article n’a pas de catégories, nous affichons des articles aléatoires.
  4. Affichage des articles :
    • Affichage des articles de la requête en utilisant des <div> pour les titres.

Utilisation du shortcode

Vous pouvez utiliser le shortcode [random_posts] dans n’importe quelle page ou article pour afficher les articles aléatoires ou les articles de la même catégorie selon le contexte.

Avec ce code, les articles aléatoires seront affichés sur les pages normales et les articles de la même catégorie seront affichés lorsque vous êtes sur une page d’article d’une catégorie spécifique.

Code combiné php et css

Voici une version combiné des codes php et css de la version avancé pour une intégration plus rapide :

// Fonction pour afficher les articles aléatoires
function random_posts_shortcode($atts) {
    // Définir les attributs par défaut
    $atts = shortcode_atts(
        array(
            'count' => 5, // Valeur par défaut
        ),
        $atts,
        'random_posts'
    );

    ob_start();
    
    // Vérifier si nous sommes sur une page d'article
    if (is_single() && get_post_type() == 'post') {
        $categories = wp_get_post_categories(get_the_ID());
        
        if (!empty($categories)) {
            // Si l'article a des catégories, choisir la première pour la requête
            $args = array(
                'posts_per_page' => intval($atts['count']),
                'category__in'   => $categories,
                'post__not_in'   => array(get_the_ID()), // Exclure l'article actuel
                'orderby'        => 'rand',
                'post_status'    => 'publish',
            );
        } else {
            // Si l'article n'a pas de catégorie, afficher des articles aléatoires
            $args = array(
                'posts_per_page' => intval($atts['count']),
                'orderby'        => 'rand',
                'post_status'    => 'publish',
            );
        }
    } else {
        // Si nous ne sommes pas sur une page d'article, afficher des articles aléatoires
        $args = array(
            'posts_per_page' => intval($atts['count']),
            'orderby'        => 'rand',
            'post_status'    => 'publish',
        );
    }

    // Nouvelle requête WP_Query
    $random_posts = new WP_Query($args);

    if ($random_posts->have_posts()) {
        echo '<div class="random-posts-widget">';
        while ($random_posts->have_posts()) {
            $random_posts->the_post();
            ?>
            <div class="random-post">
                <a href="<?php the_permalink(); ?>">
                    <?php the_post_thumbnail('medium'); ?>
                </a>
                <div class="random-post-title">
                    <a href="<?php the_permalink(); ?>">
                        <?php the_title(); ?>
                    </a>
                </div>
            </div>
            <?php
        }
        echo '</div>';
        wp_reset_postdata();
    }
    return ob_get_clean();
}

add_shortcode('random_posts', 'random_posts_shortcode');

// Injecter le CSS directement dans le header du site
function custom_random_posts_css() {
    echo "
    <style>
    .random-posts-widget {
        display: block;
    }
    
    .random-post {
        margin-bottom: 20px;
        text-align: center;
    }
    
    .random-post img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    
    .random-post-title {
        font-size: 1.2em;
        margin: 10px 0;
    }
    </style>
    ";
}
add_action('wp_head', 'custom_random_posts_css');

Pour afficher la liste des articles dans un widget, utilisez le shortcode [random_posts] qui affichera 5 articles aléatoirement. Pour apporter de la diversité, vous pouvez utiliser [random_posts count="10"], et vous pouvez le nombre qui vous convient dans count.

Étiquettes de la publication :

Publications similaires

Ewww image optimizer code promo

EWWW Image Optimizer – Licence à vie

ParOyonyx

Pour optimiser la vitesse de chargement d’un site Internet, surveiller et optimiser les images est essentiel. Des images trop lourdes, mal optimisées affectent le temps de chargement des pages et impactent le référencement naturel tout comme l’expérience utilisateur. Il y a donc un double effet négatif, une perte de conversion suite à des visiteurs qui…

afficher l'image à la une dans article wordpress

Afficher l’image mise en avant dans mon article

ParOyonyx

Il arrive que certains thèmes WordPress n’affichent pas l’image à la une ou featured post ou encore image mis en avant dans le contenu de l’article. Il existe différentes solutions connues pour résoudre ce problème : changer de thème WordPress, utiliser une extension ou modifier les fichiers du thème. Je vous propose une alternative simple…

retirer une catégorie de la page d'accueil Wordpress au format blog

Blog WordPress : Exclure une catégorie de la page d’accueil

ParOyonyx

Comme moi, vous n’avez peut-être pas envie de créer une page spécifique pour la page d’accueil de certains sites. Mais comment personnaliser des éléments sur la page d’accueil au format blog sur WordPress sans se prendre la tête. Nous allons utiliser le plugin WpCode qui permet d’ajouter facilement des extraits de code et de personnaliser…

insertion d'un formulaire en fonction du slug de la page

Insérer un formulaire automatiquement en fonction du slug parent

ParOyonyx

Bonjour, aujourd’hui je vais vous partager un bout de code à utiliser avec wp code sur WordPress pour insérer un formulaire automatiquement en fonction du slug parent. Voici le contexte qui m’a fait écrire ce petit morceau de code bien pratique. Avec l’excellent plugin de création de contenu Otomatic, je me suis relancé dans les…