Réception, la page d’accueil des membres de votre communauté #BuddyPress personnalisable à l’aide de l’éditeur de blocs de #WordPress

Publié le

par

porte d'une salle de réception
Souvenir d’une soirée de contribution à WordPress chez Mozilla France

Le 20 avril 2020 à 6h43, LP me contacte depuis cette page pour me faire part de son projet de site WordPress et de son intuition quant à l’intérêt d’utiliser l’extension BuddyPress pour proposer des pages de présentation des membres de ce site et pour gérer leurs discussions au sujet d’une nouvelle pratique concernant son métier. À l’issue de la description de son projet, il me demande si j’ai le temps de l’aider ou de lui conseiller une série d’articles sur le sujet.

Comme je l’explique dans la page qui vous permet de m’encourager, je souhaite garder ma liberté de choix quant à mes contributions aux projets qui gravitent autour de WordPress. En contrepartie, lorsque je décide d’y contribuer c’est précisément sans contrepartie. J’ai cette chance de gagner ma vie autrement et de pouvoir rester un amateur de WordPress dans le sens « hobbyist », alors j’en profite !

Le projet de LP est, de mon point de vue, un cas d’usage intéressant pour BuddyPress. L’idée centrale est de proposer aux client·e·s et aux professionnel·le·s de s’entretenir alternativement lorsqu’il est temporairement complexe/impossible de le faire dans la vraie vie (exemple : lors d’une période de confinement). Ces client·e·s sont des visiteur·se·s du site et les professionnel·le·s en sont ses membres. Le projet prévoit des fonctionnalités annexes, mais aujourd’hui je vais me concentrer sur cette idée centrale car j’ai récemment terminé l’extension de BuddyPress qui permet la mise en relation entre les deux parties et ouvre vers l’entretien à distance.

L’extension « Réception » facilite la personnalisation de la page d’accueil des membres d’une communauté motorisée par BuddyPress.

La possibilité de charger un gabarit spécifique lorsqu’on navigue sur la page d’accueil d’un membre existe depuis longtemps mais est restée une fonctionnalité avancée jusqu’à la version 3.0 de BuddyPress et l’arrivée d’un nouvel ensemble de gabarits baptisé « BP Nouveau ».

« BP Nouveau » est l’ensemble de gabarits de BuddyPress actif par défaut, il succède à « BP Legacy » qui est la transformation du thème « BP Default » en un ensemble de gabarits qui s’adaptent du mieux possible à tout thème WordPress normalement constitué. Pour mémoire, avant la version 1.7 de BuddyPress, l’utilisation de l’extension nécessitait de renoncer à son thème WordPress pour s’accommoder d’un thème spécifique pour BuddyPress. L’extension en proposait (et le propose toujours, rétrocompatibilité oblige) un thème par défaut : « BP Default ».

Cette parenthèse historique précisée, la capture d’écran ci-dessus vous montre la page d’accueil par défaut des membres fournie par BuddyPress lorsque l’administrateur·rice du site est connecté·e. Grâce à la section « BP Nouveau » du « Customizer », on peut la désactiver, intégrer les renseignements biographiques du profil WordPress du·de la membre affiché·e ou encore déposer des « widgets » dans la zone « widgetisable » intitulée « Page d’accueil BuddyPress de l’utilisateur·rice ». Ces possibilités sont illustrées dans la galerie de captures d’écran ci-après.

Créer de nouveaux widgets pour les besoins du projet LP  ?

Si cette voie peut sembler naturelle par rapport à ce que je viens de décrire, je dois avouer qu’elle ne m’a pas effleuré l’esprit, même si j’ai beaucoup contribué à ces fonctionnalités de « BP Nouveau » en préparation de la publication de la version 3.0 de BuddyPress.

En effet, 7 mois après la mise à disposition de cette version de BuddyPress, WordPress lançait sur orbite « Bebo », version dont la particularité était d’intégrer un tout nouvel éditeur annoncé comme une révolution de la manière de rédiger nos contenus dans l’outil de publication qui équipe énormément de sites sur Internet (un peu moins de 38% d’entre eux au moment où j’écris ces lignes).

Or comme cet éditeur, l’éditeur de blocs, propose une expérience d’utilisation beaucoup plus intuitive pour mettre en page des contenus, je suis convaincu qu’il est un choix simplifiant encore plus l’organisation du modèle de page d’accueil des membres pour l’administrateur·rice du site communautaire.

Une personnalisation simplifiée grâce à l’éditeur de blocs de WordPress

Pour accéder au modèle de page d’accueil des membres, il s’agit de se rendre dans la page ses options des réglages de BuddyPress, comme le montre la capture d’écran ci-après.

Alternativement, vous pouvez afficher n’importe quelle page d’accueil de membre pour y trouver un lien de modification de ce modèle.

Les deux captures d’écran ci-dessus illustre cette supériorité par rapport à l’utilisation de widgets. Organiser les widgets en colonnes dans la page d’accueil des membres nécessiterait pour l’administrateur·rice un travail complémentaire quant à l’intégration de styles personnalisés. Bien sûr, l’extension pourrait proposer une interface pour lui permettre d’atteindre un résultat équivalent, mais autant profiter de ce qui existe et de ce qui sera quoiqu’il arrive toujours plus complet en terme d’options de présentation. Grâce à l’éditeur de blocs, pour organiser une page en colonnes, il suffit d’insérer un bloc « colonnes » et d’y déposer les blocs à afficher dans la page d’accueil des membres.

L’extension « Réception » intègre deux blocs interactifs.

