Comment personnaliser l'affichage des archives WordPress dans votre barre latérale

Chaque contenu que vous publiez mérite une chance d'être découvert, même des mois ou des années plus tard. Mais si vos archives WordPress ne sont qu'une simple liste reléguée dans votre barre latérale, vous rendez plus difficile pour les visiteurs de trouver et d'apprécier vos anciens articles.

Vos archives peuvent être bien plus qu'une simple liste chronologique.

Elles peuvent guider les lecteurs vers les sujets qui les intéressent, mettre en valeur votre contenu le plus populaire, et même encourager les gens à passer plus de temps à explorer votre site.

Nous le savons par expérience car nous avons une page d'archives dédiée sur WPBeginner. Nous avons constaté de visu comment une archive peut faire une réelle différence dans la découverte de contenu.

Prêt à améliorer vos archives ? Nous allons vous montrer comment personnaliser l'affichage de vos archives WordPress avec des techniques simples qui ne nécessitent aucune compétence technique.

💡Comparaison rapide : Moyens de personnaliser les archives de la barre latérale

Pour vous aider à choisir la meilleure méthode pour vos besoins spécifiques, nous avons créé une comparaison rapide des différentes options abordées dans ce guide :

Pourquoi personnaliser l'affichage des archives WordPress dans votre barre latérale ?

La principale raison de personnaliser l'affichage des archives WordPress est de transformer une liste d'archives encombrée en un outil de navigation utile qui stimule l'engagement des utilisateurs.

Par défaut, WordPress crée une longue liste verticale de mois qui peut sembler écrasante et repousser d'autres contenus importants de la barre latérale. La personnalisation de cet affichage vous permet de résoudre ce problème tout en bénéficiant de plusieurs avantages clés :

• Améliorer la découverte de contenu : Guidez les lecteurs vers les sujets et les périodes qui les intéressent plutôt que de les forcer à faire défiler des années de dates.
• Améliorer l'expérience utilisateur : Réduisez l'encombrement visuel de votre barre latérale pour rendre votre site plus professionnel et plus facile à naviguer.
• Augmenter les pages vues : Facilitez la recherche et la lecture par les visiteurs de votre contenu ancien et intemporel qui pourrait autrement être enfoui.

Dans cette optique, voyons comment vous pouvez personnaliser l'affichage des archives WordPress dans votre barre latérale :

Option 1 : Personnaliser le bloc d'archives par défaut (sans plugin)

Le bloc ou widget d'archives WordPress par défaut inclut des options pour personnaliser l'apparence des archives.

Si vous utilisez un thème classique, vous pouvez voir ces paramètres en allant dans Apparence » Widgets pour ouvrir l'éditeur de widgets basé sur des blocs.

Ensuite, cliquez sur le bouton « + » pour ajouter le bloc « Archives » dans la barre latérale de WordPress.

Dans le panneau des paramètres du bloc de droite, vous verrez des options pour afficher les archives sous forme de menu déroulant, afficher l'étiquette des archives et afficher le nombre d'articles publiés dans chaque période.

Vous pouvez également faire afficher les archives par année, mois, semaine ou jour.

Une fois que vous êtes satisfait de l'apparence des archives sur votre blog WordPress, vous pouvez cliquer sur « Mettre à jour ».

Voici à quoi ressemblent les archives WordPress par défaut dans la barre latérale de votre blog lorsque vous les personnalisez :

Si vous utilisez un thème de blocs, vous pouvez simplement utiliser le même bloc « Archives » et l'ajouter au modèle qui a une barre latérale dans l'éditeur complet du site. Les paramètres sont exactement les mêmes.

Vous pouvez lire notre guide complet sur l'édition complète du site WordPress pour plus d'informations.

Ces paramètres par défaut peuvent être suffisants pour un blog basique. Cependant, ils ne suffisent pas si vous avez beaucoup de contenu à gérer ou si vous souhaitez plus d'options de personnalisation.

Si vous cherchez d'autres moyens de personnaliser l'affichage des archives, continuez à lire.

Option 2 : Créer un affichage compact des archives

Si votre liste d'archives est devenue trop longue, vous pouvez créer une archive compacte qui affiche vos articles en utilisant beaucoup moins d'espace.

Vous devrez installer et activer le plugin Compact Archives. Nous avons développé ce plugin nous-mêmes, et il a bien fonctionné pour plus de 2 000 utilisateurs.

