Comment utiliser les modèles d'annuaire de membres pour créer un annuaire d'utilisateurs

Publié: 2023-01-25

Les modèles de répertoire de membres vous permettent d'afficher facilement une quantité massive d'informations sur votre site WordPress d'une manière bien ordonnée et belle.

La fonction d'un répertoire de listes d'utilisateurs est de gérer votre base de données en ligne (par exemple, le personnel, les entreprises de votre réseau, les spécialistes du sujet, ou n'importe quoi entre les deux). Les annuaires de membres (listes d'utilisateurs) offrent à vos visiteurs des fonctions de recherche et de filtrage faciles à naviguer. Les annuaires créent des opportunités de réseautage et de commerce et permettent aux gens de se connecter et de participer à votre communauté. De plus, il existe également de nombreux avantages en matière de référencement et de marketing !

Dans ce didacticiel, nous utiliserons l'un des 5 modèles de répertoire de membres pré-créés de Profile Builder pour créer un répertoire de membres sophistiqué, beau et, surtout, utile. Avec nos modèles conviviaux, vous n'avez besoin d'aucune connaissance en codage. Nous vous fournirons des instructions étape par étape pour créer un répertoire d'utilisateurs, de personnel ou d'entreprise sans faille.

Pourquoi ai-je besoin d'un plugin d'annuaire de liste d'utilisateurs avec des modèles d'annuaire de membres ?

Il est possible de créer une liste d'informations manuelle ou des tableaux d'informations pour votre site, mais il est difficile de présenter des listes de manière utile. Si vos listes sont longues et complexes, vous devez ajouter une fonction de tri ou de filtrage, sinon vos utilisateurs ne pourront pas obtenir ce dont ils ont besoin. Et c'est un cauchemar de tenir à jour les listes manuelles !

Un plug-in de liste d'utilisateurs correctement intégré fournit des répertoires de membres beaucoup plus faciles à gérer que les tables et les listes, mais peut également vous servir d'autres manières. Vous pouvez créer plusieurs répertoires de membres différents, sur différentes parties de votre site Web, en quelques clics seulement. Plus important encore, le plugin Profile Builder est en fait une combinaison de 4 fonctions importantes de WordPress :

  • La possibilité d' obtenir les informations dont vous avez besoin auprès de vos utilisateurs via des formulaires d'utilisation,
  • et utiliser les informations pour gérer les utilisateurs et leurs rôles et capacités,
  • le tout sans nuire à la sécurité de votre site,
  • tout en étant capable d' afficher magnifiquement des informations utiles via les annuaires des membres.

Instructions pour créer un annuaire des membres à l'aide de modèles d'annuaire des membres

Dans cette section, nous allons faire un exemple étape par étape d'utilisation de l'un des modèles d'annuaire de membres de Profile Builder pour créer une liste d'utilisateurs.

Étape 1 : Installer, configurer et enregistrer Profile Builder Pro

Vous aurez besoin d'une installation WordPress à jour et d'un thème approprié. Pour ce tutoriel, nous utiliserons le thème Hello Elementor. Nous demanderons aux vendeurs de plantes de fournir leur domaine de spécialisation, puis utiliserons ces informations pour afficher une liste filtrée de vendeurs de plantes spécialisés.

Vous aurez également besoin du plugin Profile Builder PRO. Commencez par choisir le plan Profile Builder le mieux adapté à vos besoins. Après inscription et paiement, vous recevrez un e-mail confirmant votre achat.

Connectez-vous à votre compte Cozmoslabs. Accédez à l' onglet Téléchargements . Téléchargez les fichiers compressés Profile Builder Main et Pro sur votre ordinateur. Ensuite, accédez à la page Plugins de votre tableau de bord WordPress. Téléchargez les deux archives sur votre site Web une à la fois. Cliquez sur Installer et activer à chaque fois.

