Accueil » WordPress » BuddyPress – Tutorial en mode pas-à-pas

BuddyPress – Tutorial en mode pas-à-pas

Il y a quelques jours, le WordCamp me donnait l’opportunité de parler de mon plugin WordPress préféré : BuddyPress. Lors de ma conférence, je vous ai présenté globalement ce puissant moteur de communautés.

Or le WordCamp, c’est aussi une rencontre communautaire, et je suis heureux d’avoir fait la connaissance de Fabrice avec qui j’ai beaucoup échangé pendant ces 2 journées dédiées aux amoureux de WordPress.

Il m’a notamment proposé de publier des "tutos" sur son site, et c’est pour moi l’opportunité de prendre le temps d’entrer un peu plus dans le détail de BuddyPress et ce de manière très opérationnelle.

Je vous propose donc une série d’articles pour découvrir BuddyPress en mode tutorial pas-à-pas. En effet, plus qu’un plugin, il s’agit d’un ensemble de composants modulables. Il est donc tout à fait possible de n’activer que certains d’entre eux pour coller à notre besoin.

 BuddyPress   Tutorial en mode pas à pas buddypress tuto part1

 

Dans ce 1er épisode, nous allons commençer par créer un annuaire de membres pour notre site...

@iMath

 

Episode 1: Mettre en place un annuaire de membres

WordPress Out of the box

Petit rappel de ce que nous propose WordPress pour organiser les membres de notre blog :

 BuddyPress   Tutorial en mode pas à pas wpformation tuto1 step 01 300x144
WordPress permet à l’administrateur du blog de lister ses différents inscrits depuis l’interface d’administration des utilisateurs. Il propose également à ces derniers de pouvoir renseigner un certain nombre d’informations et de gérer leurs éléments de connexion à l’aide d’une page de profil au sein de la zone d’administration de WordPress.

 BuddyPress   Tutorial en mode pas à pas wpformation tuto1 step 02 300x197
Cela suppose donc de diriger l’utilisateur dans la zone d’administration, et surtout, il n’est pas possible pour lui de lister les autres membres du blog. Nous allons donc voir comment BuddyPress permet de maintenir ces différentes opérations de personnalisation de profil au sein du front de votre blog et de leur donner la capacité de découvrir les différentes personnes qui comme lui se sont inscrites à votre blog. Mais pour cela, il faut installer BuddyPress !

 

Personnaliser son installation BuddyPress

Vous trouverez de nombreux tutoriels sur la question sur Internet, il y a notamment le site bp-fr.net qui propose un guide d’installation complet et des conseils pour maximiser la réussite de celle-ci. J’aborderai donc ce sujet très rapidement.

 BuddyPress   Tutorial en mode pas à pas wpformation tuto1 step 03 300x88
Depuis l’interface d’ajout des plugins, je ramène mes plugins préférés, j’adore cette nouvelle fonctionnalité que WordPress a dernièrement introduit. Comme illustré sur la capture, nous allons essentiellement nous intéresser aux fonctions d’extension de profil de BuddyPress dans la suite de ce tutoriel. Une fois téléchargé dons mon répertoire de plugins, je l’active. Un premier message m’invite à lancer l'"Installation Wizard".

 BuddyPress   Tutorial en mode pas à pas wpformation tuto1 step 04 300x170
Ce qui me fait penser que nous pouvons déjà personnaliser BuddyPress en intégrant la traduction française de ce plugin. ça tombe bien, elle est entretenue par bp-fr.net et est téléchargeable depuis son guide d’installation qui explique comment la mettre en place pour notre blog. A l’issue de la procédure, vous devez avoir le résultat suivant :

 BuddyPress   Tutorial en mode pas à pas wpformation tuto1 step 05 300x232

Les fichiers buddypress-fr_FR.mo et buddypress-fr_FR.po sont à déposer dans le répertoire bp-languages du plugin. Poursuivons notre installation pour atteindre l’étape "cruciale", celle du choix des composants à activer.

 BuddyPress   Tutorial en mode pas à pas wpformation tuto1 step 06 300x132
