Comment créer une balise intelligente à partir d'un champ ACF

Souhaitez-vous créer des balises intelligentes personnalisées basées sur des champs générés avec ACF (Advanced Custom Fields) ? Dans ce tutoriel, nous vous guiderons à travers le processus de création de ces balises intelligentes spécialisées à l'aide d'un extrait de code concis.

Pour l'illustration de ce tutoriel, considérons un site WordPress utilisant des articles comme éléments de portfolio de vente. Nous allons concevoir un formulaire unique à afficher sur chaque page d'article, en l'intégrant de manière transparente dans le template PHP.

Cependant, pour que les auteurs puissent lister efficacement leurs articles à vendre, ils devront saisir les prix respectifs. En utilisant le plugin ACF, nous avons intégré un champ Prix dans les paramètres de l'article.

Ce champ Prix sera pré-rempli dans le formulaire et se mettra à jour dynamiquement en fonction de l'article consulté. Comme le formulaire reste constant sur tous les articles, mais que le prix varie, nous utiliserons une balise intelligente pour ce champ afin d'assurer son adaptabilité avec la mise à jour des informations de chaque article.

Création du champ personnalisé avec ACF

Tout d'abord, nous allons commencer par créer notre champ personnalisé avec le plugin Advanced Custom Fields.

En suivant la documentation ACF, nous avons ajouté un nouveau champ à nos articles appelé portfolio_price.

Création d'une balise intelligente à partir du champ ACF

Normalement, nous créerions d'abord le formulaire. Cependant, comme nous savons que nous voulons utiliser cette nouvelle balise intelligente dans notre constructeur de formulaires, nous allons ajouter l'extrait avant de créer le formulaire.

Si vous avez besoin d'aide pour ajouter des extraits à votre site, veuillez consulter ce tutoriel.

/**
 * Register the Smart Tag so it will be available to select in the form builder.
 *
 * @link   https://wpforms.com/developers/how-to-create-a-smart-tag-from-an-acf-field/
 */

function wpf_dev_register_smarttag( $tags ) {
 
    // Key is the tag, item is the tag name.
    $tags[ 'portfolio_price' ] = 'Portfolio Price';
 
    return $tags;
}

add_filter( 'wpforms_smart_tags', 'wpf_dev_register_smarttag' );
 
/**
 * Process the Smart Tag.
 *
 * @link   https://wpforms.com/developers/how-to-create-a-smart-tag-from-an-acf-field/
 */

function wpf_dev_process_smarttag( $content, $tag ) {
 
    // Only run if it is our desired tag.
    if ( 'portfolio_price' === $tag ) {

        //Get the field name from ACF
        $my_acf_field = get_field( 'portfolio_price', get_the_ID() );

        // Replace the tag with our link.
        $content = str_replace( '{portfolio_price}', $my_acf_field, $content );
    }
 
    return $content;
}

add_filter( 'wpforms_smart_tag_process', 'wpf_dev_process_smarttag', 10, 2 );

Décortiquons ces deux fonctions.

La première fonction crée une balise intelligente vide nommée « Prix du portfolio ». Rien ne sera attribué à cette balise pour le moment, nous la créons simplement avec cette fonction.

La fonction suivante est celle où nous allons définir la balise intelligente et d'où elle doit extraire les informations.

Avec la ligne $my_acf_field = get_field( ‘portfolio_price’, get_the_ID() );, nous indiquons au code qu'il doit aller dans Advanced Custom Fields et obtenir la valeur de ce champ. Vous devrez y entrer le nom du champ. Pour notre tutoriel, nous avons nommé notre champ portfolio_price.

Si vous avez besoin d'aide pour trouver le nom de votre champ, modifiez simplement le champ que vous avez créé dans ACF et recherchez l'étiquette Nom du champ.

Création du formulaire

Nous avons créé notre formulaire pour qu'il contienne les champs de formulaire Nom, E-mail, Titre du produit (Texte sur une seule ligne), Prix du produit (Texte sur une seule ligne) et Commentaires (Texte de paragraphe).

Ajout des balises intelligentes

Pour notre formulaire, nous allons intégrer le Titre du produit, qui est le titre de la publication. Nous pouvons utiliser une balise intelligente intégrée que WPForms fournit déjà à cet effet.

Une fois que vous avez ajouté le champ Texte sur une seule ligne pour le Titre du produit, cliquez simplement sur l'onglet Avancé. Dans la Valeur par défaut du champ, cliquez sur le lien Afficher les balises intelligentes et sélectionnez le Titre de la publication/page intégrée pour que le titre de la publication remplisse automatiquement ce champ de formulaire.

Ensuite, nous allons répéter cette étape à nouveau pour le champ Prix du produit.

Dans l'onglet Avancé du champ Prix du produit, sélectionnez la balise intelligente {portfolio_price} parmi les balises intelligentes disponibles.

Ajout du shortcode WPForms à un modèle PHP

Si vous avez besoin d'aide pour ajouter un shortcode à un modèle PHP, veuillez consulter ce tutoriel.

Pour ce tutoriel, nous avons ajouté notre shortcode au bas du modèle de page de publication unique.

Maintenant, vous pouvez voir que lorsque vos publications changent, le Prix du produit et le Titre du produit de votre formulaire changent également.

Souhaitez-vous créer plus de balises intelligentes personnalisées ? Consultez notre tutoriel sur Comment créer une balise intelligente personnalisée.

Filtre de référence

• wpforms_smart_tags
• wpforms_smart_tag_process