Skip to content

Tout pour WordPress, le développement web — et plus encore

🚀 Comment créer une page d'archive pour les types de publication personnalisés dans WordPress

🚀 Comment créer une page d'archive pour les types de publication personnalisés dans WordPress

Lorsqu’un site dépasse le stade «un blog et quelques pages», les articles et catégories standards ne suffisent plus. Portfolios, équipes, témoignages, études de cas, offres d’emploi: tous ces contenus ont besoin de leur propre structure plutôt que d’être entassés dans le flux général des articles avec des contournements par catégories.

WordPress résout ce problème grâce aux types de publication personnalisés. Mais créer un CPT ne suffit pas; vous avez aussi besoin d’une page où toutes les entrées de ce type sont rassemblées: une page d’archive. Sans elle, vos visiteurs ne verront tout simplement pas vos réalisations ou les membres de votre équipe présentés comme un ensemble cohérent.

Les plugins de grille comme Essential Grid gèrent l’aspect visuel, mais ils ajoutent du CSS et du JS supplémentaires. Sur de petits projets, cela passe inaperçu, mais sur un site qui reçoit des dizaines de milliers de visiteurs, chaque kilo-octet compte. Le mécanisme d’archive natif de WordPress offre la même fonctionnalité sans surcharge frontale, et sa configuration ne prend que 10 minutes.

💡 Aperçu rapide:

  • Créez un type de publication personnalisé via CPT UI et activez immédiatement la prise en charge de l’archive dans les paramètres
  • Rédigez un template personnalisé pour un contrôle précis de la mise en page si nécessaire
  • Configurez les métadonnées SEO via Yoast SEO: titre, description et og:image pour la page d’archive
  • Désactivez la barre latérale et ajoutez le balisage Open Graph si nécessaire

1. Créer un type de publication personnalisé

La manière la plus simple et la plus fiable d’enregistrer un CPT sans écrire une seule ligne de code est le plugin Custom Post Type UI. Il est installé sur plus d’un million de sites et est maintenu depuis 2010, et son interface est intuitive: les champs du formulaire correspondent un à un aux arguments de la fonction register_post_type().

Page du plugin Custom Post Type UI sur le dépôt WordPress

Après avoir installé le plugin, allez dans CPT UI → Add/Edit Post Types. Remplissez le minimum:

  • Post Type Slug: caractères latins, sans espaces (par exemple portfolio)
  • Plural Label: «Portfolio»
  • Singular Label: «Réalisation»

Vous pouvez laisser les autres paramètres à leurs valeurs par défaut; celles-ci couvrent la grande majorité des cas typiques. Cliquez sur Add Post Type, et le nouveau type apparaîtra dans le panneau d’administration comme une entrée de menu distincte.

2. Configurer la page d’archive

Pour que les entrées du nouveau type soient rassemblées sur une page distincte, vous devez activer explicitement la prise en charge de l’archive. Elle est désactivée par défaut.

Allez dans CPT UI → Edit Post Types et sélectionnez le type que vous avez créé dans la liste:

Page d'édition de custom post type dans CPT UI

Faites défiler jusqu’à la section Settings et remplissez deux champs clés:

Champs de réglages Has Archive et Custom Rewrite Slug dans CPT UI
  • Has Archive: réglez sur True. C’est l’interrupteur de la page d’archive.
  • Custom Rewrite Slug: le slug sous lequel l’archive sera accessible. Correspond généralement au slug du type de publication (par exemple portfolio).

Enregistrez vos modifications et accédez à http://YOUR_SITE/portfolio. Vous verrez une liste de toutes les entrées de ce type, mise en forme avec le template standard archive.php du thème actif:

Exemple de page d'archive pour le custom post type portfolio

La page de base est prête. Si l’apparence standard vous convient, vous pouvez vous arrêter ici. Mais dans la plupart des cas, vous voudrez affiner le rendu.

3. Template personnalisé archive-{posttype}.php

WordPress utilise une hiérarchie de templates claire. Lorsqu’un visiteur arrive sur une page d’archive de CPT, le cœur cherche les fichiers dans cet ordre:

  • archive-{posttype}.php
  • archive.php
  • index.php

Cela signifie que vous avez seulement besoin de créer un fichier nommé archive-portfolio.php (où portfolio est le slug de votre type de publication), et WordPress le prendra automatiquement en charge.

Étapes:

Copiez le contenu du fichier archive.php de votre thème dans un nouveau fichier archive-portfolio.php. Modifiez ensuite le balisage selon vos besoins: masquez la date si elle n’est pas pertinente pour un portfolio; affichez la vignette dans une taille différente; remplacez le the_excerpt() standard par the_content().

1<?php
2/* Template for Portfolio archive — overrides archive.php */
3
4if ( have_posts() ) {
5 while ( have_posts() ) {
6 the_post();
7 // Your custom markup here
8 the_post_thumbnail( 'medium' );
9 the_title( '<h3>', '</h3>' );
10 the_excerpt();
11 }
12}

Si vous travaillez avec un thème FSE (Block Theme), le template d’archive se crée dans l’éditeur de site: Appearance → Editor → Templates → Add New Template → Archive: Portfolio. Pas de PHP, uniquement des blocs, mais la logique est la même: une mise en page personnalisée pour un CPT spécifique.