Pour plus d'instructions d'installation, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Une fois le plugin actif, vous pouvez ajouter les archives compactes à la barre latérale de votre thème en utilisant le bloc « Archives compactes de WPBeginner ». Ce bloc est disponible dans l'éditeur de widgets basé sur les blocs et dans l'éditeur de site complet.

Vous pouvez ensuite modifier l'apparence des archives compactes.

Par exemple, vous pourriez choisir d'afficher les premières initiales du mois, la première lettre du mois ou le numéro du mois.

Une fois terminé, cliquez simplement sur « Mettre à jour » ou « Enregistrer ».

Pour plus de détails sur le plugin, consultez notre guide sur comment créer des archives compactes dans WordPress.

Option 3 : Afficher les archives dans un menu déroulant

Une autre façon de gérer les longues listes d'archives est d'afficher un aperçu réductible des années et des mois où vous avez publié des articles de blog.

Pour ce faire, vous devez installer et activer le plugin Collapsing Archives.

Une fois le plugin actif, vous devez visiter la page Apparence » Widgets et ajouter le widget « Archives réductibles » à votre barre latérale.

Dans la barre latérale des paramètres du bloc, vous pouvez choisir d'afficher le nombre de publications publiées dans l'année ou le mois, d'étendre automatiquement les menus déroulants, de modifier les icônes des menus déroulants, et plus encore.

Vous pouvez en apprendre davantage en vous référant à la Méthode 1 de notre guide sur comment limiter le nombre de mois d'archives affichés dans WordPress.

Une fois que vous êtes satisfait de la façon dont les archives sont affichées, cliquez sur « Mettre à jour » ou « Enregistrer ».

Voici à quoi cela ressemble sur notre site de démonstration :

Option 4 : Limiter le nombre de mois d'archives affichés

Peut-être que vous aimez l'apparence des archives par défaut de WordPress. Mais si vous avez beaucoup de contenu, afficher chaque mois ou chaque année peut rendre votre barre latérale trop longue. Vous pouvez résoudre ce problème en limitant le nombre de mois qui apparaissent dans votre liste d'archives.

Pour ce faire, vous devrez ajouter du code personnalisé aux fichiers de votre thème WordPress.

Si vous n'avez jamais fait cela auparavant, cela peut sembler intimidant. Mais ne vous inquiétez pas, car vous pouvez utiliser WPCode pour le faire en toute sécurité.

WPCode est un plugin d'extraits de code qui facilite l'ajout et la gestion d'extraits de code personnalisés dans WordPress.

Nous l'avons testé en profondeur et l'avons trouvé excellent pour rester organisé — vous pouvez clairement voir quels extraits vous avez ajoutés et désactiver rapidement tout code qui ne fonctionne pas, le tout sans modifier les fichiers de votre thème.

Pour plus d'informations sur notre expérience, consultez notre avis sur WPCode.

Tout d'abord, installons WPCode dans le tableau de bord d'administration de WordPress. Vous pouvez consulter notre guide étape par étape sur comment installer un plugin WordPress si vous avez besoin d'aide.

Ensuite, allez dans Extraits de code » + Ajouter un extrait. Sélectionnez « Ajouter votre code personnalisé (Nouvel extrait) » et cliquez sur le bouton « + Ajouter un extrait de code ».

Maintenant, donnez un nom à votre nouvel extrait de code. Il peut s'agir de quelque chose de simple comme « Limiter l'affichage des mois d'archives ».

Ensuite, assurez-vous de sélectionner « Extrait PHP » pour le « Type de code ».

Allez-y et collez l'extrait de code suivant ci-dessous dans la boîte d'aperçu du code :

// Function to get archives list with limited months
function wpb_limit_archives() { 
  $archive_title = '<h3>Archives</h3>';
  $my_archives = $archive_title . wp_get_archives(array(
    'type'=>'monthly', 
    'limit'=>6,
    'echo'=>0
  ));
  return $my_archives; 
}
// Create a shortcode
add_shortcode('wpb_custom_archives', 'wpb_limit_archives'); 
// Enable shortcode execution in text widget
add_filter('widget_text', 'do_shortcode');

La partie qui dit 'limit'=>6 contrôle le nombre de mois affichés. Vous pouvez le changer pour n'importe quel nombre si vous préférez. Par exemple, si vous voulez afficher le contenu de la dernière année, changez simplement 6 en 12.

