Für Blogger: Mit wp is mobile() Inhalte mobil anzeigen oder ausblenden

Wie euch hoffentlich schon aufgefallen ist, läuft Testspiel.de seit Ende Dezember auf einem responsive WordPress Theme. Dank Responsive Webdesign bietet Testspiel.de nun eine in Hinsicht auf Darstellung und Bedienkonzept optimierte Desktop-, Tablet- und Smartphoneversion für mobile Endgeräte wie iPhone, iPad, Samsung Galaxy S3, Galaxy Nexus 10 etc.. Ich verwende das responsive WordPress Theme Baylys von Elmastudio.

Mobil nur ein Werbemittel pro Seitenaufruf

Darüber hinaus blende ich einige Inhalte (überwiegend Werbebanner) mobil aus, da auf mobilen Endgeräten die Displayfläche kleiner ist und die Banner noch mehr stören würden. Das Aublenden spart jedoch nicht nur Platz, sondern macht die Seiten auch leichter und verringert die Ladezeiten. Positiver Nebeneffekt ist, dass auch Goolge bei seinen Rankingfaktoren dies positiv berücksichtigt (mehr Infos unter www.startmobile.de).

Ebenso würde es Sinn machen, Inhalte, die mobil noch nicht funktionieren (wie z.B. die eingebetteten Musikvideos von tape.tv) auszublenden.

Mit der WordPress Funktion wp_is_mobile() Inhalte mobil anzeigen oder ausblenden

Mit der WordPress Funktion wp_is_mobile() ist das Ausblenden/Anzeigen von Inhalten ganz einfach. wp_is_mobile() ist eine globale Funktion für die Abfrage auf mobile Endgeräte (iOS, Android, BlackBerry, Opera Mini, Kindle, Silk, etc.) die WordPress seit Version 3.4 zur Verfügung stellt. Ganz im Gegensatz zur CSS-Anweisung display:none, wird ein Element, das per Funktion wp_is_mobile “ausgeblendet” wird, auch nicht geladen. So wird tatsächlich Ladezeit gespart.

Code-Beispiele für wp_is_mobile():

In diesem Bespiel wird ein Banner mobil nicht angezeigt:

1
2
3
<!--?php if (!wp_is_mobile() ) { ?-->
/* Hier steht drin, was mobil nicht angezeigt werden soll (z.B. ein Banner). */
<!--?php } ?-->

Dies ist ein Beispiel für eine if-then-else-Anweisung.

1
2
3
4
5
<!--?php if (wp_is_mobile() ) { ?-->
/* Hier steht drin, was mobil angezeigt werden soll. */
<!--?php } else { ?-->
/* Hier steht drin, was anstelle von mobil angezeigt werden soll. */
<!--?php } ?-->

So einfach geht es in der Theorie. Leider musste ich jedoch festellen, dass die Funktion nicht immer 100% fehlerfrei funktioniert.

Ich freue mich auf euer Feedback.