# Lister et filtrer vos contenus

Le bloc **Liste de contenus** affiche vos contenus en cartes, filtrés et paginés. Cet article vous apprend à choisir ce que la liste montre, à composer sa carte et à proposer des filtres, une recherche et une pagination à vos visiteurs.

## Ajouter une liste

1. Ouvrez dans l’éditeur la page qui portera la liste, ou un gabarit. [Ajouter un bloc](https://lovelyrender.com/fr/documentation/ajouter-un-bloc/) explique comment insérer un bloc.
2. Ajoutez le bloc **Liste de contenus**.
3. Dans l’onglet **Réglages** de la barre latérale, panneau **Requête**, laissez **Source de la requête** sur **Type de contenu**.
4. Sous **Types de contenu**, cochez les types à lister, par exemple **Réalisations**. La liste se remplit de leurs contenus.

Une liste porte un **Corps de liste**, qui range ses cartes en grille ou en flex. Le corps de liste porte un **Gabarit de contenu** : la carte répétée pour chaque contenu. Le corps de liste accepte trois autres blocs, décrits plus bas : **Filtres exposés**, **Recherche** et **Pagination**.

Tant qu’aucun type n’est coché, le panneau affiche **Cette liste n’a pas encore de source**. La liste n’affiche rien sur le site. C’est l’état d’une liste posée par une création du catalogue : elle est disposée, à vous de choisir ce qu’elle liste.

**Remarque :** Les catégories ne se cochent pas ici. Une liste atteint leurs termes par la référence : [Relier vos contenus entre eux](https://lovelyrender.com/fr/documentation/references/).

## Choisir ce que la liste montre

Le panneau **Requête** règle le contenu de la liste.

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Source de la requête** | **Type de contenu** : les contenus des types cochés. **Référence** : les contenus qui pointent vers le contenu affiché. **Frères et sœurs** : les contenus rangés comme celui qu’on lit, dans le gabarit d’un type qui a un champ de référence. **Archive** : les contenus de la page d’archive, dans un gabarit d’archive ou de recherche. | **Type de contenu**. |
| **Appliquer la recherche du site** | Sur une page de résultats, filtre la liste avec les mots que le visiteur a cherchés. | Désactivé. |
| **Exclure les contenus masqués (noindex)** | Laisse de côté les contenus masqués des moteurs de recherche dans leurs réglages SEO. | Désactivé. |
| **Langue du contenu** | La langue des contenus listés. La section Choisir la langue de la liste la détaille. | **La langue de la page lue**. |
| **Un gabarit différent par type de contenu** | Avec plusieurs types cochés, donne à chaque type sa propre carte. | Désactivé. |

[Relier vos contenus entre eux](https://lovelyrender.com/fr/documentation/references/) détaille les sources **Référence** et **Frères et sœurs**.

### Donner une carte à chaque type

1. Cochez au moins deux types sous **Types de contenu**, puis activez **Un gabarit différent par type de contenu**.
2. Dupliquez le **Gabarit de contenu** autant de fois que de types.
3. Sur chaque carte, panneau **Affectation par type de contenu**, choisissez le type dans **Ce gabarit s’applique à**.

La carte laissée sur **Par défaut (repli)** sert les types qui n’ont pas la leur.

## Choisir la langue de la liste

Sur un site en plusieurs langues, **Langue du contenu** décide dans quelle langue la liste puise. Le réglage n’apparaît qu’à partir de deux langues.

| Valeur | Résultat pour le visiteur |
| --- | --- |
| **La langue de la page lue** | La liste parle la langue de la page qui la porte : les contenus français sur la page française, les contenus anglais sur sa traduction. |
| **Toutes les langues** | Toutes les langues se mélangent dans la liste. |
| Une langue nommée, par exemple **français (France)** | La liste puise toujours dans cette langue, quelle que soit la page. |

La langue tient d’une page de la liste à l’autre, quand le visiteur filtre et quand il cherche dans la liste. Un contenu qui n’a pas de langue est toujours listé.

**Conseil :** Vos actualités ne sont écrites qu’en français ? Choisissez la langue nommée **français (France)**. La liste les montre aussi sur les pages anglaises, au lieu de rester vide.

## Composer la carte

Le **Gabarit de contenu** est la carte répétée pour chaque contenu. Une carte neuve porte deux blocs : un **Titre** de niveau 2 qui affiche le titre du contenu et mène à lui, puis l’**Extrait du contenu**.

Vous ajoutez à la carte les blocs que vous voulez. Chaque contenu y affiche ses propres valeurs. Pour trouver les champs du type listé dans l’outil d’insertion, sélectionnez d’abord un bloc de la carte. [Afficher les données d’un contenu](https://lovelyrender.com/fr/documentation/afficher-les-donnees/) explique comment afficher un titre, une date ou un champ.

| Bloc | Affichage |
| --- | --- |
| **Image mise en avant** | Le média mis en avant du contenu, image ou vidéo. |
| **Média du contenu** | Pour une liste de médias, le fichier lui-même. Pour un autre type, son média mis en avant. |

Dans l’éditeur, ces deux blocs montrent un aperçu, marqué **Aperçu (reprendra le média réel du contenu)**. Sur le site, chaque carte montre le sien. Un contenu sans média mis en avant n’en montre aucun : les blocs suivants remontent.

Un média vidéo se règle dans leur panneau **Réglages de la vidéo**, pour toutes les cartes : **Au survol** anime chaque carte quand le pointeur la désigne.

### Marquer la carte de la page lue

Quand une liste montre la page que le visiteur lit, la carte de cette page prend l’état **Active**. Habillez-le dans l’onglet **Styles** de la carte. Pour changer aussi ce qu’elle contient, activez **Transmettre l’état actif aux enfants** : ses blocs prennent l’état **Active** avec elle.

## Régler le lien de la carte

Une carte neuve mène à son contenu de deux façons. Un clic sur toute sa surface l’ouvre, sans adresse écrite dans la page. Son titre est un vrai lien, celui que suivent les moteurs de recherche et le clavier.

Le lien de la carte se règle dans son panneau **Lien**, onglet **Réglages**.

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| Cible | Où mène la carte. **Lien vers la publication** mène chaque carte à son propre contenu. | **Lien vers la publication**. |
| **Masquer le lien aux moteurs de recherche** | La carte n’écrit aucune adresse dans la page : le site ouvre la cible au clic. | Activé. |
| **Ouvrir dans un nouvel onglet** | Ouvre la cible dans un nouvel onglet. Grisé tant que le lien est masqué. | Désactivé. |

| Vous voulez | Faites | Résultat |
| --- | --- | --- |
| Une carte sans lien | Cliquez sur **Retirer le lien** sur la cible. | Seuls les liens de ses blocs mènent quelque part. |
| Une carte en vrai lien | Désactivez **Masquer le lien aux moteurs de recherche**. | L’adresse de chaque contenu est écrite sur toute la carte. |
| Une carte vers une autre adresse | Choisissez une autre cible dans le champ. | Toutes les cartes mènent à la même adresse. |

Sur une carte masquée, `Ctrl+clic` ouvre le contenu dans un nouvel onglet. Un clic sur un lien de la carte, comme son titre ou un bouton, suit ce lien.

**Attention :** Une carte en vrai lien enveloppe tout son contenu. Si elle porte déjà un lien, comme son titre ou un bouton, le navigateur coupe le lien de la carte et la mise en page peut se disloquer. Rien ne vous prévient. Retirez d’abord les liens des blocs de la carte, ou gardez le lien masqué.

**Attention :** Une carte masquée ne s’atteint pas au clavier. Gardez dans chaque carte un vrai lien vers le contenu, comme le titre lié qu’elle porte au départ. Sans lui, les moteurs de recherche ne trouvent plus vos contenus par la liste.

## Proposer des filtres

Le bloc **Filtres exposés** laisse vos visiteurs affiner la liste. Ajoutez-le dans le **Corps de liste**, puis cochez dans son panneau **Filtres exposés** les filtres à proposer.

![Le panneau Filtres exposés d’une liste de réalisations : le champ Contrat d’entretien coché, une tranche nommée Moins de 100 m² sur la Surface du jardin avec la condition Inférieur ou égal à et la valeur 100, la Surface du jardin cochée sous Laisser le visiteur trier par, puis la référence Type de jardin cochée, réglée en Dynamique (auto).](https://static.lovelyrender.com/uploads/2026/10/902-doc-contenus-filtres.png)

| Groupe | Résultat pour le visiteur |
| --- | --- |
| **Références** | Un filtre par champ de référence des types listés, par exemple par ville ou par marque. |
| **Champs de contenu** | Un filtre par champ marqué **Filtrable** sur son type. Un champ **Choix** ou **Oui / non** devient des cases à cocher. |
| **Tranches nommées** | Des tranches que vous écrivez avec vos mots, par exemple « Moins de 200 000 € ». |
| **Laisser le visiteur trier par** | Un choix **Trier par** sur les champs marqués **Triable**, en ordre **croissant** ou **décroissant**. |

Chaque filtre coché a son **Ordre**, qui place les filtres entre eux. Une référence a aussi son **Type de champ** : **Dynamique (auto)** ou **Toujours une liste déroulante**.

Plusieurs valeurs cochées dans un même filtre élargissent le résultat : Nike ou Adidas. Deux filtres différents le resserrent : Nike et Running.

[Ajouter des champs à un type](https://lovelyrender.com/fr/documentation/champs-de-contenu/) explique comment marquer un champ **Filtrable** ou **Triable**.

### Écrire une tranche nommée

Un prix ou une surface n’a pas de liste à cocher. Une tranche nommée en crée une.

1. Dans le groupe **Tranches nommées**, cliquez sur **Ajouter une tranche**.
2. Dans **Libellé affiché aux visiteurs**, écrivez la tranche, par exemple `Moins de 200 000 €`.
3. Dans **Champ**, choisissez le champ, par exemple **Prix**.
4. Dans **Condition**, choisissez la comparaison.
5. Dans **Valeur**, saisissez le nombre, par exemple `200000`. Pour une tranche entre deux bornes, saisissez deux valeurs séparées par une virgule : `200000,400000`.

| Condition | Le contenu entre dans la tranche quand le champ… | Types de champ |
| --- | --- | --- |
| **Est rempli**, **Est vide** | a une valeur, ou est vide. | Tous |
| **Égal à**, **Différent de** | vaut la valeur, ou ne la vaut pas. | Nombres et textes. **Égal à** vaut aussi pour les dates et heures. |
| **Supérieur à**, **Supérieur ou égal à** | est supérieur, ou supérieur ou égal, à la valeur. | Nombres |
| **Inférieur à**, **Inférieur ou égal à** | est inférieur, ou inférieur ou égal, à la valeur. | Nombres |
| **Avant**, **Après** | est avant, ou après, la valeur. | Dates et heures |
| **Entre** | est entre les deux valeurs. | Nombres, dates et heures |
| **Contient** | contient la valeur. | Textes |
| **Est activé**, **Est désactivé** | vaut Oui, ou Non. | **Oui / non** |
| **Est**, **N’est pas**, **Est l’un de** | est le choix, n’est pas le choix, ou est l’un des choix. | **Choix** |

La liste **Condition** ne propose que les comparaisons du type du champ choisi. Une tranche appartient à la page qui la porte : dupliquer la page duplique ses tranches.

### Trier sans perdre de contenu

Un tri ne retire jamais un contenu de la liste. Les contenus sans valeur pour le champ se placent en dernier, dans les deux sens. **Ordre par défaut** ramène la liste non triée.

Les filtres et le tri choisis restent appliqués d’une page de la liste à l’autre. Tant que **Masquer la navigation aux moteurs de recherche (AJAX)** est désactivé, ils s’écrivent dans l’adresse avec le numéro de page, que la liste soit sur une page ou dans le gabarit d’un contenu. L’adresse se partage telle quelle. Une adresse filtrée désigne la page sans filtre comme adresse de référence pour Google. Avec la navigation AJAX, l’adresse ne change pas.

**Attention :** Posez une seule liste filtrable par page. Avec deux, le visiteur ne sait plus quels filtres agissent sur quelle liste.

## Ajouter une recherche

Le bloc **Recherche** se pose dans une liste ou seul, n’importe où sur le site, par exemple dans l’en-tête. Son panneau **Réglages de recherche** propose un **Comportement** selon cet emplacement.

| Comportement | Emplacement | Résultat pour le visiteur |
| --- | --- | --- |
| **Classique (page de résultats)**, par défaut | Seul ou dans une liste | Il valide et arrive sur la page de résultats. L’adresse se partage et les moteurs de recherche l’explorent. |
| **Résultats en direct (sur place)** | Dans une liste | La liste se remplit de nouveau sur place, sans que la page change. |
| **Liste déroulante en direct** | Seul | Les propositions s’affichent sous le champ à mesure qu’il tape. Il choisit un contenu dans la liste. |
| **Modale (composition)** | Seul | Le champ ouvre une composition en modale, où vous avez placé la recherche et sa liste. |

Seul et en mode **Classique**, le bloc porte **Chercher dans le type de contenu courant**, activé par défaut. Il cherche dans le type de la page consultée. Sur la page d’accueil, il cherche dans tout le site. Désactivé, il cherche toujours dans tout le site.

Un bloc déplacé là où son mode n’existe pas repasse en **Classique**. Le champ et le bouton du bloc ne se changent pas, mais ils se mettent en forme comme les champs de formulaire. Chaque recherche est enregistrée dans vos statistiques.

**Conseil :** Pour la recherche du site dans l’en-tête, prenez **Classique**. Pour un catalogue avec filtres, prenez **Résultats en direct (sur place)**. Pour mener droit à un contenu, comme dans un annuaire, prenez **Liste déroulante en direct**.

## Paginer la liste

Le panneau **Pagination** de la liste règle le nombre de résultats. Ajoutez le bloc **Pagination** dans le **Corps de liste** pour que le visiteur passe d’une page à l’autre.

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Utiliser le réglage de lecture de WordPress** | Reprend le nombre de contenus par page des réglages de lecture. | Activé. |
| **Résultats par page** | Le nombre de contenus par page, quand le réglage précédent est désactivé. L’aperçu de l’éditeur s’arrête à 20. | 20. |
| **Pages maximum** | Le nombre de pages proposées. 0 veut dire illimité. Proposé avec un bloc **Pagination**. | 20. |
| **Masquer la navigation aux moteurs de recherche (AJAX)** | Seule la liste se rafraîchit au clic et aucune adresse de page n’existe. Proposé avec un bloc **Pagination**. | Désactivé. |

|  | Classique | AJAX |
| --- | --- | --- |
| Au clic | La page se recharge et l’adresse change. | Seule la liste se rafraîchit. |
| Moteurs de recherche | Chaque page de la liste a une adresse explorable. | Aucune adresse à explorer. |
| Partager une page de la liste | Oui. | Non. |
| Bouton Précédent du navigateur | Il revient à la page précédente de la liste. | Il ramène à la page visitée avant celle de la liste. |

Le bloc **Pagination** a son réglage **Affichage** : **Pages numérotées**, avec **Afficher les liens vers la première et la dernière page** coché par défaut, ou **Précédent / Suivant**, les seules flèches.

**Conseil :** Activez l’AJAX pour un outil de recherche, comme des annonces filtrées : Google n’explore pas des centaines de combinaisons. Laissez-le désactivé pour un blog ou des actualités, dont chaque page doit être trouvée.

Dans les deux modes, la navigation et les filtres s’utilisent au clavier. Un lecteur d’écran annonce le nombre de résultats après un filtre et la page atteinte, par exemple « Page 3 sur 7 ».

## Régler la liste vide

Le panneau **État vide** de la liste règle l’affichage d’une liste sans résultat. **Quand il n’y a aucun résultat** : **Afficher un message**, par défaut, avec le texte de votre choix dans **Message**, ou **Masquer la liste**.

Une liste qui porte une recherche ou des filtres garde ses contrôles visibles même vide. Seule une liste sans contrôle et sans résultat disparaît.

## Voir aussi

- [Relier vos contenus entre eux](https://lovelyrender.com/fr/documentation/references/)
- [Afficher les données d’un contenu](https://lovelyrender.com/fr/documentation/afficher-les-donnees/)
- [Ajouter des champs à un type](https://lovelyrender.com/fr/documentation/champs-de-contenu/)
- [Décider de l’apparence avec les gabarits](https://lovelyrender.com/fr/documentation/gabarits/)