Comment détecter les appareils mobiles et leur présenter un thème spécifique?

Je voudrais créer une nouvelle version modifiée de mon thème (vérifier mon profil si nécessaire) à présenter aux visiteurs si je détecte qu'ils visitent le site à partir d'un appareil portable, comme iPhone, Android, etc.

1. Comment détecter si la demande provient d'un appareil mobile / navigateur?
2. Comment puis-je les charger et leur présenter un thème dédié?

Plus d'infos : Mon thème n'est pas fluide. Il a une largeur fixe d'environ 976px (contenu 676px + reste est la barre latérale gauche). Je ne veux pas révolutionner le thème mais je pense qu'il est trop grand pour les téléphones 320x480 et 800x480. Je vais probablement retirer la barre latérale ou au moins la déplacer vers la droite et faire d'autres petits ajustements.

Comme la plupart des autres, je recommande fortement d'utiliser WPTouch. Cependant, il est plus conçu pour prendre en charge les blogs que les autres formats de sites Web, donc je sais que ce n'est pas la panacée des solutions mobiles (je gère mon portefeuille sur WordPress ainsi que mon blog, et mon portefeuille ressemble ****à WPTouch).

J'ai donc jeté un coup d'œil au code pour trouver les parties pertinentes que vous auriez besoin d'utiliser pour répliquer la détection du navigateur mobile. Tout d'abord, comme mentionné par Jan Fabry, est une liste d'agents utilisateurs de navigateur mobile. WPTouch comprend une liste par défaut, mais vous permet également d'ajouter des agents utilisateurs personnalisés avec un paramètre ou un filtre appelé 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;
}

La viande du plugin, cependant, est une classe:

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

    ...

Le constructeur du plugin ( function WPtouchPlugin()) ajoute d'abord une action au plugins_loadedhook pour détecter l'agent utilisateur du navigateur mobile et définir la valeur $applemobiletrue. Voici la fonction spécifique:

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;
        }       
    }
}

Maintenant, le plugin sait que vous utilisez un navigateur mobile (selon l'agent utilisateur du navigateur). La prochaine partie charnue du plugin est un ensemble de filtres:

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') );       
}

Chacun de ces filtres appelle une méthode qui vérifie si elle $applemobleest définie sur true ou non . Si c'est le cas, WordPress utilisera votre feuille de style mobile, votre thème mobile et un modèle de publication / page mobile au lieu de ceux par défaut pour votre thème. Fondamentalement, vous remplacez le comportement par défaut de WordPress selon que le navigateur utilisé possède ou non un agent utilisateur correspondant à votre liste de "navigateurs mobiles".

WPTouch comprend également la possibilité de désactiver le thème mobile - lorsque vous visitez un site WPTouch sur un iPhone, un bouton en bas vous permet de visualiser le site normalement. Vous voudrez peut-être considérer cela lorsque vous créez votre propre solution.

Avertissement: Tout le code ci-dessus a été copié à partir de la source pour WPTouch version 1.9.19.4 et est protégé sous la GPL. Si vous réutilisez le code, votre système doit également respecter les termes de la GPL. Je n'ai pas écrit ce code.

Vous voudrez peut-être voir comment le très populaire plug-in WPtouch fait cela. Il propose un thème différent pour "iPhone, iPod touch, Android, Opera Mini, Palm Pre, Samsung touch et BlackBerry Storm / Torch mobile devices" . Je vois une liste d'agents utilisateurs dans leur code source , c'est probablement la clé.

Un autre plugin, WP-Wurfled , utilise la vaste base de données de fichiers de ressources universelles sans fil . Cette base de données constamment mise à jour des appareils mobiles contient également de nombreuses informations sur les capacités , de sorte que vous connaissez côté serveur la résolution d'écran de l'appareil, si elle prend en charge Flash, ...

Le template_redirectcrochet d'action est souvent utilisé pour charger des thèmes personnalisés, car c'est presque le dernier moment avant qu'un vrai fichier de modèle soit inclus ( template_includec'est le dernier crochet, mais c'est un filtre).

