BuddyPress en mode pas-à-pas – Episode 2

Voici le deuxième épisode de notre série d’articles pour découvrir BuddyPress en mode pas à pas. Précédemment dans l'épisode 1, nous avons mis en place un annuaire de membres en profitant des composants "Profils étendus" et "Informations de compte".
buddypress_tuto-part2

 

L'annuaire de membres evolue, mise en relation et messagerie privee.

Nos membres ont donc pu personnaliser leur profil, affiner leurs réglages de compte et commencer à parcourir l’annuaire pour découvrir les autres inscrits sur le site.

 

"C’est pas mal, MAIS ça serait bien si..."

J’imagine que vous êtes, comme moi, habitués à ce type de feedback ;) A peine remis de nos travaux pour mettre en place notre répertoire de membres que certains en veulent déjà plus, ahah!!!

Alors, allons-y ! Enrichissons notre site de nouvelles fonctionnalités dirigées vers l’utilisateur, grâce à deux nouveaux composants de BuddyPress.

 

Modification de nos reglages BuddyPress

Pour cela, il suffit de nous rendre dans les réglages de BuddyPress depuis l’interface d’Administation de WordPress. Depuis l’onglet "Composants", nous allons activer les "Connexions entre amis" et la "Messagerie privée".

Modification des réglages BuddyPress

Après avoir sauvegardé ces nouveaux paramètres, on s’aperçoit dés l’administration à l’aide de la WordPress Admin Bar des premiers changements qui sont intervenus.

Modification réglages BP

Nous disposons désormais de deux nouvelles navigations : Amis et Messages, lesquels embarquent chacune une sous navigation.

Si on bascule sur le front de notre blog, on constate effectivement un certains nombres de nouveautés. D’abord, l’environnement de profil du membre dispose de deux nouveaux onglets : l’un lui permettant de gérer ses mises en relation, ou plus simplement dit, ses amis ; l’autre lui donnant accès à sa messagerie privée.

BP ajouter en tant qu’ami

Ensuite, désormais, quand notre membre consultera l’annuaire, il s’apercevra qu’à droite de chaque utilisateur, il y a désormais un bouton permettant de les ajouter "en tant qu’ami". Enfin, lorsqu’ils s’intéresseront au profil public d’un autre membre, ils découvriront qu’ils sont non seulement en mesure de se lier avec lui mais aussi de lui envoyer un message privé.

 

Le mecanisme de mise en relation

Avant de découvrir la messagerie privée, étudions comment fonctionne le composant de "connexions entre amis". Imaginons que l’utilisateur WP Formation décide de devenir ami avec Beta Test3. Sitôt le bouton cliqué, une requête Ajax est envoyée et le bouton change pour permettre d’éventuellement annuler cette demande.

mécanisme de mise en relation BuddyPress

Ensuite, par défaut (nous verrons que ce comportement est modifiable par l’utilisateur), un email est envoyé à Beta Test3 pour lui indiquer que WP Formation souhaite entrer en contact avec lui. Cet email contient notamment un lien vers la liste des demandes d’ajout de Beta Test3 et un lien pour consulter le profil de WP Formation.
En passant, cette interaction entre deux de nos utilisateurs génère donc potentiellement une visite sur notre site sans qu’on ait eu besoin d’agir ;)

Lorsque Beta Test3 se connecte sur notre blog, il aperçoit dans la WP Admin Bar qu’elle contient un chiffre dans un rond bleu. A son survol, un lien propose de directement accéder à son environnement de gestion des demandes de mise en relation. Ce mécanisme, BuddyPress l’appelle les "screen notifications". Il l’utilise assez régulièrement pour informer l’utilisateur qu’un évènement le concerne et, pour lui simplifier la vie, lui propose un raccourci vers cet évènement.

Beta Test3 est super heureux que WP Formation souhaite devenir son ami, aussi, une fois dans son interface de gestion des demandes de contact, il s’empresse d'accéder à cette requête ;)

Accepter demande de contact BuddyPress

Pour cela il clique sur "Accepter" et déclenche une nouvelle requête Ajax qui enregistre que cette amitié est partagée et en avertit l’initiateur par l’envoi d’un email et d’une "screen notification".

