Springe zum Hauptinhalt

Wie eine interaktive Reise-Karte auf Wordpress hinzufügen

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Reisen Sie oft? Denn wenn Sie es noch nicht wissen, wird WordPress auch häufig von Bloggern verwendet, die eine Leidenschaft für das Reisen haben. Mit letzteren können sie ihre Fotos und die außergewöhnlichen Momente, die sie hatten, mit anderen Menschen teilen.

Glauben Sie nicht, dass es für Sie, die gerne die Orte teilen, die Sie besuchen, schön wäre, eine interaktive Reisekarte hinzuzufügen, die die verschiedenen Orte zeigt, an denen Sie waren?

Wenn diese Idee Sie wie mich verzaubert, wissen Sie, dass Sie in diesem Tutorial lernen werden, wie Sie eine interaktive Karte in Ihr WordPress-Blog integrieren.

Übersicht Karten interaktiv

Wie zu installieren und das Plugin Nomad Weltkarte konfigurieren

Als erstes müssen Sie das Nomad World Map Plugin installieren und aktivieren (Es ist treffend benannt) Verfügbar auf WordPress.org aus dem Armaturenbrett. Sie können auch herunterladen das Plugin als Zip-Datei.

Nomadenweltkarte

Nach der Installation und Aktivierung des Plugins wird ein neues Menü " Nomad Karte »Wird dem Dashboard hinzugefügt (unten links). Klicken Sie auf das Untermenü Einstellungen, um mit der Konfiguration fortzufahren.

Nomadeneinstellungen

Standardkonfigurationen sind ausreichend. Ich werde immer einige Optionen erklären.

Im Abschnitt "Allgemein"

Es ist möglich, einen Track zwischen den besuchten Orten zu aktivieren. Die folgende Option " Zeichnen geschwungene Linien auf der Karte Ermöglicht das Zeichnen gekrümmter Linien auf der Karte.

« Es Pageload vergrößern Bietet Ihnen die Möglichkeit, sich beim Laden der Seite auf einen Ort zu konzentrieren. Sie haben die Wahl zwischen dem ersten und dem letzten Platz.

« Zoom-Ebene »Ermöglicht das Anpassen des Zooms auf der Karte.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

« Art Karte »Ermöglicht die Auswahl des Kartentyps

Die Option " Historische Straßen Farbe "Ist die Farbe eines Weges genommen und" Zukünftige Straße Farbe Ist die Farbe der zukünftigen Straßen (für geplante Reisen).

Der Abschnitt Inhaltsoptionen

Mit der Option " Beitrag zeigen Thumbnails in einem Kreis », Sie können das vorgestellte Bild eines Artikels in einer Blase anzeigen. Die Option " Lassen Sie sich die Leasing glücklich in der »Ermöglicht die Anzeige der Details des Ortes in einem Schieberegler oder Tooltip.

So fügen Sie der Karte einen neuen Ort hinzu

Klicken Sie auf die Schaltfläche Route Editor “. Auf dieser neuen Seite fügen wir zunächst den Namen des Ortes hinzu, zum Beispiel " Prag ", Wodurch an der angegebenen Stelle ein Zeiger auf der Karte angezeigt wird. Dann klicken Sie auf " Kleidungsset ".

Add-dun-Standort

Die Option " glücklich Rentals »Ermöglicht die Auswahl eines Elements, das mit diesem Ort verknüpft wird. Darüber hinaus können Sie Inhalte direkt hinzufügen, indem Sie " benutzerdefinierte glücklich ".

Um den Platz an einen Artikel anzuhängen, lassen Sie die Option " Post Auszug »Aktivieren und klicken auf« Suche »Im nächsten Feld, um eine Suche durchzuführen, unmittelbar nach Angabe des Artikeltitels (und nicht Suchbegriffen).

Sie können dann das vorgestellte Bild bearbeiten, stattdessen die Abfahrts- und Ankunftszeiten angeben und anschließend auf "Klicken Sie auf" klicken. Auswahl speichern Unten links.

