Wie erkennt man mobile Geräte und präsentiert ihnen ein bestimmtes Thema?

31

Ich möchte eine neue, geänderte Version meines Themas erstellen (ggf. mein Profil überprüfen), um sie den Besuchern zu präsentieren, wenn ich feststelle, dass sie die Site von einem tragbaren Gerät wie iPhone, Android usw. aus besuchen.

  1. Wie kann festgestellt werden, ob die Anforderung von einem mobilen Gerät / Browser stammt?
  2. Wie kann ich ein bestimmtes Thema laden und präsentieren?

Weitere Informationen : Mein Thema ist nicht fließend. Es hat eine feste Breite von ca. 976px (676px Inhalt + Rest ist links in der Seitenleiste). Ich möchte das Thema nicht revolutionieren, aber ich denke, es ist zu groß für 320x480 und 800x480 Telefone. Wahrscheinlich werde ich die Seitenleiste entfernen oder zumindest nach rechts verschieben und andere kleine Anpassungen vornehmen.

Erpel
quelle

Antworten:

19

Wie die meisten anderen empfehle ich die Verwendung von WPTouch. Es wurde jedoch mehr für die Unterstützung von Blogs als für andere Websiteformate entwickelt, sodass ich weiß, dass es nicht das Allheilmittel für mobile Lösungen ist (ich verwende mein Portfolio sowohl in WordPress als auch in meinem Blog und mein Portfolio sieht aus wie ****in WPTouch).

Also habe ich mir den Code angesehen, um die relevanten Teile zu finden, die Sie zum Replizieren der Erkennung des mobilen Browsers benötigen. Erstens, wie von Jan Fabry erwähnt, handelt es sich um eine Liste von Benutzeragenten für mobile Browser. WPTouch enthält eine Standardliste, aber Sie können auch benutzerdefinierte Benutzeragenten mit einer Einstellung oder mit einem Filter namens hinzufügen wptouch_user_agents:

function bnc_wptouch_get_user_agents() {
    $useragents = array(           
        "iPhone",                                // Apple iPhone
        "iPod",                                  // Apple iPod touch
        "Android",                               // 1.5+ Android
        "dream",                                 // Pre 1.5 Android
        "CUPCAKE",                               // 1.5+ Android
        "blackberry9500",                        // Storm
        "blackberry9530",                        // Storm
        "blackberry9520",                        // Storm v2
        "blackberry9550",                        // Storm v2
        "blackberry9800",                        // Torch
        "webOS",                                 // Palm Pre Experimental
        "incognito",                             // Other iPhone browser
        "webmate",                               // Other iPhone browser
        "s8000",                                 // Samsung Dolphin browser
        "bada"                                   // Samsung Dolphin browser
    );

    $settings = bnc_wptouch_get_settings();
    if ( isset( $settings['custom-user-agents'] ) ) {
        foreach( $settings['custom-user-agents'] as $agent ) {
            if ( !strlen( $agent ) ) continue;

            $useragents[] = $agent; 
        }       
    }

    asort( $useragents );

    // WPtouch User Agent Filter
    $useragents = apply_filters( 'wptouch_user_agents', $useragents );

    return $useragents;
}

Das Fleisch des Plugins ist jedoch eine Klasse:

class WPtouchPlugin {
    var $applemobile;
    var $desired_view;
    var $output_started;
    var $prowl_output;
    var $prowl_success;

