Permettre aux futurs membres de sélectionner leur type de membre #BuddyPress dés leur inscription sur votre site communautaire #WordPress

Publié le

par

Photo de Aaron Burden

Cet article est ma réponse à la question que Bettina m’a posée le 29 mars dernier depuis le formulaire de contact de ce site. J’ai pensé que cette dernière pourrait également intéresser celles et ceux d’entre vous qui ont l’excellente idée de maintenir un site WordPress communautaire motorisé par BuddyPress.

Comment ajouter au formulaire d’inscription la possibilité aux membres de choisir directement leur « type de membre » ?

Bettina

PS : si les explications vous barbent, vous pouvez directement récupérer le code à intégrer dans le fichier /wp-content/plugins/bp-custom.php de votre site.

Types de membre ?

C’est une fonctionnalité de BuddyPress, l’extension qui dynamise vos sites communautaires WordPress, qui a été introduite à l’occasion de version 2.2 il y a un peu plus de 6 ans. Elle repose sur une taxonomie qui vous permet d’organiser/classer les membres de votre communauté un peu comme le font les catégories pour vos articles. La fonctionnalité a donc été conçue pour permettre à l’administrateur de la communauté de pouvoir faire ce classement.

Dans la question posée, il s’agit de contrarier temporairement ce principe pour permettre à un futur membre de sélectionner son futur type de membre.

La procédure d’inscription dans BuddyPress ?

BuddyPress a systématisé depuis sa version 2.0 la procédure utilisée par la configuration multisite de WordPress : lorsqu’un utilisateur s’inscrit, son compte n’est pas immédiatement créé. Les éléments nécessaires à cette création sont stockés dans une table intermédiaire et utilisés lorsque l’utilisateur active son compte grâce au lien d’activation qu’il reçoit par email, une fois son inscription terminée.

Création des types de membre

Depuis la version 7.0 de BuddyPress, il est possible de créer ces types directement depuis un écran spécifique de l’administration de votre site WordPress. Ceci étant dit, il est toujours possible d’utiliser du code pour effectuer cette création. C’est ce que j’ai fait dans le code que je partage avec vous aujourd’hui pour solutionner le besoin de Bettina. Vous retrouverez donc dans ce dernier une fonction que vous pouvez zapper si vous préférez utiliser l’interface d’administration évoquée plus tôt.

Petite précision : pour être certain que le code ne s’exécutera que si BuddyPress est actif, nous allons l’écrire dans le fichier /wp-content/plugins/bp-custom.php de votre site. Faire différemment, comme l’écrire dans le functions.php de votre thème est très risqué. En effet, si vous désactivez BuddyPress il y a de fortes chances que l’outil de santé de votre site vous reproche une erreur fatale. Si vous changez de thème, même si c’est moins grave, vous risquez de passer une demie-heure à vous demander pourquoi il n’est plus possible de sélectionner un type de membre dans votre formulaire d’inscription…

Injecter un nouveau champ dans le formulaire d’inscription

Il y a 2 façons de procéder. Ceux qui ont une sensibilité de créateur de thèmes et qui maîtrisent le site sur lequel sera utilisé le code peuvent profiter de l’API de compatibilité avec les thèmes WordPress de BuddyPress en recopiant le gabarit de l’inscription utilisé par l’ensemble des gabarits BuddyPress actif sur leur site dans le dossier wp-content/themes/NomDuThème/buddypress/members/ de leur thème :

  • si « BP Nouveau » -> wp-content/plugins/buddypress/bp-templates/bp-nouveau/buddypress/members/register.php
  • ou si « BP Legacy » -> wp-content/plugins/buddypress/bp-templates/bp-legacy/buddypress/members/register.php

Depuis cette copie il suffit de modifier le template pour insérer le balisage HTML de la fonction bettina_account_member_type_field() et concevoir les fonctions pour la partie dynamique du balisage dans le fichier bp-custom.php que nous allons écrire au fur et à mesure.

Pour moi et ceux qui sont plus des créateurs d’extensions dans l’âme, nous allons utiliser un des nombreux crochets ou « hooks » qui sont disponibles dans BuddyPress pour injecter les éléments nécessaires sous le dernier champ de profil généré nativement par BuddyPress. Dans le cas présent il s’agit de l’action bp_signup_profile_fields.

