Récemment, nous avons créé Blockstrap, à la fois une extension (fournissant les blocs de construction de pages) et un thème de blocs (FSE – Full Site Editing) qui combine la puissance du nouvel éditeur de site de WordPress et Bootstrap 5.
Nous avons conçu Blockstrap comme la base de notre nouvelle génération de thèmes annuaires, qui comprendra bientôt un annuaire d'entreprises générique avec un thème Événements, un thème Immobilier, un thème Offres d'emploi, un thème Petites annonces, et bien d'autres modèles d'annuaires pour WordPress,
Tous ces thèmes sont spécifiquement conçus pour créer un site annuaire pixel-perfect avec GeoDirectory.
Dans ce tutoriel, vous trouverez un guide étape par étape pour créer un site annuaire en utilisant le thème Blockstrap, le thème enfant Directory et notre extension GeoDirectory :
- Installer le thème Blockstrap/Directory
- Installer et configurer GeoDirectory
- Concevoir le site annuaire à l'aide du constructeur de thème de blocs
Dans ce guide, nous vous montrerons comment créer un annuaire en ligne moderne en utilisant le thème Directory et l'extension GeoDirectory.
Avec cette configuration, vous pouvez facilement ajouter des fonctionnalités basées sur la localisation, donner un aspect attrayant à votre site et ajouter différents types de contenu qui change de façon dynamique.
Mais pour l'instant, nous allons rester simples et faciles à comprendre.
Dans ce tutoriel, nous aborderons :
Installation du thème et des plugins.
1. Installer le thème Blockstrap et son Directory Child Theme
Commençons par installer le Directory thème. Comme il s'agit d'un thème enfant de Blockstrap il installera automatiquement le thème principal également.
L'installation du thème Blockstrap vous invitera également à installer le plugin Blockstrap.
le plugin Blockstrap est notre constructeur de pages, nécessaire pour ajouter la collection de blocs Blockstrap et enrichir le design de votre site d'annuaires.
Si vous vous interrogez sur les trois avis 1 étoile concernant ce thème, sachez qu'ils portent en réalité sur une très ancienne version de ce thème créée par d'autres développeurs, et non sur la version actuelle. Nous avons acquis le thème « Directory » original ainsi que son URL (wordpress.org/themes/directory/) parce que nous en appréciions le concept et souhaitions l'intégrer à notre nouveau produit. Malheureusement, cela impliquait d'hériter de ses anciens avis négatifs.
Rendez-vous sur votre site WordPress et depuis
WP-Admin >> Appearance >> Thèmes >> Add New: recherchez Directory et installez la première option de thème.
2. Installer GeoDirectory
Voici comment procéder :
- Allez dans « Extensions » puis « Ajouter une extension ».
- Recherchez GeoDirectory.
- Installez-le et activez-le.
C'est tout ! Les plugins sont maintenant entièrement configurés.
3. Assistant d'installation de GeoDirectory
Pour GeoDirectory, vous devez terminer l'assistant de configuration afin de paramétrer la clé API Google Maps et d'importer quelques annonces fictives.
Choisir le système de cartographie (Google Maps ou OpenStreetMap)
À la première étape de la configuration, vous choisissez entre deux systèmes de cartographie : Google Maps et OpenStreetMaps. Dans ce guide, nous utilisons OpenStreetMaps.
Si vous préférez Google Maps, quelques étapes supplémentaires sont nécessaires :
- Cliquez sur le bouton « Générer une clé » et suivez les instructions fournies ici pour créer une clé API valide.
- Voici les étapes importantes :
- Activer les clés.
- Créer un nouveau projet ou en sélectionner un existant.
- Obtenir la clé.
- Configurer un compte de facturation.
- Limiter la clé API (afin qu'elle ne fonctionne que depuis l'URL de votre site).
La quatrième étape est essentielle, mais vous ne payez que si vous dépassez 200 $ par mois. Cependant, le crédit gratuit couvre généralement les besoins de la plupart des annuaires.
Passons maintenant à la configuration de la ville par défaut.
Définir la ville par défaut
Ensuite, vous sélectionnerez l'emplacement par défaut, c'est-à-dire la ville principale mise en avant dans l'annuaire.
Nous avons choisi Philadelphia comme ville par défaut, mais vous êtes libre de choisir n'importe quel emplacement.
Si vous créez un annuaire couvrant plusieurs villes, vous aurez besoin de l'extension Location Manager.
Ajouter des fonctionnalités supplémentaires
Dans cette étape, nous allons configurer UsersWP, une extension pour la inscription des utilisateurs. Cela permet aux utilisateurs de s'inscrire et de se connecter à votre site.
UsersWP est indispensable pour que les utilisateurs puissent gérer leurs annonces, créer des profils et accéder à des fonctionnalités telles que les avis.
De plus, nous allons installer Ninja Forms, qui ajoute des formulaires de contact à toutes les annonces. Ces formulaires envoient des e-mails directement aux propriétaires des annonces. (REMARQUE : BlockStrap dispose d'un formulaire de contact simple qui peut être utilisé à cet effet ; Ninja Forms est utile pour des formulaires plus avancés)
Notez que AyeCode Connect n'est pas requis pour ce tutoriel, sauf si vous souhaitez ajouter des extensions premium GeoDirectory directement depuis votre tableau de bord WordPress.
Ajouter des données factices
La dernière chose à faire dans l'assistant d'installation est d'ajouter quelques annonces exemples. Cela crée également des catégories pour les annonces, mais vous pouvez toujours les modifier ultérieurement si vous le souhaitez.
Concevoir le Blockstrap/Directory Theme site d'annuaire
Maintenant que nous avons installé le thème et les plugins, et complété la configuration préliminaire de GeoDirectory, nous pouvons commencer à concevoir notre site web d'annuaires.
Notre Blockstrap's thème enfant appelé Directory thème, fournit déjà un modèle de bloc prédéfini pour les pages GeoDirectory.
Dans cet article, nous allons personnaliser ces modèles prédéfinis directement.
1. Blockstrap/Directory Design de la page d'accueil
Pour personnaliser le design de la page d'accueil.
Accédez à Appearance >> Gutenberg >> Cliquez sur Templates
Sélectionnez maintenant le modèle Front page et cliquez sur l'icône de modification.
avant de modifier le modèle de la page d'accueil, créons d'abord un logo pour le site web.
1. Le logo
Commençons par l'essentiel : nous avons besoin d'un logo pour notre site web.
Vous n'avez pas besoin de faire appel à un designer pour créer la première version de votre logo.
L'une des plus grandes erreurs que vous puissiez commettre en lançant un nouveau répertoire est de consacrer trop de temps et d'argent avant de tester si les gens ont besoin de ce que vous envisagez de créer.
Vous pouvez créer un logo en seulement cinq minutes à l'aide d'une application comme Canva, qui est fantastique et gratuite (ou peu coûteuse au regard de ce qu'elle propose si vous optez pour un plan premium).
Pour une version de base de votre produit (appelée MVP, ou produit minimum viable), un logo réalisé avec Canva fera parfaitement l'affaire.
Il existe de nombreux modèles de logos parmi lesquels choisir, et ce n'est pas grave si votre premier logo n'est pas parfait ou vraiment unique.
Si votre projet commence à bien fonctionner, vous pourrez toujours travailler à améliorer ou à changer complètement le logo par la suite.
Un logo ordinaire n'est généralement pas la raison pour laquelle un projet échoue.
Nous utiliserons ce logo lorsque nous créerons l'en-tête du site web.
L'en-tête
Ajoutons maintenant cette image de logo en sélectionnant le bloc approprié dans la partie gauche, comme indiqué dans la capture d'écran ci-dessous.
Ajoutons maintenant quelques éléments de menu requis. Comme Accueil, Lieux, et Blogs, Contact et À propos dans notre cas.
Vous pouvez utiliser le BS > Nav item bloc pour ajouter le nouvel élément de menu.
CONSEIL PRO : Si vous décidez d'utiliser l'en-tête transparent pour la page d'accueil, vous devrez ajouter le logo à la fois dans l'en-tête standard et dans l'en-tête transparent.
Le contenu
Voici à quoi ressemble la page d'accueil par défaut avec le Blockstrap's Directory Child Theme.
Elle semble déjà complète en elle-même, mais nous allons y apporter quelques modifications mineures.
Le gd_location les shortcodes appartiennent à l'extension Geodirectory Location Manager . Comme nous n'utilisons pas cette extension pour le moment, je supprime ces shortcodes que vous voyez dans la capture d'écran ci-dessous.
Voici maintenant à quoi ressemble notre page d'accueil.
Si vous souhaitez ajouter une nouvelle section ou apporter des modifications au contenu d'une page, vous pouvez utiliser le Blockstrap theme blocs intégrés qui commencent par BS >
2. Blockstrap/Directory Design de la page des annonces et de la recherche du site
Comme mentionné précédemment, les thèmes Blockstrap et Directory disposent déjà de modèles prédéfinis pour les pages GD.
Tous ces modèles sont complets en eux-mêmes, nous n'avons donc pas besoin d'y apporter des modifications.
Étant donné que les pages internes utilisent un en-tête hero, nous devons personnaliser la section d'en-tête de la page Archive et la mettre à jour avec le nouveau logo et les éléments de menu.
Allons dans Appearance >> Gutenberg >> Cliquez sur Templates >> Sélectionnez GD Archive pour la mise en page de la page Archive.
Comme pour la page d'accueil, nous allons télécharger le nouveau logo et les éléments de menu ici sur l'en-tête de la page GD Archive.
Voici à quoi ressemble la page GD Archive avec le design par défaut.
de même, pour la GD Search page, sélectionnez le GD Search Archive modèle et effectuez les modifications nécessaires.
Je conserve la mise en page par défaut pour cet article.
3. Blockstrap/Directory Design de la page d'annonce individuelle du site
Pour personnaliser le GD Detail page, sélectionnez le GD Single modèle de page et effectuez les modifications nécessaires.
Voici à quoi ressemble le modèle par défaut de la page GD Details, qui semble complet et contient tous les éléments requis. Je ne vais donc pas le modifier.
Ajout de fonctionnalités premium à votre Blockstrap/Directory Site web
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 choisissez le prix à payer pour ajouter une annonce. Vous pouvez définir des tarifs différents selon les options. Par exemple, vous pouvez proposer plus de fonctionnalités pour les annonces payantes, comme la possibilité d'ajouter plus de photos, tout en limitant les fonctionnalités pour les annonces gratuites. Vous pouvez également décider quels champs spéciaux sont disponibles et quelle est la longueur maximale des descriptions.
- Claim Listings: Cette fonctionnalité est essentielle pour un annuaire. Voici comment elle fonctionne : d'abord, l'administrateur configure la base de données. Ensuite, il invite les propriétaires d'entreprises à gérer leurs annonces gratuites. Si un propriétaire souhaite un contrôle total, il devra peut-être d'abord passer à une annonce payante.
- Publicité: la vente d'annonces publicitaires est une autre façon de monétiser un annuaire en ligne. Si votre site reçoit beaucoup de visiteurs, vous pouvez utiliser des réseaux publicitaires. Sinon, vous pouvez vendre des publicités directement. Cela signifie que les entreprises peuvent payer pour afficher des bannières dans des zones spécifiques de votre site, ou que leurs annonces peuvent apparaître comme des publicités, par exemple en haut des résultats de recherche.
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 un marché mondial pour les articles faits main, vendre des billets pour des événements ou proposer des bons de réduction.
Si vous souhaitez vous lancer, consultez cette ressource : Comment créer un site d'annuaire de zéro.
Ce tutoriel est polyvalent et peut être adapté pour fonctionner avec n'importe quel thème ou constructeur de pages.
Les possibilités offertes par votre site sont infinies.
Conclusion
Nous avons publié un grand nombre de tutoriels sur la création d'un annuaire avec les thèmes et constructeurs de pages les plus populaires.
Si vous en avez lu certains, vous remarquerez que la création avec le framework Blockstrap et son thème enfant pour annuaire est plus simple.
Le résultat est bien plus beau.
Et enfin, si vous testez un site d'annuaire Blockstrap, vous remarquerez également qu'il est bien plus rapide que tous ceux pour lesquels nous avons créé des tutoriels jusqu'à présent.
Le meilleur dans tout ça, c'est que le thème et plugin Blockstrap ainsi que le thème enfant pour annuaire sont 100 % gratuits !
Alors, qu'attendez-vous ? Lancez votre site d'annuaire avec Blockstrap et le plugin GeoDirectory et commencez à gagner de l'argent en ligne dès maintenant !