Maintenant, faites défiler jusqu'à la section Insertion et assurez-vous que la méthode d'insertion est 'Insertion automatique'. Sélectionnez également 'Frontend uniquement' pour l'emplacement.

Après cela, cliquez simplement sur le commutateur en haut pour rendre le code 'Actif' et appuyez sur le bouton 'Enregistrer le snippet'.

Une fois terminé, accédez à votre éditeur de widgets basé sur des blocs ou à l'éditeur de site complet.

Ensuite, cliquez sur le bouton '+' et sélectionnez le bloc 'Shortcode'.

Après cela, vous devriez coller le shortcode suivant dans le bloc :

[wpb_custom_archives]

Une fois que vous cliquez sur le bouton 'Mettre à jour' ou 'Enregistrer', votre barre latérale affichera seulement 6 mois d'archives.

Pour plus de détails, consultez la méthode 3 de notre guide sur comment limiter le nombre de mois d'archives affichés dans WordPress.

Voici à quoi ressemble notre section d'archives après avoir remplacé le bloc Archives par défaut par le shortcode :

Option 5 : Afficher des menus déroulants d'archives mensuelles et annuelles

Parfois, les visiteurs ne savent peut-être pas exactement quand un article a été mis à jour ou publié. Pour les aider, vous pouvez créer deux menus déroulants dans votre section d'archives : un pour les années et un pour les mois.

Cet élément de conception permet aux utilisateurs de trouver plus facilement du contenu plus ancien sans avoir à faire défiler une longue liste. Comme les listes déroulantes utilisent un script de redirection, les utilisateurs seront automatiquement dirigés vers la page d'archives dès qu'ils sélectionneront une date.

Nous utiliserons un extrait de code personnalisé et WPCode pour cela. Comme précédemment, assurez-vous d'abord d'installer WPCode dans votre administration WordPress.

Ensuite, allez dans Extraits de code » + Ajouter un extrait. Choisissez ‘Ajouter votre code personnalisé (Nouvel extrait)’ et cliquez sur le bouton ‘+ Ajouter un code personnalisé’.

Maintenant, donnez un nom à votre nouvel extrait de code personnalisé. Il peut s'agir de quelque chose de simple comme ‘Menus déroulants d'archives mensuelles et annuelles’.

De plus, sélectionnez ‘Extrait PHP’ pour le ‘Type de code’.

Dans la boîte de prévisualisation du code, insérez simplement l'extrait de code suivant :

function custom_archive_dropdown_shortcode() {
    // Get months array
    global $wpdb, $wp_locale;
    $months = $wpdb->get_results(
        "SELECT DISTINCT YEAR(post_date) AS year, MONTH(post_date) AS month
        FROM $wpdb->posts
        WHERE post_type = 'post' AND post_status = 'publish'
        ORDER BY post_date DESC"
    );
    $output = '<h3>Archives</h3>'; // Added 'Archives' title in H3
    $month_dropdown = '<select id="archive-month" name="archive-month" onchange="document.location.href=this.options[this.selectedIndex].value;">';
    $month_dropdown .= '<option value="">Select Month</option>';
    foreach ( $months as $month ) {
        $month_name = $wp_locale->get_month($month->month);
        $year_month = sprintf('%d-%02d', $month->year, $month->month);
        $month_dropdown .= sprintf(
            '<option value="%s">%s %d</option>',
            esc_url(home_url('/' . $month->year . '/' . $month->month . '/')),
            $month_name,
            $month->year
        );
    }
    $month_dropdown .= '</select>';
    // Get years array
    $years = $wpdb->get_results(
        "SELECT DISTINCT YEAR(post_date) AS year
        FROM $wpdb->posts
        WHERE post_type = 'post' AND post_status = 'publish'
        ORDER BY post_date DESC"
    );
    $year_dropdown = '<select id="archive-year" name="archive-year" onchange="document.location.href=this.options[this.selectedIndex].value;">';
    $year_dropdown .= '<option value="">Select Year</option>';
    foreach ( $years as $year ) {
        $year_dropdown .= sprintf(
            '<option value="%s">%d</option>',
            esc_url(home_url('/' . $year->year . '/')),
            $year->year
        );
    }
    $year_dropdown .= '</select>';
    $output .= $month_dropdown . $year_dropdown; // Append dropdowns to output
    return $output; // Return the complete output
}
add_shortcode('archive_dropdown', 'custom_archive_dropdown_shortcode');

