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

31

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

  1. Comment détecter si la demande provient d'un appareil mobile / navigateur?
  2. Comment puis-je charger et 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 (le contenu de 676px + reste dans la barre latérale gauche). Je ne veux pas révolutionner le thème mais je pense que c'est trop grand pour les téléphones 320x480 et 800x480. Je vais probablement supprimer la barre latérale ou au moins la déplacer vers la droite et effectuer d’autres petits ajustements.

    
posée Drake 10.11.2010 - 14:23

6 réponses

19

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

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

Le plugin, cependant, est une classe:

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

    ...

Le constructeur du plug-in ( function WPtouchPlugin() ) ajoute d'abord une action au crochet plugins_loaded pour détecter l'agent d'utilisateur du navigateur mobile et définir $applemobile sur true. 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;
        }       
    }
}

Le plug-in sait maintenant que vous utilisez un navigateur mobile (en fonction de 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 $applemoble est défini sur true. Si tel est le cas, WordPress utilisera votre feuille de style, votre thème et un modèle de publication / page pour mobile au lieu de ceux par défaut pour votre thème. Fondamentalement, vous redéfinissez le comportement par défaut de WordPress selon que le navigateur utilisé comporte ou non un agent d'utilisateur correspondant à votre liste de "navigateurs mobiles".

WPTouch inclut également la possibilité de désactiver le thème mobile. Lorsque vous visitez un site WPTouch sur un iPhone, un bouton situé au bas de l'écran vous permet d'afficher le site normalement. Vous voudrez peut-être en tenir compte lorsque vous élaborerez votre propre solution.

Avertissement: Tous les codes ci-dessus ont été copiés à partir du code source pour WPTouch version 1.9.19.4 et est protégé par 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.

    
réponse donnée EAMann 10.11.2010 - 16:40
8

Vous voudrez peut-être voir comment le très populaire plugin WPtouch le fait. Cela donne un thème différent pour "les appareils mobiles iPhone, iPod touch, Android, Opera Mini, Palm Pre, Samsung touch et BlackBerry Storm" ". Je vois une liste des agents d'utilisateur dans leur code source , c'est probablement la clé.

Un autre plugin, WP-Wurfled , utilise le vaste Fichier de ressources universel sans fil . Cette base de données d'appareils mobiles constamment mise à jour contient également de nombreuses informations de fonctionnalité , afin que vous sachiez côté serveur la résolution de l'écran. périphérique, qu'il prenne en charge Flash, ...

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

    
réponse donnée Jan Fabry 10.11.2010 - 15:03
7

Au risque de ne pas répondre à la question, je vous conseillerais de ne pas 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 créer une mise en forme CSS qui modifiait son comportement en fonction du périphérique utilisé (et, à l'origine, du l'orientation de l'écran).

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

Quoi qu’il en soit, même si c’était amusant de programmer, il m’a finalement semblé que, du moins sur les appareils iOS, la présentation optimisée pour les appareils mobiles ne faisait qu’aggraver les choses. 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 de 240 pixels de large pour une mise en page large de 720 pixels et votre site trouvera sa place et sa beauté dans l'ensemble:

  • 1024x768 (paysage iPad)
  • 768x1024 (portrait de l'iPad)
  • 800x600 (utilisateurs malvoyants)
  • 480x320 (paysage iPhone)
  • 320x480 (portrait de l'iPhone avec activation du zoom automatique)

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

Quoi qu’il en soit, pour revenir à votre question, les tests ont révélé que la seule chose à NE PAS faire, c’est d’utiliser une présentation avec une largeur flexible. (Incidemment, WP-touch fera exactement cela, sauf erreur de ma part.) Cela entraînerait un zoom sous-optimal. Sur l'iPad, vous pouvez effectuer un zoom avant sur un élément contraint dans une colonne large de 480 pixels, ce qui permet une plus grande taille du texte. Quelque chose qui "s'adapte" à la largeur de votre écran vous oblige à lire un texte minuscule, ou le défilement horizontal s'il est trop petit pour être lu confortablement ...

    
réponse donnée Denis de Bernardy 10.11.2010 - 17:02
3

Simple: utilisez le wp_is_mobile() pour tester - cela déclenchera true pour tout appareils mobiles (téléphones intelligents, tablettes, etc.).

Mettre à jour

Veuillez ne pas faire cela. Cela ne fonctionne pas fiable.

    
réponse donnée kaiser 26.03.2012 - 01:00
2

C’est un très bon script si vous voulez le personnaliser, facile à intégrer dans Wordpress. enlace

Une chose à noter est que la plupart des utilisateurs de téléphones portables prenant en charge un navigateur natif sur iphone, andriod ou mobile ne souhaitent 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 la possibilité de revenir au site d'origine.

Je répète, ne redirigez pas automatiquement vos utilisateurs sauf si vous construisez quelque chose de très spécifique pour mobile ou si vous avez du trafic provenant de téléphones plus anciens sans support de navigateur natif (improbable).

  • Vous souhaitez ajouter un moyen simple de dire à quel point c'est important grâce aux journaux de votre serveur.
réponse donnée Wyck 10.11.2010 - 16:12
1

Je vais ajouter une approche alternative.

Peut-être souhaitez-vous créer et peaufiner tous les styles et comportements en fonction de besoins très spécifiques.

Je devais le faire récemment: si IE9 était une chose, si un iPhone était un deuxième, si un iPad était un troisième et ainsi de suite ... Et a 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";
    
réponse donnée brasofilo 26.03.2012 - 05:59

Lire d'autres questions sur les étiquettes