    ...

Der Konstruktor ( function WPtouchPlugin()) des Plugins fügt dem plugins_loadedHook zunächst eine Aktion hinzu , um den Benutzeragenten des mobilen Browsers zu erkennen und $applemobileauf true zu setzen. Hier ist die spezifische Funktion:

function detectAppleMobile($query = '') {
    $container = $_SERVER['HTTP_USER_AGENT'];

    $this->applemobile = false;
    $useragents = bnc_wptouch_get_user_agents();
    $devfile =  compat_get_plugin_dir( 'wptouch' ) . '/include/developer.mode';
    foreach ( $useragents as $useragent ) {
        if ( preg_match( "#$useragent#i", $container ) || file_exists( $devfile ) ) {
            $this->applemobile = true;
        }       
    }
}

Jetzt weiß das Plugin, dass Sie einen mobilen Browser verwenden (laut User Agent des Browsers). Der nächste Teil des Plugins besteht aus einer Reihe von Filtern:

if ( strpos( $_SERVER['REQUEST_URI'], '/wp-admin' ) === false ) {
    add_filter( 'stylesheet', array(&$this, 'get_stylesheet') );
    add_filter( 'theme_root', array(&$this, 'theme_root') );
    add_filter( 'theme_root_uri', array(&$this, 'theme_root_uri') );
    add_filter( 'template', array(&$this, 'get_template') );       
}

Jeder dieser Filter ruft eine Methode auf, die prüft, ob $applemobletrue festgelegt ist oder nicht . Wenn dies der Fall ist, verwendet WordPress Ihr mobiles Stylesheet, Ihr mobiles Design und eine mobile Post- / Seitenvorlage anstelle der Standardvorlagen für Ihr Design. Grundsätzlich setzen Sie das Standardverhalten von WordPress außer Kraft, je nachdem, ob der verwendete Browser über einen Benutzeragenten verfügt, der Ihrer Liste der "mobilen Browser" entspricht.

WPTouch bietet auch die Möglichkeit, das mobile Design zu deaktivieren. Wenn Sie eine WPTouch-Site auf einem iPhone besuchen, befindet sich unten eine Schaltfläche, mit der Sie die Site normal anzeigen können. Sie können dies berücksichtigen, wenn Sie Ihre eigene Lösung erstellen.

Haftungsausschluss: Der gesamte oben genannte Code wurde aus der Quelle für WPTouch Version 1.9.19.4 kopiert und ist unter der GPL geschützt. Wenn Sie den Code wiederverwenden, muss Ihr System auch den Bestimmungen der GPL entsprechen. Ich habe diesen Code nicht geschrieben.

EAMann
quelle
Ist dies die Standard-UA-Liste? Kein Opera Mini oder Opera Mobile? Seltsam.
fuxia
Das ist die UA-Liste direkt aus dem Quellcode. Denken Sie jedoch daran, dass WPTouch 2.0 ein Premium-Plug-In ist, das Sie bei BraveNewCode erwerben müssen . Ich habe mir die Quelle noch nicht angesehen, daher könnte es eine aktualisierte UA-Liste geben.
EAMann,
8

Vielleicht möchten Sie sich ansehen, wie das sehr beliebte WPtouch-Plugin dies macht. Es gibt ein anderes Thema für "iPhone, iPod touch, Android-, Opera Mini-, Palm Pre-, Samsung touch- und BlackBerry Storm / Torch-Mobilgeräte" . Ich sehe eine Liste von Benutzeragenten in ihrem Quellcode , das ist wahrscheinlich der Schlüssel.

Ein weiteres Plugin, WP-Wurfled , verwendet die umfangreiche Wireless Universal Resource File- Datenbank. Diese ständig aktualisierte Datenbank mobiler Geräte enthält auch viele Funktionsinformationen , sodass Sie serverseitig die Bildschirmauflösung des Geräts kennen, ob es Flash unterstützt, ...

Der template_redirectAktions-Hook wird häufig zum Laden benutzerdefinierter Designs verwendet, da es fast der letzte Moment ist, bevor eine echte Vorlagendatei enthalten ist (dies template_includeist der letzte Hook, aber das ist ein Filter).

Jan Fabry
quelle
7

Auf die Gefahr hin, die Frage nicht zu beantworten, würde ich raten, dies nicht zu tun.

Ich benutze iOS-Geräte seit Monaten und eines der ersten Dinge, die ich getan habe, als ich mein iPad gekauft habe, war, ein CSS-Layout zu entwickeln, das sein Verhalten basierend auf dem verwendeten Gerät (und ursprünglich der Bildschirmausrichtung) änderte ).