Pour mettre en place mon annuaire de membres, je n’ai besoin que des modules "Profils étendus" et "Informations de compte", je décoche donc tous les autres. Une fois ce choix validé, je laisse BuddyPress créer les pages dont il a besoin pour fonctionner selon mes préférences. Je pourrais à tout moment modifier leurs titres et slugs dans la mesure où ce sont des pages WordPress (modifiables depuis la zone d’administration des pages).

 BuddyPress   Tutorial en mode pas à pas wpformation tuto1 step 07 300x147

 

Je vous fais grâce des dernières étapes, et vous invite à vous reporter au guide d’installation si toutefois vous avez une hésitation au cours de celles-ci. Pour gagner du temps, j’opte pour le thème fourni par BuddyPress qui contient tous les templates et tags nécessaires à l’affichage de mon annuaire de membres.

 

Aperçu de notre annuaire de membres

Tada ! Tout est déjà en place. Mon blog dispose d’une page listant les inscrits de mon site et ce du côté front. Une liste déroulante me permet de filtrer cet annuaire pour afficher les membres selon leur date d’inscription ou par ordre alphabétique. Il y également un moteur de recherche à ma disposition. Cool;)

 BuddyPress   Tutorial en mode pas à pas wpformation tuto1 step 08 300x140

 

Ce qui est moins sympa, c’est que deux de mes membres n’ont pas de gravatar. Toutefois, BuddyPress intègre une gestion interne des avatars, il est donc possible qu’ils l’utilisent pour personnaliser leur image de profil.

 BuddyPress   Tutorial en mode pas à pas wpformation tuto1 step 09 300x170

 

Autre bénéfice lié à l’activation du composant "Informations de compte", c’est que l’utilisateur peut manager ses éléments de connexion directement depuis sa page de profil, en cliquant sur la navigation "Réglages". Il peut notamment modifier son mot de passe, son adresse email ou encore supprimer son compte.

 BuddyPress   Tutorial en mode pas à pas wpformation tuto1 step 10 300x239

Tiens betatest1 a personnalisé son avatar, perso, je trouve qu’il est très chouette :)

Si nous nous rendons à ce moment de la partie sur l’onglet profil du membre, les informations resteront très sommaire, en l’occurence seul le display name de l’utilisateur sera affiché. Il est temps d’enrichir tout cela grâce à notre composant "Profils étendus".

 

Inscrit, dis-moi qui tu es ?

Pour paramétrer de nouveaux champs de profil, l’administrateur du blog se rend dans l’interface de gestion des utilisateurs depuis son administration WordPress. En cliquant sur le sous menu "Config. des profils", il accède à l’interface d’édition des champ de profil des utilisateurs. La première chose que nous allons faire sera de modifier le nom par défaut du premier groupe de champ de profil pour "Infos persos".

En effet, il est possible de définir différentes sections de profil sachant que celle qui est typée "(Initial)" sera affichée par défaut et demander lors de l’inscription des nouveaux membres. Nous reviendrons sur ce dernier point plus tard.

 BuddyPress   Tutorial en mode pas à pas wpformation tuto1 step 11 300x226

Une fois que nous avons modifié notre section de champs de profil initial, nous allons ajouter un champ pour permettre à nos membres d’indiquer l’entreprise pour laquelle ils travaillent. Il s’agit pour cela de cliquer sur le bouton "Ajouter un nouveau champ".

 BuddyPress   Tutorial en mode pas à pas wpformation tuto1 step 12 172x300

Nous pouvons spécifier le titre du champ, lui ajouter une éventuelle description pour expliquer le type de données que nous attendons, puis choisir de rendre ce champ obligatoire, de personnaliser son apparence (dans cet exemple je garde un champ texte classique) ; nous pouvons également définir la visibilité par défaut des informations saisies en limitant cette dernière aux membres authentifiés par exemple ; enfin le dernier cartouche nous permet de forcer cette visibilité par défaut ou de laisser le choix aux membres de la personnaliser. Il ne nous reste plus qu'à "Enregistrer" notre nouveau champ de profil.

On peut également ajouter de nouvelles sections de profil en cliquant sur le lien "Ajouter une nouvelle section de champs" qui se situe juste à côté du titre de la page de "Config. des profils". Pour m’amuser j’ai créé une section "Réseaux" comme illustré ci-dessous:

 BuddyPress   Tutorial en mode pas à pas wpformation tuto1 step 13 300x222

 

