Comment développer un site d'adhésion avec WordPress Partie 2

Ce que vous allez créer

Dans la première partie de cette série, nous avons couvert la personnalisation des formulaires d’inscription et de connexion. Aujourd'hui, nous verrons comment ajouter des champs personnalisés au formulaire d'inscription. Nous ajouterons une entrée de texte pour un compte Twitter et une case à cocher dans laquelle les utilisateurs devront accepter les conditions avant de s'inscrire. Le travail requis peut être divisé en trois parties:

  • Ajout des champs eux-mêmes
  • Validation sur les champs
  • Traitement des données

Nous allons aussi très brièvement discutez des meilleures façons de styler vos courriels sortants. Cela signifie que les utilisateurs recevront de jolis emails lors de leur inscription..  

Rapidement avant de commencer, assurez-vous tout le monde peut s'inscrire est coché dans vos paramètres WordPress (Paramètres> Général).  

Il y a beaucoup à faire; Commençons

L'un des points forts de WordPress est la façon dont il vous fournit des actions et des filtres. Celles-ci nous permettent d’accrocher à des événements ou de filtrer du contenu, ce qui nous permet d’étendre WordPress avec élégance..   

Donc, en utilisant l'action register_form, connectons-nous au formulaire d'inscription et ajoutons nos champs. Copiez la fonction suivante dans notre fichier admin.php que nous avons créé dans la première partie de cette série..

 

Fondamentalement, nous introduisons de nouveaux champs dans notre formulaire d'inscription. Le balisage utilisé imite celui des champs natifs. Nous voulons aussi conserver les valeurs si la page est rechargée, nous allons donc vérifier si elles existent dans la $ _POST super global. Vous vous demandez peut-être pourquoi notre étiquette Twitter est encapsulée dans une fonction: .

le _e la fonction permet la traduction, vous pouvez en savoir plus à ce sujet dans le Codex WordPress.

C'est génial, mais qu'en est-il de la validation? Dans l'état actuel des choses, les utilisateurs peuvent y mettre ce qu'ils veulent ou le laisser en blanc. Rendons nos champs obligatoires et assurons-nous que le champ de texte ne prend que des caractères normaux pour empêcher les attaques malveillantes. Cette fois, nous utiliserons un filtre WordPress: registration_errors. 

