Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

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

by
Difficulty:IntermediateLength:LongLanguages:

French (Français) translation by Daszie Chan (you can also view the original English article)

Directement après l'installation, WordPress offre un formulaire d’inscription personnalisée qui peut être utilisé pour configurer un nouvel utilisateur, ou ajouter un nouvel utilisateur lorsque vous l’ajoutez à une installation existante de WordPress. Mais que se passe-t-il si vous souhaitez implémenter un formulaire d’inscription personnalisé qui ne fourni pas les options dans le tableau de bord de WordPress?

Dans ce tutoriel, nous apprendrons comment créer un formulaire d’inscription personnalisé dans WordPress en utilisant une combinaison de template tags et de shortcodes.

Le formulaire d’inscription par défaut se compose de deux champs de formulaire - nom d’utilisateur et email.

La présence des champs nom d’utilisateur et email facilite incroyablement le processus d’inscription. Tout d’abord, vous entrez votre nom d’utilisateur et votre courriel, après quoi un mot de passe vous sera envoyé. Ensuite, vous vous connecter sur le site avec le mot de passe et ensuite complétez votre profil et changez le mot de passe pour quelque chose de plus mémorable.

Plutôt que de faire passer l'utilisateur par toutes les étapes qui précèdent juste pour s’inscrire sur votre site, pourquoi ne pas fournir un formulaire d’inscription direct composé de champs de formulaire supplémentaires importants en plus le nom d’utilisateur par défaut et l’e-mail comme un mot de passe, une URL pointant vers leur site Web, une biographie, un pseudo et leur prénom.

Ceci est particulièrement utile dans un site utilisé par plusieurs auteurs comme Tuts +.

Dans cet article, nous allons construire un plugin de formulaire d’inscription personnalisé avec les champs de formulaire suivants :

  • nom d’utilisateur
  • mot de passe
  • e-mail
  • URL du site web
  • prénom
  • nom de famille
  • pseudo
  • biographie (ou une section à propos)

Le formulaire d’inscription personnalisé peut ensuite être intégré dans WordPress en utilisant le plugin shortcode et le template tag associé.

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

Si vous souhaitez ajouter le formulaire d’inscription à la barre latérale ou à un emplacement spécifique dans votre site web, vous pouvez modifier le thème WordPress mais en plaçant le template tag à l’endroit désiré.

Avant de commencer à construire le plugin du formulaire d’inscription, il est à noter que les champs nom d’utilisateur, mot de passe et e-mail sont requis.

Nous va être appliquer cette règle lors de l’écriture de notre fonction de validation.

Option Premium

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

WordPress Registration Form plugin on Envato Market
WordPress Registration Form plugin sur Envato Market

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

Par exemple, Alisaleem252 mettra au point 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.

Vous obtiendrez :

  • widget personnalisé si nécessaire
  • shortcode personnalisé si nécessaire
  • type de message personnalisé si nécessaire
  • service fiable
Custom WordPress Plugin Development
Développement d’un Plugin WordPress personnalisé

Le service complet coûte seulement $300, et votre plugin sera prêt en 10 jours. Alisaleem252 a une cote d’approbation de 98 % des clients précédents. Alors pourquoi ne pas essayer son populaire service de développement d’un Plugin WordPress personnalisé !

Construire le plugin

Cela dit, nous allons commencer avec le codage du plugin. Tout d’abord, inclure l’en-tête du plugin.

Ensuite, nous créons une fonction PHP qui contient le code HTML du formulaire d’inscription.

Notez le champ d’enregistrement étant passé à la fonction ci-dessus comme variable ? Dans le code de la fonction, vous verrez les instances du code suivant, par exemple :

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

L’opérateur ternaire vérifie le contenu du tableau global $_POST pour voir si le formulaire contien une valeur. S’il ne contient pas une valeur, il remplit les champs du formulaire avec la valeur afin d'éviter à l’utilisateur de rentrer à nouveau dans le champ input.

Un formulaire d’inscription n’est jamais complet jusqu'à ce que vous ne validez et assainissez l’entrée d’utilisateur. En conséquence, nous allons créer une fonction de validation avec le nom registration_validation.

