Google Maps, Tweets, Tabellen und Co in WordPress einbinden

Google Maps, Tweets, Tabellen und Co einbinden.

Der WordPress WYSIWYG (What You See Is What You Get) Editor ist das zentrale Werkzeug für das Erstellen von Beiträgen. Er bietet ausreichend Möglichkeiten um seinen Text formatieren zu können. Auch das Einfügen von Grafiken ist dank des Hochladens in die Mediathek und dem direkten Einfügen an die gewünschte Position kein Problem. Doch was wenn man vom Standard abweicht und zusätzliche Elemente in einen Beitrag einfügen möchte? In diesem Artikel zeigen wir euch wie Ihr Google Maps Karten, YouTube Videos,  Twitter Tweets und Co in euren WordPress Artikel einfügen könnt. Und das Ganze ohne Plugins.

Google Maps einfügen

Google bietet bereits bei jeder Karte eine eigene Funktion zum Einbetten von Karten. Dazu gehen wir auf https://www.google.de/maps und geben unsere Zieladresse ein:

Google Maps Suchergebnis.

Google Maps Suchergebnis.

Diese Google Maps Karte möchten wir jetzt zum Beispiel in unserer Kontakt Seite einbinden. Rechts unten befindet sich ein kleines Zahnrad Symbol, mit welchem man das passende Menü öffnen kann:

Über das Zahnrad Symbol haben wir weitere Möglichkeiten.

Über das Zahnrad Symbol haben wir weitere Möglichkeiten.

Über den Punkt „Karte freigeben oder einbetten“:

Einbettungsfunktion.

Einbettungsfunktion.

erhalten wir den benötigten Link zu diesem Standort:

https://www.google.de/maps/place/Stuttgart/@48.779209,9.1772152,11z/data=!3m1!4b1!4m2!3m1!1s0x4799db34c1ad8fd3:0x79d5c11c7791cfe4

Eine Möglichkeit ist jetzt direkt auf diese Seite zu verlinken. Schöner wäre es aber, wenn wir auf unserer Seite die Google Maps Karte direkt einbinden könnten.

Dazu wählen wir im aktiven Fenster den Punkt „Karte einbetten“:

Einbettungscode für unseren Standort.

Einbettungscode für unseren Standort.

Wir nehmen die kleine Karte zur Sicherheit um das Layout unserer Seite nicht zu zerschießen. Der Code den wir jetzt in die Zwischenablage kopieren:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d168264.9881118599!2d9.17721519999999!3d48.77920905!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4799db34c1ad8fd3%3A0x79d5c11c7791cfe4!2sStuttgart!5e0!3m2!1sde!2sde!4v1421575107482" width="400" height="300" frameborder="0" style="border:0"></iframe>

Dieser HTML Code ist ein sogenannter iframe. Damit hat man die Möglichkeit anderer Seiten in die eigene Seite mit einzubauen. So etwas sollte aber nur in speziellen Fällen verwendet werden.

Wir gehen ins Administrationsmenü auf unseren Beitrag oder unsere Seite. Wir wechseln bei unserem Editor auf den Textmodus, da wir reinen HTML Code einfügen wollen.

Auf Text Modus wechseln um HTML Code einfügen zu können.

Auf Text Modus wechseln um HTML Code einfügen zu können.

Unser eingefügter HTML Code.

Unser eingefügter HTML Code.

So gut wie fertig! Über die Vorschau testen wir mal, wie die eingebundene Google Maps Karte nun aussieht:

Vorschau unserer Karte.

Vorschau unserer Karte.

Wem das noch nicht ausreicht, der muss sich mit der Google API beschäftigen. Dafür gibt es aber viele Beispiele auf der Google Seite unter: https://developers.google.com/maps/

Das wichtigste dabei ist es aber einen API Key mit seinem Google Konto anzulegen.

Wer eine simple Karte anzeigen möchte, für den ist das obere einbetten perfekt.

Galerie einfügen

Um eine Bildergalerie in WordPress einzufügen ist für einfache Anwendungen kein extra Plugin nötig. Entweder hat man schon alle benötigten Bilder hochgeladen oder man lädt sich noch über den Button „Dateien hinzufügen“ in die Medien Galerie hoch.

In beiden Fällten wechseln wir in die Medien Übersicht und sehen rechts gleich den passenden Menüpunkt:

Mit WordPress eine Galerie erstellen.

Mit WordPress eine Galerie erstellen.

Anschließend markieren wir mit einem Klick die gewünschten Bilder um sie für die Galerie auszuwählen:

Ein ausgewähltes Bild wird mit einem Klick auf den Haken wieder abgewählt.

Ein ausgewähltes Bild wird mit einem Klick auf den Haken wieder abgewählt.

Rechts unten befindet sich jetzt der passende Button um die restlichen Einstellungen für die Galerie vorzunehmen:

Noch einen kleinen Klick...

Noch einen kleinen Klick…

Im letzten Fenster stellen wir dann noch ein, dass die Galerie zu der Medien Datei verlinken. Dann öffnet sich das Bild direkt auf der aktuellen Seite der Hintergrund verdunkelt sich und man kann sich durch die Galerie klicken.

Wichtige Einstellungen für unsere Galerie.

Wichtige Einstellungen für unsere Galerie.

Die Anzahl der Spalten und weitere Einsgellungen können wir nach Belieben anpassen. Bei einer Spalte werden die Bilder direkt untereinander angezeigt. Die Galerie zeigt immer auch die Beschriftungen der einzelnen Bilder an:

So sieht unserer Galerie aus.

So sieht unsere Galerie aus.

Und bei einem Klick auf das Bild öffnet sich eine schöne lightbox:

