Suivez ces étapes pour créer un site d'annuaires avec BuddyBoss et le plugin GeoDirectory :
- Installez le thème BuddyBoss et la BuddyBoss Platform.
- Configurez GeoDirectory.
- Installez le plugin Elementor.
- Concevez votre site d'annuaires en utilisant le thème BuddyBoss et Elementor.
En combinant BuddyBoss avec le plugin GeoDirectory et le plugin Elementor, vous disposerez d'une plateforme polyvalente pour créer un annuaire en ligne soigné, enrichi de fonctionnalités de réseautage social.
En utilisant cette combinaison et en suivant les étapes mentionnées dans cet article, il est facile de créer un site d'annuaires convivial avec des fonctionnalités de réseautage social.
Découvrons en détail comment y parvenir.
Dans ce tutoriel, nous allons :
- Installer et configurer le thème et les plugins
- Concevez le site d'annuaires BuddyBoss
Installation du thème et des plugins.
1. Installez le BuddyBoss Thème et la BuddyBoss Platform
Nous devons installer un thème, et pour ce tutoriel, vous allez installer le BuddyBoss Thème.
Accédez à buddyboss.com, achetez et téléchargez le thème BuddyBoss et la plateforme BuddyBoss.
Accédez à Appearance >> Thèmes
Sélectionnez Ajouter, Installer, et Activer le BuddyBoss Thème.
Accédez à Extensions >> Add New
Sélectionnez Téléverser, Installer, et Activer le BuddyBoss platform plugin.
Configurons maintenant BuddyBoss.
Accédez à BuddyBoss >> Composants
J'active tous les composants, vous pouvez choisir en fonction de vos besoins.
Configurons maintenant quelques pages requises pour BuddyBoss depuis le BuddyBoss >> Pages
Je laisserai tous les paramètres par défaut, mais vous pouvez les vérifier et apporter les modifications nécessaires si vous le souhaitez.
Notre site est maintenant prêt avec toutes les fonctionnalités de réseautage social et l'apparence de BuddyBoss.
2. Installer le Elementor plugin
Pour styliser les modèles, nous allons installer le Elementor plugin.
Le Elementor plugin offre de nombreuses fonctionnalités de personnalisation supérieures aux options par défaut et vous aidera à concevoir les modèles de pages.
Il existe une version pro d'Elementor qui offre de nombreuses fonctionnalités, et GeoDirectory est compatible avec les deux.
Nous utiliserons la Elementor version gratuite pour cet article.
Accédez à Extensions >> Ajouter.
Rechercher Elementor. Installez-le et activez-le.
3. Installer GeoDirectory
Enfin, vous devez installer GeoDirectory.
Accédez à Extensions >> Ajouter, recherchez GeoDirectory. Veuillez l'installer et l'activer, et nous avons terminé l'installation des plugins.
4. Assistant d'installation de GeoDirectory
Pour GeoDirectory, vous devrez compléter l'assistant de configuration pour configurer la clé API Google Maps et importer quelques annonces fictives.
Choisir le système de cartographie (Google Maps ou OpenStreetMap)
Vous pouvez choisir entre deux systèmes de cartographie à la première étape de l'assistant. Google Maps et Open Street Maps (qui ne nécessite pas de clé API).
Dans ce tutoriel, nous sélectionnons OpenStreetMaps.
Si vous souhaitez sélectionner Google Maps, suivez les étapes supplémentaires ci-dessous.
Cliquez sur le bouton Générer une clé et suivez les étapes de ce doc pour générer une clé API valide.
Les étapes essentielles sont :
- Activer les clés.
- Créer ou sélectionner un projet existant.
- Obtenir la clé.
- Activer un compte de facturation.
- Restreindre la clé API (afin qu'elle ne puisse être utilisée qu'à partir de l'URL de votre site)
Concernant le point quatre : c'est une obligation. Cependant, vous n'êtes facturé que si vous dépassez le seuil, qui est de 200 $/mois.
Ce crédit gratuit est bien plus que suffisant pour 99 % des annuaires.
Définir la ville par défaut
Ensuite, vous définirez l'emplacement par défaut. Il s'agit de la ville pour laquelle l'annuaire est créé.
Nous définirons Philadelphia comme ville par défaut.
Vous pouvez utiliser n'importe quel emplacement selon vos besoins.
Si vous devez ajouter des annonces dans plusieurs villes, vous aurez besoin du module complémentaire Location Manager.
Ajouter des fonctionnalités supplémentaires
Dans cette étape, nous allons installer UsersWP, un plugin d'inscription des utilisateurs qui permet aux utilisateurs de s'inscrire et de se connecter à votre site web.
Cela est nécessaire pour permettre aux utilisateurs d'ajouter et de modifier leurs annonces. Cela créera également des profils utilisateurs où ils pourront retrouver leurs annonces, avis, et bien plus encore.
Nous allons également installer Ninja Forms afin que toutes les annonces disposent d'un formulaire de contact qui envoie des e-mails directement aux propriétaires des annonces.
AyeCode Connect n'est pas obligatoire pour ce tutoriel. Il est principalement nécessaire si vous souhaitez ajouter des extensions premium GeoDirectory et les installer directement depuis le tableau de bord WordPress.
Ajouter des données factices
La dernière étape pour terminer l'assistant d'installation consiste à ajouter quelques annonces factices. Cela ajoutera également des catégories d'annonces que vous pourrez modifier ultérieurement selon vos besoins.
Vous n'ajouterez pas les widgets de barre latérale ni les éléments de menu maintenant, car nous le ferons plus tard.
5. Intégration GeoDirectory BuddyBoss
Pour connecter BuddyBoss à GeoDirectory, nous avons besoin du Intégration GeoDirectory BuddyBoss qui fonctionne pour les deux BuddyBoss et BuddyPress intégration.
Téléchargez cette extension depuis le Geodirectory tableau de bord, importez et installez ce plugin.
depuis le GeoDirectory >> Réglages >> BuddyPress onglet, activez tous les paramètres mentionnés dans la capture d'écran ci-dessous.
Ce plugin permettra aux utilisateurs de gérer leurs annonces depuis la page de profil BuddyBoss.
Concevoir le BuddyBoss site d'annuaire
Maintenant que nous avons installé le thème et les plugins et effectué la configuration préliminaire de GeoDirectory, nous pouvons commencer à concevoir notre site d'annuaire.
1. BuddyBoss Design de la page d'accueil de l'annuaire
Vous pouvez créer une nouvelle page ou utiliser l'une de celles que WordPress crée par défaut, comme la Page exemple.
Allez dans Pages, modifiez la Page exemple et renommez-la Accueil, ou créez une nouvelle page à cet effet.
Ensuite, allez dans Appearance > Personnaliser > Réglages de la page d'accueil et sélectionnez votre page d'accueil.
Le logo
Commençons par le commencement : nous aurons besoin d'un logo pour notre site.
Vous n'avez pas besoin de faire appel à un designer pour esquisser la première version de votre logo.
L'une des plus grandes erreurs que vous puissiez commettre en lançant un nouvel annuaire est d'investir trop de temps et d'argent avant de tester l'adéquation produit-marché.
Vous pouvez concevoir un logo en cinq minutes avec une application comme Canva, qui est abordable et étonnamment efficace.
Pour un MVP (produit minimum viable), un logo conçu avec Canva sera largement suffisant.
Il existe plusieurs modèles de logo parmi lesquels choisir, et peu importe si votre logo initial n'est pas aussi parfait et original que vous le souhaiteriez.
Si votre projet prend de l'élan, vous pourrez toujours investir pour l'améliorer ou le modifier radicalement plus tard.
Un logo ordinaire n'est jamais la principale cause de l'échec d'un projet.
Après avoir conçu votre logo, rendez-vous dans BuddyBoss > Theme Options > Logo, et importez votre fichier PNG.
Ignorez le recadrage (ou recadrez l'image selon vos besoins), dans la mise en page du logo et cliquez sur Enregistrer les modifications.
Le menu de navigation
Après avoir créé et ajouté le logo, rendez-vous dans Appearance > Menus, et créez votre menu.
Ajoutez les liens nécessaires (de la colonne de gauche vers la colonne de droite) et enregistrez. Dans les Menu Settings > section Emplacement d'affichage, vous pouvez cocher l'optionMenu d'en-tête – Utilisateur connecté et Menu d'en-tête – Utilisateur déconnecté».
Si vous le souhaitez, vous pouvez faire apparaître le même menu sur mobile ou en créer un autre à cet effet.
Dans cet exemple, nous n'aurons que le menu de navigation de l'en-tête.
Nous avons ajouté sept liens de navigation principaux et quelques liens de sous-navigation :
- Accueil
- Lieux et ajouter des lieux
- Membres
- Blog
- Contactez-nous
Le contenu
Je vais commencer à construire cette page from scratch en utilisant le Elementor plugin.
Nous avons déjà un article sur Comment créer un site d'annuaire avec Elementor.
Dans cet article, nous allons ajouter BuddyBoss à la liste.
Nous avons besoin d'un en-tête héros sur la page d'accueil pour cela. Pour ce faire, allez dans Pages > Accueil et cliquez sur Modifier avec Elementor.
Ajoutez une section. (Cliquez sur le bouton plus du constructeur de page où il est indiqué Faites glisser le widget ici.)
Vous avez maintenant une page vierge avec une seule section d'une colonne.
Téléchargeons une image d'arrière-plan depuis la section de style du conteneur, ainsi que quelques paramètres comme
Position : Centre Centre
Répétition : Pas de répétition
Taille d'affichage : Couverture
Superposition d'arrière-plan : #000000
Opacité : 0.51
Dans la section mise en page du conteneur, nous aurons les paramètres suivants
Hauteur minimale : 500
Direction : Colonne verticale
Justifier au centre : centre
Aligner l'élément : Center
Ajoutons ensuite une balise d'en-tête au-dessus avec le texte : Find The Best Restaurant In Philadelphia et les paramètres suivants
Balise HTML : H1
Alignement : Center
Couleur du texte : #ffffff
Typographie Size: 48px
Ensuite, créons le GD > Search bloc et déployez-le avec les paramètres par défaut. Dans l'onglet Avancé, définissez largeur : Pleine largeur (100%)
Ajoutons un autre conteneur vide en dessous et faites glisser le GD > Categories bloc pour afficher les listes de catégories.
Définissez les paramètres du bloc GD > Categories comme suit
Type de design : Image de fond
Éléments par ligne : 4
Activez le Utiliser l'image de catégorie option
Vous pouvez associer une image à une catégorie en modifiant la catégorie depuis wp-admin -> places -> Place Categories.
Chaque catégorie dispose d'une option pour définir une image par défaut
Maintenant, nous allons ajouter un conteneur vide avec une balise Titre et
Texte : Annonces récentes
Alignement : Center
Typographie Size: 38px
Ajoutons le bloc GD > Listings en dessous avec les paramètres suivants
Tri : récent
Grille : 4
En dessous, dans un conteneur vide, faites glisser le GD > Map shortcode.
Avec les paramètres suivants dans le conteneur Elementor
Contenu largeur : pleine largeur
Espacement : 0
Marge : Haut bas 50px
Rembourrage : 0px
Enfin, nous allons ajouter un CTA pour rediriger les utilisateurs vers la page d'ajout d'annonce.
Ajoutez un conteneur vide avec une mise en page à deux colonnes.
Dans le conteneur de gauche, ajoutez une boîte d'image.
Dans le conteneur de droite, nous allons faire glisser le titre, le texte et le bouton pour obtenir un résultat similaire à celui ci-dessous
Après cela, notre page d'accueil est prête.
2. Design de la page des annonces et de la recherche du site BuddyBoss Directory
Vous devez créer deux pages importantes pour un annuaire : une pour les annonces (comprenant une archive, des catégories et des étiquettes) et une autre pour les résultats de recherche.
GeoDirectory les configure automatiquement avec un design de base. Ce guide vous aidera à peaufiner l'apparence de ces pages.
Étant donné que les pages d'annonces et de recherche sont très similaires, nous les concevrons une seule fois, puis utiliserons la même mise en page pour les deux.
Notre choix pour la conception de la page des annonces est d'avoir les annonces à gauche et une carte fixe à droite, indiquant l'emplacement de chaque annonce.
C'est très simple.
Allez dans Geodirectory > Paramètres > Général > Pages > Cliquez sur Modifier le modèle de page GD Archive
Supprimez tout le contenu de ce GD Archive modèle de page et modifiez-le avec Elementor.
Dans les paramètres de la page, définissez la mise en page sur Pleine largeur Elementor.
Ajoutons maintenant un conteneur vide avec les paramètres suivants
Direction : Colonne verticale
Justifier au centre : centre
Aligner l'élément : Center
Couleur d'arrière-plan : #2143D3
Faisons maintenant glisser le GD > page titre bloc par-dessus.
Ajoutons maintenant une mise en page à deux colonnes avec les paramètres suivants.
Contenu largeur : pleine largeur
Espacement : 0
Ensuite, dans le conteneur de gauche, nous allons ajouter des blocs liés à la page d'archive GD comme GD > Loop Action, GD > Loop, GD > Loop Pagination, et GD > Search en haut afin que l'utilisateur puisse effectuer une recherche depuis la page Archive.
Nous ajouterons également une classe scrolling-gd-loop à cette colonne pour le défilement tactile.
Dans la colonne de droite, nous allons faire glisser le GD > Map bloc avec le paramètre suivant.
Paramètre de colonne
Rembourrage : 0px
Marge : 0px
les paramètres du shortcode GD > Map aux valeurs par défaut et
Hauteur : 100%
Largeur : 100vh
Ajoutons le style suivant au personnalisateur de thème.
.scrolling-gd-loop{ overflow-y: scroll !important; max-height: 1000px; }
Désormais, notre page Archive est prête.
Pour créer la mise en page de la page de recherche.
Copiez tout le contenu du GD Archive modèle Elementor et collez-le dans le GD Search modèle Elementor de la page.
Vous pouvez trouver la page de recherche depuis Geodirectory > Settings > General > Pages.
3. Conception de la page de liste unique du site de répertoire BuddyBoss
Il est temps de créer le modèle de page de détail. Nous allons modifier le GD Detail modèle de page dans Elementor.
Vous pouvez vous rendre sur Geodirectory > Réglages > Général > Pages > Cliquez sur Modifier le modèle de page GD Detail.
Dans ce modèle, vous trouverez déjà le contenu par défaut généré par Geodirectory.
nous allons supprimer tout ce contenu par défaut et le modifier avec Elementor.
Ajoutons un conteneur vide
Largeur du contenu : pleine largeur
Espacement : 0
Marge : Haut bas 50px
Rembourrage : 0px
Direction : Alignement vertical de la colonne
Justifier au centre : centre
Aligner l'élément : Center
Faisons maintenant glisser le Gd > Post Images shortcode à l'intérieur avec les paramètres suivants.
Limite d'images : 10
Limite d'affichage : 3
Type de sortie : Slider
Démarrage automatique : Activer
Assurez-vous que le conteneur est en largeur : pleine largeur (100%)
Ajoutons une mise en page à deux colonnes.
Dans la colonne de gauche, l'un après l'autre.
Ce qui inclut GD > Post Title, GD > Single Taxonomies, et GD > Single Tabs.
Dans la colonne de droite, nous allons ajouter le (BB) Post Author, GD > Author Action, et GD > Output Location bloc.
Une fois cela fait, notre page de détail de l'annonce est complète.
Ajout de fonctionnalités premium à votre BuddyBoss site d'annuaire
Si vous le souhaitez, vous pouvez maintenant ajouter des fonctionnalités premium à votre annuaire, telles que :
- Annonces payantes: avec le module complémentaire GeoDirectory Listing Price Manager add-on, vous pouvez définir des tarifs pour la soumission d'annonces. Pour chaque niveau de prix, vous pouvez activer/désactiver des fonctionnalités telles que la restriction du nombre de photos pour les annonces gratuites tout en autorisant davantage d'images pour les annonces payantes, ainsi qu'un nombre de tags et de catégories plus ou moins important. Activation ou désactivation de champs personnalisés spécifiques. Soumission de descriptions plus longues ou plus courtes.
- Claim Listings: Il s'agit d'une fonctionnalité fondamentale pour un annuaire où l'administrateur crée la base de données et invite les propriétaires d'entreprises à prendre en charge leurs annonces gratuites. Le processus de réclamation d'une annonce peut inclure le passage obligatoire à une annonce payante pour en reprendre la propriété.
- Publicité: la vente d'annonces publicitaires est une autre façon de monétiser un annuaire en ligne. Si vous avez beaucoup de trafic, vous pouvez utiliser des réseaux publicitaires. Sinon, vous pouvez vendre des annonces directement, en permettant aux entreprises d'ajouter des bannières dans des zones spécifiques de votre site web, ou en permettant à des annonces d'apparaître en tant que publicités, par exemple, en haut des résultats de recherche organiques.
Ce ne sont là que trois exemples. Cependant, un site d'annuaire offre de nombreuses façons de gagner de l'argent en ligne.
Vous pouvez créer une marketplace mondiale d'articles artisanaux, vendre des billets d'événements ou des bons de réduction.
Découvrez ici les étapes nécessaires pour votre prochain projet en ligne : Étapes pour créer un site d'annuaires réussi.
Ce tutoriel générique peut être adapté à n'importe quel thème ou constructeur de pages.
Les possibilités sont infinies.