Comme vous pouvez le voir ci-dessus, vous retrouverez ces deux blocs dans la catégorie des widgets du contrôle d’insertion des blocs.

Le bloc de présentation du Membre

Il permet d’afficher les renseignements biographiques et offre la possibilité pour le·la membre qui consulte son profil de directement modifier ses renseignements depuis sa page d’accueil.

Dans l’onglet « Bloc » de la barre latérale, le réglage « Titre du bloc » vous aide à personnaliser le titre de ce bloc. Vous pouvez même utiliser le marqueur {{member.name}} pour que ce titre inclut le nom du·de la membre affiché·e.

Lorsque le·la membre consultera sa page de profil, il·elle pourra directement modifier ses renseignements biographiques et sauvegarder ses changements en utilisant le bouton « Enregistrer ».

Le formulaire de contact du Membre

Ce bloc permet à tout·e membre connecté·e ou visiteur·se du site de contacter le·la membre affiché·e.

Ce qui était décrit pour le bloc précédent au sujet de la personnalisation du titre du bloc est également vrai pour le formulaire de contact.

Lorsque le·la membre consulte son propre profil, il·elle peut utiliser ce bloc pour répondre à un·e visiteur·se l’ayant contacté et éviter ainsi de lui communiquer son adresse e-mail.

La vérification des e-mails : le dispositif de prévention des pourriels de l’extension « Réception ».

La première fois qu’un·e visiteur·se utilise le site sur lequel l’extension est installée pour contacter un·e membre à partir de son formulaire de contact, il·elle doit passer par une procédure de vérification de son adresse e-mail dont les étapes sont illustrées dans la gallerie ci-dessous :

Notez que si le·la visiteur·se quitte la page affichant le formulaire de contact du membre, il sera nécessaire qu’il·elle renseigne à nouveau son nom et son e-mail afin que l’extension puisse se « rappeler » la prochaine étape du processus à lui présenter.

L’objectif de cette procédure est de se prémunir au mieux des potentiels pourriels que pourraient recevoir les membres du site si on utilisait un simple formulaire d’envoi.

Afin d’éviter de demander à respecter cette procédure à chaque utilisation du site, la persistance de l’e-mail est assurée par une sauvegarde dans une table spécifique de la base de données du site WordPress. Point important, les e-mails sauvegardés sont cryptés et non décryptables.

La personnalisation du contenu des e-mails envoyés par l’extension

Réception utilise l’API BuddyPress des e-mails ce qui permet à l’administrateur·rice de pouvoir personnaliser à tout moment le contenu des e-mails utilisés par l’extension pour mettre en relation les membres et visiteur·se·s.

Comme le montre la capture d’écran ci-dessus, la liste des e-mails utilisés par BuddyPress et Réception est accessible depuis le menu des « E-mails » de votre administration WordPress. En survolant l’objet de l’e-mail que vous souhaitez modifier, vous ferez apparaître les liens d’action dont celui pour modifier l’e-mail.

Une fois sur l’écran d’édition de l’e-mail, deux points importants : 

  1. Les marqueurs entre accolades sont utilisés lors de l’envoi de l’e-mail pour le personnaliser par rapport aux informations du·de la destinataire·rice. Veillez à ne pas les modifier.
  2. Sous l’éditeur visuel (qui contient la version HTML de l’e-mail) pensez à modifier la version texte de l’e-mail laquelle sera utilisée si votre destinataire·rice utilise un logiciel qui n’accepte pas les e-mails formatés en HTML.

Enfin, mettez à jour l’e-mail pour valider vos changements !

La modération des e-mails vérifiés de l’extension « Réception ».

Je suis bien placé pour le savoir : le risque zéro n’existe pas ! Aussi, si toutefois des utilisateur·rice·s indésirables importunaient les membres, il est toujours possible de modérer leur e-mail afin qu’il ne puisse plus être utilisé pour envoyer un message aux membres.

Pour « spammer » un e-mail, il suffit de se rendre sur l’outil de gestion des e-mails vérifiés comme illustré ci-dessous.

Comme les e-mails sont cryptés et indécryptables, il est nécessaire d’utiliser le champ de l’adresse de messagerie afin de rechercher l’encryptage de cet e-mail dans la table spécifique de la base de données utilisée. Une fois la correspondance trouvée, en survolant le code de vérification, l’administrateur·rice peut marquer l’e-mail comme indésirable (ou « spam » en anglais) et neutraliser ainsi son action. Il·elle peut également choisir de supprimer l’e-mail vérifié de la table ce qui aura pour effet de réactiver la procédure de vérification de l’e-mail concerné.

Intégration à la navigation BuddyPress de la barre d’administration et à celle de son menu personnalisable et dynamique

Comme le montre la galerie ci-dessus :

  • Un menu pointant sur la page d’accueil du·de la membre connecté·e sera automatiquement intégré dans la barre d’administration de WordPress.
  • Depuis le « Customizer », vous pourrez ajouter l’élément pointant vers la page d’accueil du·de la membre connecté·e depuis la section « BuddyPress (connecté) » au(x) menu(s) WordPress de votre choix.

Télécharger « Réception »

L’extension « Réception » est hébergée sur GitHub et est enregistrée sur l’Entrepôt. Si vous utilisez l’Entrepôt vous pourrez effectuer l’installation d’un simple clic. Autrement, il s’agira d’utiliser l’interface de téléversement d’une nouvelle extension de votre administration WordPress pour y déposer le fichier zip téléchargeable ci-dessous.

Page d’accueil des membres BuddyPress personnalisable à l’aide de blocs WordPress.

Afficher la page GitHub de la version