Personnaliser la vue en liste

Vous contrôlez l’apparence de la vue en liste des biens de manière centralisée dans le Customizer de WordPress. Vous y voyez vos modifications immédiatement dans l’aperçu en direct avant de les enregistrer.

Accéder au Customizer

Ouvrez le Customizer dans le backend de votre site web (wp-admin) sous Apparence → Personnaliser. WP-ImmoMakler y ajoute sa propre section WP-ImmoMakler avec le sous-espace Immobilien Listenansicht (vue en liste des biens).

Mise en page et largeur

Ces options déterminent la structure de base de la liste : largeur, nombre de biens et répartition des colonnes.

Option	Description
Largeur maximale de la liste (px)	Largeur maximale de la vue en liste (par défaut : 1300 px).
Nombre de biens par page	Combien de biens sont affichés par page avant que la pagination ne s’active (par défaut : 12).
Nombre de colonnes	Nombre de colonnes. Recommandation : « automatique (CSS grid) » — le nombre réel de colonnes résulte alors de la largeur minimale (voir l’option suivante). Un nombre fixe de colonnes (1–4) reste disponible pour les installations existantes ou les cas particuliers.
Colonnes (automatique) : largeur minimale en pixels	Uniquement avec « automatique » : jusqu’à quel point les encadrés des biens peuvent se rétrécir sur les petits écrans avant que le nombre de colonnes ne soit automatiquement réduit (par défaut : 360 px). Cette valeur contrôle indirectement le nombre de colonnes souhaité.
Colonnes (automatique) : espacement en pixels	Espacement entre les encadrés des biens (par défaut : 25 px).
Disposition	« Images en haut » (par défaut) ou « Images à gauche » — position de l’image d’aperçu au sein d’un encadré.

Astuce

Le réglage « automatique (CSS grid) » adapte le nombre de colonnes de manière responsive à la largeur de l’écran. Au lieu d’indiquer un nombre fixe de colonnes, vous définissez avec la largeur minimale à partir de quand une colonne disparaît, ce qui donne une mise en page équilibrée sur tous les appareils.

Images d’aperçu

Contrôlez la taille, le format et les effets des images d’aperçu dans la liste.

Option	Description
Dimensions en pixels des images d’aperçu	Taille des images d’aperçu. Si les images sont floues, choisissez un format en pixels plus grand.
Format des images	Format uniforme (original, 16:9, 3:2, 4:3 ou 1:1 ; par défaut : 3:2).
Alignement des images	Cadrage de l’image avec un format fixe : bord supérieur, centre (par défaut) ou bord inférieur. Si, par exemple, vous affichez votre logo sur le bord inférieur de l’image, choisissez « bord inférieur » pour qu’il reste toujours visible.
Effet d’agrandissement	Les images d’aperçu sont légèrement agrandies et éclaircies au survol de la souris.
Effet de préchargement	Les images d’aperçu sont d’abord affichées dans une version préliminaire floue jusqu’à ce que l’image réelle soit chargée.
Afficher les images sous forme de slider PLUS	Affiche toutes les images du bien sous forme de slider dès la vue en liste.

Mise en page des encadrés

Les biens sont présentés dans des encadrés uniformes. Le commutateur Mise en page des encadrés (activé/désactivé) active ou désactive entièrement l’affichage en encadrés ; les options suivantes en affinent l’apparence.

