WordPress: Inhalte nach Bildschirmauflösung anzeigen

Eingetragen bei: Wordpress | 0

Was du in diesem Artikel erfährst:

Wie ich mit ein paar kleinen Tricks Inhalte in meinem Blog nach Bildschirmauflösung anzeigen lasse.

Manchmal ist es in einem WordPress-Theme so, dass es nur eine Sidebar gibt. Mit ein paar Tricks können zwar weitere Sidebars erstellt werden, dies ist allerdings nicht immer ganz so einfach. Schnell sieht der Blog mit nur einer Sidebar bei größerer Auflösung etwas ,,leer“ aus.

Du bist nicht der Maßstab

Oft wird die eigene Bildschirmauflösung als Maßstab für Bilder, Texte und Anzeigen benutzt, was unschöne Folgen haben kann. Es ist nämlich so, dass viele Besucher eine höhere oder niedrigere Auflösung verwenden als du! Hast du deinen Blog für deine Auflösung optimiert, kann es passieren, dass dieser für andere Besucher weiterhin ,,leer“ aussieht oder sich die Inhalte und Anzeigen völlig überlappen.

 

Auch die mobile Version sollte nicht aus den Augen gelassen werden. Bei mir war es jedenfalls so.

Woran man alles denken muss, oder?

In der Desktop-Ansicht werden in meinem Blog links in der Sidebar kleine Bilder angezeigt. Diese lasse ich in der mobilen Version ausblenden, da sich das Layout sonst verschiebt und sich Inhalte überlappen. Außerdem sind diese Inhalte auch gar nicht so wichtig. Sie dienen einfach nur als Lückenfüller.

Auch in der Desktop-Version werden diese Inhalte erst ab einer Auflösung von 1600*900 angezeigt. Unter dieser Einstellung ist einfach kein Platz.

Eigentlich ganz einfach.

WordPress bietet eine kleine aber nette Funktion, die dir enorm dabei hilft. wp_is_mobile
Mit dieser Funktion kannst du entscheiden, welche Inhalte für Besucher der mobilen Version angezeigt werden sollen. Aber halt, wir wollen doch Inhalte für mobile Besucher ausblenden.

Dazu schreiben wir die Standardfunktion einfach ein bisschen um. Ein „!“ reicht schon.

<?php if ( wp_is_mobile() ) {
        /* Zeige hier Inhalte an, die für mobile Endgeräte gedacht sind*/
} ?>

Fertig:

<?php if ( !wp_is_mobile() ) {
        /* Zeige hier Inhalte an, die nicht für mobile Endgeräte gedacht sind*/
} ?>

Hier kannst du jetzt den Inhalt einsetzen, der nicht auf mobilen Endgeräten angezeigt werden soll.
Mit folgendem Code kannst du schnell und einfach deine Banner oder Teaser links komplett an den Rand deines Blogs heften.

Füge diesen Code einfach in die functions.php deines Themes ein.

if ( !wp_is_mobile() ) {
add_action( 'loop_start', 'ad_banners_outside_site_container' );	
function ad_banners_outside_site_container() {
echo '<div class="left-bannerseo">';
echo '<a href="/Dein-Link/" target="_blank"> <img src="/seo.png"alt="test"border="0"></a>'; 
echo '</div>';
echo '<div class="left-bannercupon">';
echo '<a href="/Dein-Link" target="_blank"> <img src="/cupon.png"alt="test"border="0"></a>'; 
echo '</div>';
echo '<div class="left-bannerlead">';
echo '<a href="/Dein-Link/" target="_blank"> <img src="/lead.png"alt="test"border="0"></a>'; 
echo '</div>';
} 
}

Die Links und Bildquellen bitte auf deinen Blog anpassen.

Wie dir sicherlich aufgefallen ist, gibt es verschiedene CSS-Klassen in diesem Code. Über diese Klassen lassen sich die Banner in der Höhe und dem Randabstand anpassen. Folgender CSS Code wäre in diesem Fall in die style.css einzufügen.

.left-bannerseo {
max-width: 50%;
position: fixed;
left: -5px;
top: 325px;
} 

.left-bannerlead {
max-width: 50%;
position: fixed;
left: -5px;
top: 400px;
} 

.left-bannercupon {
max-width: 50%;
position: fixed;
left: -5px;
top: 475px;
} 

Wenn du alles richtig gemacht hast, dann dürfte das Ergebnis ungefähr so aussehen:

Sidebar_gefüllt

Aber halt! Deine Inhalte werden zwar nicht mehr auf mobilen Endgeräten angezeigt, aber in jeder Desktop-Auflösung. Damit wir erkennen, wann der Inhalt ausgegeben werden soll. Müssen wir eine Grenzauflösung finden. Bei mir ist das 1600*900. Der CSS-Befehl dafür sieht so aus:

@media screen and (max-width: 1599px) and (max-height: 899px) {

.left-bannerseo {

display:none; } }

@media screen and (max-width: 1599px) and (max-height: 899px) {

.left-bannerlead {

display:none; } }

@media screen and (max-width: 1599px) and (max-height: 899px) {

.left-bannercupon {

display:none; } }

Hier sagen wir, dass bis zu einer Auflösung von 1599×899 keine Inhalte angezeigt werden dürfen, da sich sonst das Layout unschön verändert.

1599×899 deshalb, weil wir ab 1600×900 bereits die Inhalte ausgeben möchten. Man zieht also genau 1 ab. Dieser CSS-Befehl wird ebenfalls in die style.css eingefügt.

Jetzt sollte eigentlich alles passen.

emulated

Sidebar_gefüllt

Vergiss auf gar keine Fall, vorher ein Backup zu machen. Das es bei jedem funktioniert, kann ich nicht garantieren.

 

Hinterlasse einen Kommentar

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg