45. Field Forge avec Elementor | Field Forge - Champs personnalisés, conçus pour la vitesse

Utilisez les champs personnalisés de Field Forge comme balises dynamiques dans Elementor.

Intégration de Balises Dynamiques

Field Forge enregistre automatiquement les balises dynamiques avec Elementor lorsque le plugin Elementor est actif. Les valeurs de champ personnalisées apparaissent sous la catégorie “Field Forge” dans le panneau des balises dynamiques.

Utilisation Manuelle des Balises Dynamiques

Si vous devez créer une balise dynamique personnalisée :

add_action( 'elementor/dynamic_tags/register', function( $tags_manager ) {
    class Field_Forge_Dynamic_Tag extends \Elementor\Core\DynamicTags\Tag {
        public function get_name() { return 'fieldforge-field'; }
        public function get_title() { return 'Field Forge Field'; }
        public function get_group() { return 'fieldforge'; }
        public function get_categories() { return [ \Elementor\Modules\DynamicTags\Module::TEXT_CATEGORY ]; }

        protected function register_controls() {
            $this->add_control( 'field_name', [
                'label'   => 'Field Name',
                'type'    => \Elementor\Controls_Manager::TEXT,
                'default' => '',
            ] );
        }

        public function render() {
            $name = $this->get_settings( 'field_name' );
            if ( $name ) {
                echo esc_html( get_field( $name ) );
            }
        }
    }

    $tags_manager->register( new Field_Forge_Dynamic_Tag() );
} );

Utilisation dans les Modèles Elementor

Dans Elementor, cliquez sur l’icône de balise dynamique à côté de n’importe quel champ de texte et sélectionnez “Champ Field Forge”. Entrez le nom du champ pour afficher sa valeur dynamiquement.

Pour les champs d’image, utilisez la balise dynamique sur la propriété URL du widget Image :

// In an Elementor widget callback
$image = get_field( 'hero_image' );
if ( $image ) {
    echo '<img src="' . esc_url( $image['url'] ) . '" alt="' . esc_attr( $image['alt'] ) . '">';
}

—