FGNet.de

enjoy…

14. März 2010 | 4 Kommentare

Die WPtouch-Erweiterung für WordPress

So sieht die Mobilversion von FGNet.de aus.

Falls ihr schon mal mit eurem iPhone, iPod oder einem anderen Mobilgerät auf FGNet.de wart, habt ihr vielleicht festgestellt, dass die Seite anders aussieht, als auf eurem PC. Der Grund dafür ist die WPtouch-Erweiterung für WordPress-Blogs.

Mit dieser Erweiterung wird euer Blog speziell für kleine Bildschirme und Handys aufbereitet und dargestellt. Das spart unter Anderem Ladezeit, sieht besser aus und spart natürlich auch Kosten, da bei der Mobilversion weniger Daten übertragen werden, als auf dem Computer.

Die Frage ist nun, wie WPtouch erkennt, ob man FGNet.de überhaupt mit einem mobilen Gerät aufruft oder ob man über seinen Webbrowser am PC darauf zugreifen will. Die Lösung liegt bei den sogenannten „User Agents“. Jeder Browser, teilweise sogar jede Version eines Browsers sendet bei jedem Seitenaufruf seinen User Agent an die Seite. Wenn man die Seite beispielweise mit Safari auf einem Mac öffnet, ist der User Agent:

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_2; de-de) AppleWebKit/531.22.7 (KHTML, like Gecko)
Version/4.0.5 Safari/531.22.7

So wird der Seite mitgeteilt, dass man einen Mac mit Mac OS Version 10.6.2 und Safari verwendet. Einige Seiten sind nun so programmiert, dass sie, je nach verwendetem User-Agent, unterschiedliche Informationen und Designs anzeigen. Nach diesem Prinzip arbeitet auch WPtouch. Wenn die Erweiterung erkennt, dass man sie mit einem Browser fürs Handy aufruft, wird die spezielle Mobilversion geladen. Öffnet man die Seite zum Beispiel auf einem iPhone, wird der User Agent „iphone“ übermittelt. Die Erweiterung erkennt: „Aha, der User ist mit dem iPhone online, ich zeige deshalb die Mobilversion, anstatt der PC-Version an“.

Allerdings wurde WPtouch ursprünglich nur für Geräte wie das iPhone programmiert und andere Geräte werden nicht unterstützt. Dies kann man aber mit einem kleinen Handgriff ändern.

Zuerst öffnet man die sein WordPress Backend (den Admin-Bereich) und geht dort auf die WPtouch-Einstellungsseite. Im Bereich „Advanced Options“ findet man ein „Custom User-Agents“-Feld. In dieses Feld tragt ihr einfach alle anderen User-Agents ein, bei denen die Mobilversion eures Blogs geladen werden soll.

Ich habe zum Beispiel

nokia, iemobile, symbian, opera mini, opera mobi, windows ce, samsung, wap, symbian, wml,
pda, ericsson, sonyericsson

als „Custom User-Agents“ eingetragen. Somit wird die Seite auch auf Geräten wie Nokia-Handys, dem Internet Explorer Mobile, einem PDA oder im Opera-Mobile-Browser in der Mobilversion dargestellt.

Wichtig ist, dass der Mobilbrowser JavaScript unterstützt und das JavaScript aktiviert ist – sonst funktioniert WPtouch nicht richtig. Falls man sich doch anders entscheidet und die PC-Version auf seinem Handy sehen möchte, kann man jeweils ganz unten auf den einzelnen Seiten die Mobilversion ausschalten.

Das "Custom User-Agents"-Feld im WordPress Backend.

Ich hoffe, euch hat der Artikel einen kleinen Einblick in WPtouch und die dahinterliegende Funktionsweise gegeben.

Kennt ihr andere Plugins für Mobile WordPress-Blogs? Verwendet ihr auch WPtouch? Wie sieht die Mobilversion von FGNet.de auf eurem Handy aus? – Lasst es mich wissen!

Viele Grüße aus der iPhone-Ecke,
– Fabi

Füge den Permalink zu deinen Favoriten hinzu.
Bleib auf dem neusten Stand und verfolge den Kommentar RSS-Feed für diesen Artikel.
Schreibe einen Kommentar oder hinterlasse ein Trackback: Trackback URL.

Dieser Eintrag wurde unter folgenden Tags abgelegt:
, , , , , , , , , , ,

4 Kommentare

  1. Geschrieben am 14. März 2010 um 18:32 | Permalink

    Zu Beginn habe ich MobilePress verwendet, war mit der Qualität irgendwann allerdings nicht mehr zufrieden. Inzwischen benutze ich das Plugin WordPress Mobile Edition, an dem ich ein paar Änderungen vorgenommen habe.

    Neben der automatischen Umschaltung biete ich auch eine manuelle Umschaltung zwischen der mobilen Version und der Desktopversion an.

    • Fabi
      Geschrieben am 14. März 2010 um 18:46 | Permalink

      Hey,

      das mit der Umschaltung bei deinem Blog habe ich mir gestern angeschaut. Es ist auf jeden Fall eine gute Idee. Leider kenne ich mich mit PHP / htaccess-Dateien noch nicht ganz so gut aus, aber ich werde mal versuchen, mich an meinen freien Tagen etwas mehr damit zu beschäftigen.

      Die Umschaltung per Subdomain reizt mich schon :) Ist auf jeden Fall etwas professioneller, als wenn es nur per User-Agent beeinflussbar ist.

  2. Kurt
    Geschrieben am 18. März 2010 um 14:05 | Permalink

    Hm. Hab das Plugin bei mir jetzt auch installiert. Allerdings klappt es mit den Einstellungen im Adminbereich nicht. Die Installation verlief ohne Fehlermeldung, aber wenn ich die Einstellungen aufrufen will, bekomme ich nur eine leer Seite zu sehen… :-(

    Und nun?!

    • Fabi
      Geschrieben am 18. März 2010 um 18:16 | Permalink

      Hmmm gute Frage. Ein erneutes Hochladen der Dateien bzw. ein neuer Import könnte das Problem vielleicht beheben. Eine komplett weiße Seite bedeutet bei WordPress eigentlich immer einen PHP-Fehler (die PHP-Fehlermeldungen werden standardmäßig unterdrückt).

Einen Kommentar schreiben

Deine Mailadresse wird niemals veröffentlicht oder weitergegeben. Pflichtfelder sind mit * gekennzeichnet

*
*

Du kannst folgende Tags zum Formatieren deines Kommentares benutzen:

fett [b]TEXT[/b] kursiv [i]TEXT[/i] unterstrichen [u]TEXT[/u]
durchgestrichen [s]TEXT[s] überstrichen [o]TEXT[/o] blinkend [blink]TEXT[/blink]
hochgestellt [sup]TEXT[sup] runtergestellt [sub]TEXT[sub] farbig [color=FARBE]TEXT[/color]
E-Mail-Adresse [mail=test@test.de]test@test.de[/mail]     Code [code]TEXT[/code]
Link (URL) [url=LINKADRESSE]Beschreibung[/url]        

Noch mehr FGNet.de