Au risque de ne pas répondre à la question, je vous déconseille de le faire.

J'utilise des appareils iOS depuis des mois, et l'une des premières choses que j'ai faites lorsque j'ai acheté mon iPad a été d'essayer de proposer une disposition CSS qui a changé son comportement en fonction de l'appareil utilisé (et, à l'origine, de l'orientation de l'écran ).

Au moment de la rédaction, il fonctionne sur mon site de développement (http://dev.semiologic.com/). Si vous le testez sur un appareil iOS, vous remarquerez que la mise en page passe d'une colonne avec des barres latérales sur l'iPad à une avec une seule colonne basée sur l'iPhone. (Les barres latérales sont disposées en deux colonnes et les cases inférieures sont disposées en deux colonnes en dessous.) Vous pouvez reproduire l'effet à l'aide de Safari, en réduisant la largeur du navigateur.

Quoi qu'il en soit, aussi amusant que c'était de programmer, il m'est finalement venu à l'esprit que, au moins sur les appareils iOS, la mise en page optimisée pour les mobiles ne faisait qu'empirer les choses, pas les améliorer. Le zoom intégré de Safari mobile est tel que, tant que votre colonne principale mesure 480 pixels de large, votre site est déjà optimisé pour une utilisation mobile. Ajoutez une barre latérale large de 240 pixels pour une mise en page de 720 pixels et votre site s'adapte et a fière allure en tout:

• 1024x768 (paysage iPad)
• 768x1024 (portrait iPad)
• 800x600 (utilisateurs malvoyants)
• 480x320 (paysage iPhone)
• 320x480 (portrait iPhone, avec le zoom automatique activé)

500px + 250px fonctionne également si vous préférez quelque chose qui totalise 750px, si vous tenez compte du zoom intégré du mobile Safari. Le site restera beau et parfaitement lisible sur les iPhones en mode paysage et portrait.

Quoi qu'il en soit, pour revenir à votre question, les tests ont révélé que la seule chose que vous ne devriez PAS faire est d'utiliser une mise en page avec une largeur flexible. (Incidemment, WP-touch fera exactement cela sauf si je me trompe.) Cela conduit à un zoom sous-optimal. Sur l'iPad, vous pouvez zoomer sur quelque chose de contraint dans une colonne de 480 pixels de large, permettant une taille de texte plus grande; quelque chose qui "s'ajuste" à la largeur de votre écran vous oblige à lire un petit texte, ou un défilement horizontal s'il est trop petit pour être lu confortablement ...

Simple: utilisez le wp_is_mobile()pour tester - il se déclenchera truepour tous les appareils mobiles (téléphones intelligents, tablettes, etc.).

Mise à jour

Veuillez ne pas le faire. Cela ne fonctionne pas de manière fiable.

C'est un très bon script si vous voulez le personnaliser, facile à intégrer dans wordpress. http://detectmobilebrowsers.mobi/

Une chose à noter est que la plupart des utilisateurs d'iPhone, d'andriod ou de téléphones mobiles avec une prise en charge native du navigateur ne veulent pas être redirigés automatiquement!

C'est une mauvaise pratique, donnez-leur une option via un lien vers une version mobile ET dans la version mobile, donnez-leur une option pour revenir au site d'origine.

Je répète, ne redirigez pas automatiquement vos utilisateurs à moins que votre bâtiment ne soit quelque chose de très spécifique pour mobile, ou que vous ayez du trafic provenant de téléphones plus anciens sans prise en charge native du navigateur (peu probable).

• Je voulais ajouter, une façon simple de dire à quel point cela est important dans les journaux de votre serveur.

J'ajouterai une approche alternative.

Peut-être que vous voulez façonner et affiner tout le style et le comportement en fonction de besoins très spécifiques.

J'ai récemment dû: si IE9 une chose, si iPhone un deuxième, si iPad un troisième et ainsi de suite ... Et j'ai utilisé la classe Browser.php de Chris Schuld avec d'excellents résultats.

La fonction que j'ai trouvée et les exemples d'utilisation:

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";