Créer un site annuaire avec le thème OllieWP
Voici un guide étape par étape pour créer un site web d'annuaires en utilisant le thème Ollie pour WordPress :
- Installer le thème Ollie
- Installer et configurer GeoDirectory
- Concevoir le site web d'annuaires avec le thème OllieWP et l'éditeur Gutenberg
GeoDirectory est entièrement compatible avec les thèmes de blocs FSE comme Ollie, nous n'aurons donc pas besoin d'un constructeur de pages ou d'un plugin de blocs supplémentaire dans ce cas.
GeoDirectory offre une solution robuste et flexible pour créer un annuaire en ligne dynamique avec n'importe quel thème ou constructeur de pages.
Dans ce tutoriel, nous allons montrer comment créer un site web d'annuaires avec le OllieWP Thème en combinaison avec le plugin GeoDirectory.
Ce duo permet aux utilisateurs d'intégrer facilement des fonctionnalités basées sur la localisation, de personnaliser les mises en page et d'incorporer des blocs de contenu interactifs, garantissant une expérience utilisateur intuitive et engageante.
Grâce à cette approche intégrée, les développeurs et concepteurs web peuvent facilement créer un site d'annuaires de qualité professionnelle, adapté à des marchés de niche spécifiques ou à des besoins communautaires plus larges.
Voyons comment procéder en détail.
Dans ce tutoriel, nous allons :
Installation du thème et des plugins.
1. Installer le thème OllieWP
Nous devons installer un thème, et pour ce tutoriel, vous allez installer le OllieWP Thème.
Accédez à Appearance >> Thèmes
Sélectionnez Ajouter, Installer, et Activer le OllieWP Thème.
2. 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.
3. 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 de connexion utilisateur 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.
Concevoir le OllieWP 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'annuaires avec le OllieWP la suite d'outils.
1. OllieWP 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 > Gutenberg > Pages > Accueil et cliquez sur le bouton de modification.
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.
Le menu de navigation
Après avoir créé et ajouté le logo, rendez-vous dans Appearance > Éditeur, et créez votre menu.
Cliquez sur les menus en haut et supprimez tous ceux qui existent déjà.
Ajoutons maintenant un bloc de colonnes avec une disposition en deux colonnes.
Dans la colonne de gauche, ajoutez le bloc logo du site.
Cliquez sur le conteneur d'en-tête principal et depuis les paramètres du bloc, définissez le Background : #FFFFF
Dans la colonne de droite, ajoutez le menu de navigation.
Nous avons ajouté les liens de navigation principaux suivants ainsi que quelques liens de sous-navigation :
- Accueil
- À propos
- Blog
- Lieux et ajouter des lieux
- Profil
- Connexion/Déconnexion
Le bloc Connexion/Déconnexion affichera uniquement les liens de connexion et de déconnexion selon le statut de connexion de l'utilisateur.
Le contenu
Je vais commencer à construire cette page from scratch en utilisant le OllieWP et les blocs Gutenberg.
Accédez à Appearance > Gutenberg > Design > Pages et cliquez sur le bouton Modifier la page d'accueil.
nous avons besoin d'un en-tête héro sur la page d'accueil ; pour cela, supprimons tout le contenu de cette page et ajoutons un Couverture bloc.
Ensuite, vérifiez les paramètres du bloc et définissez l'URL de l'image d'arrière-plan.
Pour la section Héro, nous avons besoin d'une image que nous allons télécharger gratuitement depuis Pexels.com (Merci, @rachel-claire).
nous allons ajouter les paramètres suivants dans ce bloc de couverture
Contenu : 1200
Large : 100
Opacité : 50
Espacement et marges: 0
Hauteur minimale de la couverture : 600
Ajoutons maintenant une balise d'en-tête à l'intérieur de ce bloc de couverture avec le
Texte : Trouvez le meilleur restaurant à Philadelphia
nous allons également attribuer à la balise d'en-tête une classe supplémentaire ( heading-text-center ) pour lui ajouter un peu de style.
Maintenant, ajoutons le style suivant dans le personnalisateur de thème.
.heading-text-center{ text-align:center; }
Maintenant, ajoutons le GD > search bloc sous ce titre.
en dessous, ajoutons un peu d'espace à l'aide d'un bloc espaceur avec une hauteur de : 60
Maintenant, ajoutons une colonne vide et plaçons-y le GD > Categories bloc à l'intérieur.
Définissez les options du bloc comme suit
Type de design : Image Background
Éléments par ligne : 3
Activer l'utilisation de l'image de catégorie
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
Sous la section héro, ajoutez une autre Colonne en cliquant sur l'icône plus et ajoutez les GD > Listings blocs à cet endroit.
Nous allons maintenant effectuer quelques réglages nécessaires dans ce GD > Listings bloc. Nous allons définir le tri : récent
Ajoutons maintenant une Colonne vide avec Contenu et Largeur à 100.
Ajoutez l' GD > Map bloc à l'intérieur et conserver les paramètres par défaut.
Cliquez sur le Pied de page et OllieWP propose déjà quelques modèles de pied de page préconstruits. J'en sélectionne un.
Félicitations ! Votre page d'accueil est terminée.
2. OllieWP Conception des pages de listings et de recherche d'un site d'annuaires
Vous devez maintenant concevoir deux pages essentielles pour tout annuaire.
Vous devez maintenant concevoir deux pages essentielles pour tout annuaire.
La page des annonces (archive générale, catégories, étiquettes) et la page des résultats de recherche.
GeoDirectory les crée par défaut avec une mise en page générale. Dans ce tutoriel, nous allons personnaliser un peu la mise en page de ces pages.
Les pages de listings et de recherche étant quasiment identiques, nous la créons une seule fois et copions simplement la mise en page sur l'autre page.
Nous avons décidé que la mise en page de la page des annonces serait les annonces à gauche, et à droite, une carte fixe affichant l'emplacement précis des annonces.
C'est très simple.
Page de listings
Allez dans Apparence > Éditeur > Design > Modèles et cliquez sur Modifier GD Archive modèle de page
Supprimez tout le contenu de ce GD Archive modèle de page.
Maintenant, ajoutons une ligne vide.
À l'intérieur, ajoutez une mise en page à deux colonnes
Maintenant, dans le conteneur de gauche, nous allons faire glisser des widgets 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.
Dans la colonne de droite, nous allons faire glisser le GD > Map bloc.
nous conserverons tous les paramètres par défaut pour le GD > Map. donnons-lui une certaine hauteur et j'ai décidé de lui attribuer la hauteur de 100vh.
Ajoutez le style suivant dans le personnalisateur de thème depuis Appearance => Personnaliser => Ajouter du CSS
.geodir-archive .geodir-listings .geodir_location_listing{ overflow-y: scroll; max-height: 100vh; padding-right: 15px; }
Après cela, la page d'archive des annonces est prête.
Une autre option consiste à utiliser le bloc GD > Simple Archive comme expliqué dans ce tutoriel sur la façon de Créer un site d'annuaire avec Elementor.
Pour la page de recherche, nous répétons le même processus.
Page de recherche
Accédez à GeoDirectory > Paramètres > Général > Pages > Cliquez sur Modifier le modèle de page GD Search
Supprimez tout le contenu de ce GD Search modèle de page.
Copiez tout le contenu de la page GD Archive et collez-le dans la page GD Search.
Notre page GD Search et Archive est maintenant prête.
3. OllieWP Conception de la page de fiche individuelle d'un site d'annuaires
Pour modifier et personnaliser la page GD Detail, vous pouvez aller dans Apparence > Éditeur > Design > Modèles et cliquez sur Modifier GD Single modèle de page.
Ajouter une colonne vide
Commençons par ajouter un slider d'images en haut de la page Détail de l'annonce. Nous allons faire glisser le GD > Post Image bloc dans ce conteneur avec les paramètres suivants
Limite d'images : 10
Limite d'affichage : 3
Type de sortie : Slider
Démarrage automatique : Activer
Maintenant, ajoutons une ligne vide avec
Contenu : 1200
Large : 100
ajouter deux colonnes à l'intérieur.
Ajoutons maintenant tous les shortcodes requis pour la page Détail GD dans la colonne de gauche, un par un.
Cela inclut GD > Taxonomies individuelles, GD > Onglets individuels et GD > Suivant/Précédent individuel.
Dans la colonne de droite, nous allons ajouter GD > Author Action et GD > Output Location bloc.
Après cette étape, notre page Détail de l'annonce est terminée.
Ajout de fonctionnalités premium à votre OllieWP 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 , 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 : restreindre le nombre de photos pour les annonces gratuites tout en en autorisant davantage pour les annonces payantes, autoriser plus ou moins de tags et de catégories, activer ou désactiver des champs personnalisés spécifiques, soumettre des 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.
Lancez votre projet de site d'annuaire avec ces conseils : Créez un site d'annuaire dès aujourd'hui.
Les possibilités sont infinies.
Libérez la puissance de GeoDirectory !
Lancez votre activité en ligne dès maintenant
Rejoignez-nous dès aujourd'hui !Newsletter - Restez informé !
Recevez les dernières actualités, conseils et contenus exclusifs directement dans votre boîte de réception.