Créer une page d’archives listant les articles par date sous WordPress

Mis à jour le :

Créer une page d’archives n’est pas souvent une mince affaire. En effet, il existe de multiples façons de lister vos articles mais aussi vos catégories : par date, par ordre alphabétique, etc.

C’est pourquoi, nous allons voir ici comment créer une page d’archives qui listera l’intégralité de vos articles lesquels seront triés par catégories et ce, pour votre blog WordPress.

Résultat final

Pour bien comprendre l’objectif de ce guide, voici un schéma de ce que vous obtiendrez :

  • Octobre 2010
    • Art. 1
    • Art. 2
    • Art. 3
  • Septembre 2010
    • Art. 1
    • Art. 2
    • Art.3
Capture d'écran - WordPress Channel et sa page d'archives
Le résultat du tutoriel en image

Pour mettre en place cette page d’archives chronologique, je vous propose d’utiliser un modèle de page pour éviter de modifier votre thème. Cependant, vous pouvez très bien attaquer directement des fichiers standards tels que archive.php !

Création du modèle de page WordPress

Dans le dossier de votre thème, dupliquez le fichier page.php pour réutiliser la structure HTML de votre site. Renommez le fichier pour plus de commodité, par exemple, template-chronologique.php.

Collez dans un premier temps ces premières lignes de code indiquant à WordPress qu’il s’agit d’un modèle de page.

<?php
/*
Template Name: Archives chronologique
*/
?>

Puis, juste après la commande <?php the_content(); ?>, insérez ceci :

<?php
$previous_year = $year = 0;
$previous_month = $month = 0;
$ul_open = false;
$myposts = get_posts('numberposts=-1&orderby=post_date&order=DESC');
?>

<?php foreach($myposts as $post) : ?>

<?php
setup_postdata($post);
$year = mysql2date('Y', $post->post_date);
$month = mysql2date('n', $post->post_date);
$day = mysql2date('j', $post->post_date);
?>

<?php if ($year != $previous_year || $month != $previous_month) : ?>

<?php if ($ul_open == true) : ?>
</ul>
<?php endif; ?>

<h3><?php the_time('F Y'); ?></h3>

<ul>

<?php $ul_open = true; ?>

<?php endif; ?>

<?php $previous_year = $year; $previous_month = $month; ?>

<li><span><?php the_time('j F'); ?> - </span> <span><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span></li>

<?php endforeach; ?>
</ul>

N’oubliez pas de sauvegarder le fichier sur votre serveur dans le dossier /wp-content/themes/NOM_DU_THEME/

Publication de la page d’archive chronologique

Connectez-vous ensuite dans votre administration WordPress puis appliquez le modèle de page que nous venons de créer.

Vous pouvez – par exemple, créez une page que vous nommerez Archives. Dans le module Attributs de la page, choisissez Archives chronologiques comme Modèle.

Capture d'écran - Modèle WordPress Archives chronologiques
Définissez le nouveau modèle de page WordPress

Publiez à présent votre nouvelle page et admirez le résultat !

Félicitations ! Vous venez de créer une page d’archive chronologique grâce à la puissance des modèles de pages WordPress.

Avatar de Aurélien Denis

Protégez votre site WordPress

Vos données sont précieuses,
ne prenez pas le risque de tout perdre.
Confiez-moi votre maintenance !

Ces articles devraient t’intéresser…