4. Optimisation SEO pour la page d’archive

Une page d’archive n’est pas qu’une simple URL utilitaire. Les moteurs de recherche l’indexent, et elle peut facilement générer du trafic pour des requêtes commerciales comme «portfolio studio web» ou «équipe agence».

Si vous avez installé Yoast SEO, les métadonnées des archives de CPT se configurent à un seul endroit:

Réglages des types de contenu dans Yoast SEO pour les custom posts

Ouvrez Yoast SEO → Settings → Content Types, trouvez votre type de publication personnalisé et dépliez la section. Définissez des modèles pour le titre et la méta description:

Champs de template de titre et description pour la page d'archive dans Yoast SEO

Modèles recommandés:

  • Titre: %%pt_plural%% %%page%%, %%sitename%%
  • Méta description: %%pt_plural%%, work samples, case studies and projects. %%sitename%%

Yoast substitue automatiquement les variables %%pt_plural%% et %%pt_single%% à partir des paramètres de votre CPT. N’oubliez pas de désactiver noindex pour la page d’archive si elle est activée par défaut; la case Show in search results doit être cochée.

5. Balisage Open Graph et barre latérale

Pour garantir qu’une image soit récupérée lors du partage du lien de la page d’archive sur les réseaux sociaux, ajoutez og:image via le hook wp_head. Insérez le code dans le fichier functions.php de votre thème actif ou via le plugin Code Snippets:

1add_action( 'wp_head', 'cpt_archive_og_image' );
2function cpt_archive_og_image() {
3 if ( is_post_type_archive( 'portfolio' ) ) {
4 echo '<meta property="og:image" content="' .
5 get_template_directory_uri() . '/images/portfolio-og.jpg' . '" />';
6 }
7}

La condition is_post_type_archive() se déclenche uniquement sur la page d’archive du CPT spécifié, donc le balisage n’affectera pas les autres pages. Placez l’image dans le dossier de votre thème ou téléversez-la via la bibliothèque de médias et utilisez l’URL directe.

Une dernière touche: la barre latérale. Sur les pages d’archive, elle est souvent superflue, en particulier pour les portfolios ou les équipes où la largeur des cartes compte. La plupart des thèmes modernes vous permettent de désactiver la barre latérale dans les paramètres de la page:

Réglages d'affichage de la barre latérale dans l'éditeur visuel du thème

Dans les thèmes par blocs, passez le template sur Full Width dans les paramètres de la page d’archive. Dans les thèmes classiques, cherchez Page Attributes → Template → Full Width dans le customizer ou la metabox d’édition.

📺 Vidéo: tout le processus en 8 minutes

Une courte démonstration en anglais qui couvre la création du CPT, l’activation de l’archive et un template personnalisé, du premier clic à la page terminée:

⁉️🤔 Foire aux questions

Pourquoi la page d’archive renvoie-t-elle une erreur 404 après la création du CPT?

Vous n’avez probablement pas activé le paramètre Has Archive. Allez dans CPT UI → Edit Post Types, trouvez votre type, réglez Has Archive sur True et spécifiez un Custom Rewrite Slug. Après avoir enregistré, pensez à aller dans Settings → Permalinks et à cliquer sur «Save Changes»; cela vide le cache des règles de réécriture.

Puis-je me passer du plugin CPT UI?

Oui, les types de publication personnalisés peuvent être enregistrés dans functions.php via la fonction register_post_type(). Cela représente environ 15 à 20 lignes de code, soit quelques minutes pour un développeur. Le plugin offre simplement une interface visuelle et évite les fautes de frappe dans les arguments.

Comment afficher les entrées du CPT sur la page d’accueil?

Ajoutez 'has_archive' => true aux arguments de register_post_type(), et pour inclure les entrées dans le flux principal, définissez 'public' => true et 'exclude_from_search' => false. Pour un affichage ciblé, utilisez WP_Query avec l’argument 'post_type' => 'portfolio'.

Quelle est la différence entre archive-{posttype}.php et taxonomy-{taxonomy}.php?

Le premier gère la page contenant TOUTES les entrées du CPT; le second gère le filtrage par un terme de taxonomie spécifique (par exemple, «Type de projet: page d’atterrissage»). Les deux suivent la hiérarchie des templates mais se déclenchent sur des URL différentes.

Un template personnalisé est-il obligatoire?

Non. Si le fichier archive.php standard vous convient, activez simplement Has Archive et utilisez-le. Un template personnalisé est nécessaire lorsque vous avez besoin d’un balisage unique: tailles de vignettes différentes, pas de dates, une grille au lieu d’une liste.

Que faire si le template standard ne fonctionne pas pour vous?

Une page d’archive pour les publications personnalisées est quelque chose que l’on configure une fois pour toutes. CPT UI plus quelques lignes dans functions.php couvrent entièrement le sujet: pas de plugins tout-en-un, pas de code supplémentaire sur le frontend.

Si vous avez encore des questions concernant une combinaison spécifique de thème et de plugin après avoir lu ceci, laissez un commentaire sous l’article. Nous examinerons votre cas séparément.