Si désormais, nous nous rendons du côté front sur l’interface à la disposition des utilisateurs pour éditer leur profil, nous retrouvons bien notre section "Infos persos" avec le champ "Entreprise" qui est affichée par défaut et un bouton nous permet d’afficher la section "Réseaux".

 BuddyPress   Tutorial en mode pas à pas wpformation tuto1 step 14 300x165

Pour le fun, de retour dans l’administration WordPress, j’ajoute une nouvelle section que j’appelle WP Formation et qui contiendra une question sur l’utilité que perçoit le membre de ce fabuleux site ;)

 BuddyPress   Tutorial en mode pas à pas wpformation tuto1 step 15 300x191

Cela nous permet d’illustrer le paramétrage d’un champ de type "radio" et de voir comment il sera affiché dans la zone d’édition du profil du membre. Pour ce champ, j’ai également forcé sa visibilité à "Tout le monde", ce qui explique que le membre ne puisse la modifier. Affichons désormais la page de profil public du membre "WP Formation" pour voir le résultat final une fois les champs renseignés.

 BuddyPress   Tutorial en mode pas à pas wpformation tuto1 step 16 300x286

 

N’étant pas l’utilisateur WP Formation, je ne vois que sa page de profil public. Seul WP Formation et l’administrateur du blog ont accès aux pages d’édition de profil et de réglages de compte.

Vous avez remarqué les liens sur les valeurs des champs. Voici une fonctionnalité intéressante qui nous permet de lancer des recherches au sein de l’annuaire des membres pour connaître ceux qui trouvent WP Formation "Très utile" par exemple.

 BuddyPress   Tutorial en mode pas à pas wpformation tuto1 step 17 300x177

La gestion des nouvelles inscriptions

Si toutefois, depuis les réglages généraux de votre blog, vous autorisez l’inscription de nouveaux membres, alors BuddyPress se chargera d’afficher le formulaire d’inscription et de gérer ce processus en s’assurant de l'existence du nouvel inscrit.  BuddyPress   Tutorial en mode pas à pas wpformation tuto1 step 18 300x159

 

Pour cela, il utilise un mécanisme d’activation du compte. Suite à l’envoi du formulaire d’inscription, un mail d’activation est dirigé sur l’email renseigné.

 BuddyPress   Tutorial en mode pas à pas wpformation tuto1 step 19 300x207

 

Une fois que le membre aura cliqué sur ce lien alors, son compte sera validé. S’agissant des champs demandés dans ce formulaire, on retrouve ceux qui sont indispensables bien entendu (emails, login, mot de passe), et la section de profil typée "(Initial)" comme évoqué dans notre précédent chapitre.

 

Fin de la première partie

Voilà ! Grâce à BuddyPress, nous proposons à nos abonnés des zones dédiées au sein de notre blog leur permettant d’en dire un peu plus sur eux. Ils peuvent également effectuer des recherches dans l’annuaire pour visualiser les autres utilisateurs de votre site.

Enfin, il leur est également possible de connaître ceux avec qui ils ont des points communs et pourquoi pas devenir "Amis" !

Prochain épisode : L'annuaire de membres évolue, mise en relation et messagerie privée.

 

 BuddyPress   Tutorial en mode pas à pas

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+.