add ('twitter_name_error', __ ('ERREUR: S'il vous plaît entrez votre nom Twitter. ',' Sage '));  if (preg_match ('/ [^ a-z _ \ - 0-9] / i', $ _POST ['twitter_name'])) $ errors-> add ('twitter_name_error', __ ('ERREUR: Veuillez utiliser uniquement des lettres, des chiffres, des espaces et des traits de soulignement. ',' Sage '));  if (empty ($ _POST ['terms'])) $ errors-> add ('terms_error', __ ('ERREUR: Vous devez accepter les termes. ',' Sage '));  return $ errors;  add_filter ('registration_errors', 'tutsplus_validate_registration', 10, 3);

Le filtre ci-dessus est passé trois paramètres: 

  1. Les erreurs qui ont été traitées
  2. L'email de l'utilisateur
  3. Nom d'utilisateur assaini de l'utilisateur

La fonction est déclenchée après la soumission du formulaire, mais avant que les données atteignent la base de données. Dans notre cas, nous vérifions si les champs sont vides et s'il y a des caractères bizarres dans notre entrée de nom Twitter. Si certaines d’entre elles sont vraies, nous passons un message d’erreur au $ error objet qui est retourné.   

Remarque: si vous obtenez une boîte d’erreur vide, ne vous inquiétez pas. Le plugin de sécurité que nous avons installé dans la première partie a un paramètre par défaut qui masque les messages. Sous le WordPress Tweaks section, décochez l'option Désactiver les messages d'erreur de connexion.  

Nous arrivons maintenant au dernier élément de notre puzzle: traiter les données pour les enregistrer dans notre base de données avec cet utilisateur. Encore une fois, nous utiliserons une action définie de WordPress (user_register) pour s’intégrer à ce processus. Il faut un paramètre, le identifiant d'utilisateur-De cette façon, il sait contre qui sauvegarder les données. En supposant que $ _POST superglobal contient nos données, nous pouvons les sauvegarder en utilisant update_user_meta.

Champs personnalisés dans l'administrateur

À l'heure actuelle, nous avons collecté les données des utilisateurs, y compris nos champs personnalisés, mais nous ne pouvons pas modifier ces valeurs dans l'administrateur WordPress. Connectons cela. Dans notre admin.php ajoutez la fonction suivante:

 

En utilisant certaines actions WordPress, nous pouvons facilement ajouter des champs personnalisés. 


Maintenant, pour traiter la méta utilisateur personnalisée. 

Rediriger sur la connexion

Enfin, nous voulons rediriger nos utilisateurs vers une page spécifique lorsqu'ils sont connectés. La valeur par défaut les envoie au back-end WordPress. Oublie ça. Envoyons-les sur une page "mon compte". Donc, premièrement, vous devrez créer cette page dans le back-end. Ne vous préoccupez pas du contenu pour l'instant, car nous en parlerons dans la prochaine partie de la série.. 

Maintenant que nous avons notre page, collez le code ci-dessous dans ____. Php et testez-le. En supposant que votre page "mon compte" a le slug Mon compte ça devrait marcher. Encore une fois, nous avons utilisé un filtre WordPress pour réaliser cette sorcellerie.. 

En un mot, le code recherche un utilisateur et s’il s’agit d’un utilisateur admin, il est redirigé vers la place par défaut, sinon il est redirigé vers le Mon compte page. Tout cela est déclenché lorsque l'utilisateur se connecte à l'aide du filtre login_redirect. 

rôles) && is_array ($ utilisateur-> rôles)) // recherche les administrateurs si (in_array ('administrateur', $ utilisateur-> rôles)) // redirige-les vers l'emplacement par défaut return $ redirect_to;  else return home_url ('profile');  else return $ redirect_to;  add_filter ('login_redirect', 'tutsplus_redirect_on_login', 10, 3);

Une note rapide sur les emails sortants

Lorsque les utilisateurs s'inscriront sur votre site, ils recevront des courriels de confirmation. De plus, si un utilisateur oublie son mot de passe, il a la possibilité de le récupérer par courrier électronique. Il est donc important de donner à ces courriels un peu d'amour et d'attention si nous voulons que notre site d'adhésion soit tout ce qu'il y a à dire.. 

Maintenant, il y a plusieurs façons de le faire. Pour tous les puristes, vous pouvez utiliser les filtres WordPress pour changer le type de contenu de l’email et styliser vos emails - voir le Codex WordPress. Alternativement, il existe une multitude de plugins conçus à cet effet. 

Personnellement, j'aime bien utiliser Mandrill de MailChimp pour envoyer des courriels à partir de mes sites WordPress. Ce n'est pas trop compliqué à configurer et il est plein de fonctionnalités, l'une d'entre elles étant la possibilité d'appliquer des modèles / styles à vos emails sortants. 

Et après?

Dans la prochaine et dernière partie de la série, nous créerons une section de compte de base dans laquelle les utilisateurs connectés pourront modifier leurs informations. Nous souhaitons également que les administrateurs puissent modifier ces informations à partir de la zone d'administration de WP. Nous y ajouterons également des champs personnalisés..

Si vous avez des suggestions ou des questions, laissez un commentaire. Je ferai de mon mieux pour répondre rapidement. 

Choses à noter

Remarque: si vous téléchargez le code à partir du référentiel GitHub, il inclut tous les fichiers pour que votre thème soit opérationnel. L'idée est que vous pouvez récupérer le dépôt et exécuter les commandes Gulp et Bower nécessaires et vous serez absent! Si vous souhaitez uniquement les fichiers contenant du code spécifique à cette série, les fichiers sont répertoriés ci-dessous.. 

  • Tous les fichiers du répertoire admin  
  • lib / admin.php 
  • lib / membership.php
  • template-user-profile.php
  • templates / header.php