web-dev-qa-db-fra.com

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

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

  1. Comment détecter si la demande provient d'un appareil mobile/navigateur?
  2. Comment puis-je 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 976 px (le contenu de 676 px + reste dans la barre latérale gauche). Je ne veux pas révolutionner le thème, mais j'estime qu'il 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.

theme-developmentmobile
31
Drake

Comme la plupart des autres, je recommande fortement d’utiliser WPTouch. Cependant, il est plus conçu pour prendre en charge les blogs que pour les autres formats de sites 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;
}

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 pointeur plugins_loaded pour détecter l'agent 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;
        }       
    }
}

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 $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/de 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é en bas vous permet de visualiser le site normalement. Vous voudrez peut-être en tenir compte lorsque vous construirez votre propre solution.

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

19
EAMann

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

Un autre plugin, WP-Wurfled , utilise la base de données étendue Wireless Universal Resource File . Cette base de données d'appareils mobiles constamment mise à jour contient également de nombreuses informations sur les capacités , afin que vous sachiez côté serveur la résolution de l'écran de l'appareil, s'il prend en charge Flash, ...

Le template_redirect action hook } 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 hook, mais c'est un filtre).

8
Jan Fabry

Au risque de ne pas répondre à la question, je 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 de l'appareil utilisé (et, à l'origine, de 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, aussi amusant que cela fût de programmer, il m'est finalement apparu que, du moins sur les appareils iOS, la mise en page optimisée pour les appareils mobiles ne faisait qu'empirer les choses, pas mieux. 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 le zoom automatique)

500px + 250px fonctionne également si vous préférez quelque chose qui totalise 750px, si vous prenez le zoom intégré du mobile Safari dans votre compte. 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 première chose à NE PAS faire, c’est d’utiliser une mise en page 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 de 480 pixels de large, ce qui permet une taille de texte plus grande. 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 ...

7
Denis de Bernardy

Simple: Utilisez la fonction wp_is_mobile() pour tester - elle déclenchera true pour all / appareils mobiles (téléphones intelligents, tablettes, etc.).

Mettre à jour

S'il vous plaît do not do that. Cela ne fonctionne pas fiable.

3
kaiser

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 de téléphones portables compatibles avec 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 il est important de consulter les journaux de votre serveur.
2
Wyck

Je vais ajouter une approche alternative.

Peut-être voudrez-vous faire de l’artisanat et peaufiner tout le style et le comportement en fonction de besoins très spécifiques.

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

La fonction que je suis venu et des 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";
2
brasofilo