Une fois qu'il est configuré sur votre panneau WordPress, vous devrez enregistrer la version PRO pour avoir accès à toutes les fonctionnalités. Accédez à Profile Builder → Enregistrer la version pour créer une connexion entre votre site Web et Profile Builder PRO en enregistrant votre site. Utilisez la clé ou le SR (numéro de série) qui apparaît sous l' onglet Licences sur la page de votre compte Cozmoslabs. Si vous avez besoin d'aide pour vous inscrire, consultez cette documentation étape par étape.

L'image 1 montre la page de compte Cozmoslabs avec une clé SR pour créer une connexion entre votre site Web et les modèles d'annuaire de membres Profile Builder PRO
Image 1 : Connectez-vous à votre compte Cozmoslabs. Utilisez la clé SR pour créer une connexion entre votre site Web et Profile Builder Pro

Étape 2 : Personnalisez votre page d'inscription

Comme d'autres plugins avancés (par exemple WooCommerce), le plugin Profile Builder peut créer automatiquement de nouvelles pages. Cliquez sur le bouton Créer des pages de formulaire . Il créera vos pages Modifier le profil, Connexion et Inscription , et vous amènera à l' onglet Pages de votre tableau de bord WordPress. Vos nouvelles pages Modifier le profil, Connexion et Inscription seront parfaitement intégrées à l'apparence de votre site Web. Pour vérifier, cliquez sur le bouton Afficher qui apparaît au survol.

Alternativement, le moyen le plus rapide d'identifier vos pages Profile Builder est de naviguer vers la page principale de Profile Builder et de cliquer sur le gros bouton bleu "Afficher les pages de formulaire" . Vous pouvez également accéder à Pages → Toutes les pages .

L'image 2 montre où cliquer sur le bouton "Afficher les pages de formulaire" pour voir les pages pré-créées du générateur de profils à utiliser par les modèles d'annuaire des membres
Image 2 : Cliquez sur le bouton "Afficher les pages du formulaire" pour voir les pages pré-créées du Générateur de profils qui sont utilisées par tous les modèles d'annuaire des membres

Si vous ne trouvez pas la page d'inscription prédéfinie ou si vous souhaitez ajouter une nouvelle page d'inscription, vous pouvez en créer une nouvelle. Copiez simplement le shortcode de la page d'inscription à partir de la page Champs de formulaire et collez-le sur une page vierge.

Un autre raccourci consiste à sélectionner le bloc Registre de Profile Builder (ou tout autre formulaire utilisateur) dans le menu des blocs Gutenberg.

L'image 3 montre où sélectionner le formulaire d'inscription Profile Builder dans le menu des blocs Gutenberg
Image 3 : Sélectionnez le formulaire d'inscription Profile Builder dans le menu des blocs Gutenberg

Remarque : N'oubliez pas que vous pouvez personnaliser à la fois la page d'inscription et le formulaire d'inscription lui-même. Votre page d'inscription doit contenir toutes les informations pertinentes pour s'assurer que les utilisateurs comprennent ce pour quoi ils s'inscrivent. Le formulaire d'inscription sur la page d'inscription doit contenir les champs utiles pour votre modèle commercial et votre liste d'utilisateurs.

À l'étape suivante, vous personnaliserez le formulaire d'inscription précréé en ajoutant les champs que vous souhaitez spécifiquement, en supprimant les champs redondants et en ajoutant des champs de valeurs spéciales et des règles pour empêcher les actions non autorisées.

Personnaliser les formulaires

Accédez à l'onglet du tableau de bord Générateur de profils → Champs de formulaire . Une invite pour activer les modules complémentaires de liste d'utilisateurs apparaît. Si vous manquez l'invite, vous pouvez accéder à la page Modules complémentaires pour activer les modules complémentaires. Nous vous recommandons d'activer les modules complémentaires Liste d'utilisateurs, Formulaires d'inscription multiples et Formulaires de modification de profil multiples avant de commencer à personnaliser votre premier formulaire.

Commençons à personnaliser le formulaire pré-créé par défaut !

Les nouveaux formulaires incluront par défaut tous les champs que vous personnalisez au cours de cette étape. Vous pouvez créer des formulaires nouveaux ou différents en accédant à la page des formulaires d'inscription de Profile Builder et en cliquant sur Ajouter nouveau .

