Récupérer dynamiquement des valeurs issues d’un champ ACF de type répéteur dans un bloc Elementor est une question récurrente qui ne trouve guère de réponse évidente. Nativement, c’est impossible et les extensions proposées sont payantes à l’exception d’une seule : ACF Repeater for Elementor.
Dans ce tutoriel, nous allons utiliser une extension gratuite testé et approuvé sur un site en production mais dont les instructions de configuration sont incompréhensibles. Je vous donne la recette à suivre pour la faire fonctionner en toute simplicité.
Notions de base
Avant d’aller plus loin dans la lecture de ce tutoriel, passons en revue les quelques notions de base à connaître. Vous pouvez passer ce chapitre si vous êtes à l’aise avec ces aspects techniques.
Un champ ACF de type répéteur, c’est quoi ?
Un champ ACF de type répéteur est, comme son nom l’indique, capable de répéter un ensemble de champs. Il fonctionne comme un conteneur dans lequel vous allez ajouter des champs comme vous le feriez d’ordinaire depuis votre interface de gestion des groupes de champs.
Tous les champs sont disponibles à l’intérieur d’un champ répéteur. Évitez toutefois d’imbriquer un répéteur à l’intérieur d’un répéteur, cela rendrait l’interface utilisateur inutilisable.
Quelles sont les extensions nécessaires ?
Vous aurez besoin des extensions payantes Advanced Custom Fields PRO et Elementor Pro. La première vous servira à créer le champ de type répéteur, la seconde à disposer des widgets nécessaires comme un accordéon.
En complément, vous devrez installer ACF Repeater for Elementor. Cette extension est gratuite mais requiert l’installation des extensions Advanced Custom Fields PRO et Elementor Pro pour disposer respectivement du champ répéteur et des widgets nécessaires.
Vous pouvez la télécharger depuis votre administration WordPress ou depuis le répertoire officiel via ce lien.
-
L’extension gratuite pour afficher dynamiquement des données d’un champ ACF répéteur dans Elementor.
Mode d’emploi pour lier un champ répéteur ACF avec Elementor Pro
Étape n°1 – Créer un champ ACF de type répéteur
Commencez par éditer ou créer un nouveau groupe de champs dans Advanced Custom Fields et ajoutez un champ de type répéteur.
À l’intérieur du champ répéteur, ajoutez les sous-champs de votre choix.
Si vous prévoyez d’utiliser un bloc de type accordéon dans Elementor, il vous faudra créer 2 sous-champs : le premier pour le titre avec pour identifiant tab_title, le second pour le contenu avec pour identifiant tab_content. Vous devez obligatoirement respecter le nommage des identifiants pour que cela fonctionne avec ce type de bloc. C’est particulièrement utile pour créer une Foire Aux Questions dans une page d’atterrissage par exemple.
Étape n°2 – Insérer un widget dans Elementor
C’est sans doute la partie la plus complexe à appréhender, soyez attentifs !
Ouvrez donc l’éditeur Elementor pour le modèle ou la publication concernée. Il nous faut ensuite ajouter un widget dans lequel nous injecterons les données dynamiques qui se répéteront. Il peut s’agir d’une colonne, d’une section interne, ou de tout autre widget.
Dans l’onglet Avancé, vous devez spécifier une classe CSS reprenant l’identifiant du champ répéteur défini plus haut sous cette forme : repeater_identifiant_repeteur.
À l’intérieur du widget, définissez le contenu dynamiquement en indiquant l’identifiant du champ concerné avec un dièse comme préfixe. Par exemple, #content dans une zone de texte.
Dans le cas d’un accordéon, ce sont les identifiants #tab_title et #tab_content qui devront être utilisés comme je le vous disais à l’étape précédente.
L’extension sera alors capable d’injecter dynamiquement les valeurs dans les bonnes cases.
Pour terminer, cliquez sur le bouton Publier puis afficher la page dans un nouvel onglet du navigateur et admirez le résultat !
Vous disposez à présent d’un site capable d’afficher de manière dynamique des données issues d’un champ ACF de type répéteur via le constructeur Elementor. Cette approche est la plus simple et la plus rapide que j’ai à vous proposer pour ce genre de socle technique.