39 réponses
  1. Avatar de Jean
    Jean

    comment dupliquer page.php ?

    1. Avatar de Aurélien Denis
      Aurélien Denis

      Via le menu contextuel en général les éditeurs de code propose l’option, sinon en créant un fichier puis collant à l’intérieur les données.

  2. Avatar de Géraldine
    Géraldine

    Bonjour,
    Je recherche comment mettre des articles dans une page
    merci d avance de votre aide si vous avez la solution

  3. Avatar de Isabelle
    Isabelle

    4 ans après … merci 🙂 j’ai mis un moment à tomber sur cette explication après beaucoup de recherches !

    Sinon j’ai tenté de le mettre direct dans une page avec un plugin qui execute le php et ça ne marche que partiellement, j’ai bien le bon nombre d’articles répartis selon les dates, mais tous ont la date et le titre du dernier article publié.

  4. Avatar de JM Ucciani
    JM Ucciani

    Merci. Je viens de l’installer sur mon site, simple et clair.

  5. Avatar de Anthony
    Anthony

    Merci beaucoup pour ce partage je vais testé.

  6. Avatar de Sakrouf
    Sakrouf

    ou bien il y a un autre moyen : rendre son blog en un Ebook sous le format PDF, ça peux être bien surtout si vous compter l’imprimer, tout les détailles sont sur : http://www.sakrouf.com/?p=276
    Ça marche avec WordPress, Blogger et LiveJournal et ne ne vous prendra au maximum 10 minutes 😉

  7. Avatar de rastaferraille
    rastaferraille
  8. Avatar de Alruna
    Alruna

    Merci pour ce tutoriel de grande qualité !
    Je l’ai suivi et étudier, puis je l’ai utilisé pour mon site…
    http://www.isba-81.com/tous-les-articles
    C’était exactement ce que je chercher à faire dans un premier temps.
    Dans un second temps, cela m’a aussi permis de comprendre le fonctionnement des pages modèles que je n’utilisais pas…
    Je précise aussi que j’ai apprécié la rigueur du code.
    Bravo et merci !

    1. Avatar de Aurélien Denis
      Aurélien Denis

      Merci bien ! 😎

  9. Avatar de Vince
    Vince

    Comment faire la même chose mais un affichage par tag au lieu par date ?
    Merci pour votre aide 🙂

    1. Avatar de Aurélien Denis
      Aurélien Denis

      Tu veux lister tous les tags de ton site dans une page d’archive ou créer une page pour chaque tag (dans ce cas, cela est déjà présent en natif) ?

  10. Avatar de JBK
    JBK

    Bonjour,Merci de votre réponse, J’ai essayer de placer le code correctement mais le titre de ma page se trouve en bas de page. (voyez par vous même ici : http://www.jbkaloya.com/archivesQue dois-je faire pour corriger ce problème?CdtJBK

  11. Avatar de JBK
    JBK

    Bonjour je viens de suivre le tuto mais je ne trouve pas la balise « the_content » (j’utilise mystique comme theme)

    1. Avatar de Aurélien Denis
      Aurélien Denis

      Il doit exister une fonction équivalente avec ce thème sinon essaie de positionner le code en-dessous d’un titre.

    2. Avatar de Aurélien Denis
      Aurélien Denis

      Ton code ne passe pas… il faut lire les instructions lors que tu laisses ton commentaire. 😉

      1. Avatar de JBK
        JBK

        Bonjour,

        Merci de votre réponse, J’ai essayer de placer le code correctement mais le titre de ma page se trouve en bas de page. (voyez par vous même ici : http://www.jbkaloya.com/archives

        Que dois-je faire pour corriger ce problème?

        Cdt

        JBK

  12. Avatar de Artistik
    Artistik

    Merci sur ce super Hack 🙂

  13. Avatar de Franck | Papa Blogueur
    Franck | Papa Blogueur

    J’avais écris sur mon blog un tutoriel pour créer une page d’archive, mais là c’est autre chose d’aussi intéressant. Cette manière chronologique permet au visiteur de pouvoir suivre en « live » l’évolution du blog.
    Très pratique pour ensuite réaliser un bilan du mois de l’année précédente. Ceci afin de pouvoir remettre au goût du jour des articles archivés et parfois oubliés.

  14. Avatar de macbrain
    macbrain

    J’ai un probleme …
    Ca ne fonctionne pas, rien ne s’affiche dans la page Archives.

    Petite question :
    Voici la tete de mon « php the content  »

    <?php the_content('Lire le reste de cette page »’); ?>

    1. Avatar de Aurélien Denis
      Aurélien Denis

      Ce tutoriel fonctionne sur des sites que j’ai conçu… donc tu devrais y arriver ! 🙂

      Je t’invite à reprendre les étapes une par une et à t’aider de la vidéo.

      1. Avatar de macbrain
        macbrain

        Oky je vais recommencer, j’arrive pourtant à selectionner dans le menu page, archive chronologique mais rien …
        Je te tiens au courant.

  15. Avatar de bob33
    bob33

    Pagination ??????????????

    1. Avatar de Aurélien Denis
      Aurélien Denis

      Si ton commentaire demande la façon de créer une pagination, il te faut modifier la commande get_posts.

      Plus d’info, ici : http://codex.wordpress.org/Template_Tags/get_posts

      1. Avatar de jean
        jean

        merci beaucoup la commande get_posts est très utile.

  16. Avatar de Valentin
    Valentin

    N’oublie pas que tu peux aussi créer un fichier « page-dates.php » et une page ayant pour identifiant (slug) « dates » 🙂

    Nul besoin des modéles de pages.

    1. Avatar de Aurélien Denis
      Aurélien Denis

      Et j’obtiendrais le même résultat ?

      1. Avatar de Valentin
        Valentin

        Yep 🙂 Il faut juste faire attention aux slugs et au nom du fichier.

  17. Avatar de H7
    H7

    Bonjour,

    Merci pour le tuto page d’archive. Sur mon site cela marche mais en m’enlevant la mise en forme et le fond avec un bout de code en haut ????
    C’est pas très esthétique et comme je suis nul en code, je me trouve un peu (bcp) bloqué.

    1. Avatar de Aurélien Denis
      Aurélien Denis

      As-tu réutilisé la structure du fichier page.php comme indiqué dans la vidéo et le tutoriel pour respecter ton design d’origine ?

      1. Avatar de H7
        H7

        Oui. Je mets le code la page archive chrono créée :

        /**
        * @package WordPress
        * @subpakage glowing_amber
        */

        get_header(); ?>

        <div class="post" id="post-« >

        <?php the_content('Lire la suite »’); ?>

        post_date);
        $month = mysql2date(‘n’, $post->post_date);
        $day = mysql2date(‘j’, $post->post_date);

        ?>

        – <a href=" »>

        Pages : ‘, ‘after’ =>  », ‘next_or_number’ => ‘number’)); ?>

        <?php edit_post_link('Modifier.', '’,  »); ?>

        1. Avatar de Aurélien Denis
          Aurélien Denis

          Je ne peux malheureusement par te fournir d’indications supplémentaires… je ne pas le temps de faire du support approfondi ici.

  18. Avatar de FF44
    FF44

    Merci, cela fonctionne très bien. Je souhaiterai faire un découpage du sommaire par page et par année, vous pourriez m’indiquer les commandes php ? Je vous en serais d’une reconnaissance éternelle !
    Francis

    1. Avatar de Aurélien Denis
      Aurélien Denis

      En supprimant quelques lignes du code proposé ici, cela devrait fonctionner mais je n’ai pas le temps de creuser la chose…

  19. Avatar de mokymok
    mokymok

    Merci pour ce tutoriel, je viens de le mettre en pratique 🙂

  20. Avatar de Amaury
    Amaury

    Personnellement, j’appelle ceci du bidouillage, du bidouillage en utilisant les modèles de page WordPress.

    Il est possible de faire la même chose avec une règle de réécriture qui éviterai la requête initiale de WordPress.

    De plus, cette page n’est pas intéressante, imaginons que tu es 3000 articles, tu es quasiment sur de partir en timeout ou une erreur de mémoire.

    Enfin, sans faire de rewriting, il est tout à fait possible d’utiliser les shortcodes, ce qui évite le modèle de page.

    1. Avatar de Aurélien Denis
      Aurélien Denis

      Aurais-tu un tutoriel à me proposer là-dessus ? 🙂

  21. Avatar de Séverine
    Séverine

    Bonjour,

    Génial mais …
    comment fait-on pour enlever les commentaires et la possibilité d’en déposer ?
    car même en décochant l’option dans le module discussion de la page ils s’affichent quand même.

    1. Avatar de Aurélien Denis
      Aurélien Denis

      Je ne suis pas sûr de comprendre… tu as le module de commentaires qui s’affiche dans ta page archives et tu souhaiterais les supprimer ?