Addier-und-Informationen-has-a-Platz

Nach einem Klick auf " Auswahl speichern Sie können den Vorgang wiederholen und die verschiedenen Orte hinzufügen, an denen Sie waren.

map-Reise-Beispiel

Wie mehrere Reisekarten hinzufügen

Alles was Sie tun müssen, ist auf die " Karten bearbeiten Vom Plugin und klicke auf " Hinzufügen neue Karte ". Ein Fenster öffnet sich, Sie müssen den Namen der Karte speichern, Beispiel: " 2014 Spezialreisen ".

Add-the-name-of-a-Card

Klicken Sie dann auf den Namen dieser Karte, um Orte hinzuzufügen, wie sie stattdessen angezeigt wurden.

ein Wechsel-Karte

Sie können auf eine Karte auch zugreifen, indem Sie die Karte aus der Liste der verfügbaren Karten auswählen.

Pick-a-Card

Wie man eine Karte auf einer Seite / Artikel angezeigt werden

Sie müssen nur die Kennung einer Karte abrufen und als Parameter in den folgenden Shortcode integrieren:

[Mwm_map]

Um also identische Shortcodes zu haben: [mwm _map id = ”2 ″] ou [mwm _map id = ”10 ″]

Um die Kennung einer Karte abzurufen, kehren Sie zu " Karten bearbeiten Plugin und kopiere die Nummer der Karte deiner Wahl in die Spalte " ID ".

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

IDs Karten

Verwenden Sie diese Kurzwahlnummer in einem Artikel / Seite und überprüfen Sie es zu sehen, wie das Plugin verhält.

Ergebnis-Nomade-Weltkarte

Das war's für dieses Tutorial zum Erstellen einer interaktiven Reisekarte in WordPress. Zögern Sie nicht, den Tipp mit Ihren Freunden in den sozialen Medien zu teilen.

