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

Plus tôt dans la série, nous avons expliqué comment personnaliser les formulaires de connexion et d’inscription WordPress. Nous avons ensuite ajouté des champs personnalisés à notre formulaire d'inscription. Aujourd'hui, dans la troisième et dernière partie de cette série, nous verrons comment développer une section «Mon compte» pour les utilisateurs de votre site, grâce à laquelle les utilisateurs peuvent modifier les informations de leur profil.. 

Mise en page

La première chose à faire est de créer un modèle de page pour héberger notre contenu. J'aime préfixer mes modèles de page avec le mot «modèle». Donc mon fichier s'appelle template-user-profile.php et l'ouverture PHP ressemble à ceci: 

Je l'ai enregistré à la racine de mon répertoire de thèmes. Si vous n'êtes pas familier avec les modèles de page WordPress, je vous suggère de lire le lien ci-dessus. Ils sont extrêmement maniables. 
À présent, passons à l’arrière de WordPress et créons une page nommée «profil». Attributs de page meta box lui assigner notre nouveau modèle de page. Une fois que vous avez publié cette page, vous devriez avoir une page blanche au début: http: // votredomaine / profil. 
Maintenant, pour injecter du contenu dans notre page. Nous voulons que la structure soit le contenu de la page (c'est-à-dire tout ce qui est écrit dans le WordPress WYSIWYG), puis notre formulaire de profil à suivre. 
Il est souvent utile d’obtenir le code de page.php et de l’utiliser comme point de départ pour vos modèles de page. Ce code diffère un peu en fonction de votre thème, mais il contiendra probablement une boucle qui crache du contenu de page. La partie contenu est normalement récupérée à l’aide de la fonction get_template_part () de WordPress. Juste en dessous de l'endroit où le contenu a été récupéré, insérons notre formulaire HTML. Donc, pour récapituler:
 
Copiez et collez le code de page.php dans notre modèle de page.
 
Trouver où le contenu est en cours de sortie.
 
Juste en dessous, insérez le code suivant et ensuite nous le parcourrons:
 
  
   
 
   
 
   
 
   
 
   
 
   
  
Il n'y a rien de fou ici: le formulaire utilise le balisage Bootstrap car notre thème est construit sur Bootstrap. Il convient également de noter que le formulaire est envoyé à l'aide de la méthode POST et que nous avons inclus un wp_nonce_field: il s'agit d'un type de jeton de sécurité qui aide à prévenir les attaques malveillantes. Si vous ne connaissez pas encore WordPress's Nonces, je vous conseillerais de lire cet article.. 
Récupérer les données
Avec cela en place, vous devriez avoir un formulaire sur le devant du site, mais ça ne fait pas grand chose. Nous voulons qu'il affiche les données que nous avons pour l'utilisateur connecté. Vous avez peut-être remarqué que les attributs de valeur de notre formulaire font écho à certains PHP. 
valeur = "Prénom; ?> "
Maintenant que $ user_info L’objet n’existe pas car nous n’avons pas encore écrit le code, commençons par là. Collez le code suivant avant notre formulaire dans template-user-profile.php.
En utilisant certaines fonctions natives de WordPress, il obtient l'ID de l'utilisateur actuel, ce qui nous permet d'obtenir les données de l'utilisateur. Ceci est stocké dans un objet appelé $ user_info, et comme démontré ci-dessus, nous pouvons récupérer les données utilisateur assez facilement. Pour voir toutes les données stockées dans cet objet, vous pouvez exécuter un var_dump ainsi: . Cela peut être utile pour le débogage ou simplement pour voir à quoi vous pouvez accéder.. 
Traitement des données
Le puzzle comporte une dernière pièce, à savoir le traitement des données, permettant ainsi aux utilisateurs de modifier leurs profils. Afin de garder les choses organisées, j'ai mis le code d'adhésion dans un fichier qui porte bien son nom membership.php. C'est dans le lib répertoire et a été inclus dans notre fichier functions.php. Ceci fait, ouvrez le fichier membership.php que vous venez de créer dans un éditeur de code et définissons la fonction qui traitera les données des utilisateurs.. 
D'abord, passons rapidement en revue la logique. Lorsque le bouton de soumission est activé, nous voulons vérifier que notre champ nonce a été envoyé. Cela permet de vérifier que les données proviennent du bon endroit.. 
Si cette condition est remplie, nous souhaitons obtenir l'ID de l'utilisateur actuel, car nous en aurons besoin pour stocker les données. Ensuite, nous voulons organiser nos données dans une structure que WordPress aime. Dans ce cas, il s’agit d’un tableau avec des clés spécifiques. Avant de sauvegarder les données, nous souhaitons également les valider et les désinfecter. Et enfin, nous voulons afficher des messages à notre utilisateur, de succès ou d’erreurs..
Et le code pour tout ce qui ressemble à ceci:
 sanitize_text_field ($ _POST ['first_name']), 'last_name' => sanitize_text_field ($ _POST ['last_name']), 'user_email' => sanitize_email ($ _POST ['email']), 'twitter_name' => sanitize = $ _POST ["twitter_name"]), "user_pass" => $ _POST ["pass1"],); if (! empty ($ user_data ['user_pass']))) // Validez les mots de passe pour vérifier qu'ils sont identiques. if (strcmp ($ user_data ['user_pass'], $ _POST ['pass2']))! == 0) wp_redirect ('? password-error = true'); sortie;  else // Si les champs de mot de passe ne sont pas définis, n'enregistrez pas. unset ($ user_data ['user_pass']);  // Sauvegarder les valeurs dans la publication. foreach ($ user_data as $ key => $ value) $ results = "; // http://codex.wordpress.org/Function_Reference/wp_update_user if ($ key == 'nom_ twitter') $ results = update_user_meta ($ user_id, $ key, $ value); unset ($ user_data ['twitter_name']); elseif ($ key == 'user_pass') wp_set_password ($ user_data ['user_pass'], $ user_id); unset ($ user_data ['user_pass']); else // Enregistrez les valeurs restantes. $ results = wp_update_user (array ('ID' => $ user_id, $ key => $ value)); if (! is_wp_error ($ results) ) wp_redirect ('? profile-updated = true'); wp_redirect ('? profile-updated = false'); exit; add_action ('tutsplus_process_user_profile', 'tutsplus_process_user_profile_profile_data');
