26. Contenu dynamique : balises dynamiques et champs personnalisés

Au chapitre précédent, des widgets affichaient « le titre de l’article en cours » sans que l’on tape ce titre. Ce chapitre généralise l’idée à n’importe quel champ d’Elementor : un texte, une image, un lien, une couleur peuvent venir de WordPress au lieu d’être saisis. C’est le contenu dynamique, et c’est ce qui transforme un site en outil que l’on alimente au lieu de le redessiner.

26.1 — Le principe : une valeur qui vient d’ailleurs

Quand vous tapez « Escalier en chêne à Besse » dans un Titre, la valeur est statique : elle ne changera que si vous rouvrez l’éditeur. Quand vous demandez au Titre d’afficher le titre de la publication en cours, la valeur est dynamique : Elementor la lit dans WordPress au moment où la page s’affiche, et elle diffère d’un article à l’autre. C’est le fonctionnement d’un publipostage : une lettre type, une liste d’adresses, chaque courrier porte le bon nom.

Dans l’interface, cette possibilité se reconnaît à une petite icône dynamique à droite de certains champs (une pile de disques, selon la version). Elle n’apparaît que sur les champs qui peuvent recevoir une valeur dynamique : le texte d’un Titre, l’image d’un élément Image, l’adresse d’un lien, la couleur d’un fond. Cliquer dessus ouvre la liste des balises dynamiques, filtrée selon le type du champ : un champ image ne propose que des images, un champ lien que des adresses.

26.2 — Poser une balise dynamique

Le geste est le même pour tous les champs. Prenons un Titre qui doit afficher la commune d’un chantier, enregistrée comme champ personnalisé (paragraphe 26.5).

1. Repérez l’icône. Sélectionnez le Titre. À droite du champ de texte, dans l’onglet Général (ou Contenu pour un widget classique), cliquez sur l’icône dynamique.
2. Choisissez la balise. Dans le groupe Post (publication), choisissez Post Custom Field (champ personnalisé). Le champ de texte devient une étiquette grise portant le nom de la balise : la valeur ne se tape plus, elle se lit.
3. Réglez la balise. Cliquez sur l’étiquette (ou sa petite clé) pour ouvrir ses réglages. Indiquez la clé (Key) du champ, par exemple commune, en la choisissant dans la liste ou en la tapant.
4. Ajoutez le texte autour. Dans la section Advanced de la balise, trois champs valent de l’or : Before (avant), After (après) et Fallback (valeur de repli). Tapez Chantier réalisé à dans Before : le visiteur lira « Chantier réalisé à Besse », et seul « Besse » vient de la donnée.
5. Prévoyez l’absence. Dans Fallback, tapez Puy-de-Dôme : si une réalisation n’a pas de commune, le titre ne sera ni vide ni tronqué. Sans repli, un champ manquant affiche… rien, et un « Chantier réalisé à » orphelin.
6. Vérifiez avec plusieurs contenus. Changez d’article dans les Réglages d’aperçu (chapitre 25). Pour revenir à une valeur statique, la croix de l’étiquette retire la balise.

26.3 — Les groupes de balises

Le tableau récapitule les groupes et balises tels que le Centre d’aide les liste (page « Dynamic tags »), en anglais avec une traduction prudente ; certains peuvent apparaître traduits selon la version de Pro.

Trois balises du groupe Site servent sur toutes les pages. Current Date Time, réglée sur l’année seule, met à jour toute seule le « © 2026 » du pied de page. Internal URL pointe vers une page choisie dans une liste : si l’on renomme la page Contact, le lien suit. Request Parameter lit un paramètre dans l’adresse (par exemple ?ville=Murol) pour personnaliser un titre selon le lien cliqué : un outil de page d’atterrissage, à manier avec prudence.

26.4 — Balises dynamiques et éléments atomiques