Comme pour l'extrait de code précédent, faites défiler jusqu'à la section Insertion et sélectionnez ‘Insertion automatique’ pour la méthode d'insertion. Quant à l'emplacement, vous pouvez choisir ‘Front-end uniquement’.

Ensuite, activez simplement l'extrait de code et cliquez sur ‘Enregistrer l'extrait’.

Maintenant, allez dans l'éditeur de widgets basé sur des blocs ou l'éditeur complet du site.

Après cela, ajoutez un bloc ‘Shortcode’ à votre barre latérale. À ce stade, vous pouvez aller de l'avant et coller le shortcode suivant dans le bloc shortcode :

[archive_dropdown]

Une fois que vous avez fait cela, cliquez simplement sur ‘Mettre à jour’ ou ‘Enregistrer’.

Maintenant, il y aura 2 menus déroulants qui permettront aux utilisateurs de choisir le mois et l'année pour trouver le bon contenu.

Chaque fois qu'ils sélectionneront un mois ou une année, l'utilisateur sera redirigé vers la page d'archives de la période choisie.

Option 6 : Afficher les archives mensuelles classées par année

Nous avons travaillé sur un projet client qui nécessitait une mise en page personnalisée spécifique : des archives mensuelles soigneusement organisées par année, avec l'année affichée en évidence sur la gauche.

Cette barre latérale d'archives personnalisée était difficile à coder car ce client ne voulait afficher l'année qu'une seule fois sur la gauche.

Heureusement, nous avons pu trouver de l'inspiration sur le web et avons créé un extrait de code personnalisé. Pour cet article, nous avons conçu une version beaucoup plus simple de ce code que vous pouvez également utiliser avec WPCode.

Tout d'abord, installez WPCode dans votre administration WordPress. Ensuite, allez dans Extraits de code » + Ajouter un extrait. Choisissez ‘Ajouter votre code personnalisé (Nouvel extrait)’ et cliquez sur le bouton ‘+ Ajouter un code personnalisé’.

Donnez un nom à votre nouvel extrait de code personnalisé. Il peut s'agir de quelque chose de simple comme ‘Archives personnalisées’.

De plus, sélectionnez ‘Extrait PHP’ pour le ‘Type de code’.

Note : Comme la méthode précédente, ce code repose sur le fait que votre site utilise des Permaliens basés sur la date (comme /2025/01/). Si vous utilisez une structure d'URL différente, le code pourrait ne pas identifier correctement l'année.

Dans la boîte de prévisualisation du code, insérez simplement l'extrait de code suivant :

add_shortcode( 'custom_archives', 'display_custom_archives' );
function display_custom_archives() {
  $archives = wp_get_archives( array(
    'type'            => 'monthly',
    'format'          => 'custom',
    'before'          => '',
    'after'           => '<hr>',
    'echo'            => false,
  ) );
  // Split the archives by year
  $archives_by_year = array();
  foreach ( explode( '<hr>', $archives ) as $archive_item ) {
    if ( empty( $archive_item ) ) {
      continue;
    }
    // Extract year from the archive link
    preg_match( '/\/(\d{4})\//', $archive_item, $matches );
    $year = isset( $matches[1] ) ? $matches[1] : date( 'Y' );
    // Add to the year array
    $archives_by_year[ $year ][] = $archive_item;
  }
  // Build the output
  $output = '<h2 class="archives-title">Archives</h2>';
  $output .= '<hr>';
  $output .= '<table>';
  foreach ( $archives_by_year as $year => $archives_for_year ) {
    $output .= '<tr>';
    $output .= '<td class="year">' . $year . '</td>';
    $output .= '<td class="months">';
    $output .= implode( '', $archives_for_year );
    $output .= '</td>';
    $output .= '</tr>';
  }
  $output .= '</table>';
  return $output;
}

Comme indiqué dans la méthode 5, vous pouvez maintenant faire défiler jusqu'à la section Insertion et sélectionner « Insertion automatique » pour la méthode d'insertion. Vous pouvez choisir « Frontend uniquement » pour l'emplacement.

Maintenant, rendez l'extrait de code actif et cliquez sur « Enregistrer l'extrait ».

Créons à nouveau un nouvel extrait de code personnalisé. Cette fois, l'extrait de code sert à styliser la zone du widget d'archives en utilisant du CSS.

Vous pouvez nommer cet extrait de code « CSS personnalisé pour les archives » et sélectionner « Extrait CSS » pour le type de code.

Maintenant, collez l'extrait de code suivant dans la boîte d'aperçu du code :