Remarque : Le formulaire par défaut n'apparaît pas sur cette page. Pour modifier ce formulaire par défaut d'origine, accédez à la page des champs du formulaire Profile Builder.

Votre formulaire d'inscription doit contenir les champs dont vous avez besoin en tant que chef d'entreprise. Dans cet exemple, nous souhaitons modifier le formulaire pour demander aux inscrits de fournir leur domaine de spécialisation dans le commerce des plantes, leur emplacement et leurs coordonnées afin de créer un répertoire d'entreprises pour les membres.

Profile Builder inclut des champs de base par défaut pour chaque formulaire d'inscription. Vous les verrez si vous faites défiler la page. Cliquez sur le bouton Supprimer à côté des champs que vous souhaitez supprimer. Pour commencer à ajouter de nouveaux champs, cliquez sur la flèche dans le champ du menu Sélectionner une option et faites défiler le menu contextuel pour la liste des champs parmi lesquels vous pouvez choisir.

L'image 4 montre où cliquer sur "Sélectionner une option". Les champs de base par défaut apparaissent dans la colonne de gauche du menu déroulant du sélecteur de champs de formulaire utilisé par tous les modèles d'annuaire des membres
Image 4 : Cliquez sur « Sélectionner une option ». Les champs de base par défaut apparaissent dans la colonne de gauche du menu déroulant du sélecteur de champ de formulaire

Choisissez les champs souhaités et personnalisez-les comme vous le souhaitez avant de cliquer sur le bouton Ajouter un champ . Dans cet exemple, nous avons ajouté le titre du champ "Champ spécialisé" , choisi le type de champ Sélection multiple et ajouté quelques options (cactus, arbustes, arbres, etc.).

L'image 5 montre le nouveau titre de champ "Specialist Field", en choisissant le type de champ Select et en ajoutant quelques options.
Image 5 : Ajout du titre du champ « Specialist Field », choix du type de champ Select et ajout de quelques options

À l'étape suivante, vous apprendrez à afficher les informations de tous ces champs dans un répertoire de membres ou une liste d'utilisateurs pour rendre les informations utiles aux visiteurs de votre site Web.

Étape 3. Créer une liste d'utilisateurs WordPress

Comme mentionné à l'étape 2, vous devrez activer le module complémentaire de liste d'utilisateurs avant d'aller plus loin. Nous vous recommandons d'activer les modules complémentaires Liste d'utilisateurs, Formulaires d'inscription multiples et Formulaires de modification de profil multiples .

L'image 6 montre où activer les modules complémentaires pour utiliser les modèles d'annuaire des membres
Image 6 : Pour utiliser les modèles d'annuaire des membres, vous devez d'abord activer le module complémentaire "Liste des utilisateurs"

Sur le tableau de bord WordPress, recherchez Liste d'utilisateurs sous l'onglet Générateur de profils. Clique dessus. Sur la page de la liste des utilisateurs, vous verrez une liste d'utilisateurs par défaut prête à l'emploi et publiée appelée Userlisting avec le shortcode [wppb-list-users name="userlisting"]

Si vous êtes nouveau dans les listes d'utilisateurs, nous vous recommandons de ne pas modifier cette liste car elle peut servir de référence pratique pour les paramètres par défaut pendant que vous apprenez. Soyez également prudent lorsque vous utilisez cette liste principale pour afficher toutes les informations sur votre site Web sans ajouter de filtres.

Cliquez sur le bouton Ajouter nouveau en haut et donnez un titre à votre liste d'utilisateurs (répertoire des membres).

REMARQUE : Si vous ne trouvez pas le bouton Ajouter nouveau , assurez-vous d'avoir activé les modules complémentaires nécessaires (liste d'utilisateurs, formulaires d'inscription multiples et module complémentaire de formulaires de modification de profils multiples).