J’attire votre attention sur la ligne 23 du code ci-dessus. L’action dynamique 'bp_' . $member_type_key . '_errors', dans laquelle $member_type_key correspond à l’attribut name de votre champ, sera utilisée pour afficher des messages d’erreur si toutefois la valeur choisie pour votre champ est invalide.

À ce stade, si vous vous déconnectez de votre site (je précise car beaucoup d’utilisateurs novices nous envoient régulièrement des rapports d’anomalie comme quoi ils n’arrivent pas à visualiser le formulaire d’inscription malgré qu’ils copient son URL dans la barre d’adresse de leur navigateur. Tout comme WordPress, nous pensons qu’un utilisateur n’a pas besoin de se réinscrire…) et que vous vous rendez sur la page d’inscription générée par BuddyPress, vous retrouverez comme le montre l’encadré de la capture d’écran ci-dessus la liste déroulante contenant les types de membre disponibles que nous avons codé plus tôt.

Valider le type de membre sélectionné par le futur membre

Même si le balisage HTML ne permet pas de choisir autre chose que les types que votre champ rend sélectionnables, je vous recommande de systématiquement penser à cette étape car il est très facile de modifier la source de la page affichée pour ajouter par exemple un nouveau choix que vous n’aviez pas prévu.

Pour taper l’incruste dans le processus de validation de BuddyPress, nous allons utiliser le crochet bp_signup_validate pour qu’il joue notre fonction bettina_signup_validate_member_type() (voir la ligne 25 du code ci-dessous).

Ensuite, il s’agit de récupérer l’instance principale de BuddyPress afin d’éventuellement ajouter à son object WP_Error, lequel stocke les erreurs d’inscription (buddypress()→signups→errors), notre message d’erreur (la ligne 13 montre l’exemple de la soumission d’un type de membre vide).

S’il existe une erreur dans l’objet les stockant, BuddyPress interrompt l’inscription et ramène le futur membre sur le formulaire d’inscription pour qu’il revoit sa copie.

Etape facultative pour les utilisateurs de l’ensemble des gabarits BuddyPress « BP Legacy » : le balisage de l’erreur.

Je me suis aperçu en rédigeant le code partagé dans cet article que le message d’erreur issu d’un échec à notre étape de validation ne s’affichait pas avec la même présentation que ceux générés par l’ensemble des gabarits BuddyPress « BP Nouveau », en y regardant de plus prêt je me suis rendu compte qu’en plus il était plutôt complexe de personnaliser cet affichage malgré que BuddyPress ait prévu un crochet pour le faire. Du coup, j’en ai profité pour améliorer ça afin que nous puissions effectuer cette personnalisation en fonction du champ concerné. Il faudra ceci dit attendre la publication de la version 8.0.0 de BuddyPress pour en tirer profit grâce au code ci-dessous.

Insérer la valeur du type de membre choisi dans les métadonnées d’inscription.

Si vous n’étiez pas nés lorsque j’ai expliqué la particularité de la procédure d’inscription de la configuration multisite de WordPress, voici ce qu’il faut se rappeler.

Avant de créer le membre sur votre site, BuddyPress va stocker les données nécessaires à cette création dans une table intermédiaire laquelle prévoit (entre autres) un champ dont le contenu est sérialisé pour y loger des métadonnées réutilisables une fois que le membre active son compte. Ce sont ces métadonnées que nous devons cibler pour garder une trace du choix du type de membre effectué lors de l’inscription.

Pour cela, il s’agit d’utiliser le crochet bp_signup_usermeta pour intégrer ce choix aux métadonnées juste avant leur écriture dans la base de données de votre site. C’est tout l’objet du code qui suit.

Nous somme prêts à accueillir le membre comme il se doit en restant fidèle à son choix puisque nous pourrons récupérer, le moment venu, la valeur attachée à la clé 'member_type' des métadonnées d’inscription.

Assigner le type de membre au nouveau membre consécutivement à son activation

C’est l’étape ultime : il s’agit d’intercepter le moment où BuddyPress peut nous confirmer que le membre a bien été activé pour immédiatement lui assigner le type de membre qu’il a choisi lors de son inscription. Pour cela, nous nous accrochons à bp_core_activated_user pour héroïquement nous en occuper !

Dés lors si vous vous rendez dans l’administration de vos comptes, vous aurez la satisfaction (normalement !) de voir que c’est bien le cas.

Tada !