Créer un plugin de formulaire d'inscription WordPress personnalisé

WordPress fournit immédiatement un formulaire d’inscription personnalisé qui peut être utilisé pour configurer un nouvel utilisateur ou pour ajouter un nouvel utilisateur lors de l’ajout à une installation WordPress existante. Mais que se passe-t-il si vous souhaitez implémenter un formulaire d'inscription personnalisé qui ne rend pas les options dans le tableau de bord WordPress?

Dans ce didacticiel, nous allons apprendre à créer un formulaire d'inscription personnalisé dans WordPress à l'aide d'une combinaison de balises de modèle et de codes courts..

Le formulaire d’inscription par défaut se compose de deux champs seulement: nom d’utilisateur et adresse électronique..

La présence des champs Nom d'utilisateur et Adresse électronique facilite grandement le processus d'inscription. Tout d’abord, vous entrez votre nom d’utilisateur et votre email, après quoi un mot de passe vous sera envoyé. Ensuite, vous vous connectez au site avec le mot de passe, puis complétez votre profil et changez le mot de passe pour quelque chose d'inoubliable..

Au lieu de forcer un utilisateur à passer par le stress ci-dessus juste pour s’inscrire sur votre site, pourquoi ne pas fournir un formulaire d’inscription direct avec la mention des champs de formulaire supplémentaires importants, en plus du nom d’utilisateur et de l’email par défaut, tels que mot de passe, une URL vers leur site web, une biographie, un pseudo, ainsi que leurs prénom et nom.

Ceci est particulièrement utile dans un site Web à plusieurs auteurs comme Tuts.+.

Dans cet article, nous allons créer un plug-in de formulaire d'enregistrement personnalisé avec les champs de formulaire suivants: 

  • Nom d'utilisateur
  • mot de passe
  • email
  • URL de site web
  • Prénom
  • nom de famille
  • surnom
  • biographie (ou une section sur)

Le formulaire d'inscription personnalisé peut ensuite être intégré à WordPress à l'aide du plug-in shortcode et de la balise de modèle associée..

Avec le shortcode, vous pouvez créer une page et en faire la page d’inscription officielle de votre site. Vous pouvez également utiliser le shortcode dans un message afin que l'utilisateur puisse s'inscrire sur votre site après avoir lu l'un de vos articles..

Si vous souhaitez ajouter le formulaire d'inscription à la barre latérale ou à un emplacement spécifique de votre site Web, vous pouvez modifier le thème WordPress en plaçant la balise de modèle à l'emplacement souhaité.. 

Avant de commencer à créer le plug-in de formulaire d'inscription, il est important de noter que le nom d'utilisateur, le mot de passe et le champ email sont obligatoires..

Nous appliquerons cette règle lors de l'écriture de notre fonction de validation.

Option Premium

Ce tutoriel vous apprendra à construire le plug-in à partir de zéro, mais si vous recherchez une solution plug-and-play rapide, essayez le plug-in WordPress Registration Form sur Envato Market. Vous pouvez définir une large gamme de champs d’enregistrement avec contrôle de validation. Une fois l'inscription terminée, un email est envoyé au nouveau membre avec ses informations de connexion. Les modèles d'e-mail peuvent être modifiés pour l'enregistrement, le changement de mot de passe, etc..

Formulaire d'inscription WordPress sur le marché Envato

Une autre option consiste simplement à passer une commande sur Envato Studio. Vous pouvez choisir la bonne personne parmi un large éventail de développeurs de plugins WordPress expérimentés. Ensuite, vous envoyez votre brief et laissez le développeur créer votre plugin dans les délais convenus..

Par exemple, Alisaleem252 développera un plugin WordPress personnalisé qui sera compatible avec la dernière version de WordPress et d’autres plugins dans le référentiel WordPress selon vos besoins.. 

Tu auras: 

  • widget personnalisé si nécessaire 
  • Shortcode personnalisé si nécessaire 
  • type de message personnalisé si nécessaire 
  • service fiable 
Développement de plugins WordPress personnalisés

Le service complet ne coûte que 300 $ et votre plugin sera prêt dans 10 jours. Alisaleem252 est approuvé à 98% par ses clients précédents. Alors pourquoi ne pas essayer son populaire service de développement de plugins WordPress personnalisés!

Construire le plugin

Cela dit, commençons par coder le plugin. Tout d'abord, inclure l'en-tête du plugin.

Ensuite, nous créons une fonction PHP contenant le code HTML du formulaire d’enregistrement..

