Im Frühjahr 2012 wurde die WordPress-Version 3.4 veröffentlicht. Neben der Einführung des Theme Customizers und der Möglichkeit, Tweets automatisch einzubetten, fügte Version 3.4 auch eine Funktion hinzu, mit der Entwickler/innen testen konnten, ob sich ein/e Website-Besucher/in von einem mobilen Gerät wie einem Smartphone oder Tablet aus verbindet.

Diese Funktion – wp_is_mobile() – erschien zu einer Zeit, als das gefeierte „Retina Display“, das Apple für das iPhone 4 vorgestellt hatte, nur 640 x 960 Pixel groß war. Als das iPhone 5 einige Monate nach WordPress 3.4 auf den Markt kam, erreichte das Display des Telefons 640 x 1.136 Pixel – immer noch weit entfernt von den Displays moderner Smartphones und Tablets, die die Grenzen zwischen mobilen und Desktop-Bildschirmen verwischen.

Ist wp_is_mobile() also heute noch von Nutzen?

Der Zweck der Funktion wp_is_mobile()

Im Jahr 2012 war die Browserunterstützung für CSS-Media-Queries, die responsives Webdesign ermöglichen, noch relativ neu. (Wirklich neu für die Nutzer von Internet Explorer von Microsoft!) Aber es war nicht das Ziel von wp_is_mobile(), Seitenlayouts zu ermöglichen, die sich an unterschiedliche Darstellungsgrößen anpassen.

Die Funktion unterscheidet nicht zwischen Handys und Tablets und ist sich der verfügbaren Pixel im Browser eines Besuchers völlig unbewusst. Stattdessen war wp_is_mobile() als Werkzeug gedacht, mit dem Entwickler die Bandbreite optimieren können, wenn sie auf mobile Geräte reagieren, die oft nicht genügend Leistung haben und möglicherweise in den Händen von Nutzern sind, die ihre Telekommunikationsanbieter für die Datenübertragung bezahlen.

Da Handys und Tablets heute leistungsfähiger sind als viele Desktops aus dem Jahr 2012, ist die Drosselung der Bandbreite vielleicht weniger wichtig, aber es gibt immer noch Anwendungsfälle für eine Funktion, die die Welt einfach in zwei Teile teilt: mobile Geräte und alles andere.

Die Funktion wp_is_mobile() in Aktion

Die WordPress-Funktion wp_is_mobile() gibt true zurück, wenn sie als Ergebnis einer Anfrage von Browsern der meisten Smartphones und Tablets (einschließlich des Kindle) ausgeführt wird. Das klassische Beispiel für die Funktion, die verschiedene Inhaltsströme in PHP erzeugt, sieht also so aus:

<?php if( wp_is_mobile()){ ?>

    <p>This content is for mobile devices</p>

<?php } else { ?>

    <p>This content is for desktops (and laptops).</p>

<?php } ?>

Wenn du die Ausgabe deiner Website wirklich für mobile Geräte optimieren musst (wahrscheinlich, um die Bandbreitenanforderungen zu minimieren), kann die oben beschriebene Technik in Themedateien verwendet werden, um völlig unterschiedliche Strukturen für mobile und Desktop-Seiten auszugeben.

Geräteerkennung für granulare Inhaltsanpassungen

CSS-Media-Queries und andere Techniken, die das responsive Webdesign unterstützen, können dabei helfen, Seitenlayouts an eine Vielzahl von Bildschirmgrößen und -ausrichtungen anzupassen. Sie können dir aber nicht dabei helfen, mit den Besuchern deiner Website als entweder mobile oder Desktop-Nutzer zu kommunizieren.

Du weißt zum Beispiel, dass Desktop-Benutzer/innen wahrscheinlich mit der Maus auf Elemente deiner Website „klicken“, während mobile Benutzer/innen „tippen“. Desktop-Nutzer/innen können mit der rechten Maustaste auf einen Link klicken, um ihn in einem neuen Browserfenster zu öffnen. Mobilnutzer/innen hingegen „drücken und halten“, um die gleiche Aufgabe zu starten. Wenn du mit deinen Nutzerinnen und Nutzern über die Navigation auf deiner Website kommunizierst (z. B. in deiner Hilfedokumentation), kann es sein, dass du die Hälfte der Zeit die falsche Terminologie verwendest.

Hier zeigen wir dir, wie wir wp_is_mobile() und WordPress-Shortcodes kombinieren können, um eine granulare Ausgabe von Inhalten für Mobil- und Desktopgeräte zu ermöglichen, die auch für Website-Redakteure leicht zu beherrschen ist.

Wir werden unsere Mobil-/Desktop-Erkennung in Verbindung mit den WordPress-Funktionen add_shortcode() und do_shortocde() verwenden, um Shortcode-Tools zu erstellen, die Redakteure in Beiträgen anwenden können.

Zuerst fügen wir diesen Code in die Datei unseres Themes functions.php Datei ein (nachdem wir es durch die Erstellung eines Child-Themes geschützt haben):

/**
 * Add shortcodes
 */

// Create [desktop] shortcode
add_shortcode('desktop', 'show_desktop_content');
function show_desktop_content($atts, $content = null){
    if( !wp_is_mobile() ){
        return do_shortcode( $content );
    } else {
        return null;
    }
}

// Create [mobile] shortcode
add_shortcode('mobile', 'show_mobile_content');
function show_mobile_content($atts, $content = null){
    if( wp_is_mobile() ){
        return do_shortcode( $content );
    } else {
        return null;
    }
}

Dadurch werden die [desktop] und [mobile] Shortcodes (und ihre schließenden Tags) erstellt, die wir in jedem Beitrag oder Seiteninhalt wie diesem verwenden können:

<h2>Password Help</h2>

To change your password, [desktop]click[/desktop][mobile]tap[/mobile] the cog icon.

Auf einem mobilen Gerät wird der obige Inhalt wie folgt aussehen:

Screenshot, der die Ausgabe der Shortcodes auf einem Mobilgerät zeigt, mit einem Hinweis auf das „Antippen“.
Nutzer von Mobilgeräten sehen in der obigen Ausgabe „tap“

Auf allen anderen Geräten sehen die Besucher dies:

Screenshot, der die Ausgabe der Shortcodes auf einem Mobilgerät zeigt, mit einem Hinweis auf „Klicken“.
„Desktop“-Benutzer sehen in der obigen Ausgabe „click“

Mit dieser Technik ist es ganz einfach, Inhalte bereitzustellen, die „wissen“, wie Besucher mit deiner WordPress-Seite interagieren.

Die Funktion wp_is_mobile() und WordPress-Caching

Du musst WordPress nicht seit 2012 benutzen, um zu wissen, dass das Caching von Seiten eine der effektivsten Methoden zur Verbesserung der Leistung ist. Aber das grundlegende WordPress-Caching kann dir einen Strich durch die Rechnung machen, wenn es darum geht, bei Anfragen für dieselbe Seite unterschiedliche Inhalte zu liefern.

Ein WordPress-Cache für eine einzelne Seite wird durch eine Kundenanfrage ausgelöst. Wenn diese erste Anfrage von einem mobilen Gerät kommt, wird der zwischengespeicherte Inhalt für mobile Nutzer/innen angepasst, wenn er von wp_is_mobile() geändert wird. Jede weitere Anfrage für diese Seite liefert mobile Inhalte – auch für Desktop-Nutzer – bis der Cache geleert wird.

Deshalb unterstützt die Managed WordPress Hosting-Plattform von Kinsta getrennte Caches für mobile und Desktop-Inhalte – angefangen beim lokalen Cache deines NGINX-Webservers bis hin zum Edge Cache von Kinsta in 260+ Cloudflare PoPs auf der ganzen Welt.

Das Aktivieren des Cachens von Seiten für mobile Geräte ist mit ein paar Klicks (oder Fingertipps!) im MyKinsta-Dashboard möglich:

Screenshot, der die Caching-Steuerelemente im MyKinsta-Dashboard zeigt. Sichtbar ist die Option, den mobilen Cache zu deaktivieren oder zu aktivieren.
Cache-Kontrollen für eine WordPress-Seite im MyKinsta-Dashboard

Zusammenfassung

Die WordPress-Funktion wp_is_mobile() mag wie ein Relikt aus der Vergangenheit erscheinen, aber du kannst ihre „Mobil-oder-Desktop“-Erkennung nutzen, um ein besseres Erlebnis für alle Besucher deiner Website zu schaffen.

Vergiss nicht, dass du getrennte Caches für die verschiedenen Inhalte brauchst, die du generierst, wenn du die beste Leistung aus diesen mobilen und Desktop-Optionen herausholen willst.

Hast du eine tolle Idee, wie du die Vorteile von wp_is_mobile() nutzen kannst? Lass es uns in den Kommentaren unten wissen.

Steve Bonisteel Kinsta

Steve Bonisteel is Technical Editor bij Kinsta. Hij begon zijn schrijverscarrière als verslaggever en achtervolgde ambulances en brandweerwagens. Sinds eind jaren negentig schrijft hij over internetgerelateerde technologie.