Une collection Webflow CMS et une Query Loop WordPress répondent au même besoin par deux chemins différents : la première structure ses données dans une interface propriétaire fermée, la seconde s’appuie sur des types de contenu et des taxonomies ouvertes, exploitables directement en base MySQL. Ce tutoriel porte pas à pas la reconstitution d’un configurateur de biens pour une agence immobilière qui quitte Webflow.
La collection d’origine comptait une soixantaine de biens, chacun avec un type de bien, une localisation, une fourchette de prix et un statut de disponibilité. L’objectif : retrouver la même expérience de filtrage côté visiteur, mais avec une Query Loop nativement intégrée à l’éditeur de site.
Étape 1 : recréer le type de contenu « bien »
Chaque bien devient un article du type de contenu personnalisé bien_immobilier, déclaré avec le support des champs personnalisés et l’exposition à l’API REST, condition nécessaire pour qu’il apparaisse dans les Query Loop de l’éditeur de site.
register_post_type( 'bien_immobilier', array(
'label' => 'Biens immobiliers',
'public' => true,
'show_in_rest' => true,
'has_archive' => true,
'supports' => array( 'title', 'editor', 'thumbnail', 'custom-fields' ),
'rewrite' => array( 'slug' => 'biens' ),
) );Étape 2 : reconstituer les taxonomies de filtrage
La collection Webflow exposait quatre filtres : type de bien, ville, fourchette de prix et statut. Chacun devient une taxonomie personnalisée non hiérarchique, sauf le type de bien qui garde une hiérarchie simple entre maison et appartement.
register_taxonomy( 'type_bien', 'bien_immobilier', array(
'label' => 'Type de bien',
'hierarchical' => true,
'show_in_rest' => true,
) );
register_taxonomy( 'ville_bien', 'bien_immobilier', array(
'label' => 'Ville',
'hierarchical' => false,
'show_in_rest' => true,
) );
Étape 3 : reproduire la mise en page carte par carte
La force de Webflow tenait dans la richesse visuelle de chaque carte de bien : image, badge de statut, prix mis en avant, ville en sous-titre. Pour retrouver ce rendu, la Query Loop s’appuie sur un bloc Modèle de post personnalisé, avec un bloc Image, un bloc Titre du contenu et un bloc Extrait du contenu positionnés dans l’ordre voulu.
- Créer le gabarit d’archive
archive-bien_immobilier.htmldepuis l’éditeur de site. - Insérer une Query Loop réglée sur le type de contenu
bien_immobilier, avec un affichage en grille de trois colonnes. - Composer le modèle de post avec l’image mise en avant, le titre, la ville extraite de la taxonomie et le prix issu d’un champ personnalisé exposé via un bloc de liaison.
- Ajouter des filtres visuels au-dessus de la Query Loop, chacun pointant vers une variante d’URL filtrée par taxonomie grâce aux paramètres de requête natifs.
Étape 4 : migrer le contenu existant
La migration des données elles-mêmes se fait par export CSV depuis Webflow, puis import via un script ponctuel utilisant wp_insert_post() pour chaque bien et wp_set_object_terms() pour associer les termes de taxonomie correspondants. Un contrôle manuel reste nécessaire pour vérifier que les images ont bien été rapatriées dans la médiathèque avant de basculer le domaine.
| Élément Webflow | Équivalent WordPress |
|---|---|
| Collection CMS « Biens » | Type de contenu bien_immobilier |
| Champs de filtre de collection | Taxonomies personnalisées |
| Modèle de carte de collection | Modèle de post dans la Query Loop |
Ce qui reste hors périmètre
La recherche par critères combinés, avec formulaire multi-champs et tri dynamique avancé, dépasse ce que couvre ce tutoriel : elle relève d’un travail dédié, souvent appuyé sur l’Interactivity API ou une extension de recherche spécialisée. Ici, l’objectif reste la reconstitution fidèle de la collection et de son affichage.
Quitter un outil propriétaire pour WordPress n’est jamais qu’une question d’export : c’est surtout une question de retrouver, avec des briques ouvertes, la structure de données qui faisait la valeur du site d’origine.
En résumé
Porter une collection Webflow CMS vers une Query Loop demande de recréer méthodiquement type de contenu, taxonomies et modèle de carte, dans cet ordre précis. Le résultat, une fois migré, offre à l’agence immobilière une autonomie complète sur ses données, hébergées et exploitables directement en base de données WordPress.