function registration_form ($ username, $ password, $ email, $ website, $ prénom, $ dernier nom, $ pseudo, $ bio) echo '  '; écho ' 
';

Remarquez que le champ d’enregistrement est passé à la fonction ci-dessus en tant que variable? Dans le code de fonction, vous verrez des exemples du code suivant, par exemple:

(isset ($ _POST ['lname'])? $ dernier nom: null) 

L’opérateur ternaire vérifie le contenu de la commande globale. $ _POST tableau pour voir si le formulaire contient une valeur. S'il contient une valeur, il remplit les champs de formulaire avec la valeur afin d'éviter que l'utilisateur ne ressaisisse la saisie du champ..

Un formulaire d'inscription n'est jamais complet tant que vous n'avez pas validé et clarifié les données saisies par l'utilisateur. En conséquence, nous allons créer une fonction de validation avec le nom registration_validation.

Pour faciliter la tâche de validation, nous utiliserons la classe WordPress WP_Error. Suivez-moi pendant que nous codons la fonction de validation:

  1. Créez la fonction et transmettez le champ d'enregistrement comme argument de la fonction.
    fonction registration_validation ($ username, $ password, $ email, $ website, $ prénom, $ dernier nom, $ pseudo, $ bio) 
  2. Instancier le WP_Error classe et rendre la variable d'instance globale afin qu'il puisse être accès en dehors de la portée de la fonction.
    global $ reg_errors; $ reg_errors = new WP_Error;
  3. N'oubliez pas: nous avons indiqué que le nom d'utilisateur, le mot de passe et l'adresse électronique sont obligatoires et ne doivent pas être omis. Pour appliquer la règle, nous devons vérifier si l'un des champs est vide. Si vide, nous ajoutons le message d'erreur au message global WP_Error classe.
    if (empty ($ username) || empty ($ password) || empty ($ email)) $ reg_errors-> add ('champ', 'Le champ du formulaire requis est manquant'); 
  4.  Nous vérifions également que le nombre de caractères du nom d’utilisateur n’est pas inférieur à 4..
    if (4> strlen ($ username)) $ reg_errors-> add ('username_length', 'nom d'utilisateur trop court. Au moins 4 caractères sont requis'); 
  5. Vérifiez si le nom d'utilisateur est déjà enregistré.
    if (username_exists ($ username)) $ reg_errors-> add ('user_name', 'Désolé, ce nom d'utilisateur existe déjà!');
  6. Utiliser les services de la fonction validate_username de WordPress pour s’assurer que le nom d’utilisateur est valide.
    if (! validate_username ($ username)) $ reg_errors-> add ('username_invalid', 'Désolé, le nom d'utilisateur que vous avez entré n'est pas valide'); 
  7. Assurez-vous que le mot de passe entré par les utilisateurs ne soit pas inférieur à 5 caractères..
    if (5> strlen ($ password)) $ reg_errors-> add ('mot de passe', 'la longueur du mot de passe doit être supérieure à 5'); 
  8. Vérifier si l'email est un email valide.
    if (! is_email ($ email)) $ reg_errors-> add ('email_invalid', 'L'email n'est pas valide'); 
  9. Vérifier si l'email est déjà enregistré.
    if (email_exists ($ email)) $ reg_errors-> add ('email', 'Email déjà utilisé'); 
  10. Si le champ du site Web est rempli, vérifiez s'il est valide..
    if (! empty ($ website)) if (! filter_var ($ website, FILTER_VALIDATE_URL)) $ reg_errors-> add ('site Web', 'Le site Web n'est pas une URL valide'); 
  11. Enfin, nous parcourons les erreurs de notre WP_Error instance et afficher l'erreur individuelle.
    if (is_wp_error ($ reg_errors)) foreach ($ reg_errors-> get_error_messages () as $ error) echo '
    '; écho 'ERREUR: '; echo $ error. '
    '; écho '
    ';
    Nous avons fini de coder la fonction de validation.

Suivant est le plugin enregistrement complet() fonction qui gère l'enregistrement de l'utilisateur.
L’enregistrement de l’utilisateur se fait en réalité par le wp_insert_user fonction qui accepte un tableau de données utilisateur.

function complete_registration () global $ reg_errors, $ username, $ password, $ email, $ website, $ first_name, $ last_name, $ pseudo, $ bio; if (1> count ($ reg_errors-> get_error_messages ())) $ userdata = array ('user_login' => $ username, 'user_email' => $ email, 'user_pass' => $ mot de passe, 'user_url' => $ website, 'first_name' => $ first_name, 'last_name' => $ last_name, 'pseudo' => $ pseudo, 'description' => $ bio,); $ user = wp_insert_user ($ userdata); echo 'Inscription terminée. Aller à la page de connexion. '; 

dans le enregistrement complet() fonction ci-dessus, nous avons fait la $ reg_errors WP_Error instance et les champs de formulaire variable globale afin que nous puissions accéder à la variable dans la portée globale.

Nous vérifions ensuite si le $ reg_errors L'instance de traitement des erreurs contient une erreur. Si aucune erreur n’est trouvée, nous procédons au remplissage du $ userdata tableau et insérez les détails de l'enregistrement de l'utilisateur dans la base de données WordPress et affichez un Inscription complète message avec un lien vers la page de connexion.

À côté, est le super custom_registration_function () fonction qui met en service toutes les fonctions que nous avons créées ci-dessus.

function custom_registration_function () if (isset ($ _ POST ['submit'])) registration_validation ($ _POST ['nom d'utilisateur'], $ _POST ['password'], $ _POST ['email'], $ _POST ['site web '], $ _POST [' fname '], $ _POST [' lname '], $ _POST [' pseudonyme '], $ _POST [' bio ']); // désinfecte la forme du formulaire utilisateur global $ username, $ password, $ email, $ website, $ first_name, $ last_name, $ pseudo, $ bio; $ username = sanitize_user ($ _POST ['nomutilisateur']); $ password = esc_attr ($ _POST ['password']); $ email = sanitize_email ($ _POST ['email']); $ website = esc_url ($ _POST ['website']); $ first_name = sanitize_text_field ($ _POST ['fname']); $ last_name = sanitize_text_field ($ _POST ['lname']); $ nickname = sanitize_text_field ($ _POST ['pseudonyme']); $ bio = esc_textarea ($ _POST ['bio']); // appelez @function complete_registration pour créer l'utilisateur // uniquement si aucune erreur WP_error n'est trouvée complete_registration ($ nom d'utilisateur, $ mot de passe, $ email, $ site Web, $ premier_nom, $ dernier_nom, $ pseudo, $ bio);  registration_form ($ username, $ password, $ email, $ website, $ prénom, $ dernier nom, $ pseudo, $ bio); 

Laissez-moi vous expliquer ce que le code dans le custom_registration_function () une fonction.

Tout d'abord, nous déterminons si le formulaire a été soumis en vérifiant si le $ _POST ['submit'] est réglé. Si le formulaire a été soumis, nous appelons le registration_validation fonction pour valider le formulaire soumis par l'utilisateur.

Ensuite, nous nettoyons les données de formulaire et définissons ces données sur une variable nommée d'après le champ de formulaire. Enfin, nous appelons le enregistrement complet enregistrer l'utilisateur.

Nous devons appeler le formulaire d'inscription fonction pour afficher le formulaire d'inscription.

N'oubliez pas que j'ai mentionné que nous allons fournir un support shortcode pour le plugin d'enregistrement? Ci-dessous le code de support shortcode.

// Enregistrez un nouveau shortcode: [cr_custom_registration] add_shortcode ('cr_custom_registration', 'custom_registration_shortcode'); // La fonction de rappel qui remplacera la fonction [book] custom_registration_shortcode () ob_start (); custom_registration_function (); return ob_get_clean (); 

À ce stade, nous avons fini de coder le plugin. Ci-dessous une image montrant à quoi ressemble le formulaire d'inscription.

Notez que vous pourriez ne pas obtenir exactement le même look sur votre site WordPress en raison du style CSS différent.

Utilisation du plugin

Pour implémenter le plugin dans une publication ou une page WordPress, utilisez le shortcode. [cr_custom_registration].

Pour implémenter le formulaire d'inscription dans un aspect spécifique de votre thème, ajoutez la balise de modèle suivante. - .
Vous pouvez obtenir le fichier plugin de la pièce jointe dans cet article.

Résumé

Dans cet article, nous avons décrit le processus de création d'un plug-in qui ajoute un formulaire d'inscription personnalisé à WordPress. Vous pouvez également étendre le formulaire d’enregistrement pour inclure des champs supplémentaires tels que le rôle d’utilisateur, le compte AOL IM, mais assurez-vous que le champ de formulaire est une métadonnée valide. wp_insert_user.

Si vous avez des questions et des suggestions, faites le moi savoir dans les commentaires!

N'oubliez pas que si vous avez du mal à suivre ce tutoriel et que vous souhaitez une solution simple, essayez le plugin WordPress Registration Form sur Envato Market..