So bindest du eine Karte in deine WordPress-Website ein

Wenn du einen WordPress-Blog betreibst, gibt es Situationen, in denen du eine Karte auf einer Seite einbinden möchtest. Ob Geschäftsadresse oder ein bestimmter Treffpunkt: Eine Karte erklärt den Standort meist am besten. Heute sehen wir uns an, wie du eine Karte sauber in deine WordPress-Website einfügst.

Möglichkeiten, eine Karte in WordPress einzubinden

Es gibt mehrere Wege, eine Karte zu WordPress hinzuzufügen. Die am häufigsten verwendeten Kartendienste lassen sich grob auf diese drei reduzieren:

• Google Maps
• Naver Map
• Kakao Map

Alle diese Dienste bieten eine Teilen-Funktion, mit der du Informationen zu einem bestimmten Standort auf deiner Website anzeigen kannst.

In diesem Beitrag erkläre ich zuerst, wie du eine Karte mit Google Maps einbindest.

Empfohlene Methode zum Einbetten einer Karte

Du kannst eine Karte über den Kartenblock deines Theme-Blockeditors einfügen oder direkt die Einbetten-Funktion verwenden. Ein vorgefertigter Kartenblock kann optisch ansprechender aussehen.

Allerdings kann ein Kartenblock überraschend umständlich sein. Je nach Version oder Kompatibilität wird die Karte manchmal nicht korrekt angezeigt, was unnötig Zeit kostet.

Ich empfehle daher die einfache Variante: die Karte per Embed-Code einzubinden.

Karte einbetten: Schritt für Schritt

Das Einbetten einer Karte besteht im Wesentlichen aus zwei Schritten:

1. Auf der Website einen Bereich für die Karte vorbereiten
2. Den Einbettungscode der Karte abrufen

Beginnen wir damit, einen passenden Bereich auf der Website vorzubereiten.

Bereich für die Karte vorbereiten

Bevor du eine Karte einfügst, solltest du festlegen, wo sie erscheinen soll. In diesem Beispiel nutze ich ein zweispaltiges Layout, um die Karte wie unten gezeigt einzubinden.

Zweispaltiges Layout erstellen

Zuerst benötigst du ein Row Layout mit zwei Spalten.

• Gib einen Slash / ein und suche nach Row Layout.

Nutze die beiden erstellten Spalten als Absatz-Bereiche. Links gibst du den Text ein, rechts suchst du nach einem Custom HTML-Block und fügst ihn ein.

Setze den Cursor in die rechte Spalte und gib /html ein. Dann erscheint Custom HTML, wie im Bild unten.

Google-Maps-Embed-Code abrufen

Suche bei Google nach Gwanghwamun, damit die Google-Maps-Seite beziehungsweise die Standortkarte erscheint.

Klicke unten rechts in der Infokarte auf Teilen. Danach öffnet sich ein Fenster, in dem du auswählen kannst, wie du den Standort teilen möchtest. Klicke bei Bedarf auf die Bilder unten, um sie zu vergrößern.

Wähle den Tab „Karte einbetten“. Dann wählst du links eine passende Größe, zum Beispiel „Klein“, und klickst rechts auf „HTML kopieren“. Der kopierte iframe-Code sieht ungefähr so aus:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3162.1163783927063!2d126.97423717507674!3d37.57587717203614!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca37454f683b1%3A0xfa19c5217c6a0bc0!2sGwanghwamun%20Gate!5e0!3m2!1sen!2sus!4v1714241263073!5m2!1sen!2sus" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Ein iframe ist ein Einbettungscode, mit dem Inhalte einer anderen Website innerhalb deiner eigenen Website angezeigt werden. Füge den Code einfach in den zuvor erstellten Custom-HTML-Bereich ein. Damit ist die Karte eingebunden.

Kakao-Map-Embed-Code abrufen

Auch Kakao Map stellt einen Embed-Code bereit. Suche nach Gwanghwamun und klicke über der Ortsmarkierung auf den Erweitern-Button (Plus-Symbol).

Danach erscheint ein Menü, in dem du das HTML-Tag kopieren kannst.

Folge den Schritten im Bild unten. Wenn du eine Karte in WordPress einbettest, empfehle ich die Quelle „allgemeine Karte“, damit Besucher die Karte verschieben und zoomen können.

Fazit

In diesem Beitrag haben wir erklärt, wie du Google Maps und Kakao Map einbettest. Naver Map lässt sich mit einem ähnlichen Vorgehen ebenfalls relativ einfach in WordPress einfügen.