Dieser Artikel enthält Kommentare 30

  1. Hallo, kleine Frage, wie wählst du den Bereich der Karte aus, der angezeigt werden soll? Ich möchte eine Karte von Neuseeland erstellen, aber wenn Sie die Seite mit der Karte öffnen, wird Frankreich vergrößert ...

  2. Guten Tag,

    Ich habe Nomad Maps ausprobiert, aber das Plugin scheint nicht mehr aktualisiert zu werden und ich finde die Benutzeroberfläche nicht sehr sauber und intuitiv.

    Ich habe ein anderes Plugin gefunden, das meiner Meinung nach besser geeignet ist: https://wordpress.org/plugins/travelmap-blog

    Sie können Fotos und Artikel mit der Karte verknüpfen.

  3. Guten Tag,

    Ich bin neu bei WordPress, genau wie bei Idem habe ich eine Fehlermeldung, die auf der Karte angezeigt wird: „Kleines Problem… Es ist ein Fehler aufgetreten
    Google Maps wurde auf dieser Seite nicht richtig geladen. Weitere technische Informationen zu diesem Fehler finden Sie in der JavaScript-Konsole. ”
    Ich habe versucht, das Thema wie empfohlen zu ändern, aber das löst mein Problem nicht. Können Sie mir bitte helfen?

    Vielen Dank im Voraus!
    Bonne journée,
    Sonia,

  4. Guten Tag,

    Ich habe kein SEO >> Titel & Metas…
    Ich habe nur das Dashboard und die Suchkonsole. Liegt es daran, dass ich keine Premium-Version habe?

  5. Guten Tag,
    Ich bin ein Anfänger und konsultiere Ihren Blog ...
    Es sieht so aus, als ob der Shortcode einen Syntaxfehler enthält, der [nwm_map id = ”1 ″] sein sollte und nicht [mwm _map id = '1']
    Ich hatte viel zu kämpfen, bevor ich das sah.
    Bonne journée

  6. Hallo,

    Vielen Dank für Ihre Tutorial.
    Ich habe versucht, Ihrer Methode zum Einbetten einer Karte in eine PAGE (WordPress) zu folgen, habe jedoch nicht das erwartete Ergebnis erhalten.
    Im Textteil (nicht visuell), erhalte ich den folgenden Shortcode:
    [Mwm _MAP id = '2']
    In der Vorschau meiner Seite wird nicht die Karte angezeigt, sondern der Text "[mwm _map id = '2']".
    Kannst du mir bitte helfen ?
    Je vous remercie.

      1. Guten Tag,

        Vielen Dank für Ihre Rückkehr. Wie kann ich mit Ihnen einen Screenshot teilen?
        Es ist nicht, scheint mir ein Bild oder eine Anlage einzufügen.

        1. Sie können Ihren Screenshot auf speziellen Websites hosten und den Link dann hier veröffentlichen. Oder Sie können es in Ihre Medien einfügen und mir den Link geben.

  7. Guten Tag,

    Ich habe das Plugin installiert, aber ich habe ein Problem:
    Bei „nomad map“ wird die Karte nicht angezeigt! Ich kann daher nichts konfigurieren.
    Folgendes wird angezeigt: „Kleines Problem… Es ist ein Fehler aufgetreten
    Google Maps wurde auf dieser Seite nicht richtig geladen. Weitere technische Informationen zu diesem Fehler finden Sie in der JavaScript-Konsole. ”

    Ich weiß nicht, wie ich die Javascript-Konsole ändern soll und vor allem sehe ich nicht, was ich tun soll!

    Merci de votre aide

    1. Guten Tag,
      Mit der Javascript-Konsole können Sie herausfinden, was das Problem verursacht. Hast du die Anleitung befolgt? Wenn dies der Fall ist, benötige ich eine Erfassung Ihrer Javascript-Konsole. Um dies zu tun, müssen Sie F12 (in Chrome) drücken, im angezeigten Bereich die Registerkarte „Konsole“ suchen und dann eine Aufnahme machen. Es gibt mehrere Tools, mit denen Sie Aufnahmen machen können. Sobald Sie die Erfassung Ihrer Javascript-Konsole haben, kann ich Ihnen helfen.

  8. Guten Tag,

    Ich kann die Karte nicht auf meiner Website einlegen. Ich habe [mwm _map id = '1 ′] und dann [nwm _map id =' 1 ′] (nach dem Lesen der Kommentare) auf einer meiner Seiten eingefügt, aber in der Vorschau gibt es nur die Shortcode, der angezeigt wird. Was kann ich tun?

    Danke

    1. Guten Tag,

      Versuchen Sie, es im Abschnitt „Text“ (nicht „visuell“) Ihres Texteditors hinzuzufügen. es sollte funktionieren.

  9. Hallo

    Ich kann den Artikel nicht auswählen, in den ich die Karte legen möchte, es bringt mich dazu: Kein Blog-Beitrag gefunden, bitte versuchen Sie es erneut. Hast du eine Idee, um mein Problem zu lösen?

    danke im Voraus

      1. Bonsoir
        Am Ende gelang mir das Kopieren / Einfügen des Titels, wobei die manuelle Eingabe für keinen der Artikel funktionierte
        Ich höre jedoch wieder mit dem Funktionscode auf, es tut mir leid ... Ich habe [mwm_map id = '1'] ganz am Anfang meines Artikels eingefügt (Texteingabeteil und nicht VISUAL von WordPress), aber in der Übersicht nur keine Karte der Funktionscode ...
        Ich bin wirklich nicht gut
        : - (((

    1. Guten Tag,
      Sie müssen kein Element auswählen, fügen Sie einfach den Shortcode [mwm_map] hinzu. Lesen Sie aufmerksam den Abschnitt „So zeigen Sie eine Karte in einer Seite / einem Artikel an“.

      Wenn das Problem weiterhin besteht uns bitte wieder Kontakt

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
30 Aktien
Aktie28
tweet
Registrieren2