Comment créer un site annuaire avec OceanWP ?
Voici un guide étape par étape pour créer un site annuaire avec le thème OceanWP :
- Installer le thème OceanWP
- Installer et configurer GeoDirectory
- Installer le plugin Spectra Gutenberg Blocks
- Concevoir le site d'annuaires avec le thème OceanWP et Gutenberg Gutenberg
Le thème OceanWP, combiné au plugin GeoDirectory et à un plugin de blocs Gutenberg, offre une solution robuste et flexible pour créer un annuaire en ligne dynamique.
Ce trio 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 OceanWP
Nous devons installer un thème et, pour ce tutoriel, vous allez installer le thème OceanWP.
Accédez à Appearance >> Thèmes
Sélectionnez Ajouter, Installer, et Activer le thème OceanWP.
2. Installer le plugin Spectra Blocks
Le plugin Gutenberg par défaut n'est pas suffisant pour styliser un modèle, nous allons donc installer le plugin Spectra Blocks. (consultez ce tutoriel si vous souhaitez créer un site d'annuaires avec le thème Astra et le plugin Spectra à la place)
Ce plugin fournit des blocs Gutenberg personnalisés, plus performants que les blocs par défaut, et vous aidera à concevoir les modèles de pages.
Accédez à Extensions >> Ajouter.
Recherchez Spectra Blocks. Installez-le et activez-le.
Vous pouvez ignorer toutes les étapes de l'assistant de configuration.
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 New York 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 site d'annuaires OceanWP
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 thème OceanWP.
1. Conception de la page d'accueil du site d'annuaires OceanWP
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) initial, un logo créé avec Canva est tout à fait suffisant.
Canva propose une multitude de modèles de logos, et il n'y a pas de problème si votre premier logo n'est pas parfait ou totalement original.
Au fur et à mesure que votre projet prend de l'ampleur, vous avez toujours la possibilité d'affiner ou de revoir entièrement votre logo.
N'oubliez pas que le succès d'un projet ne dépend pas de la perfection de son logo.
Allez maintenant dans Appearance > Personnaliser > En-tête > Logo, cliquez sur Sélectionner le logo et téléchargez votre fichier PNG. Ignorez le recadrage (ou recadrez l'image si nécessaire) et cliquez sur publier. Vous pouvez également définir la hauteur et la largeur maximales du logo si celui-ci est de grande taille.
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'optionPrincipal».
Si vous le souhaitez, vous pouvez faire apparaître le même menu dans le pied de page ou en créer un autre à cet endroit.
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
- À propos
- Blog
- Lieux et ajouter des lieux
- Page de recherche
- Connexion
- Compte > Profil > Mot de passe oublié > Déconnexion
Le lien de connexion (depuis les points de terminaison UsersWP) n'apparaîtra que pour les utilisateurs déconnectés, tandis que les liens de déconnexion, de compte et de profil n'apparaîtront que pour les utilisateurs connectés.
La typographie
Définissons maintenant la typographie pour la police et la taille du texte du site. Je configure une famille de polices, une graisse et une taille de police globales qui seront appliquées à tout le texte du site.
nous allons dans Apparence > Personnalisateur > Typographie > Corps. Nous définirons le Famille de polices : Red Hat Text et Graisse de police : Normal : 400
et dans les paramètres Apparence > Personnaliser > Typographie > menu principal. Nous allons définir Graisse de police : Moyen 500, Taille de police : 13px
Nous allons maintenant accéder à Apparence > Personnaliser > Options générales > Style général Couleur principale : #ff914d et Couleur principale au survol : #ff731c
Le contenu
Je vais commencer à construire cette page de zéro en utilisant le plugin Spactra Blocks.
nous avons besoin d'un en-tête hero sur la page d'accueil, pour cela ajoutons un bloc conteneur fourni par le plugin spectra blocks.
Ensuite, cliquez sur Style dans les onglets supérieurs. Sélectionnez > Images de type comme Type 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, @Kelly).
Cliquez sur la section ajoutée et sélectionnez Pleine largeur dans l'option Largeur du contenu, comme indiqué dans la capture d'écran ci-dessous.
Depuis l'onglet Style des paramètres du bloc conteneur, sélectionnez Répéter à Pas de répétition et Taille à Couverture.
Faites glisser et déposez un élément Titre à l'intérieur de l'image héros.
Il est temps de donner un titre à l'image héros de notre page d'accueil.
Depuis l'onglet Style, changez la couleur du texte en blanc (#FFFFFF) pour améliorer le contraste et la lisibilité.
Dans ce tutoriel, j'utiliserai quelque chose de simple comme « Trouvez le Meilleur Restaurants à New York » Vous pouvez ajouter le slogan de votre choix ici.
N'oubliez pas de centrer le texte à l'aide de l'option d'alignement.
Pour ajouter une recherche GD dans l'en-tête de la page d'accueil, faites glisser le bloc GD > Search à l'intérieur du conteneur hero.
Ensuite, ajoutez une hauteur minimale à ce conteneur hero. Je vais la définir à 650 x 600 px en largeur et hauteur, et définissez également la largeur du conteneur : Encadré et la largeur du contenu : Encadré.
il est temps de supprimer le titre de cette page et l'espace supplémentaire dans la section d'en-tête.
Cliquez sur l'icône O en haut à droite de la page, cliquez simplement dessus. À l'intérieur, dans la section Général, définissez padding : désactivé et dans la sélection Titre Titre : désactivé
Il est temps d'ajouter quelques sections supplémentaires requises sur la page d'accueil ; je vais maintenant ajouter une section des dernières annonces.
Sous la section héro, ajoutez une autre conteneur 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
Nous allons maintenant ajouter un CTA pour inciter les propriétaires d'entreprise à référencer leur établissement. Nous allons ajouter un conteneur vide et, dans les paramètres de style,
définir un arrière-plan.
Ajoutons maintenant les styles du conteneur :
Type de superposition : Couleur
Couleur de superposition de l'image : #FF6900
Opacité de la superposition : 0.3
Largeur du conteneur : Pleine largeur
Largeur du contenu : Encadré
Nous allons également ajouter un Appel à l'action bloc fourni par Spectra à l'intérieur de ce conteneur.
Typographie pour la section CTA.
Couleur : #fffff
Taille de police : 32px
ajoutons un peu de style au bouton.
Couleur du texte : #000000
Couleur d'arrière-plan : #FFFFFF
Rayon : 30px tous les côtés
Rembourrage : 10px, 30px, 10px, 30px
Changeons le texte du bouton en Ajouter une annonce et le lien vers la page Ajouter une annonce.
Notre section CTA est maintenant terminée. Nous allons ajouter une autre section : GD > Categories la section en dessous.
Les paramètres seront les suivants
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
Et voilà, ajoutons maintenant la dernière section pour l'affichage des liens de réseaux sociaux. Nous l'appellerons RESTEZ EN CONTACT.
Ajoutez un nouveau conteneur vide avec un arrière-plan #000000.
Nous allons maintenant ajouter un titre dans ce conteneur avec Alignement : Centré et Titre : H3
Je vais ajouter le texte « Restez en Contact »
Couleur : #ffffff
Taille de police : 24px
Ajoutons maintenant un paragraphe en dessous pour y ajouter du texte.
Ajouter du style
Couleur du texte : #ffffff
Taille : Petit
Nous allons maintenant ajouter le bloc d'icônes sociales en dessous.
Dans ce bloc d'icônes sociales, ajoutez le style suivant
Taille : 15px
Taille de l'arrière-plan : 10px
Rayon de bordure : 100
Couleur : #ffffff
Félicitations ! Votre page d'accueil est terminée.
2. Conception de la page Annonces et Recherche du site répertoire OceanWP
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 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.
Ajoutez maintenant un conteneur à deux colonnes.
Maintenant, dans le conteneur de gauche, nous allons faire glisser les widgets liés à la page d'archive GD tels que GD > Loop Action, GD > Loop, GD > Loop Pagination et GD > Search en haut, afin que l'utilisateur puisse effectuer des recherches depuis la page d'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.
Définissez maintenant le conteneur principal en pleine largeur en suivant les instructions ci-dessous indiquées dans l'image.
Nous allons maintenant définir le modèle de page Archive en Pleine largeur
nous allons également ajuster la section de style d'en-tête pour toutes les pages depuis le Personnalisateur de thème > Options générales > Paramètres généraux.
avec le style
Style de titre : Centré
Rembourrage : 20px
Couleur d'arrière-plan : #1e73be
Couleur du texte : #ffffff
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. Conception de la page de liste unique du site annuaire OceanWP
Pour modifier et personnaliser la page GD Detail, vous pouvez aller dans 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 ajouter un nouveau conteneur.
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.
Dans ce bloc GD > Image, ajustez les paramètres suivants.
Limite d'images : 50
Limite d'affichage : 2
Ajoutons maintenant un autre conteneur en dessous de celui-ci, dans lequel nous ajouterons les autres blocs requis de la page de détail GeoDirectory.
Ajoutons maintenant tous les shortcodes requis de la page GD Detail un par un. Ce qui inclut GD > Single Taxonomies, GD > Single Tabs, GD > Single Next Prev.
Il est maintenant temps d'ajouter des widgets à la barre latérale. Nous allons donc aller dans wp-admin > Apparence > Widgets.
Ajoutez le widget GD > Author Action dans la barre latérale principale. Ce widget fournira un Modifier, Supprimer l'annonce à l'auteur de l'annonce.
Ajouter un autre widget GD > Output Location. Ce widget affichera tous les principaux détails de l'annonce qui ont été marqués comme visibles sur la page de détail.
Après avoir fait cela, notre page Détail de l'annonce est terminée.
Ajouter des fonctionnalités premium à votre site de répertoire OceanWP
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.
Démarquez votre site de répertoire en suivant ce guide : Créer un site de répertoire professionnel.
Les possibilités sont infinies.