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

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

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.

Par Aurélien Denis

Consultant & Développeur WordPress / WooCommerce. Un site à créer, à maintenir ou à débuguer ? Contactez-moi.

39 commentaires
  1. Jean

    comment dupliquer page.php ?

    1. Aurélien Denis auteur de l’article

      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. Géraldine

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

  3. 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. JM Ucciani

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

  5. Anthony

    Merci beaucoup pour ce partage je vais testé.

  6. 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. 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. Aurélien Denis auteur de l’article

      Merci bien ! 😎

  8. Vince

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

    1. Aurélien Denis auteur de l’article

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

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

  10. JBK

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

    1. Aurélien Denis auteur de l’article

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

    2. Aurélien Denis auteur de l’article

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

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

  11. Artistik

    Merci sur ce super Hack 🙂

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

  13. 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. Aurélien Denis auteur de l’article

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

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

  14. bob33

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

      1. jean

        merci beaucoup la commande get_posts est très utile.

  15. 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. Aurélien Denis auteur de l’article

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

      1. Valentin

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

  16. 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. Aurélien Denis auteur de l’article

      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. 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. Aurélien Denis auteur de l’article

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

  17. 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. Aurélien Denis auteur de l’article

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

  18. mokymok

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

  19. 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. Aurélien Denis auteur de l’article

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

  20. 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. Aurélien Denis auteur de l’article

      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 ?