Vous souhaitez créer des étiquettes 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 Smart Tags spécialisés à l'aide d'un extrait de code concis.
Pour illustrer ce tutoriel, considérons un site WordPress utilisant des articles comme portefeuilles de vente. Nous concevrons un formulaire unique à afficher sur chaque page d'article, en l'intégrant de manière transparente dans le modèle PHP.
Cependant, pour que les auteurs puissent effectivement mettre en vente leurs articles, ils doivent saisir les prix correspondants. En nous appuyant sur 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 mis à jour dynamiquement en fonction de l'article consulté. Comme le formulaire reste constant d'un article à l'autre mais que le prix varie, nous utiliserons une balise intelligente pour ce champ afin d'assurer son adaptabilité à 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.
Conformément à la documentation d'ACF, nous avons ajouté un nouveau champ à nos messages, appelé portfolio_price.
Ce tutoriel suppose que vous avez déjà ajouté votre (vos) champ(s) à votre article. Si vous avez besoin d'aide pour ajouter des champs aux articles WordPress en utilisant le plugin Advanced Custom Fields, veuillez consulter leur documentation.
Création d'une étiquette intelligente à partir du champ ACF
Normalement, nous devrions créer le formulaire en premier. 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 snippets à 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 étiquette intelligente vide avec le nom "Portfolio Price". Rien ne sera assigné à cette étiquette pour le moment, nous la créons simplement avec cette fonction.
La fonction suivante permet de définir l'étiquette intelligente et l'endroit d'où elle doit extraire l'information.
Avec la ligne $my_acf_field = get_field( 'portfolio_price', get_the_ID() ) ; nous indiquons au code qu'il doit aller dans Advance Custom Fields et obtenir la valeur de ce champ. Vous devez saisir le nom du champ ici. Pour notre tutoriel, nous avons nommé notre champ prix_portefeuille.
Si vous avez besoin d'aide pour trouver le nom de votre champ, il vous suffit d'éditer le champ que vous avez créé dans ACF et de rechercher l'étiquette Nom du champ.
Création du formulaire
Nous avons créé notre formulaire pour qu'il contienne les champs Nom, Courriel, Titre du produit (texte d'une ligne), Prix du produit (texte d'une ligne) et Commentaires (texte d'un paragraphe).
Si vous avez besoin d'aide pour créer un formulaire, veuillez consulter ce tutoriel.
Ajout de balises intelligentes
Pour notre formulaire, nous allons introduire le titre du produit, qui est le titre de l'article. Nous pouvons utiliser une balise intelligente intégrée que WPForms fournit déjà pour cela.
Une fois que vous avez ajouté le champ Texte à ligne unique pour le titre du produit, il vous suffit de cliquer sur l'onglet Avancé. Dans la valeur par défaut du champ, cliquez sur le lien Afficher les balises intelligentes et sélectionnez Titre de l'article/de la page intégré(e) pour que le titre de l'article remplisse automatiquement ce champ de formulaire.
Ensuite, nous allons répéter cette étape pour le champ Prix du produit.
Dans l'onglet Avancé du champ Prix du produit, sélectionnez la balise intelligente {portfolio_price} dans la liste des étiquettes intelligentes disponibles.
Ajouter le 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 l'article unique.
Vous pouvez maintenant voir que le prix et le titre du produit de votre formulaire changent au fur et à mesure que vos articles changent.
Vous souhaitez créer des étiquettes intelligentes plus personnalisées ? Consultez notre tutoriel sur la création d'une étiquette intelligente personnalisée.