Pour rendre plus facile l'effort de validation, nous allons utiliser la classe WordPress WP_Error. Suivez-moi dans le codage de la fonction de validation :

  1. Créez la fonction et passez le champ de l’enregistrement comme l’argument de la fonction.
  2. Instanciez la classe WP_Error et rendez la variable d’instance globale pour qu'il puisse être accédé hors de la portée de la fonction.
  3. N’oubliez pas : Nous avons dit que le nom d’utilisateur, le mot de passe et l'e-mail sont requis et ne doivent pas être laissés. Pour appliquer la règle, nous devons vérifier si tout le champ est vide. Si il est vide, nous ajoutons le message d’erreur à la classe globale WP_Error.
  4. Nous vérifions également pour nous assurer que le nombre de caractères du nom d’utilisateur n’est pas inférieur à 4.
  5. Vérifiez si le nom d’utilisateur est déjà inscrit.
  6. Recourez aux services de la fonction WordPress validate_username pour vous assurer que le nom d’utilisateur est valide.
  7. Assurez-vous que le mot de passe saisi par les internautes n’est pas inférieur à 5 caractères.
  8. Vérifiez si l’e-mail est une adresse e-mail valide.
  9. Vérifier si l’e-mail est déjà enregistré.
  10. Si le champ site web est complété, vérifiez si il est valide.
  11. Enfin, effectuez une boucle dans les erreurs de notre instance WP_Error et affichez l’erreur individuelle.
    Nous avons terminé de coder la fonction de validation.

La prochaine est la fonction du plugin complete_registration() qui gère l’enregistrement de l’utilisateur.
L’enregistrement de l’utilisateur est fait par la fonction wp_insert_user qui accepte un tableau de données de l’utilisateur.

Dans la fonction complete_registration() qui précède, nous fait l’instance de WP_Error $reg_errors et la variable gloabale de champs de formulaire afin d'accéder à la variable dans la portée globale.

Ensuite, nous vérifions si l’instance de gestion des erreurs  $reg_errors contient une erreur. Si aucune erreur n’est trouvée, nous procédons au remplissage du tableau $userdata et insérons les détails d’enregistrement d'utilisateur à la base de données WordPress et affichons un message Inscription Complète avec un lien vers la page de connexion.

La prochaine est la super fonction  custom_registration_function() qui met toutes les fonctions que nous avons créé précédemment en usage.

Laissez-moi vous expliquer le code dans la fonction custom_registration_function().

Tout d’abord, nous déterminons si le formulaire a été envoyé en vérifiant si le $_POST [« submit »] est défini. Si le formulaire a été envoyé, nous utilisons la fonction registration_validation pour valider le formulaire d'utilisateur soumis.

Nous expurgeons ensuite les données du formulaire et définissons les données d'expurgation à une variable nommée d’après le champ de formulaire. Enfin, nous appelons le complete_registration pour inscrire l’utilisateur.

Nous avons besoin d’appeler la fonction registration_form pour afficher le formulaire d’inscription.

N’oubliez pas que je l’ai mentionné que nous allons donner le shortcode support pour le plugin d’enregistrement ? Voici le code du shortcode support .

À ce stade, nous avons terminé le codage du plugin. Voici une image montrant à quoi le formulaire d’inscription devrait ressembler.

Notez que vous pourriez ne pas obtenir le même aspect sur votre site WordPress en raison de la variation de style CSS.

Utilisation du plugin

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

Pour implémenter le formulaire d’inscription dans un aspect précis de votre thème, ajoutez la balise suivante du modèle - <?php custom_registration_function(); ?>.
Vous pouvez obtenir le fichier du plugin dans la pièce jointe de cet article.

Résumé

Dans cet article, nous sommes passé à travers le processus de création d’un plugin qui ajoute un formulaire d’inscription personnalisé à WordPress. Vous pouvez étendre davantage le formulaire d’inscription 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 soit une métadonnées valide pour 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 eu du mal à suivre ce tutoriel et que vous souhaitez une solution simple, vous pouvez essayer le plugin WordPress Registration Form sur Envato Market.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.