Créez vos propres champs de contact utilisateur WordPress – WPExplorer

Aujourd’hui, j’ai créé un nouveau plugin pour vous. Un plugin qui traite des méthodes de contact des utilisateurs. Fondamentalement, lorsque vous modifiez un utilisateur dans l’administration, il y a un bloc «informations de contact». Eh bien, j’aimerais vous montrer comment y ajouter vos propres champs, et pour aller un peu plus loin, comment afficher (ou non) ces nouveaux champs sur la page d’inscription.

Voici un aperçu de ce que nous allons créer:

Et pour ce faire, comme d’habitude, nous allons créer un plugin sympa et simple!

Étape 1: Créez le plugin

Créez un nouveau dossier dans wp-content / plugins et appelez-le «custom-user-contact-methods». Dans ce dossier nouvellement créé, créez un fichier appelé «rc-custom-user-contact-methods.php» et ouvrez-le dans votre logiciel d’édition préféré.

Placez ce contenu dans votre fichier vide. Ce code enregistre simplement le plugin:

<?php
/*
Plugin Name: Custom User Contact Methods
Plugin URL: http://remicorson.com/
Description: Add custom fields to users "contact" section
Version: 1.0
Author: Remi Corson
Author URI: http://remicorson.com
Contributors: corsonr
*/

Étape 2: définissez vos champs personnalisés

Ensuite, nous devons créer une variable qui contiendra nos champs personnalisés, ceux à utiliser dans la page d’édition utilisateur, ainsi que sur la page d’enregistrement par défaut. Stockons ces champs dans une variable appelée $ extra_fields.

$extra_fields =  array( 
    array( 'facebook', __( 'Facebook Username', 'rc_cucm' ), true ),
    array( 'twitter', __( 'Twitter Username', 'rc_cucm' ), true ),
    array( 'googleplus', __( 'Google+ ID', 'rc_cucm' ), true ),
    array( 'linkedin', __( 'Linked In ID', 'rc_cucm' ), false ),
    array( 'pinterest', __( 'Pinterest Username', 'rc_cucm' ), false ),
    array( 'wordpress', __( 'WordPress.org Username', 'rc_cucm' ), false ),
    array( 'phone', __( 'Phone Number', 'rc_cucm' ), true )
);

Nous stockons chaque champ dans un tableau qui a 3 paramètres, le premier est l’ID de champ, le second est l’étiquette du champ et le dernier est une information booléenne qui définit si le champ est affiché sur la page d’inscription ou non . Vous pouvez ajouter autant de paramètres que vous le souhaitez, par exemple un espace réservé ou une information requise.

Étape 3: Accrochez le bon filtre

Nous devons maintenant accrocher une fonction au bon filtre. Dans notre cas particulier, le filtre est «user_contactmethods», et le nom de la fonction que nous allons créer est «rc_add_user_contactmethods».

// Use the user_contactmethods to add new fields
add_filter( 'user_contactmethods', 'rc_add_user_contactmethods' );

Étape 4: Créez nos champs personnalisés

Nous devons maintenant créer la fonction «rc_add_user_contactmethods». C’est celui qui ajoutera nos champs personnalisés à la page d’édition de l’utilisateur. La bonne nouvelle, c’est que nous avons stocké nos champs dans un tableau, cela signifie que la fonction suivante sera entièrement dynamique, et il sera assez facile d’ajouter de nouveaux champs simplement en modifiant la variable $ extra_fields.

/**
 * Add custom users custom contact methods
 *
 * @access      public
 * @since       1.0 
 * @return      void
*/
function rc_add_user_contactmethods( $user_contactmethods ) {

    // Get fields
    global $extra_fields;
    
    // Display each fields
    foreach( $extra_fields as $field ) {
        if ( !isset( $contactmethods[ $field[0] ] ) )
            $user_contactmethods[ $field[0] ] = $field[1];
    }

    // Returns the contact methods
    return $user_contactmethods;
}

