Shortcodes für Google Maps und Docs

1

Die Anzahl der von Google angebotenen Services wächst immer weiter und mittlerweile gibt es einige Dienste, die auch für Blogs bzw. Websites interessant sind. So gibt es zum Beispiel die Möglichkeit, Dokumente, die auf dem eigenen Server liegen, mithilfe des Dienstes Google-Docs online zu öffnen und zu betrachten, ohne diese extra herunterladen zu müssen. Außerdem kann das entsprechende Dokument auch direkt in die Seite eingebunden werden, sodass es direkt auf der aktuellen Seite zugänglich ist. Ein weiterer für Websites interessanter Dienst ist Google Maps, mit dessen Hilfe man Kartenmaterial online betrachten und beispielsweise seine Adresse auf der Impressums-Seite eines Blogs visualisieren kann.

Damit man die entsprechenden Inhalte schneller und einfacher innerhalb von WordPress nutzen kann, empfiehlt es sich, Shortcodes für die beiden Dienste zu erstellen. Im Folgenden möchte ich kurz zeigen, wie das gemacht wird.

1) Shortcode für Google Maps

Um einen Shortcode für Google-Maps zu erstellen, fügen Sie bitte diesen Code in die functions.php Ihres WordPress-Themes ein.

// Google Maps
function mytheme_googlemaps($atts, $content = null) {
   extract(shortcode_atts(array( 'width' => '668', 'height' => '350', 'src' => '' ), $atts));   
   return '<iframe class="iframe googlemaps" src="' . $src . '" width="' . $width . '" height="' . $height . '"></iframe>';
}
add_shortcode('googlemap', 'mytheme_googlemaps');

Nun steht im Editor der Shortcode googlemap zur Verfügung, an den Sie die Paramter width, height und src weitergeben können. Um Beispielsweise die unten dargestellte Satellitenkarte von Deutschland anzuzeigen, verwenden Sie folgenden Shortcode.

[googlemap width="658" height="350" src="https://maps.google.de/?ie=UTF8&t=h&ll=50.652943,10.810547&spn=9.757371,29.355469&z=5&output=embed&s=AARTsJqS9TImAckBTJkG5RYfFuex18VM3Q"]

Eingebundene Google-Maps Kartenansicht

Entscheidend ist im Übrigen, dass Sie an die Quell-URL, die Sie direkt über Google Maps erhalten, Ihre Client-ID anfügen. In diesem Fall wäre das &s=AARTsJqS9TImAckBTJkG5RYfFuex18VM3Q. Wie Sie eine solche ID erhalten können, steht hier.

2) Shortcode für Google Docs

Analog verfahren Sie mit dem Shortcode für den Google-Docs Service. Hierfür nutzen Sie folgenden Code, den Sie in die functions.php einfügen.

// Google Docs
function LB_googledocs($atts, $content = null) {
   extract(shortcode_atts(array( 'width' => '678', 'height' => '530', 'src' => '' ), $atts));
   return '<iframe class="iframe googledocs" src="https://docs.google.com/viewer?url=' . $src . '&embedded=true&embedded=true" width="' . $width . '" height="' . $height . '"></iframe>';
}
add_shortcode('googledoc', 'LB_googledocs');

Nun steht im Editor dieser Shortcode zur Verfügung, an den Sie die URL zu Ihrem Dokument, sowie die Höhe und Breite des eingebetteten Dokuments übergeben.

[googledoc width="678" height="530" src="http://projects.lb-home.de/wp-content/uploads/2012/09/gnugplv3.pdf"]

Die Ausgabe sollte nun wie in diesem Beispiel aussehen.

3) Fazit

Mithilfe der Shortcuts sollte das Einbinden eines Dokuments über Google Docs beziehungsweise das Anzeigen einer Karte mithilfe von Google Maps einfach und schnell innerhalb eines WordPress-Artikels oder einer Seite möglich sein.

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert.

*

Kommentare umschalten

1 Kommentar zu "Shortcodes für Google Maps und Docs"

  • [...] einigen Tagen habe ich bereits in einem Artikel beschrieben, wie man einen Shortcode programmieren kann, der eine Google Maps-Karte auf einer [...]