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

Introduction

Souhaitez-vous stocker les valeurs de Case à cocher sous forme de tableaux pour votre formulaire Soumissions d'articles sur un champ personnalisé créé à partir du plugin Advanced Custom Fields ? Avec un petit extrait de code PHP, vous pouvez stocker ces valeurs sous forme de tableau pour vos champs personnalisés.

Par défaut, lorsque les champs personnalisés sont mappés dans le module complémentaire Soumissions d'articles, 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 Case à cocher (et tout ce qui a plusieurs valeurs), WPForms stocke les valeurs sous forme de chaîne unique, chaque valeur étant sur une nouvelle ligne.

Rouge
Vert
Bleu

Cependant, avec un petit extrait de code PHP, vous pouvez facilement changer cela pour qu'il soit stocké sous forme de tableau.

array( 'Rouge', 'Vert', 'Bleu')

Création de vos champs personnalisés

Tout d'abord, nous allons créer un champ personnalisé pour nos articles en utilisant le 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 d'articles et d'ajouter un champ Case à cocher au formulaire.

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

Ajout de l'extrait de code pour stocker les valeurs sous forme de tableaux

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

Si vous avez besoin d'aide pour ajouter des extraits de code à votre site, veuillez consulter 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 d'apporter des modifications en direct à votre thème, il est donc préférable d'utiliser un thème enfant ou une fonction personnalisée pour afficher cela 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>

Dans le but de ce tutoriel, nous avons créé notre thème enfant et sur single.php nous avons ajouté cette ligne de code pour d'abord nous assurer que les valeurs sont présentes et si elles le sont, les afficher.

Lorsque votre article sera affiché, vous verrez les états listés dans un format de paragraphe plutôt qu'un affichage ligne par ligne.

Et voilà ! Vous avez modifié avec succès la manière dont ces valeurs sont stockées dans votre base de données WordPress. Souhaitez-vous également utiliser des images pour les étiquettes de vos champs de formulaire Case à cocher au lieu de texte ? Consultez notre article sur Comment appliquer des images aux étiquettes de cases à cocher à l’aide de CSS.

Articles associés

Référence du filtre : wpforms_post_submissions_process_meta

FAQ

R : Puis-je l’utiliser dans d’autres extensions également ?

R : Absolument ! Par exemple, si vous reprenez le même scénario que celui mentionné dans ce tutoriel, vous pourriez l’ajouter à l’extension d’inscription d’utilisateurs afin qu’il soit automatiquement enregistré sur la page de profil de l’utilisateur tout en utilisant ACF pour ajouter des informations supplémentaires au profil d’utilisateur WordPress.

Dans l’extension d’inscription d’utilisateurs version 2.8.0 et plus récentes, le filtre pour stocker des valeurs méta personnalisées est :

wpforms_user_registration_process_base_custom_meta_value

Si vous maintenez un site hérité, vous pouvez conserver les deux hooks pour 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 );

Et voilà ! Désormais, vos valeurs de cases à cocher soumises seront enregistrées sous forme de tableau lorsque WPForms les associera à votre champ méta personnalisé.

Souhaitez-vous en savoir plus sur la configuration des soumissions d’articles, y compris l’association de champs méta personnalisés, dans notre guide de l’extension Post Submissions.