Option	Description
Style des encadrés	« Long » (détaillé, par défaut) ou « Compact » (présentation condensée).
Mettre le prix principal en valeur graphiquement	Met en évidence le prix le plus important dans le style d’encadré « Compact ».
Afficher la bordure	Affiche ou masque le cadre autour des encadrés.
Couleur de la bordure	Couleur du cadre de l’encadré (par défaut : #cccccc).
Couleur de fond	Couleur de fond des encadrés (par défaut : #ffffff).
Légère ombre autour des encadrés	Donne aux encadrés une apparence plus tridimensionnelle.
Luminosité de l’ombre	Luminosité de l’ombre de l’encadré (185–254).
Rayon des coins en pixels	Rayon pour les coins arrondis. Choisissez 0 pour des coins anguleux.

Données du bien affichées

Définissez quels champs de données et prix apparaissent sur les encadrés de la liste.

Option	Description
Afficher les données du bien	Sélectionnez quelles caractéristiques du bien (p. ex. surface habitable, pièces, localité) apparaissent dans la liste.
Afficher les prix	Sélectionnez quels montants (p. ex. prix d’achat, loyer hors charges) sont affichés.

Tri

Option	Description
Afficher les options de tri dans les listes	Affiche le menu déroulant de tri pour les visiteurs. Sinon, les biens importés le plus récemment sont listés en premier.
Trier par disponibilité	Ordre de tri : disponible > réservé > vendu/loué > référence.

Note

Comment définir le tri par défaut de la liste ou l’ajuster via un filter hook est décrit sur la page Tri de la vue en liste.

Biens de référence

Option	Description
Afficher les biens de référence dans les listes normales	Sinon, les biens de référence n’apparaissent que dans la liste de références distincte. Les biens marqués comme « référence » sont affichés — contrairement à « vendu/loué » — sans prix ni détails du bien.
Lier la vue détaillée pour les biens de référence	Lie les biens de référence à leur vue détaillée respective (sans données du bien).

Note

Pour en savoir plus sur la gestion et l’affichage des références, consultez Biens de référence.

Colorer les barres de statut

Les barres de statut (« nouveau », « bien en vedette », « vendu », etc.) sur les images d’aperçu se configurent dans le Customizer dans la section WP-ImmoMakler → Couleurs. Vous y définissez la couleur de base sous Couleur par défaut des barres de statut (vue en liste) et pouvez définir des couleurs propres pour « vendu/loué », « réservé » et « nouveau » via Utiliser des couleurs supplémentaires pour chaque statut.

Mention WP-ImmoMakler

L’option Afficher la mention WP-ImmoMakler affiche, à la fin de la vue en liste, une note discrète indiquant que la vue a été créée avec WP-ImmoMakler.

Insérer des textes et des blocs de contenu

Via le WP-ImmoMakler Child-Skin-Plugin ou un constructeur de pages comme Elementor ou Divi, vous pouvez insérer vos propres textes, encadrés informatifs ou avertissements au-dessus ou en dessous de la liste des biens. Dans Elementor et Divi, placez simplement les éléments souhaités à l’endroit correspondant dans l’éditeur visuel.

Mise en forme via CSS

Les ajustements visuels qui vont au-delà des options du Customizer — par exemple la couleur de police, la famille de police ou la mise en majuscules — se font de préférence via CSS. Ajoutez votre code dans le fichier immomakler.css du WP-ImmoMakler Child-Skin-Plugin :

.immomakler h1 {
  text-transform: uppercase !important;
}

Commencez avec un fichier immomakler.css vide et n’ajoutez que les styles que vous souhaitez réellement remplacer. Ne copiez pas l’intégralité du fichier CSS standard du plugin. Une fois qu’un fichier a été placé dans le WP-ImmoMakler Child-Skin-Plugin, ce fichier n’est plus chargé depuis le plugin principal, mais depuis le WP-ImmoMakler Child-Skin-Plugin.

Modifier le texte du bouton des résultats de recherche

Le texte par défaut du bouton qui affiche le nombre de résultats (p. ex. « Afficher 12 résultats ») peut être personnalisé via un filtre dans le WP-ImmoMakler Child-Skin-Plugin : veuillez placer le filtre dans le fichier functions.php de votre WP-ImmoMakler Child-Skin-Plugin.

add_filter( 'immomakler_search_button_text', function() {
    return '%s Treffer anzeigen';
} );

Le caractère générique %s est automatiquement remplacé par le nombre de biens trouvés.

Personnaliser le titre

Le titre principal au-dessus de la vue en liste des biens peut être personnalisé soit via un filtre (pour des modifications ciblées de titres individuels), soit via une copie de template de title.php. Placez toutes les personnalisations dans votre WP-ImmoMakler Child-Skin-Plugin afin qu’elles soient conservées lors des mises à jour du plugin.

Via un filtre

Utilisez le filtre immomakler_archive_headline pour remplacer le titre principal par un titre de votre choix. Placez le filtre dans le fichier functions.php de votre WP-ImmoMakler Child-Skin-Plugin. Dans le cas le plus simple, renvoyez un nouveau titre de manière inconditionnelle :

add_filter( 'immomakler_archive_headline', function( $title ) {
    return 'Immobilienangebote';
} );

Remarque : avec cette variante, vous remplacerez tous les titres des archives de biens à la fois (voir la liste de vérification sous Via une copie de template). Si vous souhaitez remplacer uniquement un titre spécifique, vérifiez d’abord la valeur d’origine :

add_filter( 'immomakler_archive_headline', function( $title ) {
    if ( $title === 'Immobilien­angebot' ) {
        return 'Immobilienangebote in Lübeck';
    }
    return $title;
} );

Via une copie de template (title.php)

Vous pouvez également placer une copie de title.php dans le répertoire archive de votre WP-ImmoMakler Child-Skin-Plugin. Remplacez-y la sortie par défaut

<?php echo esc_html( immomakler_archive_headline() ); ?>

par votre propre titre :

<h1 class="archive-title">Mon titre personnalisé</h1>

Pour supprimer entièrement le titre, placez simplement un title.php vide dans le répertoire archive de votre WP-ImmoMakler Child-Skin-Plugin.

Attention

Avec cette variante, vous remplacez le titre pour toutes les listes d’archives de biens à la fois — c’est-à-dire pour « Biens correspondant à votre alerte de recherche », « Tous les biens d’une personne de contact », « Références » et « Biens immobiliers ». Si vous souhaitez personnaliser les titres individuellement, utilisez plutôt le filtre décrit ci-dessus.

Le sous-titre peut être ajusté via le hook immomakler_archive_subheadline.

Via un constructeur de pages

Si vous concevez la vue en liste avec un constructeur de pages, personnalisez le titre directement dans l’éditeur visuel. Pour plus de détails, consultez les articles correspondants : Elementor Pro, Divi Theme Builder, Bricks, WPBakery, Oxygen, Gutenberg Blocks et autres constructeurs de thème.

Sous-titre / Personnaliser le sous-titre

En dessous du titre principal apparaît un sous-titre complémentaire qui varie selon le filtre et la catégorie. Sur la vue d’ensemble générale des biens, il est par défaut « Tous les biens ». Ce filtre remplace exactement ce texte par défaut par votre propre formulation, sans affecter les sous-titres individuels de chaque catégorie. Entrez le texte souhaité à la place de « Votre nouveau texte ».

add_filter( 'immomakler_archive_subheadline', function( $title ) {
    if ( $title === 'Alle Immobilien' ) {
        return 'Dein neuer Text';
    }
    return $title;
} );

Ajouter des données de biens dans la vue en liste

Ce filtre vous permet d’ajouter des champs de données supplémentaires à afficher dans chaque encadré de bien de la vue en liste — en plus des champs par défaut sélectionnés dans le Customizer (voir la section « Données du bien affichées » ci-dessus). Dans l’exemple, le nombre de pièces, la surface habitable et la surface du terrain sont ajoutés ; adaptez le tableau $add_keys à vos besoins.

add_filter( 'immomakler_property_data_archive_keys', function( $property_data_keys ) {
    $add_keys = [
        'anzahl_zimmer',
        'wohnflaeche',
        'grundstuecksflaeche',
    ];
    return array_merge( $property_data_keys, $add_keys );
} );

Effectuer toutes les personnalisations de manière sûre pour les mises à jour

Les réglages du Customizer sont automatiquement conservés lors des mises à jour. Effectuez toute autre modification des templates, du CSS ou via des filtres exclusivement dans le WP-ImmoMakler Child-Skin-Plugin. C’est le seul moyen de conserver également ces modifications après les mises à jour du plugin.

---

Cela pourrait aussi vous intéresser

• Personnaliser la vue détaillée
• Tri de la vue en liste
• Configurer le carrousel
• Effectuer des personnalisations de manière sûre pour les mises à jour