Lorsque WP Formation se rendra dans la navigation "Amis" de son profil, il verra désormais Beta Test3 et il lui sera alors beaucoup plus simple de consulter de nouveau son profil. Bien entendu, il pourra, à tout moment, et tout comme Beta Test3 d’ailleurs, rompre cette amitié depuis les mêmes zones où il pouvait la créer (profil du membre, annuaire des membres) et depuis sa liste d’amis dans son profil.

Gestion des contacts BuddyPress

 

Organisons les premiers echanges entre nos membres.

Nous découvrirons dans de prochains tutoriels d’autres manières plus “visibles” d’organiser les échanges au sein d’une communauté. Pour l’heure, intéressons nous au composant de messagerie privée de BuddyPress. On pourrait le comparer aux DM de twitter, la limitation en nombre de caractères en moins.

Son premier avantage est de permettre aux utilisateurs d’échanger de manière privée sans divulguer leur adresse email personnelle. Localisée dans le profil privé de l’utilisateur, cette messagerie gardera, en outre, la trace des éléments envoyés et reçus et propose une navigation pour composer de nouveaux messages.

Lorsque deux membres ne sont pas amis, il est possible, on l’a notamment observé plus tôt, de lui envoyer un message privé. Voici un comportement qui diffère de Twitter.

Echanges entre membres BP

Ainsi, en cliquant sur le bouton "Message privé" sur le profil public d’un membre qu’il soit ami ou non, nous atteignons l’outil de composition des messages.

Après avoir personnalisé notre sujet et son contenu, le message intégrera les éléments reçus de la messagerie privée de notre destinataire, d’une part, et déclenchera une notification email et une screen notification d’autre part.

Nouveau Message reçu BP

 

En cliquant sur le sujet du message, nous l’ouvrons et pouvons poursuivre la conversation privée.
Petite parenthèse, en rédigeant ce tutoriel, je me suis dit :

"Ça serait pas mal si (et oui je suis aussi un utilisateur!) BuddyPress permettait aux utilisateurs d’indiquer s’ils autorisent tout membre connecté ou seulement ses amis à le contacter via la messagerie privée.. Un peu dans le même esprit que pour la visibilité de certains champs de profil.."

J’ai vu que cela avait inspiré des "collègues" créateurs de plugins BuddyPress, on peut notamment croiser ces deux plugins sur le repository de WordPress :

Je n’ai pas testé ces plugins, mais, je me suis amusé à créer deux fonctions pour permettre à un administrateur de réserver les messages privés aux membres en relation. Si ça vous intéresse, il suffit de les coller dans le functions.php de votre thème actif ;)

Lorsque nous souhaitons écrire en privé à nos amis, on peut également le faire directement depuis l’interface de composition des messages. Pour cela, depuis le champ destinataire, un dispositif d’auto-complétion recherche parmi nos amis les noms d’utilisateur qui matchent ce qu’on commence à écrire.

dispositif d’auto-complétion

Un autre avantage de ce composant est qu’il permet aux membres d’organiser, en quelque sorte, des bulles de conversation privée à plusieurs. Pour cela, il suffit d’ajouter un autre nom d’utilisateur au champ destinataire, de la même manière qu’on ajouterait une autre adresse email dans un logiciel de messagerie électronique.

Dans l'exemple ci-dessous, WP Formation a engagé une conversation privée avec imath et Beta Test3.
conversation privée à plusieurs BP

La dernière fonctionnalité de ce composant est réservée à l’administrateur du site. En effet, lorsque ce dernier se rend dans son interface de rédaction des messages privés, il dispose d’un champ "case à cocher" pour indiquer que le message concerne l’intégralité des membres du site.

case à cocher BP

Dans ce cas, le message ne sera pas diffusé dans les messageries privées des membres ni relayé par email. Il s’agit en fait d’une alerte qui sera affichée dans la sidebar du site et qui le restera jusqu’à ce qu’elle soit fermée par le membre ou désactivée / supprimée par l’administrateur depuis son interface de gestion des alertes.

gestion des alertes messagerie BuddyPress

