Créer une page d’archives des articles classés par catégories

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.

Création de la page archives.php

A l’aide de votre éditeur HTML préféré – par exemple, Dreamweaver ou encore le bloc-notes, créez une nouvelle page que vous enregistrerez sous le nom suivant : archives.php.

Capture d'écran - Bloc-notes, enregistrement de la page archives.php
Capture d’écran – Bloc-notes, enregistrement de la page archives.php

Insertion du code

<?php
/*
Template Name: Page d'archives
*/
?>
<?php get_header(); ?>

<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title() ?> par catégories</a></h2>
<?php

$cats = get_categories();
foreach ($cats as $cat) {

query_posts('showposts=1000&cat='.$cat->cat_ID);

?>
<h2><?php echo $cat->cat_name; ?></h2>

<ul>
<?php while (have_posts()) : the_post(); ?>
<li style="font-weight:normal !important;"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a> - Commentaires (<?php echo $post->comment_count ?>)</li>
<?php endwhile; ?>
</ul>

<?php } ?>
<?php get_footer(); ?>

Dénomination de la page

Ce morceau de code indique le nom de la page. Très utile pour s’y retrouver facilement !

<?php
/*
Template Name: Page d'archives
*/
?>

Ainsi, pour la modifier en ligne, via l’éditeur WordPress, rendez-vous dans votre panneau d’administration WordPress, cliquez sur l’onglet Apparence puis sur Éditeur de thème.

Dans la liste des fichiers présents, vous devriez retrouver alors archives.php.

Détermination du nombre d’articles à afficher

query_posts('showposts=1000&cat='.$cat->cat_ID);

Le nombre 1 000 désigne le nombre d’articles à afficher sur la page. En fonction de son blog, il conviendra donc d’ajuster ce nombre.

Au bout d’un certain temps, on pourra également envisager de couper la page en 2 mais sachez qu’il est préférable de n’en garder qu’une seule même si cette dernière peut atteindre une taille démesurée.

En effet, il est plus facile d’effectuer une recherche via Ctrl + F sur une seule page plutôt que sur plusieurs.

Changement du titre de la page

<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title() ?> par catégories</a></h2>

Dans cet exemple, le titre de la page est Archives par catégorie. Celui-ci est lié à la page en question et il s’agit d’un titre de niveau 2.

Vous pouvez donc le modifier à votre convenance : changement du niveau de titre (h1, h3 voire h4), suppression du permalien, etc.

Application et respect du style et de la structure de page

Le code fourni plus haut est brut de toute mise en forme. Si vous l’insérez tel quel, vous n’obtiendrez sûrement pas le résultat escompté en raison de la non présence de balise <div>.

Vous devez donc indiquer les balises <div> nécessaires. Pour ce faire, vous pouvez vous inspirez de la page index.php ou de single.php.

Là, recherchez les balises <div id=""> ou <div class=""> qui vous renseigneront sur les classes CSS utilisés dans vos pages d’articles.

Vous pouvez aussi créer une nouvelle classe CSS spécifique à votre page d’archives. Dans ce cas, ouvrez la feuille de style de votre thème – si vous n’êtes pas à l’aise avec ce genre de modifications, faites une copie de vos fichiers de thèmes.

Les balises de structure et de mise en forme sont à ajouter entre le header (en-tête) et le footer (pied de page) :

<?php get_header(); ?>
<?php get_footer(); ?>
Capture d'écran - WordPress administration, exemple d'une mise en forme avec des balises div

Mise en ligne du fichier archives.php

La solution la plus courante consiste à utiliser un client FTP tel que FileZilla.

Pour de plus amples informations sur l’utilisation d’un client FTP, je vous renvoie au codex WordPress (en français).

Création de la page Archives dans WordPress

Pour créer une nouvelle page dans votre blog, rendez-vous dans l’onglet Écrire puis cliquez sur Page de votre panneau d’administration WordPress.

Descendez tout à fait en bas de la page pour atteindre le module Modèle de page. Dans la liste déroulante, sélectionnez Page d’archives.

Capture d'écran - WordPress, choix d'un modèle de page
Capture d’écran – WordPress, choix d’un modèle de page

Pour finir, donnez un titre à la page – par exemple, Archives, puis publiez sans ajouter de texte supplémentaire.

Annexes

Je vous recommande :

  • L’article de Jbj sur la création d’un page d’archive pour son thème WordPress ;
  • Le codex de WordPress francophone ;

Et vous, amis lecteurs, de quelle manière avez-vous choisi d’afficher votre page d’archives ? De quelle manière l’avez-vous personnalisée ?

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…

