Comment stocker les valeurs des cases à cocher sous forme de tableaux avec les soumissions de messages ?

Introduction

Souhaitez-vous stocker les valeurs des cases à cocher sous forme de tableaux pour votre formulaire de soumission d'articles dans un champ méta personnalisé créé à partir du plugin Advanced Custom Fields? Grâce à un petit extrait de code PHP, vous pouvez stocker ces valeurs dans un tableau pour vos champs personnalisés.

Par défaut, lorsque les champs personnalisés sont mappés dans l'addon Post Submission, WPForms stocke les données dans le champ personnalisé dans le même format que WPForms stocke les données dans tous les formulaires.

Par exemple, pour les champs de formulaire à cases à cocher (et tout autre champ à valeurs multiples), WPForms stocke les valeurs sous la forme d'une chaîne unique, chaque valeur se trouvant sur une nouvelle ligne.

Red
Green
Blue

Cependant, avec un petit extrait de PHP, vous pouvez facilement changer cela pour le stocker sous forme de tableau.

array( 'Red', 'Green', 'Blue')

Création de vos champs personnalisés

Tout d'abord, nous allons créer un champ personnalisé pour nos articles à l'aide du plugin Advanced Custom Fields.

Si vous avez besoin de plus d'informations sur la configuration des champs personnalisés, veuillez consulter cet article.

Création du formulaire

Il est maintenant temps de créer votre formulaire de soumission de message et d'y ajouter un champ Checkbox.

Une fois que vous avez ajouté les champs restants à votre formulaire, allez dans l'onglet Paramètres et cliquez sur Soumissions de messages pour vous assurer que votre champ personnalisé est correctement mappé.

Ajouter l'extrait pour stocker les valeurs sous forme de tableaux

Pour stocker les valeurs sous forme de tableau, il vous suffit de copier cet extrait sur votre site.

Si vous avez besoin d'aide pour ajouter des snippets à votre site, consultez ce tutoriel.

/**
 * Turn checkbox values into an array.
 *
 * @link https://wpforms.com/developers/how-to-store-checkbox-values-as-arrays-with-post-submissions/
 */
  
function wpf_dev_post_submission_process_meta( $field_value, $meta_key, $field_id, $fields, $form_data ) {
 
    // Only run on my form with ID = 443
    if ( absint( $form_data[ 'id' ] ) !== 443 ) {
            return;
    } 
      
    // The $meta_key name is the same name that shows in the Field Name on Advanced Custom Fields
    if ( $meta_key === 'have_visited' ) {
 
            $field_value = explode( "\n", $field_value );
 
        }
  
    return $field_value;
}
add_filter( 'wpforms_post_submissions_process_meta', 'wpf_dev_post_submission_process_meta', 10, 5 );

Affichage des valeurs

Il est maintenant temps d'afficher ces valeurs sur votre modèle d'article unique. WPForms ne recommande jamais de modifier votre thème en direct, il est donc préférable d'utiliser un thème enfant ou une fonction personnalisée pour afficher ces valeurs sur votre modèle.

Pour plus d'informations sur la création d'un thème enfant, consultez cet excellent article de nos amis de WPBeginner.

<div class="states_wrapper">
    <?php if( get_field('have_visited') ): ?> 
        <p>I've already visited these states in the last 5 years: <?php the_field('have_visited'); ?></p> 
    <?php endif; ?>
</div>

Pour les besoins de ce tutoriel, nous avons créé notre thème enfant et, dans le fichier single.php, nous avons ajouté cette ligne de code pour nous assurer que les valeurs sont présentes et, si elles le sont, pour les afficher.

Lorsque votre message est affiché, vous verrez que les états sont listés dans un format de paragraphe plutôt que ligne par ligne.

Et voilà ! Vous avez réussi à modifier la façon dont ces valeurs sont stockées dans votre base de données WordPress. Vous souhaitez également utiliser des images à la place du texte pour les libellés des champs de formulaire Checkbox? Consultez notre article intitulé « Comment appliquer des images aux libellés Checkbox à l'aide de CSS ».

En rapport

Référence du filtre : wpforms_post_submissions_process_meta

FAQ

A : Puis-je l'utiliser dans d'autres modules complémentaires ?

R : Absolument ! Par exemple, si vous reprenez le même scénario que celui mentionné dans ce tutoriel, vous pouvez ajouter cela à l'extension User Registration afin que cela soit automatiquement enregistré dans la page du profil utilisateur tout en utilisant ACF pour ajouter des informations supplémentaires au profil utilisateur WordPress.

Dans la version 2.8.0 et les versions ultérieures du module complémentaire User Registration, le filtre permettant de stocker les valeurs méta personnalisées est le suivant :

wpforms_user_registration_process_base_custom_meta_value

Si vous gérez un site hérité, vous pouvez conserver les deux hooks pour assurer la compatibilité ascendante.

/**
 * Turn checkbox values into an array with the User Registration addon.
 *
 * @link https://wpforms.com/developers/how-to-store-checkbox-values-as-arrays-with-post-submissions/
 */
function wpf_dev_user_submission_process_meta( $field_value, $meta_key = '', $field_id = 0, $field = array(), $form_data = array() ) {

	// The $meta_key name is the same name that shows in the Field Name on Advanced Custom Fields.
	if ( $meta_key === 'have_visited' ) {
		$field_value = explode( "\n", $field_value );
	}

	return $field_value;
}

// User Registration addon 2.8.0+.
add_filter( 'wpforms_user_registration_process_base_custom_meta_value', 'wpf_dev_user_submission_process_meta', 10, 5 );

// Backward compatibility for older versions (before 2.8.0).
add_filter( 'wpforms_user_registration_process_registration_custom_meta_value', 'wpf_dev_user_submission_process_meta', 10, 5 );

C'est tout ! Désormais, les valeurs de vos cases à cocher seront enregistrées sous forme de tableau lorsque WPForms les mappera à votre champ méta de publication personnalisé.

Vous souhaitez en savoir plus sur la configuration des soumissions d'articles, y compris le mappage des champs méta personnalisés, consultez notre guide sur l'extension Post Submissions.