Dans une précédente vie, je me servais notamment de cette fonctionnalité pour prévenir les membres de la communauté qu’une opération de maintenance du site était planifiée.

 

Retour sur le composant "Informations de compte"

Dans le précédent tutoriel, nous avons découvert que ce composant permettait aux utilisateurs de gérer directement, depuis leur page de profil privée, leurs éléments de connexion ou d’éventuellement supprimer leur compte.

Tout au long de ce tutoriel, nous avons vu qu’en plus de la "screen notification", et par défaut, une notification email était envoyée à l’inscrit si une demande de contact le concernait ou était acceptée, et si un message privé lui avait été envoyé.

BuddyPress Composant “Informations de compte”

Aussi, depuis les réglages des alertes email de sa page de profil privée, l’utilisateur peut modifier ce comportement par défaut en indiquant ses préférences.

 

Fin De La deuxieme Partie

Voilà qui conclut notre deuxième épisode ! A l’issue de notre premier épisode, nous avons vu que, grâce à BuddyPress, nos membres disposaient de zones dédiées leur permettant de personnaliser leur profil et leurs réglages, pouvaient consulter les profils publics des autres inscrits au site. Désormais, ils peuvent se mettre en relation avec certains d’entre eux et engager des conversations privées.
Dans le prochain épisode, nous verrons comment BuddyPress peut, en plus, nous permettre de leur proposer de se regrouper autour de thèmes communs dans des communautés privées ou publiques au sein de notre site pour éventuellement y échanger à l’aide d’un autre outil de discussion. Voir la suite : Des quartiers pour organiser les discussions de nos Membres.
A propos de l'auteur iMath : Amoureux de WordPress et de BuddyPress depuis 2010, je m'amuse à créer des extensions pour ces deux fabuleux outils. Vous pouvez me retrouver sur mon site iMathi.eu, sur Twitter ou Google+.

A propos de l'auteur...

WPFormation

Fabrice Ducarme, formateur WordPress je suis éditeur, auteur et fondateur du site WP Formation.com. Conférencier lors des WordCamp Paris 2013 & 2015 ainsi qu'au WP Tech Nantes 2014, je vous propose plus de 400 articles & tutoriaux à propos de WordPress, mes trucs & astuces mais aussi des coups de gueule...

7 commentaires pertinents à ce jour ;)

  • F. Boulay dit :
    Merci, toutes tes explications nous font gagner un temps précieux !
    C’est un vaste chantier en tout cas, qui parait très riche (et éventuellement bien chronophage ?)
  • imath dit :
    Hello F. Boulay, you’re welcome et quand on aime, le temps ne compte plus ;)
  • Arnaud dit :
    Merci pour ce deuxième épisode sur Buddypress :) il y a pas beaucoup de tuto sur le sujet et ton article détail bien, et le composant « information de compte » est vraiment utile.
  • imath dit :
    Merci pour ton feedback Arnaud, Stay tuned 4 next episode ;)
  • parrainoo dit :
    Bonjour,

    J’ai une base d’utilisateurs (> 500) sur mon site Web.

    J’ai ajouté Buddypress, mais les anciens utilisateurs ne sont pas considérés comme des utilisteurs Buddyress …

    Comment faire ?

    Merci d’avance

    Cordialement,

    Fabien

  • Sincever dit :
    Salut imath! Tout d’abord, merci pour cette explication vraiment bien détaillée. Par contre dans mon cas, malgré le fait que « Connexions entre amis » et « Messagerie privée » soient activés dans les « Composants », les deux fonctionnalités ne s’affichent pas sur http://www.musiQCnumeriQC.ca

    J’ai essayé de décocher et recocher mais rien ne change. J’imagine donc que cela vient de mon thème puisqu’avec un autre thème en prévisualisation, cela semble s’afficher. Comment remédier à ce problème, d’après toi?

  • LEMAN dit :
    Bonjour,
    J’ai une page profil très moche. Vous pourrez voir dans l’onglet « membres ». Un problème de CSS certainement.
    Pouvez-vous m’aider?
    Merci
Tweet51
Share2
Share
Buffer1