Créer un site d'annuaires avec le thème Astra et le plugin Spectra
Quelle est la meilleure façon de créer un site d'annuaire avec le thème Astra ?
La meilleure façon de créer un site d'annuaire avec le thème Astra est d'utiliser le plugin GeoDirectory et le plugin Spectra Blocks. Une excellente manière de construire un annuaire en ligne puissant et personnalisable.
Voici un guide étape par étape pour créer un site d'annuaire avec le thème Astra et leur Spectra Website Builder Plugin
- Installer le thème Astra
- Installer Spectra Blocks
- Installer et configurer GeoDirectory
- Concevoir le site d'annuaire avec le thème Astra et Spectra Block
Voyons en détail comment créer un site d'annuaire avec GeoDirectory et le thème Astra.
Dans ce tutoriel, nous allons :
Installation du thème et des plugins.
1. Installer le thème Astra
Tout d'abord, vous devrez installer un thème, et pour ce tutoriel, vous allez installer le thème Astra.
Accédez à Appearance >> Thèmes
Sélectionnez Ajouter, Installer, et Activer le thème Astra.
2. Installer le plugin Spectra Blocks
Vous devrez maintenant installer le plugin Spectra Blocks. Ce plugin offre davantage d'options pour concevoir la page à l'aide de blocs Gutenberg.
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 et surtout, vous devez installer GeoDirectory.
Accédez à Extensions >> Ajouter, recherchez GeoDirectory. Veuillez l'installer et l'activer, et nous avons terminé l'installation des plugins pour l'instant.
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 Google Maps.
Cliquez sur le bouton Générer une clé et suivez les étapes dans 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 le répertoire est créé. Nous laisserons la ville par défaut inchangée.
GeoDirectory utilise 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 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 d'utilisateurs où ceux-ci pourront retrouver leurs annonces, avis et autres informations pertinentes.
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 de l'assistant d'installation consiste à ajouter quelques annonces fictives. 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'annuaire Astra
Maintenant que nous avons installé le thème, les plugins et effectué la configuration préliminaire de GeoDirectory, nous pouvons commencer à concevoir notre site de répertoire avec Astra.
1. Conception de la page d'accueil du site de répertoire Astra
Vous pouvez créer une nouvelle page ou utiliser l'une de celles que WordPress crée par défaut, comme la Page exemple.
Accédez à 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 web.
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 nouveau site de répertoire est d'investir trop de temps et d'argent avant d'avoir testé l'adéquation produit-marché.
Vous pouvez concevoir un logo en seulement cinq minutes avec une application comme Canva, qui est étonnamment abordable et 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 ou original que vous le souhaiteriez.
Si votre projet prend de l'essor, vous pourrez toujours investir pour l'améliorer ou apporter des changements radicaux par la suite.
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 Appearance > Personnaliser > Identité du site, cliquez sur Sélectionner le logo et téléversez votre fichier PNG. Ignorez le recadrage (ou recadrez l'image selon vos besoins) et cliquez sur Publier.
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'option « En-tête ».
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 :
- Accueil
- À propos
- Blog
- Lieux
- Profil
- Connexion
- 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 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.
Le contenu
Le plugin de blocs Spectra propose de nombreux modèles de pages préconstruits. Vous pouvez y accéder en cliquant sur le bouton Kits de modèles en haut de l'écran d'édition de la page.
Vous pouvez utiliser ces modèles de pages ou un motif spécifique pour construire les pages de votre site.
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 ; ajoutons un bloc conteneur fourni par le plugin Spectra Blocks.
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.
Ensuite, cliquez sur Style dans les onglets supérieurs. Sélectionnez > Images de type comme Type d'arrière-plan.
Pour la section Hero, nous avons besoin d'une image que nous téléchargerons gratuitement depuis Pexels.com (Merci, @Kelly).
Téléversez votre image et sélectionnez Répéter à Pas de répétition et Taille à Couverture.
L'image nécessite une superposition, sinon tout texte placé par-dessus ne présentera pas un contraste suffisant et sera difficile à lire.
Sélectionnez le type de superposition : Couleur, Couleur : #1E293B, et Opacité : 0.3
Maintenant que nous avons assombri l'image hero, nous pouvons ajouter du texte.
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 un exemple simple, comme « Trouvez le meilleur restaurant à Philadelphie. » 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 la recherche GD à l'en-tête de la page d'accueil, faites glisser le GD > Search bloc dans le conteneur héros.
Ensuite, ajoutez une hauteur minimale à ce conteneur héros. Je vais définir la hauteur et la largeur à 800px, et également mettre la largeur du conteneur en pleine largeur et sa largeur de contenu à Encadré.
Voici maintenant à quoi ressemble l'en-tête de la page d'accueil avec le titre de la page et un peu d'espace supplémentaire.
Il est temps de supprimer ce titre de page et cet espace supplémentaire dans la section d'en-tête.
Cliquez sur le titre de la page et vous verrez une icône en forme d'œil ; cliquez dessus pour masquer le titre de la page et supprimer l'espace supplémentaire.
Il est temps d'ajouter quelques sections supplémentaires requises sur la page d'accueil. Je vais maintenant ajouter une section de catégories.
Sous la section hero, cliquez sur l'icône plus pour ajouter un autre conteneur, puis ajoutez le GD > Categories blocs à cet endroit.
Nous allons maintenant effectuer quelques configurations nécessaires dans ce bloc GD > category. Nous allons définir le type de design sur Image Background, avec 4 éléments par ligne, et activer le paramètre utiliser l'image de la catégorie paramètre.
Vous pouvez définir l'image d'une catégorie en modifiant celle-ci depuis wp-admin -> places -> Place Categories.
Chaque catégorie dispose d'une option pour définir une image par défaut
Il est maintenant temps d'ajouter du padding à ce nouveau conteneur. Vous pouvez cliquer sur le conteneur externe et définir le padding requis depuis la section Style. Je lui attribue 70px de padding en haut et en bas.
Maintenant, rapidement, nous allons ajouter quelques conteneurs supplémentaires. Je vais ajouter les annonces récentes sous la section des catégories en utilisant le GD > Listings widget.
Les paramètres à modifier sont :
Dans Filtres > Publications à afficher = 4
Dans Tri > Trier par = plus récent
Dans Conception > Mise en page = Vue Grille (quatre colonnes)
Styles des wrappers > Marge supérieure = 5
Ajoutons quelques cartes afin que les utilisateurs puissent filtrer les annonces avec différents filtres et les consulter sur la carte.
Utilisons GD > Map avec les paramètres suivants :
Type de carte : Directory Map
Options de carte : Activez-les toutes
Ajoutons un peu de style en cliquant sur l'onglet Styles et en définissant la largeur sur 100% et la hauteur sur 600px pour s'assurer qu'elle est bien affichée.
Nous allons également rendre le conteneur de la carte en pleine largeur pour lui donner un aspect plus large et plus esthétique.
Cliquez sur le conteneur externe de la carte et, dans les paramètres généraux, définissez Largeur du conteneur : Pleine largeur et Largeur du contenu : Pleine largeur.
Ajoutons maintenant un autre conteneur pour afficher les publications récentes. Vous pouvez utiliser le Post Grid conteneur de blocs fourni par le plugin Spectra Blocks.
Félicitations ! Votre page d'accueil est terminée.
Si vous le souhaitez, vous pouvez ajouter plusieurs autres conteneurs ou CTA.
2. Conception des pages de listings et de recherche du site d'annuaires Astra
Vous devez maintenant concevoir deux pages essentielles pour tout annuaire.
La page des listings (archive générale, catégories, tags) 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 le design de ces pages.
Les pages de listings et de recherche sont pratiquement identiques, nous allons donc en créer une seule et copier 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 vers le haut, afin que l'utilisateur puisse effectuer une recherche 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 GD > Map. Donnons-lui une certaine hauteur ; j'ai décidé de lui attribuer une hauteur de 100vh.
Maintenant, définissez simplement le conteneur principal en pleine largeur en suivant les instructions indiquées dans l'image.
Désormais, la page d'archive des listings est prête.
La version gratuite d'Astra dispose de paramètres limités, vous pourriez donc avoir besoin du snippet CSS ci-dessous pour que le contenu du conteneur de gauche ait la même taille que le conteneur de carte de droite. Vous pouvez le coller dans le personnalisateur de votre thème depuis wp-admin > Appearance > Customise
.geodir-archive .wp-block-geodirectory-geodir-widget-loop .geodir-loop-container .geodir-listing-posts{ overflow-y: scroll; max-height: 100vh; }
Il existe une méthode encore plus simple. Si vous définissez votre page en pleine largeur, vous pouvez ajouter le GD > Simple Archive Block comme expliqué dans notre tutoriel Comment créer un site d'annuaires avec Elementor.
Pour la page de recherche, nous répétons le même processus.
Page de recherche
Accédez à Geodirectory > Settings > General > Pages > Cliquez sur edit GD Search page template.
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 listing individuelle du site d'annuaires Astra
Pour modifier et personnaliser la page GD Detail, vous pouvez accéder à 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 conteneur avec le paramètre Largeur du conteneur : Pleine largeur et Largeur du contenu : Pleine largeur.
Maintenant, ajoutons un diaporama d'images en haut de la page de détail de l'annonce. Nous allons faire glisser le GD > Post Image bloc dans ce conteneur.
Nous définirons la limite d'images sur 10 et la limite d'affichage sur 1, de sorte qu'une seule image s'affiche sur chaque diapositive.
Maintenant, ajoutons un autre conteneur en dessous de celui-ci, dans lequel nous placerons les autres blocs requis de la page de détail GeoDirectory.
Maintenant, ajoutons ici un par un tous les shortcodes requis de la page de détail GD. Cela inclut GD > Single Taxonomies, GD > Single Tabs
Il est maintenant temps d'ajouter des widgets dans 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 une option Modifier et Supprimer l'annonce à l'auteur de l'annonce.
Ajoutez un widget supplémentaire, 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 effectué cela, notre page Détail de l'annonce est terminée.
Ajouter des fonctionnalités premium à votre site d'annuaire Astra
Si vous le souhaitez, vous pouvez maintenant ajouter des fonctionnalités premium à votre annuaire, telles que :
- Annonces payantes: Avec l'add-on 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 : la restriction du nombre de photos pour les annonces gratuites tout en autorisant davantage de photos pour les annonces payantes, l'autorisation d'un plus ou moins grand nombre de tags et de catégories, l'activation ou la désactivation de champs personnalisés spécifiques. La 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 publicités directement, en permettant aux entreprises d'ajouter des bannières dans des zones spécifiques de votre site web ou en permettant aux annonces d'apparaître sous forme de 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éveloppez votre site d'annuaire idéal grâce à cette ressource complète : Créer votre site d'annuaire : un guide complet.
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.