L'image 7 montre comment ajouter une nouvelle liste d'utilisateurs avec le titre Spécialistes de l'usine, Contributeurs sélectionnés et Abonnés en utilisant les champs communs à tous les modèles d'annuaire des membres
Image 7 : Ajoutez une nouvelle liste d'utilisateurs avec le titre Spécialistes des plantes, Contributeurs sélectionnés et Abonnés

Personnaliser les paramètres de la liste d'utilisateurs

Dans cet exemple, nous avons utilisé le titre de la liste d'occasion « Spécialistes de l'usine » et nous avons limité les rôles à afficher aux « Contributeurs » et « Abonnés ». Après avoir donné un titre à votre liste d'utilisateurs, faites défiler un peu vers le bas jusqu'aux autres paramètres de base . Vous pouvez choisir les rôles d'utilisateur à inclure et la façon dont ils seront affichés dans la liste des utilisateurs.

Par exemple, vous pouvez masquer la liste des utilisateurs aux utilisateurs non connectés afin que seules les personnes connectées puissent voir le répertoire. Si vous devez sélectionner Visible uniquement pour les utilisateurs connectés , une autre option de menu apparaît dans laquelle vous pouvez ensuite sélectionner si elle doit être visible pour tous les utilisateurs connectés, ou pour les clients, abonnés, etc. Cochez la case " * " pour faire visible par tous les utilisateurs connectés, mais soyez prudent lorsque vous exposez des informations sensibles à tous les utilisateurs.

L'image 8 montre où sélectionner les options pour rendre la liste des utilisateurs visible pour tous ou uniquement les utilisateurs sélectionnés
Image 8 : Sélectionnez les options pour rendre la liste des utilisateurs visible pour tous ou uniquement les utilisateurs sélectionnés

Personnaliser les menus à facettes

La section suivante sur la page est les menus à facettes. L'ajout de facettes signifie choisir les filtres qui seront disponibles sur votre page de liste d'utilisateurs. La plupart des utilisateurs sont assez familiers avec l'utilisation de filtres sur les sites d'achat. Ainsi, vous pouvez ajouter le même type de filtres auxquels ils sont habitués, pour les aider à obtenir les informations dont ils ont besoin sur votre site. Par exemple, vous pouvez les laisser filtrer les résultats de recherche par lieu, domaine de spécialisation, âge, etc.

Nous allons ajouter un filtre pour trier les membres selon leur spécialité végétale, nous avons donc tapé "Spécialité" comme étiquette que nous voulons afficher sur la page. Pour cet exemple de menu à facettes, nous avons choisi Sélectionner plusieurs comme type de facette , car vous souhaitez que les utilisateurs puissent sélectionner plusieurs options simultanément. Dans le champ Facet Meta , nous avons utilisé le menu déroulant pour sélectionner le champ « Specialist In » comme source pour le filtre (Facet Meta).

Cliquez sur Ajouter une entrée . Répétez les mêmes étapes pour ajouter autant de filtres que nécessaire. Dès que vous cliquez sur Ajouter une entrée , votre nouveau filtre apparaît dans le résumé du filtre (facette) juste en dessous du bouton Ajouter une entrée.

L'image 9 montre comment ajouter la facette "Spécialité végétale" en tant qu'étiquette en utilisant "sélectionner plusieurs" parmi les options utilisées par tous les modèles de répertoire de membres
Image 9 : Ajoutez la facette 'Plant Specialty' comme étiquette en utilisant 'select multiple'

Voici à quoi ressembleront les filtres sur le front-end :

Menus à facettes sur le devant

Personnaliser les paramètres de recherche

Ensuite, choisissez comment Profile Builder doit localiser les informations pour faire fonctionner la barre de recherche. Cette section se trouve juste en dessous de la section Menus à facettes sur cette même page. Choisissez les fonctions de recherche en cochant ou en désélectionnant les informations que vous souhaitez analyser lorsqu'un visiteur recherche un mot-clé dans la barre de recherche.

L'image 10 montre où sélectionner les paramètres de "recherche" utilisés par tous les modèles d'annuaire des membres pour la nouvelle liste d'utilisateurs
Image 10 : Sélectionnez les paramètres de "recherche" pour la nouvelle liste d'utilisateurs