Zum Zeitpunkt des Schreibens läuft es auf meiner Entwickler-Website (http://dev.semiologic.com/). Wenn Sie es auf einem iOS-Gerät testen, werden Sie feststellen, dass das Layout von einer Spalte mit Seitenleisten auf dem iPad zu einer mit einer einzelnen Spalte auf dem iPhone wechselt. (Die Seitenleisten sind in zwei Spalten angeordnet, und die unteren Felder sind in zwei Spalten darunter angeordnet.) Sie können den Effekt mit Safari reproduzieren, indem Sie die Breite des Browsers verringern.

Wie auch immer, so lustig es war zu programmieren, kam mir schließlich der Gedanke, dass zumindest auf iOS-Geräten das für Handys optimierte Layout die Sache nicht besser, sondern schlechter machte. Der in Safari Mobile integrierte Zoom sorgt dafür, dass Ihre Website bereits für den mobilen Einsatz optimiert ist, solange Ihre Hauptspalte 480 Pixel breit ist. Fügen Sie eine 240 Pixel breite Seitenleiste für ein 720 Pixel breites Layout hinzu, und Ihre Website passt und sieht in jeder Hinsicht gut aus:

  • 1024 x 768 (iPad-Landschaft)
  • 768 x 1024 (iPad-Porträt)
  • 800x600 (Benutzer mit Sehschwäche)
  • 480 x 320 (iPhone-Landschaft)
  • 320x480 (iPhone-Porträt mit automatischem Zoom)

500px + 250px funktioniert auch, wenn Sie lieber etwas mit 750px haben möchten, wenn Sie den integrierten Zoom des Safari-Handys berücksichtigen. Die Site sieht immer noch gut aus und ist sowohl im Quer- als auch im Hochformat auf iPhones perfekt lesbar.

Wenn Sie auf Ihre Frage zurückkommen, haben Sie jedenfalls festgestellt, dass Sie NICHT ein Layout mit einer flexiblen Breite verwenden sollten. (Im Übrigen macht WP-touch genau das, es sei denn, ich irre mich.) Dies führt zu suboptimalem Zoomen. Auf dem iPad können Sie eine 480 Pixel breite Spalte vergrößern, um eine größere Textgröße zu erzielen. Etwas, das sich an die Breite Ihres Bildschirms anpasst, zwingt Sie dazu, winzigen Text zu lesen oder horizontal zu scrollen, wenn es zu klein ist, um bequem gelesen zu werden.

Denis de Bernardy
quelle
Vielen Dank für die Anregungen. Meine Website ist nicht flüssig, hat aber eine feste Breite von ca. 976 Pixel (676 Pixel Inhalt + Rest links in der Seitenleiste). Ich möchte das Thema nicht revolutionieren, aber ich glaube, es ist zu breit für 320x480- und 800x480-Telefone. Wahrscheinlich werde ich die Seitenleiste entfernen oder zumindest nach rechts verschieben.
Drake
Ich stimme zu 100% dem zu, was ich gesehen habe. Mit sehr wenigen Ausnahmen sind "mobile Themen" - zumindest die "mobilen Themen" -Plugins da draußen - fehlerhaft und schwerer zu verwenden als das Navigieren auf der ursprünglichen Website auf Mobilgeräten. Wenn Sie es sich jedoch zum Ziel gesetzt haben, eine mobile Version Ihrer Website zu erstellen, sollten Sie sich dies als eine komplette Neugestaltung und nicht nur als eine Optimierung des Stylesheets vorstellen.
Goldenapples
3

Einfach: wp_is_mobile()Zum Testen verwenden - es wird truefür alle Mobilgeräte (Smartphones, Tablets usw.) ausgelöst .

Aktualisieren

Bitte tu das nicht . Es funktioniert nicht zuverlässig.

Kaiser
quelle
2

Dies ist ein wirklich tolles Skript, wenn Sie es anpassen möchten und es einfach in WordPress zu integrieren ist. http://detectmobilebrowsers.mobi/

Zu beachten ist, dass die meisten iPhone-, Android- oder Mobiltelefonbenutzer mit nativer Browserunterstützung nicht automatisch umgeleitet werden möchten!

Dies ist eine schlechte Praxis. Geben Sie ihnen eine Option über einen Link zu einer mobilen Version UND geben Sie ihnen in der mobilen Version die Option, zur ursprünglichen Site zurückzukehren.

Ich wiederhole, leite deine Benutzer nicht automatisch um, es sei denn, du erstellst etwas ganz Spezielles für Handys, oder du hast Datenverkehr von älteren Handys ohne native Browserunterstützung (unwahrscheinlich).

  • Wollte hinzufügen, eine einfache Möglichkeit zu erkennen, wie wichtig dies in Ihren Serverprotokollen ist.
Wyck
quelle
Gute Beobachtung, um Schalteroptionen für beide Versionen anzubieten. Manchmal haben Sie einen nicht-mobilen Browser, aber eine langsame Verbindung (über ein Mobilfunkmodem, schlechtes WLAN, Einwahl, ...) und bevorzugen eine für Mobiltelefone optimierte Version, da diese (im Allgemeinen) auch kleiner ist.
Jan Fabry
2

Ich werde einen alternativen Ansatz hinzufügen.

Vielleicht möchten Sie den Stil und das Verhalten ganz nach Ihren Wünschen gestalten und optimieren.

Ich musste in letzter Zeit: Wenn IE9 eine Sache ist, wenn iPhone eine zweite, wenn iPad eine dritte und so weiter ... Und ich habe die Browser.php- Klasse von Chris Schuld mit großartigen Ergebnissen verwendet.

Die von mir aufgerufene Funktion und Anwendungsbeispiele:

require_once('Browser.php');
$browser_check = new Browser();
$browser_agent = $browser_check->getBrowser();
$browser_version = $browser_check->getVersion();

function browser_check($what) {
    global $browser_agent, $browser_version;
    switch ($what) {
        case 'version':
            return $browser_version;
        break;
        case 'ie':
            if ($browser_agent==Browser::BROWSER_IE) return true;
            else return false;
        break;
        case 'mobile':
            if ($browser_agent==Browser::BROWSER_ANDROID || $browser_agent==Browser::BROWSER_IPOD || $browser_agent==Browser::BROWSER_IPHONE) return true;
            else return false;          
        break;
        case 'ipad':
            if ($browser_agent==Browser::BROWSER_IPAD) return true;
            else return false;          
        break;
        default:
            return false;
        break;
    }
}

echo "Browser Version: " . browser_check('version');

if ( browser_check('ie') ) echo "Using Internet Explorer - print proper CSS";

if ( browser_check('mobile') ) echo "Using iPhone, iPod or Android - print proper JAVASCRIPT";

if ( browser_check('ipad') ) echo "Using iPad - print proper PHP";
Brasofilo
quelle