54 réponses
  1. Avatar de Gotcha
    Gotcha

    Bonjour,

    Je ne sais si c’est intrassec ou non mais lorsqu’un article est rattacher une catégorie enfant (sous-catégorie), cet article apparait aussi bien dans la catégorie que parente ! Ca affiche donc mes articles autant de fois qu’il y a de catégorie parents au dessus d’eux…
    Mais peut-être est-ce un comportement normal sur WordPress ?…

    Merci.

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

      Cela peut aussi être lié au thème, dans tous les cas c’est modifiable via le code.

      1. Avatar de Gotcha
        Gotcha

        Oui certainement ^_^ « Tout est possible » lol
        Mais je n’ai rien trouvé permettant d’afficher un structure hiérarchique des catégories. Une sorte de « sitemap » mais plus élaboré.
        Dommage je suis en train de revoir complément l’organisation de mon blog pour mettre l’accent sur le pages cette fois. Les premiers résultats sont meilleurs mais ça laisse de côté tous les futurs articles (importance moindre).

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

          Oui pour une logique SEO optimale, le mieux reste la création d’un thème personnalisé.

  2. Avatar de Bruno
    Bruno

    Bonjour,
    Merci pour cet article qui correspond exactement à ce que je veux faire mais sous wordpress.com. Est-ce que quelqu’un saurait le code html à insérer dans [archives] pour faire apparaitre tous les articles classés par catégories comme ci-dessous :
    CATEGORIE1
    – Article 1
    – Art 2
    CAT2
    -Art 3
    – Art 4

    merci d’avance

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

      Sous WordPress.com on ne peut accéder au code donc c’est impossible.

  3. Avatar de Jo
    Jo

    Bonjour Aurélien,
    Comment ajouter un modèle de page « archives » à la liste déroulante « modèle » ? J’ai du oublier une étape là 😉

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

      L’étape « Dénomination de la page » ?

      1. Avatar de Jo
        Jo

        Tout à fait!
        Désolé Aurélien, cela me paraissait presque curieux (la partie dénomination en commentaire) avant même d’avoir essayé.
        C’est ok merci 😉

  4. Avatar de Alexandra
    Alexandra

    Merci beaucoup pour ce tuto, il m’a été très utile pour créer la liste de tous mes articles par catégorie. Juste une petite question : peut-on afficher que les sous catégories ? Car si j’affiche mes catégories et sous catégories, j’ai des doublons d’articles.

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

      Attention, ce tutoriel date et je préconise de faire une wp_query au lieu d’un query_post via GenerateWP. 😉

  5. Avatar de ricoeric
    ricoeric

    Bonsoir,

    je cherche un plugin ou une modification qui ne laisserai dans une liste des catégories la possibilité de n’en choisir qu’une seul lors de l’écriture d’un article avec l’impossibilité d’en choisir 2

    merci

  6. Avatar de BRESSE Jeff
    BRESSE Jeff

    Bonjour,
    Je suis avec WordPress 3.4
    je fais un site sur la généalogie et j’utilise des catégories et des sous-catégories: ex
    – catégories : Familles, Lieux
    -sous-catégories : BRESSE, Paris, Vienne; etc
    Je voudrais avoir des pages qui m’affichent les archives avec pour titre les catégories avec pour les sous-titres les sous-catégories.
    L’exemple existe pour le Blog suivant :
    http://www.genbecle.org/
    ou pour le Blog de WordPress Channel
    Merci de me répondre

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

      C’est fort simple : il suffit d’ajouter des liens de catégories dans votre menu de navigation via le module Apparence. Si la liste des catégories n’apparaît pas, affichez via le menu déroulant Options de l’écran situé en haut à droite.

      1. Avatar de BRESSE Jeff
        BRESSE Jeff

        Bonjour,
        Merci de votre réponse.
        J’ai pu créer un menu avec les pages Accueil, A Propos.
        Je peux aussi choisir une catégorie comme Familles et Lieux, mais les sous-catégories ne s’affichent pas, en sous menu.
        Je n’ai pas le modèle de page « category » quand je crée une page.
        Je devrais avoir les mêmes affichages que pour le menu de WordPress Channel.
        Merci de votre réponse.

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

          Le modèle de page category n’existe pas. Le fichier category.php est présent dans le dossier /wp-content/themes/NOM_DU_THEME/ du serveur FTP.

          Pour créer les sous-menus, il faut créer un décalage dans le menu pour obtenir la hiérarchie.

  7. Avatar de marlyse
    marlyse

    Hello bonjour,
    une autre question, je voudrais faire un archivage par date de parution d’une soirée à thèmes pour une radio blues amateur une fois par semaine donc 4 dates par mois doivent rester et les autres jours de diffusion ne seront pas archiver. je n’y connais rien en code, ou si peut! …. pouvez-vous m’aider….?

    et je découvre votre site que j’ai parcouru et il va m’être plus que très utile et facile à intégrer vos tutos, je vous en remercie.
    cordiales salutations. Marlyse

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

      Oui là il va falloir créer une boucle PHP personnalisée… rendez-vous sur le forum de WordPress Francophone pour demander de l’aide. Je n’ai pas le temps ces jours-ci. 😉

  8. Avatar de Félix
    Félix

    Euh, je suis un gros débutant en wordpress et je ne trouve pas du tout l’endroit oû sont les modèles de pages dans mon blog ???

  9. Avatar de Gwendal
    Gwendal

    Bonjour et merci pour votre code.
    Il me reste un problème car je ne parviens pas à classer les articles par ordre alphabétique dans chaque catégorie. Pourriez vous m’indiquer précisément la modification à faire ?
    merci

  10. Avatar de 4h18
    4h18

    Merde ! je devrais regarder les dates moi oO

  11. Avatar de 4h18
    4h18

    Heu, je ne suis pas expert mysql, mais un select avec 1000 articles, je crois savoir que c’est pas forcément très bon pour les performances non ? A moins d’avoir un bon cache des familles peut être ?

    Quelqu’un pour confirmer ?

  12. Avatar de Mylène
    Mylène

    Bonjour,

    Je souhaite exclure une catégorie de cette liste, mais je ne parviens pas à le faire en excluant également le titre de la catégorie… Une idée ? Merci !

    1. Avatar de 4h18
      4h18
  13. Avatar de Tirips
    Tirips

    Super tuto, merci !
    Mes catégories contenant une certaine quantité d’articles, un truc pour les classer par ordre alphabétique ?
    Merci

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

      On doit pouvoir mettre un order_by=alpha dans la requête query_posts.

      Plus d’infos, sur le codex.

  14. Avatar de Cy-real
    Cy-real

    Super, (presque) exactement ce qu’il me fallait.

    Je dis presque, parce que j’aimerais ajouter dans le titre de la catégorie un lien vers la page « archive de la catégorie » (archive.php).

    Du genre cat_name; ?>

    Mais je na maîtrise pas assez la syntaxe pour ajouter le lien qui va bien (du style get_category_link ou…) Une idée ?

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

      Le mieux est d’aller poster ta demande sur le forum francophone de WordPress. 😉

      1. Avatar de Cy-real
        Cy-real

        Ok, j’ai fini par trouver exactement ce qu’il me fallait avec ce plugin ultra simple : Category Post List (https://wordpress.org/extend/plugins/complete-post-list-by-alphabetically-ordered-categories/)

        Il suffit de l’activer et d’ajouter ce short code dans la page souhaitée :
        [jwcatpostlist orderby=title order=desc]

        Voilà le résultat :
        http://professeurchicraote.com/cooperatif/

        Espérant que ça aide !
        Bonne continuation
        Cy-real

  15. Avatar de LashonWP
    LashonWP

    Salut,
    Pour répondre à ta question j’ai utilisé sensiblement la même technique (avec le get_categories) pour présenter le blog en ordre chronologique et par catégorie dans une page ‘plan du blog’. Ce qui en fait soit une page archives poussée soit une alternative de présentation du blog (peut-être devrais-je pondre un article là-dessus?)

    Donc j’ai ajouté à la technique du query_post par cats = get_categories :

    l’appel des thumbnails (has_post_thumbnail), un titre pour le nom des catégories (cat_name, la description des catégories (avec category_description), les tags (get_the_tags)

    voilà, ça t’aide ?

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

      Merci de ton retour concernant ta page d’archives. 😉

  16. Avatar de Aurélien Denis
    Aurélien Denis

    @Wihel : comme quoi il faut toujours persévérer dans ses recherches ! 😉

  17. Avatar de Wihel
    Wihel

    Un grand merci pour ce tutoriel. Après plusieurs recherches sur google (résultats plus que limités), je tombe sur ce fantastique article :]

  18. Avatar de manny
    manny

    Merci beaucoup pour cette solution « clef-en-main » 😉

  19. Avatar de Aurélien Denis
    Aurélien Denis

    @James : bonne chance pour la mise en page dans ce cas ! 😎

  20. Avatar de James
    James

    Merci pour l’info en fait j’ai modifié

    $cats = get_categories();

    par

    $cats = get_categories(‘number=X’);

    Maintenant reste à faire la mise en page

  21. Avatar de Aurélien Denis
    Aurélien Denis

    @James : essaie d’ajouter un ID de catégorie dans le premier bout de code de l’article :

    query_posts(‘showposts=1000&cat=NUMERO-CATEGORIE’.$cat->cat_ID);

  22. Avatar de James
    James

    Bonjour,

    Merci pour l’astuce, est il possible de faire la même chose pour une seule catégorie et ses sous catégories ?

  23. Avatar de Aurélien Denis
    Aurélien Denis

    @Serge : je t’invite à aller t’inscrire sur le forum ce qui te permettra d’insérer du code. La même chose est quasiment impossible dans des commentaires…

  24. Avatar de Serge
    Serge

    zut !!!
    comment on fait pour placer l’extrait du php dans le commentaire?

  25. Avatar de Serge
    Serge

    C’est encore moi 😉

    Ma page d’archive j’ai sépare en deux parties (2 pages) :

    Recherche par mot-clés : http://www.monmillion.fr/mot-cles/
    et
    Recherche par catégorie : http://www.monmillion.fr/recherche-par-categorie/

    les liens j’ai placé sous la barre de recherche dans le sidebar (text-widget)
    le php pour le RSS de la categories est <blockquote cite= »

    « >

    Merci pour l’avis ou critiques,
    serge

  26. Avatar de Aurélien Denis
    Aurélien Denis

    @antiquarian books : thanks for your visit ! 😎

  27. Avatar de antiquarian books
    antiquarian books

    Thank you for this information. 🙂

  28. Avatar de Aurélien Denis
    Aurélien Denis

    @PhilC : merci à toi !

  29. Avatar de PhilC
    PhilC

    Merci pour l’astuce!
    En place chez moi et bien pratique pour retrouver des articles
    Bonne continuation

  30. Avatar de David (Azur Dev)
    David (Azur Dev)

    Il y a longtemps que je me suis fait une page « archives » http://azur.ironie.org/archives très très pratique pour retrouver mes propres anciens billets! 🙂

    Par contre, j’ai galéré pour garder l’onglet archives sélectionné sur cette page. La faute à la boucle qui modifie la dernière page lue et donc get_footer() ne sait plus sur quelle page on est pour appliquer la classe « current » à l’onglet. :-/

    L’astuce est de relire la page « archives » juste avant footer(). À condition bien sûr que ça soit utile à votre thème! 😉

  31. Avatar de Aurélien Denis
    Aurélien Denis

    @PataTy : au plaisir !

  32. Avatar de PataTy
    PataTy

    Merci Maigret pour ce code.
    J’y ai juste ajoutée la sidebar.
    Il me reste à créer un .css pour finir d’adapter mon contenu à mes désirs
    A+

  33. Avatar de Li-An
    Li-An

    Après avoir créé une page d’archives « par catégorie », j’ai opté pour quelque chose de plus classique avec le plugin https://www.schloebe.de/wordpress/simple-yearly-archive-plugin/

  34. Avatar de agatzebluz
    agatzebluz

    Je te prends au mot LOL
    Dès que j’ai quelques minutes pour mettre en place la tonne de choses que je dois faire pour améliorer encore mon blog, je ferai un tuto.
    Je te tiendrai au courant à ce moment là.
    Merci pour la proposition.

  35. Avatar de agatzebluz
    agatzebluz

    J’ai repéré une extension (malheureusement dont le développement est arrêté) s’intitulant extended Live archive.
    Le visuel est très sympa de ce que j’en ai vu, et ça parait simple à paramétrer et mettre en place. Pas de code à taper, hormis créer la page statique.
    http://www.sonsofskadi.net/extended-live-archive/

    Je vais la tester, c’est aussi sur ma todo List …

  36. Avatar de Aurélien Denis
    Aurélien Denis

    @agatzebluz : j’avais déjà entendu parler de ce plugin mais je ne l’ai jamais essayée.

    En revanche, pourquoi ne ferais-tu pas un tutoriel sur ton blog ?

    Cet article n’avait pas pour but à l’origine de présenter des plugins de gestion des archives dans WordPress, mais je suis prêt à à te faire un lien vers un éventuel article sur le sujet si l’envie t’en dit 😉

  37. Avatar de Aurélien Denis
    Aurélien Denis

    @Yancilane : tu as tout à fait raison, le modèle d’archives proposé par WordPress se base sur la chronologie des articles. Or, alors qu’un tel choix est bon pour un blog d’actualité, il l’est beaucoup moins pour un blog thématique – par exemple.

    @tous : c’est Yancilane qui m’a demandé conseil via mail pour créer sa page d’archive. De là est né ce tutorial et j’espère qu’il sera utile pour tous 🙂

  38. Avatar de Yancilane
    Yancilane

    Selon moi, l’organisation des archives par catégorie est déjà plus esthétique et surtout bien plus ergonomique que celle proposée par défaut.

    Merci beaucoup pour ce tutoriel.