Cet article va plaire aux voyageurs, je vais te montrer comment mettre en évidence toutes les villes que tu as visitées lors de ton dernier voyage, le tout gratuitement. Tu vas pouvoir créer une carte, et tes propres marqueurs.
Je ne souhaite pas utiliser de clé API, nous allons donc utiliser une carte leaflet (open source) : si tu ne comprends pas ce paragraphe, ce n’est pas grave pour la suite de la démo !
Création de ta cartes
Commençons par télécharger le plugin « Travelers’ Map » de Camille Verrier. C’est vrai que le plugin n’a pas beaucoup de téléchargements, mais je vois qui est compatible avec ma version WordPress et il a été mis à jour il n’y a pas si longtemps :
Une fois que tu as installé et activé le plugin, on va partir d’un exemple pour faire le test. Imagine… C’est peut-être vrai… que tu étais à Cuba pour découvrir La Havane, Cienfuegos et Trinidad.
Tu vas créer une page Cuba, où tu vas donner ton ressenti de ce super mégagénial voyage, et écrire trois articles sur chaque ville que tu as visitée :
- La Havane
- Cienfuegos
- Trinidad
Si Cuba ne t’inspire pas, tu peux prendre un autre pays comme exemple.
Une fois que tu crées cette page et ces trois articles (c’est une démo : pas besoin d’y mettre du texte), reviens ici !
Maintenant que tout ça s’est fait, tu vas aller sur l’onglet « Traveler’s Map » puis cliques « Réglages » sur le menu gauche WordPress :
Au niveau de « Activer Travelers’ Map sur : » tu vas cocher « Article » et « Page » si ce n’est pas déjà fait. Cela va permettre de créer une map sur les pages et les articles :
N’oublie pas d’enregistrer en fin de page.
Ensuite, nous allons prendre le short code pour dire : « hé, je veux que ma carte soit ici » (sur la page Cuba) :
- Au survole : « Travelers’ Map »
- Clic sur « Assistant code court »
- Copie le code court
Va sur la page « Cuba » et colle le code court là où tu veux que ta carte apparaisse. Moi je mets le code court sous le titre principal.
Rends-toi maintenant sur l’article « La Havane » de ton éditeur WordPress. En bas de ta page, tu vois une map avec des marqueurs…
À la zone de la map, indique les choses suivantes :
- Le nom de la ville
- Choisis ton marqueur
- Tu peux écrire le nom de la ville sur cette zone
- Choisis une des photos que tu as prises lorsque tu étais à La Havane (de préférence de dimension 300x300px)
Tu peux également choisir le lieu précis avec la « Latitude » et la « Longitude »
N’oublie pas d’enregistrer !
Puis, répète la même opération sur l’article « Cienfuegos » et « Trinidad ». Bien sûr, tu ne vas pas écrire La Havane, mais pour chaque article sa ville.
Une fois cette opération faite, tu peux aller sur la page « Cuba » de ton site. Une belle map apparaît, avec les marqueurs que tu auras sélectionnés.
En cliquant sur un marqueur, par exemple « La Havane », la photo que tu as choisie auparavant apparaît. Quand tu cliques sur la photo tu seras redirigé vers l’article « La Havane » :
Super, non ?
Tu peux faire le test avec « Cienfuegos » et « Trinidad » sur la page « Cuba ».
Comment rendre tes marqueurs uniques
Comme tu as pu le voir plus haut, j’ai utilisé des marqueurs personnalisés. Je vais te montrer comment on fait cela.
Survol l’onglet : « Traveler’s Map » puis clique « Personnaliser les marqueurs » sur le menu WordPress de ta gauche :
En haut de la page, au niveau de « Marqueur » clique sur « Ajouter »
Maintenant, tu vas pouvoir créer ton image :
- Donne un nom à ton marqueur
- Choisis une icône de préférence de dimension 32x32px en extension « png »
- Et clique sur « Publier »
Tu auras maintenant de nouveaux marqueurs pour tes cartes.
Que penses-tu de ce plugin ? N’hésite pas à donner ton avis.
Merci pour cet article! Très sympa ces cartes. Mon blog n’a rien à voir avec les voyages mais ce plugin pourrait tout à fait me servir pour créer des cartes pour les livres photos souvenir que nous imprimons après chacun de nos voyages! Merci encore pour l’astuce!
Avec plaisir… Très bonne idée, merci de l’avoir partagé