Snippets Archive - Seite 6 von 6

Google Maps responsive in WordPress einbinden

15. August 2014 by Raffael·3 Kommentare

Um Google Maps responsive im eigenen Blog einzutragen ist ein wenig CSS-Code nötig. Anderenfalls zerfleddert die eingebundene Google Karte leider das ganze Design, sobald sich die Größenverhältnisse der umgebenden Seite ändern, da der originale Einbettungscode leider nicht responsive ist – sprich seine einmal vorgegebene Größe immer beibehält.

Der ganze Trick, um Google Maps fit für Responsive Design zu machen, ist, die Karte in einem DIV-Container einzubetten. Dieser DIV-Container wird mit dem passenden CSS-Code versehen und erzwingt dann, dass die Karte sich ebenfalls den Größenverhältnissen anpasst.

Als erstes wird der normale Google Maps Embed-Code benötigt. Dieser kann direkt aus der Google Maps Webseite entnommen werden. Als Beispiel dient der Screenshot am Anfang des Artikels. Der Embed-Code sollte dann wie folgt aussehen.

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d19977.506563267485!2d6.6929563!3d51.25244189999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sde!2sde!4v1408096099020" width="800" height="600" frameborder="0" style="border:0"></iframe>

1	<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d19977.506563267485!2d6.6929563!3d51.25244189999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sde!2sde!4v1408096099020" width="800" height="600" frameborder="0" style="border:0"></iframe>

Basierend auf diesem standard Einbettungscode folgen nun die Anpassungen zum Responsive Design.

Google Maps resposive machen

Zuerst benötigen wir folgenden CSS-Code. Dieser kann entweder innerhalb <style>-Tags oder in der style.css-Datei des Themes eingefügt werden.

.g-maps {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 50%; 
}
.g-maps iframe {
    position: absolute;
    width: 100% !important;
    height: 100% !important;
    top: 0;
    left: 0;
}

.g-maps {

position: relative;

height: 0;

overflow: hidden;

padding-bottom: 50%;

}

.g-maps iframe {

position: absolute;

width: 100% !important;

height: 100% !important;

top: 0;

left: 0;

}

Nun müssen wir nur noch den Google Maps Einbettungscode in einem DIV-Container einfassen, der die CSS-Klasse g-maps zugewiesen bekommt.

<div class="g-maps"></div>

1	<div class="g-maps"></div>

Der fertige Einbettungscode sollte dann wie folgt aussehen.

<div class="g-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d19977.506563267485!2d6.6929563!3d51.25244189999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sde!2sde!4v1408096099020" width="800" height="600" frameborder="0" style="border:0"></iframe>
</div>

</div>

Wie das Endergebnis in der Praxis aussieht, könnt ihr euch auf der Kontaktseite hier im Blog anschauen.

Superscript und Subscript an Zeilenhöhe anpassen

14. August 2014 by Raffael·Keine Kommentare

Wie man Superscript und Subscript (Hoch- und Tiefstellung) in WordPress nutzen kann, hatte ich im letzten Post gezeigt. Leider brechen die Hoch- und Tiefstellungen je nach verwendetem Theme und CSS aus der jeweiligen Zeile aus. Das heißt im Klartext: Eine hochgestellte Zahl überdeckt entweder Zeichen/Ziffern aus der darüberliegenden Zeile oder vergrößert den Zeilenabstand, um eben nichts zu überdecken. Beides sieht ziemlich unschön aus. Um diesem Problem aus dem Weg zu gehen, reicht es nicht aus lediglich die line-height CSS-Eigenschaft anzupassen.

Zur Lösung des Problems gibt es zwei Ansätze. Entweder man orientiert sich an der Grundlinie (Baseline) oder an der Oberkante (k-Linie / TOP-Orientierung) einer Zeile. Welche Lösung für euer Theme besser funktioniert, müsst ihr selbst ausprobieren.

Sup- und Subscript an der Baseline ausrichten

sup, sub {
   vertical-align: baseline;
   position: relative;   
}
sup { top: -0.4em; }
sub { top: 0.4em; }

sup, sub {

vertical-align: baseline;

position: relative;

}

sup { top: -0.4em; }

sub { top: 0.4em; }

Superscript nach TOP ausrichten

sup { vertical-align: top; font-size: 0.6em; }

1	sup { vertical-align: top; font-size: 0.6em; }

Hochstellung und Tiefstellung in WordPress

11. August 2014 by Raffael·Ein Kommentar

Egal, ob als Stilelement oder im praktischen Einsatz für Formeln und Exponenten, die Hoch- sowie Tiefstellung sind zwei Gestaltungselemente, auf die man früher oder später im Bloggerleben trifft.

Um Hochstellung (Superscript) und Tiefstellung (Subscript) im WordPress-Editor TinyMCE zu aktivieren, ist folgender Filter notwendig. Dieser kann z.B. in der functions.php des gewünschten Themes oder innerhalb eines Plugins eingefügt werden.

Hochstellung per Filter aktivieren

function my_mce_buttons_2($buttons) {	
	$buttons[] = 'superscript';
	$buttons[] = 'subscript';
	return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');

function my_mce_buttons_2($buttons) {

$buttons[] = 'superscript';

$buttons[] = 'subscript';

return $buttons;

}

add_filter('mce_buttons_2', 'my_mce_buttons_2');

Für WordPress vor Version 3.9

Der obige Code funktioniert erst ab WordPress 3.9, da erst ab dann TinyMCE in der Version 4 eingesetzt wird. In älteren WordPress Versionen aktiviert folgender Code die Hoch- und Tiefstellungs-Buttons im WordPress Editor.

function my_mce_buttons_2($buttons) {	
	$buttons[] = 'sup';
	$buttons[] = 'sub';
	return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');