WordPress & Webwork

wp_is_mobile(): WordPress-Inhalte nur für mobile Geräte

Mit wp_is_mobile() kann man WordPress-Inhalte nur für mobile oder für Desktop-Nutzer ausgeben lassen.

Seit Version 3.4 – also seit Mitte 2012 – besitzt WordPress einen Conditional-Tag mit dem man mobile Geräte erkennen und ansprechen kann und das den Namen wp_is_mobile() trägt.

Symbolbild: Website im mobilen Simulator

So ist die Funktion in der Datei /wp-includes/vars.php definiert:

function wp_is_mobile() {
    if ( empty($_SERVER['HTTP_USER_AGENT']) ) {
        $is_mobile = false;
    } elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false // many mobile devices (all iPhone, iPad, etc.)
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mobi') !== false ) {
            $is_mobile = true;
    } else {
        $is_mobile = false;
    }
 
    return $is_mobile;
}

Wie man an Hand des oberen Codes gut erkennen kann, wird der User Agent Strings des Browsers ($_SERVER['HTTP_USER_AGENT']) ausgelesen und durch dieses Auslesen werden die mobilen Geräte erkannt. Mit dieser Methode erkennt man die Geräte von Apple, Geräte mit Android, verschiedene Kindles – Silk ist der Standardbrowser auf Kindle Fire, so wie Blackberrys und Geräte mit mobilen Opera-Browser … wie das aber mit Windows-Phone klappt kann ich mangels Testgerätes nicht sagen.

Dadurch ergeben sich für den Betreiber bzw. den Betreuer eines WordPress-Projektes zusätzliche Möglichkeiten. So kann er zum Beispiel nur für die mobilen Nutzer Inhalte einblenden lassen:

<?php if (wp_is_mobile()) {
	// Das hier wird nur auf den mobilen Geräten angezeigt
} ?>

Diese zusätzlichen Inhalte können verschiedener Natur sein. So kann man auf diese Weise die mobile Navigation oder angepasste Werbeanzeigen für mobile Nutzer einblenden lassen. Man kann natürlich auch den umgekehrten Weg wählen und Inhalte nur dann anzeigen lassen, wenn Besucher vorbeikommen, die nicht als mobile Nutzer erkannt wurden:

<?php if (!wp_is_mobile()) {
	// Das hier wird nicht auf den mobilen Geräten angezeigt
} ?>

Also kurz zusammenfasst. Mit der Abfrage wp_is_mobile() und !wp_is_mobile() hast du die Möglichkeit Inhalte für mobile und nicht-mobile Nutzer ausgeben zu lassen. Was das jetzt im einzelnen ist – zusätzliche Hinweise, eine andere Navigation, angepasste Werbung – ist natürlich dem Betreiber überlassen, aber wie man sieht die Einsatzmöglichkeiten sind vielfältig.

12 Reaktion(en)

  1. Marcus Kober

    Problematisch ist die Funktion allerdings, wenn man ein Cache-Plugin verwendet… Je nach erstem Aufruf ist dann entweder die mobile oder nicht-mobile Version im Cache und wird jedem Nutzer angezeigt, egal mit welchem Device er sich die Seite ansieht…

    1. Vladimir

      Hallo Marcus,
      das ist ein guter Einwand. Habe es auf einer Installation ausprobiert ohne aktiviertem Cache-Plugin. Wobei ich zum Beispiel weiß, dass Hyper Cache separate Caches für mobile und nicht-mobile Geräte anbietet. Man müsste es ausprobieren wie zuverlässig diese Erkennung ist.

      1. Marcus Kober

        Hi Vladimir,

        W3 Total Cache z.B. wird out of the box zu Problemen führen. Man müsste über User Agent Groups regeln, dass mobile Seite extra behandelt werden…

        Kleinere, einfachere Cache-Plugins werden allerdings wohl immer entweder die eine oder andere Version cachen.

        Hyper Cache kenne ich nicht so gut.

  2. Markus

    Nutze die Funktion nun auch schon eine Weile. Hab diese durch Zufall entdeckt und spart mir den Einsatz von mobiledetect.net. wp_is_mobile funktioniert auch mit Windows Mobile gut. Was das Thema Cache angeht, da gibt es ja leider immer Probleme mit diversen Dingen die man nur bestimmten Usern anbietet, daher hab ich seit langem ein selbstgeschriebenes Cachesystem im Einsatz.

  3. Heiko Mamerow

    Vielen Dank, diese Funktion kannte ich noch nicht. (auch das Plugin nicht) Aber ich werde sie auch ganz bestimmt freiwillig nicht verwenden, weil das Browser-Sniffing nicht verlässlich ist. Darauf sollte man hinweisen.

    z.B. MDN warnt: "It’s worth re-iterating: it’s very rarely a good idea to use user agent sniffing. You can almost always find a better, more broadly compatible way to solve your problem!" (https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent)

    Das kommt jetzt hoffentlich nicht abwertend rüber. Ich lese Deine Artikel gerne und lerne viel dazu. 🙂

  4. David Decker

    Die Funktion wp_is_mobile() ist eigentlich nur für den WordPress-internen Einsatz gedacht! Sie wird daher auch nicht in den Twenty *-Themes verwendet, wie man u.a. an dieser Trac-Diskussion sehen kann:
    https://core.trac.wordpress.org/ticket/26221

    Aufgrund der genannten Probleme, u.a. mit Caching, sowie der Beschränktheit der Funktion, ist es weit bessere, andere Bibliotheken bzw. Alternativen einzusetzen. U.a. "Mobble" Plugin, oder auch die Mobile-Bibliothek aus Jetpack, die wesentlich besser, weitläufiger ist und vor allem auch für den Frontend-Einsatz konzipiert wurde!

  5. Florian

    Ich bevorzuge es lieber anhand von CSS-Klassen die Bildschirmbreite als Basis für derartiges zu verwenden. Dann gibt es weder mit Caching Probleme, noch traue ich den übermittelten User-Agent-Daten als Basis hierfür. CSS-Frameworks liefern für diese zwecke ja meist schon out of the boc die richtigen Klassen mit.

  6. Pingback: Sonnenuntergänge September - Habutschu!

Schreibe einen Kommentar

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