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

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 ou encore l’extension Firefox, FireFTP.

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 ?

Crédits photo : byronv2

53 commentaires

  1. tapemoi.com

    Créer une page d’archive des articles classés par catégorie…

    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é…

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

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

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

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

  6. 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+

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

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

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

  10. 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 ?

  11. Tirips

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

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

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

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

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

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

          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.

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

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

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

Laisser un commentaire

Thèmes & Plugins
Premium By WP Channel

WP Alacarte propose des produits et services de qualité
made in France pour la plateforme WordPress.

Tout est prêt pour créer votre site à la carte !

  • Thèmes et extensions premium
  • Facilité d’utilisation garantie
  • Temps de chargement optimisé
  • Personnalisation avancée
Découvrir

Rejoignez la communauté WordPress !

Faites partie de l’aventure en devenant membre d’une association WordPress. Conférences, ateliers, BarCamp, WordCamp… Venez
partager votre passion pour WordPress !

Aurélien DENIS,
président des associations WordPress Francophone et WPMX