Maintenant, vous remarquerez peut-être que les données sont en cours d’enregistrement à l’aide de trois fonctions différentes de WordPress:
 
 update_user_meta () pour le nom Twitter
 
 wp_set_password () pour le mot de passe
 
 wp_update_user () pour les données restantes
 
Et vous avez raison de remettre en question cela. Fondamentalement, les métadonnées personnalisées (le nom Twitter) doivent être traitées à l'aide de la fonction relative et non de la fonction utilisateur de mise à jour générale. Quant au mot de passe, alors qu'il peut fonctionner avec wp_update_user (), J'ai eu des problèmes avec elle et préfère utiliser cette méthode. N'oubliez pas qu'il ne s'agit que d'un guide et que le code vise souvent à démontrer différentes méthodes pour répondre à vos besoins.. 
Bon, maintenant nous avons notre fonction pour traiter les données, mais elles ne sont appelées nulle part. À la fin de notre fonction, vous pouvez voir qu’une action lui est associée. Donc, pour appeler cette fonction, il suffit d’utiliser le WordPress fourni: do_action () ;. Collez donc cette ligne au-dessus de votre formulaire dans le modèle de page de profil utilisateur créé précédemment:
Avec cela en place, lorsque nous soumettons notre formulaire, il devrait parcourir notre fonction et traiter les données.. 
Messages d'erreur et de réussite
Notre formulaire de profil devrait sauvegarder ou rejeter les données maintenant. Peut-être que les deux mots de passe n'étaient pas les mêmes et ne sauvegardaient pas. Il n'y a pas de message pour donner les commentaires des utilisateurs. Sauvons le chagrin de nos utilisateurs et leur transmettons des messages. 
Dans notre tutsplus_process_user_profile () vous avez peut-être remarqué qu'il ajoute différentes chaînes de requête à l'URL en fonction du résultat du traitement. Donc, si tout est enregistré et réussi, notre URL sera ajoutée avec ?profile-updated = true, et ceux-ci varient en fonction des résultats. Ce que nous devons faire, c'est déclencher un message basé sur ces réponses. 
Ci-dessous, j'ai utilisé un filtre pour saisir le contenu et, grâce à la magie de $ _GET nous pouvons vérifier les paramètres et cracher ce que nous devons. 
D'accord, pas tout à fait là-bas, nous utilisons une fonction appelée tutsplus_get_message_markup () ci-dessus, mais nous ne l'avons pas encore défini. Il faut deux paramètres:
 
une chaîne: le message à afficher
 
une chaîne: la gravité de l'alerte à afficher en fonction de Bootstrap  
 
Alors définissons notre tutsplus_get_message_markup () une fonction:
'; $ output. = ''; $ output. = ''; $ output. = ''; $ output. = '
'. $ message. '
'; $ output. = '