skip to Main Content

Comment ajouter une carte de voyage interactive sur WordPress

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

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.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

« 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).

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

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″]

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

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.

Cet article comporte 30 commentaires

  1. Bonjour, Petite question, comment on choisit la zone de la carte a afficher? Je veux faire une carte de la Nouvelle Zelande mais quand on ouvre la page avec la carte le zoom est fait sur la France…

  2. Bonjour,

    Je suis novice sur wordpress, idem que pour Idem, j’ai un message d’erreur qui apparaît sur la carte :  » Petit problème… Une erreur s’est produite
    Google Maps ne s’est pas chargé correctement sur cette page. Pour plus d’informations techniques sur cette erreur, veuillez consulter la console JavaScript. »
    J’ai tenté de changer de thème comme conseillé mais cela ne résout pas mon problème, pouvez-vous m’aider svp ?

    Vous remerciant par avance !
    Bonne journée,
    Sonia,

  3. Bonjour,

    je n’ai pas SEO >> Titres & Métas …
    J’ai seulement le tableau de bord et Search Console. ESt-ce parce que je n’ai pas la version premium payante ??

  4. Bonjour,
    je suis débutant, et je consulte votre blog…
    il semble qu’il y a une erreur de syntaxe sur le shortcode qui devrait être [nwm_map id= »1″] , et non [mwm _map id=’1’]
    J’ai pas mal galéré avant de voir ça.
    Bonne journée

  5. Bonsoir,

    Merci pour votre tutoriel.
    J’ai essayé de suivre votre méthodologie afin d’intégrer une carte dans une PAGE (WordPress), cependant je n’obtiens pas le résultat attendu.
    Dans la partie TEXTE (et non visuel), je rentre le shortcode suivant :
    [mwm _map id=’2’]
    Lorsque je prévisualise ma page, je n’ai pas la carte qui s’affiche mais le texte « [mwm _map id=’2’] ».
    Pourriez-vous m’aider svp ?
    Je vous remercie.

        1. Vous pouvez héberger votre capture d’écran sur des sites spécialisés puis publier le lien ici. Ou alors vous pouvez le mettre dans vos medias et me donner le lien.

  6. Bonjour,

    J’ai installé le plugin mais j’ai problème :
    Dans « nomad map », la carte ne s’affiche pas ! je ne peux donc rien paramétrer.
    Voilà cequi s’affiche : « Petit problème… Une erreur s’est produite
    Google Maps ne s’est pas chargé correctement sur cette page. Pour plus d’informations techniques sur cette erreur, veuillez consulter la console JavaScript. »

    Je ne sais pas modifier la console javascript et surtout je ne vois pas ce qu’il faut faire!

    Merci de votre aide

    1. Bonjour,
      La console javascript permet de découvrir ce qui est à l’origine du problème. Avez-vous suivi le tutoriel ? Si tel est le cas, alors j’aurai besoin d’avoir une capture de votre console javascript. Pour cela, vous devez appuyer sur F12 (sur Chrome), sur la zone qui s’affiche, recherchez l’onglet « console », puis faite une capture. Il existe plusieurs outils qui vous permettront de faire des captures. Une fois que vous aurez la capture de votre console javascript, je pourrai vous aider.

  7. Bonjour,

    Je n’arrive pas à insérer la carte sur mon site. J’ai inséré [mwm _map id=’1′] puis [nwm _map id=’1′] (à la suite de la lecture des commentaires) sur une de mes pages mais dans l’aperçu il n’y a que le shortcode qui s’affiche. Que puis-je faire?

    Merci

  8. bonjour

    je n’arrive pas a sélectionner l’article dans lequel je veux mettre la carte, cela me met : No blog post found, please try again. avez vous une idée pour résoudre mon problème ?

    merci d’avance

      1. Bonsoir
        j’ai fini par réussir en faisant un copier/coller du titre, la saisie manuelle ne fonctionnant pour aucun des articles
        cependant je cale à nouveau avec le short code, je débute désolé… j’ai inséré [mwm_map id=’1′] en tout début de mon article (partie saisie TEXTE et non VISUEL de wordpress) mais dans l’apercu aucune carte juste le short code …
        je suis vraiment pas douée
        :-(((

    1. Bonjour,
      Vous n’avez pas besoin de sélectionner un article, il vous suffit d’ajouter le shortcode [mwm_map]. Lisez attentivement la section « Comment afficher une carte dans une page/article ».

      Si le problème persiste contactez-nous à nouveau

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
30 Partages
Partagez28
Tweetez
Enregistrer2