.archives-title {
  /* Style the title */
}
table {
  width: 100%;
  border-collapse: collapse;
}
td {
  padding: 5px;
  vertical-align: top;
}
.year {
  font-weight: bold;
}
.months hr {
  margin: 5px 0;
  border: none;
  border-top: 1px solid #ccc;
}

Une fois terminé, faites simplement défiler jusqu'à la section Insertion et sélectionnez « Insertion automatique » pour la méthode d'insertion. Ensuite, choisissez « En-tête de tout le site » pour l'emplacement.

Après cela, rendez simplement le code actif et cliquez sur ‘Enregistrer l'extrait.’

Allons dans l'éditeur de widgets ou l'éditeur de site complet.

Ici, cliquez sur le bouton « + » et sélectionnez le bloc « Shortcode ». Maintenant, collez le shortcode suivant dans le bloc shortcode :

[custom_archives]

Ensuite, cliquez sur « Mettre à jour » ou « Enregistrer ».

C’est tout !

Voici à quoi ressemble notre affichage des archives sur notre site de démonstration :

Questions fréquemment posées sur la personnalisation des barres latérales

Voici quelques questions fréquemment posées par nos lecteurs concernant la personnalisation des barres latérales :

Comment personnaliser la barre latérale dans WordPress ?

Pour personnaliser votre barre latérale, naviguez vers Apparence » Widgets dans votre tableau de bord si vous utilisez un thème classique.

Ici, vous pouvez faire glisser et déposer des blocs pour ajouter du texte, des images ou des archives. Si vous utilisez un thème basé sur des blocs, allez dans Apparence » Éditeur et sélectionnez la partie de modèle de la barre latérale pour apporter des modifications.

Pour commencer, consultez notre tutoriel sur les astuces de barre latérale WordPress pour obtenir des résultats maximums.

Comment afficher la page d'archives dans WordPress ?

WordPress génère automatiquement des pages d'archives pour chaque catégorie, étiquette et date de votre site. Pour les afficher, vous pouvez simplement ajouter le bloc « Archives » à votre barre latérale ou à votre pied de page, ou créer un lien de menu personnalisé pointant vers les URL de vos archives spécifiques.

Comment personnaliser la barre de menu dans WordPress ?

Vous pouvez personnaliser votre barre de menu en allant dans Apparence » Menus pour ajouter des pages, des catégories et des liens personnalisés. Pour les thèmes basés sur des blocs, vous utiliserez le bloc Navigation dans l'Éditeur de site pour ajuster la mise en page et le design de votre barre de menu.

Pour plus d'informations, consultez notre tutoriel sur l'ajout d'un menu de navigation dans WordPress.

Qu'est-ce qu'un widget de barre latérale ?

Un widget de barre latérale est un petit bloc de contenu qui remplit une fonction spécifique, comme afficher les articles récents, un calendrier ou une barre de recherche. Dans WordPress moderne, les « widgets » ont été largement remplacés par les « blocs », mais ils remplissent le même objectif d'ajouter des fonctionnalités à votre zone de barre latérale.

Qu'est-ce qu'une barre latérale fixe ?

Une barre latérale fixe est une fonctionnalité de mise en page où la barre latérale reste verrouillée à l'écran pendant que l'utilisateur fait défiler la page. C'est idéal pour garder un contenu important, comme les formulaires d'inscription à la newsletter ou la table des matières, toujours accessible.

Découvrez plus d'astuces et de conseils pour les blogs WordPress

Vous souhaitez améliorer davantage vos archives de blog WordPress ? Ou peut-être redessiner votre barre latérale ? Consultez ces guides connexes ci-dessous :

• Comment ajouter une barre latérale, un en-tête ou un pied de page personnalisé pour chaque catégorie
• Comment créer une page d'archive de types de publication personnalisés dans WordPress
• Guide du débutant pour créer une page d'archives personnalisée dans WordPress
• Comment changer le côté de la barre latérale dans WordPress
• Astuces de barre latérale WordPress pour obtenir des résultats maximum
• Comment ajouter une image dans un widget de la barre latérale WordPress

Nous espérons que ce tutoriel vous a aidé à apprendre comment personnaliser l'affichage des archives WordPress dans votre barre latérale. Vous pourriez également vouloir consulter notre guide ultime sur comment modifier un site Web WordPress et notre sélection d'experts des meilleurs constructeurs de pages glisser-déposer WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.