À cette étape, si vous enregistrez et activez le plugin, vous devriez voir vos champs personnalisés dans la page d’édition de l’utilisateur. Comme nous utilisons le bon hook, nous n’avons pas besoin de créer une «sauvegarde» des données des champs. Donc, le plugin fonctionne très bien pour le moment. Mais j’aimerais aller un peu plus loin et ajouter la possibilité d’afficher ces champs sur la page d’inscription. Assurez-vous de cocher dans les paramètres la case «Tout le monde peut s’inscrire», sinon vous ne pourrez pas voir le lien «S’inscrire».

Étape 5: Crochets de la page d’inscription

Pour ajouter nos champs sur la page d’inscription, nous devons accéder à au moins deux hooks et créer deux fonctions. Un pour afficher les champs, et le second pour enregistrer les données des champs dans la base de données.

Accrochons nos fonctions:

// Add our fields to the registration process
add_action( 'register_form', 'rc_register_form_display_extra_fields' );
add_action( 'user_register', 'rc_user_register_save_extra_fields', 100 );

Étape 6: Afficher la page d’enregistrement des champs personnalisés

Dans le code ci-dessus, nous avons déclaré deux fonctions. La première consiste à afficher les champs sur la page d’inscription. Dans cette partie, nous devons nous occuper du troisième paramètre de chaque tableau dans $ extra_fields. Ce paramètre booléen indique si les champs doivent être affichés ou non. True: le champ est affiché, false: le champ n’est pas affiché.

/**
 * Show custom fields on registration page
 *
 * Show custom fields on registration if field third parameter is set to true
 *
 * @access      public
 * @since       1.0 
 * @return      void
 */
function rc_register_form_display_extra_fields() {
    
    // Get fields
    global $extra_fields;

    // Display each field if 3th parameter set to "true"
    foreach( $extra_fields as $field ) {
        if ( $field[2] == true ) { 
        $field_value = isset( $_POST[ $field[0] ] ) ? $_POST[ $field[0] ] : '';
        echo '<p>
            <label for="'. esc_attr( $field[0] ) .'">'. esc_html( $field[1] ) .'<br />
            <input type="text" name="'. esc_attr( $field[0] ) .'" id="'. esc_attr( $field[0] ) .'" class="input" value="'. esc_attr( $field_value ) .'" size="20" /></label>
            </label>
        </p>';
        } // endif
    } // end foreach
}

Étape 7: Stocker les valeurs des champs lors du processus d’inscription

Maintenant que nos champs sont affichés sur la page d’inscription, nous devons stocker leurs valeurs dans la base de données. Il s’agit de la fonction «rc_user_register_save_extra_fields». Pour ce faire, nous devons utiliser le “wp_update_user ()” fonction.

/**
 * Save field values
 *
 * @access      public
 * @since       1.0 
 * @return      void
*/
function rc_user_register_save_extra_fields( $user_id, $password = '', $meta = array() )  {

    // Get fields
    global $extra_fields;
    
    $userdata       = array();
    $userdata['ID'] = $user_id;
    
    // Save each field
    foreach( $extra_fields as $field ) {
        if( $field[2] == true ) { 
            $userdata[ $field[0] ] = $_POST[ $field[0] ];
        } // endif
    } // end foreach

    $new_user_id = wp_update_user( $userdata );
}

Conclusion

Eh bien, nous avons vu les bases de la façon d’ajouter de nouveaux champs aux méthodes de contact utilisateur, mais c’est tout. Vous pouvez par exemple supprimer les champs existants tels que «Yahoo IM», «AIM» et «Jabber» en faisant un simple unset (). Mais vous pouvez aussi ajouter quelques fonctions pour assainir vos champs personnalisés afin de vérifier par exemple si le numéro de téléphone a un format approprié, si un champ est obligatoire ou pas etc etc… N’hésitez pas à demander des fonctionnalités spécifiques dans les commentaires!

Oh, et une dernière chose … si vous souhaitez afficher les données de l’un de vos champs, utilisez simplement ceci:

// Param 1 is user ID
// Param 2 is field ID
// Param 3 is there to get a var or an array
echo get_user_meta( 1, 'twitter', true );