Eine einfache aber schöne Galerie, lässt sich auch ohne Plugin realisieren.

Eine einfache aber schöne Galerie, lässt sich auch ohne Plugin realisieren.

 

PDF einbinden

PDF Dateien lassen sich im Editor über „Dateien hinzufügen“ in die Medien Galerie hochladen. Zu dieser PDF kann man dann direkt verlinken.

Die hochgeladene PDF liegt wie die bereits hochgeladenen Bilder in der Übersicht und wird durch ein anderes Symbol erkennbar:

Hochgeladene PDF in unserer Gallerie.

Hochgeladene PDF in unserer Galerie.

Wir können die PDF in unseren Beitrag einfügen und den Link gegebenenfalls anpassen. Um Fehlern vorzubeugen empfiehlt es sich keine Leerzeichen, Sonderzeichen oder Umlaute im Dateienamen der PDF zu verwenden.

Was aber, wenn wir die PDF direkt im Browser anzeigen lassen möchten?

Erste Möglichkeit: Der Google Docs Viewer

Bitte beachten: Beim Erstellen dieses Artikels war der Google Docs Viewer noch über den unteren Link erreichbar. Dieser leitet jetzt direkt auf Google Drive weiter. Ich hoffe, dass sich das in einigen Tagen geklärt hat.

Der Google Docs Viewer unter https://docs.google.com/viewer ermöglicht es PDFs und Office Dokumente direkt im Browser darzustellen. Dabei lädt man die Datei nicht bei Google hoch, man muss aber trotzdem den Datenschutzbestimmungen von Google zustimmen.

Ein Beispiel soll kurz erläutern, wie wir unsere bereits hochgeladene PDF einbinden.

Über den Datei Manager („Dateien hinzufügen“) klicken wir die PDF an und holen uns aus dem rechten Menü den direkten Link aus dem Feld URL:

Der direkte Link zu unserer hochgeladenen PDF.

Der direkte Link zu unserer hochgeladenen PDF.

Diesen fügen wir dann im Google Docs Viewer ein:

Google Docs Viewer mit unserem Link.

Google Docs Viewer mit unserem Link.

Und bestätigen mit „Generate link“. Jetzt kopieren wir uns die Zeile unter dem Abschnitt „Verwenden Sie für einen eingebetteten Betrachter stattdessen dieses HTML-Tag:“ in unseren WordPress Beitrag (unter dem Reiter „Text“). Öffnen wir jetzt die Vorschau sollten wir unsere PDF im Browser eingebunden sehen.

Zweite Möglichkeit

Wir machen aus der PDF einzelne Bilder und binden diese über eine einspaltige Galerie in unseren Beitrag ein.

Dafür verwenden wir den PDF Drucker „PDF24“ von http://de.pdf24.org/. Mit diesem PDF Programm können wir unsere PDF öffnen und als JPG abspeichern. Dabei wird für jede Seite eine eigene JPG Datei erstellt.

Diese JPGs laden wir dann in unseren WordPress Media Manager hoch und erstellen darüber eine Galerie. Diese fügen wir einfach in unseren Beitrag ein und achten darauf, dass wir bei der Galerie unter Optionen die Spaltenzahl auf 1 und die Größe auf „Vollständige Größe“. Einfach damit alle Bilder untereinander in voller Größe dargestellt werden.

Diese Methode eignet sich für PDF Dateien mit wenigen Seiten. Aber da wir das ganze ohne Plugins umsetzen möchten, ist dieser Weg eine gute überschaubare Alternative.

Tabelle einfügen

Um Informationen übersichtlich darzustellen bietet sich eine Tabelle an. Da der WordPress Editor HTML versteht, greifen wir hier auch ein kleines HTML Snippet zurück um eine simple Tabelle darzustellen.

<table style="width:100%">
<tr>
<td>WordPress</td>
<td>Platz 1</td>
<td>3001</td>
</tr>
<tr>
<td>Contao</td>
<td>Platz 2</td>
<td>1337</td>
</tr>
<tr>
<td>Joomla</td>
<td>Platz 3</td>
<td>42</td>
</tr>
</table>

Und das Ergebnis:

Einfach aber praktisch.

Einfach aber praktisch nützliche Informationen darstellen.

Tweets einfügen

Um einen Tweet einzubetten geht man auf Twitter und sucht sich den gewünschten Tweet aus. Dort klickt man auf die drei grauen Punkte um das folgende Menü zu öffnen:

Tweet kopieren.

Tweet kopieren.

Über die Funktion „Tweet einbetten“ gelangt man zu folgendem Fenster aus welchem man den HTML Code herauskopiert und in seinen Beitrag einfügt:

HTML Code unseres gewünschten Tweets.

HTML Code unseres gewünschten Tweets.

Video einbinden

Um ein YouTube Video in WordPress einzubinden, reicht es im Allgemeinen aus die URL des Videos direkt in den Beitrag einzufügen.

Die URL eines YouTube Videos.

Die URL eines YouTube Videos.

https://www.youtube.com/watch?v=9bZkp7q19f0

WordPress bindet noch beim Erstellen des Beitrags dann automatisch den Videoplayer ein:

YouTube Videos können direkt in einen Beitrag eingefügt werden.

YouTube Videos können direkt in einen Beitrag eingefügt werden.

Ich hoffe dieser Artikel war eine kleine Hilfe für den ein oder anderen WordPress Benutzer um die unterschiedlichen Medien und Funktionen auch ohne die Installation eines Plugins einzufügen.

Welche Plugins verwendest Du um diese Dinge einfacher oder mit mehr Optionen einzubinden?

Schreibe einen Kommentar

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