Créez votre annuaire à l'aide des modèles d'annuaire des membres

La dernière section est l'endroit où vous choisissez un modèle de répertoire de membres et personnalisez le format et la façon dont vous souhaitez que la liste apparaisse sur le front-end de votre site Web. Comme vous le savez, la standardisation de la conception et de la mise en forme des différents éléments de votre site Web peut prendre des heures. C'est pourquoi Profile Builder vous propose 5 thèmes prédéfinis pour votre page de liste d'utilisateurs.

Il y a un thème par défaut, plus 4 autres thèmes personnalisés. Chacun représente la meilleure façon d'afficher des tableaux, des grilles, des boîtes ou des listes, respectivement. Lorsque vous passez votre souris sur chacun, vous verrez un bouton pour prévisualiser le thème et un pour l' activer .

Chaque modèle comprend un affichage du répertoire des membres (liste d'utilisateurs) qui apparaît sous forme de liste ordonnée sur votre site Web, ainsi qu'une page individuelle pour chaque entrée de votre liste de membres. C'est là que vous afficherez les informations détaillées pour chaque membre.

L'image 11 montre comment prévisualiser, puis activer les thèmes des modèles d'annuaire des membres
Image 11 : Prévisualiser, puis activer un thème de modèles d'annuaire de membres

Les modèles d'annuaire des membres sont un excellent point de départ, mais vous pouvez encore plus personnaliser chaque thème. Pour l'instant, choisissez simplement celui qui vous semblera le mieux et qui conviendra le mieux au type d'informations que vous souhaitez afficher. Vous pouvez facilement passer à un thème différent, et le HTML et le CSS seront automatiquement mis à jour avec le nouveau style.

Le modèle par défaut affiche uniquement une fonction de tri minimaliste. Par conséquent, pour cet exemple, nous avons utilisé le modèle Tablesi pour illustrer ses boutons de filtre proéminents et son champ de recherche de répertoire.

Personnalisez les informations utilisateur à afficher à l'aide de balises

Pour personnaliser les informations que vous souhaitez afficher dans votre répertoire de membres, faites défiler vers le bas pour voir le sous-titre « Modèle de liste de tous les utilisateurs ». Il ressemble à ceci :

L'image 12 montre un résumé des informations de liste d'utilisateurs HTML à afficher
Image 12 : Résumé des informations de liste d'utilisateurs HTML à afficher

REMARQUE : Le modèle de liste d'utilisateurs sert à personnaliser le répertoire des membres (liste d'utilisateurs) tel qu'il est affiché sur votre site Web. Le modèle de liste d'utilisateur unique permet de personnaliser les détails du membre individuel lorsque les gens cliquent sur le bouton "Plus" dans le répertoire des membres. Nous y reviendrons bientôt !).

Si vous êtes d'accord avec les champs d'affichage par défaut, vous pouvez tout laisser tel quel. Si vous souhaitez ajouter ou supprimer des informations dans l'annuaire des utilisateurs, vous trouverez toutes les balises Profile Builder disponibles pour chaque type de liste sur le côté droit de la colonne d'affichage à droite. Dans cet exemple, nous avons supprimé le "nombre de messages" du modèle de répertoire des membres en supprimant les lignes appropriées, comme on peut le voir sur cette image :

L'image 13 montre comment une colonne d'en-tête "nombre de publications" a été supprimée des colonnes par défaut des modèles d'annuaire des membres
Image 13 : Suppression de la colonne d'en-tête des modèles de répertoire des membres par défaut "nombre de publications" du répertoire des membres

Enfin, personnalisons l'apparence des entrées individuelles lorsque les visiteurs cliquent sur le bouton « Plus » ou « Afficher » dans le répertoire des membres. Faites défiler jusqu'au modèle de liste d'utilisateur unique .