18 commentaires

  1. Je serais le premier à commenter cet excellent article ;)

    Encore merci Mathieu, pour cet excellent tuto sur un plugin pas assez utilisé, BuddyPress. Bravo pour tout le travail que tu fais pour la communauté!!!

  2. Excellent ! Enfin, des tutoriels sur BuddyPress... il faut bien le dire que les ressources francophones sont très peu nombreuses. Tu viens combler un gros vide Mathieu, alors good job !

  3. Salut Fabrice,
    merci pour tes compliments et de me permettre de promouvoir, "démystifier" ce plugin au sein de ton excellent blog ;)

  4. Je m'en servais un moment et puis j'ai abandonné. Le problème de buddypress c'est qu'il n'y a pas assez de thème et quand il y en a ils sont à moitié bugué :S

  5. Hello blog ipad,

    J'en parlerai dans le dernier épisode de cette série de tutos, mais l'histoire de spoiler, avec la prochaine version majeure de BuddyPress (la 1.7), tout thème WordPress devrait être en mesure d'accueillir les composants BuddyPress de manière optimale !!

  6. Je suis entrain de découvrir justement Buddypress et pour le moment j'en suis satisfait.
    Il y a beaucoup de chose à faire donc j'ai hâte de lire tes prochains articles sur la question :)

  7. Salut Arnaud,

    Excellent choix et merci pour ton commentaire, j'espère satisfaire ta curiosité lors des prochains tutoriels ;)

  8. Je commence à accumuler des membres sur mon site. En fait, je suis un peu débordé par la multitude des inscrits. Je suis en train de chercher des moyens plus rapides pour gérer ses nouvelles inscriptions. Le plug-in Buddypress de WordPress me paraît intéressant, car il va prendre en charge l’envoi de mail d’activation dans l’adresse mail du nouveau membre. Cela me permettra, j’espère, d’économiser mon temps.

  9. Bonjour Océane,
    Merci pour ton intérêt pour BuddyPress. Je pense que le choix d'utiliser ce plugin ne doit pas reposer uniquement sur une de ses fonctionnalités, et en l’occurrence son mécanisme de gestion des inscriptions. En choisissant BuddyPress, tu offres à tes membres un nouvel environnement dans le front de ton site pour les organiser et leur permettre d'éventuellement échanger entre eux. C'est un des objets de mon prochain tutoriel.

  10. Bonjour !
    je viens de découvrir les possibilités incroyables de buddypress. Mais je suis coincée par un problème assez terre à terre (et je ne sais pas faire de programmation etc) : comment créer une page d'inscription (ou un lien vers une page) sur ma page d'accueil pour gérer les inscriptions de personnes qui ne sont pas encore membre du site ? MErci d'avance !

  11. Bonsoir Stéphanie,
    En fait il suffit d'activer l'option "tout le monde peut s'enregistrer" dans tes réglages généraux de WordPress. Ensuite en fonction de ta configuration BuddyPress, une page ayant pour nom "register" a été créée, tu peux la renommer si tu le souhaite et ensuite, tu n'as plus qu'à ajouter un lien vers elle : http://bp-fr.net/inscription par exemple
    A+

  12. Bonjour, est-il possible d'intégrer un formulaire de connexion / login dans une page du site (sans passer pa wp-login) ?
    Merci d'avance de votre aide

  13. Bonjour
    Quand je creer ma page pour l'inscription comme indiqué et que je vais sur mon site et clic sur la page Inscription je retourne sur ma page d'accueil le probleme et toujours present comment faire

  14. salut imaths,
    déjà merci pour ce tuto , j'ai un soucis avec la création de compte, en effet lorsqu'un utilisateur se créer un compte après avoir cliquer sur le bouton "poursuivre l'inscription" sur la page y'a marqué "vous recevrez un email pour activer votre compte..." mais il ne reçoit jamais l'email d'activation de compte, j'ai ressayé plusieurs fois mais rien n'y fais si y'a une solution pour régler ce soucis je suis preneur car cela m’empêche d'avancer dans mon projet.
    merci d'avance

  15. Salut Dcarter, à mon avis tu dois avoir un problème de paramétrage de la fonction mail de ton serveur. En tant qu'admin, si tu actives les notifications email en cas de nouveaux commentaires, les reçois tu ?

  16. Bonjour, j'ai exactement le même problème que dcarter... et je reçois bien les notifications email....

  17. Bonjour imath,

    j'ai monté un bp, mais j'ai un souci pour afficher la liste des membres complètes, quand je clique sur la page du répertoire (je suis admin et connectée), cela n'affiche que les membres qu j'ai mis dans mes amis. et si je demande via le menu déroulant 'par rordre alphabétique', pareil, la liste est restreinte à "mes amis".
    il n'y a pas de moyen simple d'afficher par défaut tout le monde ??

    merci pour ton aide.

    cécile

Et si vous laissiez votre commentaire ?



Recherches liées : " buddypress, tutoriel buddypress, exemple buddypress"