Les éléments atomiques acceptent eux aussi des balises dynamiques, mais le Centre d’aide précise qu’il s’agit d’un sous-ensemble : Post Title, Post Date, Post Custom Field, Site Title, Site Tagline, informations d’auteur, entre autres. Deux nouveautés propres à l’éditeur atomique méritent l’attention : les sélecteurs de couleur de l’onglet Style acceptent une balise, si bien qu’une fiche de chantier peut prendre la teinte de son essence de bois ; et les champs destinataires du Formulaire atomique (chapitre 28) aussi, ce qui permet d’envoyer une demande de devis à une adresse qui dépend de la page. Quand une balise manque sur un atome, utilisez le widget classique équivalent (Titre, Image ou Bouton classique), qui offre la liste complète, posé dans le Flexbox atomique : c’est la ligne du support (chapitre 06).

26.5 — Champs personnalisés : ajouter ses propres données

WordPress connaît, pour chaque article, un titre, un texte, un extrait, une date, une image mise en avant, des catégories. C’est suffisant pour des actualités, pas pour une réalisation de la Menuiserie Roche, qui a une commune, une essence, une année, parfois une seconde photo. Ces informations sont des champs personnalisés. Deux niveaux existent.

Niveau 1 : les champs natifs de WordPress

WordPress possède un panneau Champs personnalisés, masqué par défaut dans l’éditeur de blocs (à activer dans les préférences de l’éditeur, section des panneaux). On y saisit des paires clé / valeur : commune = Besse, essence = Chêne. La balise Post Custom Field les lit par leur clé. C’est rustique — aucune liste de choix, une faute de frappe dans la clé et la donnée disparaît — mais cela fonctionne avec le plan Essential, pour deux ou trois informations par article.

Niveau 2 : une extension de champs et un type de contenu dédié

Une extension comme ACF (Advanced Custom Fields, citée en exemple ; sa version gratuite suffit) fait deux choses. Elle crée des champs avec un vrai formulaire de saisie : Texte « Commune », Choix « Essence » (Chêne, Noyer, Frêne, Hêtre), Nombre « Année », Image « Photo de détail ». Et elle peut créer un type de contenu personnalisé (custom post type, CPT) nommé « Réalisations », qui apparaît dans le menu de WordPress à côté d’Articles et de Pages, avec sa propre liste et, si on le souhaite, sa propre archive à l’adresse /realisations/. Les chantiers ne se mélangent plus aux actualités.

Une fois l’extension installée, la liste des balises gagne un groupe à son nom (« ACF »), avec des balises adaptées au type de chaque champ : un champ Image est proposé dans les champs image d’Elementor, un champ Nombre dans les champs texte. Le modèle « Fiche réalisation » se construit alors comme un modèle d’article (chapitre 25) : Post Title en H1, Featured Image, une Liste d’icône dont chaque ligne porte une balise ACF (« Commune : Besse », « Essence : chêne »), le Post Content pour le récit du chantier, et le composant « Appel à devis ».

26.6 — Les actions : liens de contact, visionneuse, popup

Le groupe Actions ne lit pas une donnée : il fabrique un lien qui déclenche quelque chose. La balise Contact URL est la plus utile pour un artisan. Posée sur le lien d’un Bouton ou d’une Boîte d’icône, elle propose un type (e-mail, téléphone, SMS, WhatsApp, Waze, entre autres) et les champs correspondants : pour WhatsApp, le numéro au format international (indicatif du pays sans le signe +, sans le 0 initial) ; pour l’e-mail, l’adresse, l’objet et un message pré-rempli ; pour Waze, une adresse. Le résultat est un lien que le téléphone du visiteur ouvre dans la bonne application, sans les erreurs de syntaxe des tel: et mailto: tapés à la main (chapitre 15).

La balise Lightbox (visionneuse) ouvre une image ou une vidéo en grand par-dessus la page. La balise Popup ouvre ou ferme une fenêtre surgissante créée avec le Popup Builder (plans Advanced et supérieurs, chapitre 29) : c’est ainsi qu’un bouton « Devis express » ouvre un formulaire sans changer de page.

Les balises Actions sont attestées sur les widgets classiques. Sur les éléments atomiques, le sous-ensemble disponible évolue d’une version à l’autre : si le lien d’un Bouton atomique ne propose pas Contact URL, tapez l’adresse à la main ou utilisez le widget Bouton classique.