Dans cet exemple, nous ajouterons une autre étiquette dans lemodèle mono-utilisateur (la liste de profil de l'individu), l'étiquette "Spécialiste en".Mettez simplement en surbrillance et copiez la balise "Spécialiste" et la balise de droite, et collez-la à gauche.

L'image 14 montre que le champ "spécialiste" créé sur mesure a remplacé le champ "surnom" par défaut des modèles d'annuaire des membres
Image 14 : Ajout de la section « Spécialiste en » avec un champ « spécialiste » personnalisé

Corrigez les erreurs avec la fonction de réinitialisation

Des erreurs peuvent se produire, surtout lorsque vous faites beaucoup de personnalisation. Heureusement, vous pouvez restaurer les paramètres par défaut pour un nouveau départ. Vous pouvez réinitialiser soit les paramètres généraux de liste d'utilisateurs, le modèle de liste de tous les utilisateurs ou le modèle de liste d'utilisateur unique, soit vous pouvez recommencer à zéro en réinitialisant tout. Remontez simplement jusqu'à la section des modèles de répertoire des membres. Survolez le thème actif. Cliquez sur le bouton Réinitialiser les données et sélectionnez le ou les paramètres que vous souhaitez réinitialiser.

L'image 15 montre où sélectionner le type de données que vous souhaitez réinitialiser dans les modèles d'annuaire des membres
Image 15 : Sélectionnez le type de données que vous souhaitez réinitialiser dans les modèles d'annuaire des membres que vous avez utilisés.

Étape 4 : Publication des modèles d'annuaire des membres

Lorsque vous êtes satisfait de vos personnalisations, appuyez sur le bouton Publier en haut. Cela générera un shortcode pour votre liste d'utilisateurs, que vous pourrez coller ou insérer via des blocs Gutenberg sur n'importe quelle page de votre site.

Et : Ta-Daa ! Voici à quoi ressemble votre nouveau répertoire des membres sur le front-end du site Web. Notez les boutons de filtre proéminents des modèles d'annuaire de membres Tablesi. Si vous n'aimez pas le look, choisissez simplement un modèle différent.

L'image de capture d'écran 16 montre à quoi ressemble la liste des répertoires d'utilisateurs sur votre site Web lorsque vous utilisez des modèles de répertoire des membres
Image 16 : Voici à quoi ressemble l'annuaire sur votre site Web à l'aide de modèles d'annuaire de membres

L'image suivante montre à quoi ressemble une page d'informations sur un utilisateur individuel lorsque vous utilisez l'un des modèles d'annuaire des membres. Les visiteurs de votre site peuvent accéder à cette page en cliquant sur le bouton « afficher » ou « plus » dans la liste des répertoires.

L'image 17 montre à quoi ressemble une page d'informations sur un utilisateur individuel lors de l'utilisation de modèles d'annuaire de membres
Image 17 : Voici à quoi ressemble une page d'informations sur un utilisateur individuel.

Conclusion

Le plugin Profile Builder Pro permet de répertorier très facilement vos utilisateurs d'une manière qui ajoute une réelle valeur à votre site. Les modèles prédéfinis pour les formulaires d'inscription des utilisateurs et les affichages des listes d'utilisateurs vous feront gagner du temps (et de l'argent !). Profile Builder Pro vous offre 5 modèles de répertoire de membres faciles à utiliser qui sont garantis pour ajouter de nouvelles opportunités de monétisation pour votre entreprise.

Amenez votre site Web à un nouveau niveau en quelques clics : Téléchargez Profile Builder Pro ici !

Générateur de profils Pro

Créez de superbes formulaires d'inscription et de profil frontaux avec des champs personnalisés. Configurez les répertoires des membres, les redirections personnalisées, personnalisez les e-mails des utilisateurs et plus encore à l'aide du plug-in de gestion des utilisateurs tout-en-un.

Obtenir le plug-in

Ou téléchargez la version GRATUITE

Avez-vous utilisé Profile Builder pour créer un ou plusieurs annuaires de membres ou annuaires d'entreprises pour votre site Web ? Aidez les autres à maximiser le potentiel de leur site Web. Partagez votre expérience dans la section des commentaires ci-dessous!