Voyagez-vous souvent ? Car si vous ne le savez pas encore, WordPress est également très utilisé par les blogueurs passionnés de voyage. Avec ce dernier, ils peuvent partager leurs photos et les moments exceptionnels qu’ils ont eu à vivre avec d’autres personnes.

Alors, pour vous qui aimez partager les lieux que vous visitez, ne pensez-vous pas qu’il serait bien d’ajouter une carte de voyage interactive qui affichera les différents endroits où vous êtes allés ?

Si cette idée vous enchante comme moi, alors sachez que vous apprendrez dans ce tutoriel à intégrer une carte interactive sur votre blog WordPress.

apercu-carte-interactive

Comment installer et configurer le plugin Nomad World Map

La première chose à faire est d’installer et d’activer le plugin Nomad World Map (il porte bien son nom) disponible sur WordPress.org depuis votre tableau de bord. Vous pouvez également télécharger le plugin sous forme de fichier zip.

nomad wold map

Après l’installation et l’activation du plugin, un nouveau menu « Nomad Map » s’ajoutera au tableau de bord (tout en bas à gauche). Cliquez sur son sous-menu settings, car nous procéderons à sa configuration.

nomad reglages

Les configurations par défaut sont suffisantes. Je vous expliquerai toutes fois quelques options.

Dans la section « General »

Il est possible d’activer un tracé entre les lieux visités. L’option qui suit « Draw curved lines on the map » vous permet de tracer des lignes courbées sur la carte.

« On pageload zoom to », vous donne la possibilité de mettre l’accent sur un lieu lorsque la page se charge. Vous avez le choix entre le premier lieu ou le dernier lieu.

« Zoom level » permet d’ajuster le zoom effectué sur la carte.

« Map type » vous permet de choisir le type de carte

L’option « Past route color » est la couleur d’un chemin emprunté et « Future route color » est la couleur des routes futures (pour les voyages programmés).

La section « Content Option »

Avec l’option « show post thumbnails in a circle », vous pouvez afficher l’image à la une d’un article dans une bulle. L’option « Show the location content in the » vous permet d’afficher les détails du lieu dans un slider ou une info-bulle.

Comment ajouter un nouveau lieu à la carte

Cliquez sur le bouton « Route Editor ». Sur cette nouvelle page, nous allons commencer par ajouter le nom du lieu, par exemple « Prague », ce qui va afficher un pointeur sur la carte à l'emplacement spécifié. Cliquez ensuite sur « Set ».

ajout-dun-lieu

L’option « Location content » vous permet de choisir un article qui sera lié à ce lieu. Vous pouvez en outre ajouter un contenu directement en choisissant « Custom content ».

Pour attacher le lieu à un article, laissez l’option « Post Excerpt » activez et cliquez sur « Search » sur le champ suivant pour effectuer une recherche, juste après avoir spécifié le titre de l’article (et non des termes de recherche).

Vous pouvez ensuite modifier l’image à la une, spécifiez les heures de départ et d’arrivé au lieu, et une fois que c’est fait, cliquez sur « Save » tout en bas à gauche.

ajout-d-information-a-un-lieu

Après avoir cliqué sur « Save », vous pourrez répéter le processus, pour ajouter les différents lieux où vous êtes allés.

carte-voyage-exemple

Comment ajouter plusieurs cartes de voyage

Il vous suffit d’accéder au menu « Manage Maps » du plugin et de cliquer sur « Add new map ». Une fenêtre s’ouvrira, vous devrez enregistrer le nom de la carte, exemple : « Voyage Spécial 2014 ».

ajouter-le-nom-d-une-carte

Cliquez ensuite sur le nom de cette carte pour ajouter des lieux, comme il a été présenté plutôt.

modifier-une-carte

Vous pouvez également accéder à une carte en choisissant cette dernière dans la liste des cartes disponibles.

choisir-une-carte

Comment afficher une carte dans une page/article

Il vous suffit de récupérer l’identifiant d’une carte et de l’intégrer comme paramètre au shortcode qui suit :

[mwm_map]

De sorte à avoir des shortcodes identiques à ceci : [mwm _map id= »2″] ou [mwm _map id= »10″]

Pour récupérer l’identifiant d’une carte, revenez sur la page « Manage Maps » du plugin et copiez le chiffre correspondant à la carte de votre choix sur la colonne « ID ».

identifiants-cartes

Utilisez ce shortcode dans un article/page et consultez ce dernier afin de voir comment se comporte le plugin.

resultat-nomad-world-map

C’est tout pour ce tutoriel sur la création d’une carte interactive de voyage sur WordPress. N’hésitez pas à partager l’astuce avec vos amis sur les réseaux sociaux.