# Dynamic Tags personnalisés : connecter Elementor à vos données métier

> Tutoriel PHP pour créer un Dynamic Tag Elementor Pro sur mesure et afficher un champ ACF ou une donnée personnalisée directement dans l'éditeur.

- Auteur : Clément Hadrot
- Publié le : 2020-09-17
- Mis à jour le : 2020-09-17
- Catégorie : Elementor
- URL : https://wpmoderne.dev.wordpress-developpement.fr/elementor/dynamic-tags-personnalises-elementor/

## L’essentiel

- Comprendre le rôle de la classe Tag
- Enregistrer un tag via elementor/dynamic_tags/register
- Afficher un champ ACF sans widget dédié

Les Dynamic Tags d'Elementor Pro permettent de remplacer une valeur statique dans un widget (un texte, une image, un lien) par une donnée qui provient du contenu affiché : le titre de l'article, une date, un champ personnalisé. Ils sont accessibles via la petite icône en forme de base de données présente sur de nombreux champs de l'éditeur. Les tags natifs couvrent les cas courants, mais dès que votre site repose sur des données métier spécifiques — un champ ACF, une information issue d'un custom post type — il devient très utile de créer son propre Dynamic Tag.

L'avantage par rapport à un widget personnalisé est important : un Dynamic Tag une fois créé devient disponible dans **tous** les widgets qui acceptent une valeur dynamique, du widget Titre au widget Image en passant par les liens de boutons. Un seul développement, une utilisation transversale sur tout le site. Voyons comment le construire pas à pas, avec un exemple concret : afficher un champ ACF « prix » sur une fiche produit.

## Le rôle de la classe Tag

Un Dynamic Tag personnalisé est une classe PHP qui étend `\Elementor\Core\DynamicTags\Tag` (ou une classe de base plus spécifique selon le type de donnée retournée, comme `Data_Tag` pour du texte). Comme pour un widget, elle doit implémenter des méthodes d'identification et une méthode de rendu, mais son fonctionnement est plus léger : pas de mise en page à gérer, seulement une valeur à retourner.

Voici la structure d'un plugin dédié qui enregistre un Dynamic Tag « Champ ACF Prix » :

```
<?php
/**
 * Plugin Name: Mon Dynamic Tag Elementor
 * Description: Dynamic Tag personnalise pour afficher un champ ACF
 * Version: 1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

function mon_tag_charger_fichier() {
    require_once __DIR__ . '/tags/prix-acf-tag.php';
}
add_action( 'elementor/dynamic_tags/register', 'mon_tag_enregistrer' );

function mon_tag_enregistrer( $dynamic_tags_manager ) {
    mon_tag_charger_fichier();
    $dynamic_tags_manager->register( new \Prix_Acf_Tag() );
}
```

Le hook `elementor/dynamic_tags/register` fournit directement l'instance du gestionnaire de tags en paramètre, sur laquelle on appelle `register()` avec une instance de notre classe. C'est le pendant exact du hook `elementor/widgets/register` utilisé pour les widgets, mais appliqué aux tags dynamiques.

## Écrire la classe du Dynamic Tag

La classe elle-même reste volontairement simple. Elle doit définir un nom unique, un titre, un groupe d'appartenance, les catégories de widgets compatibles, et une méthode `render()` qui retourne la valeur (et non qui l'affiche, contrairement à un widget) :

```
<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

use Elementor\Core\DynamicTags\Tag;
use Elementor\Modules\DynamicTags\Module as TagsModule;

class Prix_Acf_Tag extends Tag {

    public function get_name() {
        return 'prix-acf-tag';
    }

    public function get_title() {
        return __( 'Prix produit (ACF)', 'mon-tag' );
    }

    public function get_group() {
        return 'acf';
    }

    public function get_categories() {
        return [ TagsModule::TEXT_CATEGORY ];
    }

    public function render() {
        $post_id = get_the_ID();

        if ( ! $post_id || ! function_exists( 'get_field' ) ) {
            return;
        }

        $prix = get_field( 'prix', $post_id );

        if ( empty( $prix ) ) {
            return;
        }

        echo esc_html( $prix ) . ' &euro;';
    }
}
```

Le point important à retenir : `get_field()` est la fonction fournie par le plugin Advanced Custom Fields, pas par Elementor. Le Dynamic Tag ne fait ici que servir de pont entre la donnée ACF et l'éditeur Elementor. La vérification `function_exists( 'get_field' )` évite une erreur fatale si le plugin ACF venait à être désactivé.

> L'essentiel à retenir : Comprendre le rôle de la classe Tag ; Enregistrer un tag via elementor/dynamic_tags/register ; Afficher un champ ACF sans widget dédié

## Utiliser le tag dans l'éditeur

Une fois le plugin activé, le tag apparaît automatiquement dans la liste des Dynamic Tags disponibles, classé dans le groupe « acf » que nous avons défini, et proposé uniquement sur les champs de type texte puisque nous avons ciblé `TagsModule::TEXT_CATEGORY`. Pour l'utiliser :

1. Sélectionnez un widget Texte ou Titre dans l'éditeur Elementor.
2. Cliquez sur l'icône de base de données à côté du champ de contenu.
3. Choisissez « Prix produit (ACF) » dans la liste.

La valeur affichée dans l'éditeur correspond alors directement au champ ACF de l'article ou du produit en cours d'édition, et se mettra à jour automatiquement sur chaque page où ce widget est utilisé via le Theme Builder — par exemple dans un template Single de fiche produit.

## Aller plus loin : ajouter des contrôles au tag

Comme un widget, un Dynamic Tag peut exposer ses propres contrôles via `register_controls()`, pour par exemple laisser l'utilisateur choisir le nom du champ ACF à afficher plutôt que de le coder en dur :

```
protected function register_controls() {
    $this->add_control(
        'nom_champ',
        [
            'label'   => __( 'Nom du champ ACF', 'mon-tag' ),
            'type'    => \Elementor\Controls_Manager::TEXT,
            'default' => 'prix',
        ]
    );
}
```

Dans `render()`, il suffit alors de récupérer ce réglage avec `$this->get_settings( 'nom_champ' )` pour rendre le tag réutilisable sur n'importe quel champ ACF du site, sans dupliquer la classe pour chaque champ.

## Cas d'usage utiles au-delà d'ACF

- Afficher une métadonnée d'un custom post type stockée avec `get_post_meta()`.
- Construire une URL dynamique vers une ressource liée au contenu affiché (fiche PDF, page associée).
- Afficher une valeur calculée à partir de plusieurs champs (par exemple un prix avec remise appliquée).

> Gardez vos Dynamic Tags volontairement simples et prévisibles : une seule responsabilité par tag. Un tag qui fait trop de choses à la fois devient difficile à réutiliser d'un projet à l'autre, ce qui va à l'encontre de l'intérêt même de cette fonctionnalité.

## En résumé

Les Dynamic Tags personnalisés sont l'un des outils les plus rentables pour un développeur qui connecte Elementor à des données métier réelles : une seule classe PHP, enregistrée via `elementor/dynamic_tags/register`, suffit à rendre un champ ACF ou une donnée personnalisée disponible dans tous les widgets compatibles du site. C'est une alternative bien plus légère qu'un widget dédié lorsque le besoin se limite à afficher une valeur dynamique au sein de composants déjà existants.