Share
Lors de la création d'applications Web mobiles telles que notre série de thèmes wordpress, il est important de pouvoir détecter un navigateur mobile et de servir la version mobile appropriée. De nombreux lecteurs ont demandé des informations sur la manière de procéder dans les commentaires, alors le voici! Nous aborderons d’abord une solution wordpress, puis une solution PHP, puis une solution existante répandue. À la fin de ce tutoriel, vous serez exposé à l’ensemble des options et bien équipé pour gérer ce scénario.!
Avec wordpress, nous disposons déjà de nombreux outils pour nous aider, y compris des plugins. Un plugin formidable existe MobilePress. MobilePress permet aux utilisateurs de wordpress d'utiliser automatiquement un thème mobile pour les utilisateurs mobiles, mais plus important encore, le plugin permet aux thèmes mobiles personnalisés d'être téléchargés et utilisés. Cela nous permettra de télécharger le thème que nous avons créé et de le diffuser uniquement aux navigateurs mobiles visitant le site..
Télécharger MyTouch
Pour utiliser un deuxième thème mobile pour un site, vous devez d’abord définir le répertoire dans lequel vous placerez vos thèmes mobiles dans MobilePress. Si vous cliquez sur MobilePress dans le panneau latéral de l'administrateur wordpress, un champ de saisie apparaît pour ce répertoire. Par défaut, le répertoire est wp-content / mobile-themes. Nous nous en tiendrons à cela.
Chargez votre thème dans ce répertoire, puis cliquez sur MobilePress> Thèmes et sélectionnez notre thème.
Cliquez sur le thème pour l'activer pour le navigateur mobile par défaut. Cliquez ensuite sur le menu déroulant Navigateur par défaut. Sélectionnez le navigateur iPhone et cliquez sur Modifier. Cliquez ensuite à nouveau sur le thème myTouch pour le sélectionner dans le navigateur iOS Safari. Le navigateur par défaut concerne tous les appareils mobiles, à l'exception de l'iPhone.
Test iPhone
Test Android
Nous pouvons maintenant proposer le thème approprié à tous les utilisateurs! Mais si vous n'exécutez pas WordPress?
Il n'y a pas de fonction PHP comme is_mobile () ou quoi que ce soit (bien qu'il existe une fonction get_browser (), mais c'est un article différent!). Ce que nous devons faire, c'est détecter le type de navigateur. Ensuite, en fonction de ces informations, nous redirigerons l’utilisateur vers une URL spécifique. Chaque navigateur est associé à un petit nombre d'informations que le serveur détecte. Ceci est appelé le agent utilisateur. L'agent d'utilisateur est essentiellement le nom de chaque navigateur. Non, pas seulement le prénom, comme Internet Explorer ou Safari, mais le nom complet qui raconte l'histoire du navigateur. Cela inclut la version du système d'exploitation, la plate-forme, etc. Comme vous le devinerez probablement, nous pouvons faire beaucoup avec un agent utilisateur. Nous pourrions diriger un utilisateur en fonction de son système d'exploitation ou même simplement de sa version du système d'exploitation. C’est ainsi que certains sites Web, par exemple une page de téléchargement de logiciel, vous donneront automatiquement la version correcte de leur logiciel..
Comment obtenir le type de navigateur
Il s'avère que nous pouvons accéder à l'agent utilisateur du navigateur via un tableau de variables super global appelé $ _SERVER []. Le tableau de serveurs nous permet d’obtenir beaucoup d’informations, mais ce que nous voulons, c’est l’agent du navigateur:
$ _SERVER ['HTTP_USER_AGENT']
Cette variable nous donnera beaucoup d'informations, mais variera d'un navigateur à l'autre. Voici le mien:
Mozilla / 5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-US) AppleWebKit / 533.4 (KHTML, comme Gecko) Chrome / 5.0.375.125 Safari / 533.4>
Pouvez-vous dire quel navigateur j'utilise? Safari? Non, Chrome. Désolé, je vous ai donné un problème! L'agent utilisateur de Chrome est un peu délicat, car il est basé sur le WebKit d'Apple. Maintenant que nous avons cette variable, qu'allons-nous faire avec?
La procédure
Avant d'aller plus loin, nous devons réfléchir à ce que nous voulons faire exactement. Nous voulons détecter l'agent utilisateur à l'aide de la variable globale ci-dessus, mais alors quoi? Une simple instruction IF pour vérifier si l'agent d'utilisateur ci-dessus correspond à une liste d'agents d'utilisateur fonctionnerait. Si c'est le cas, nous pouvons simplement rediriger l'utilisateur vers la version mobile.
Expressions régulières:
Le problème avec l'agent utilisateur est que c'est alors unique à la configuration de chaque personne. Il existe plusieurs centaines de versions différentes de navigateurs, de nombreux systèmes d'exploitation et plusieurs versions de chacun de ces systèmes et plates-formes. Il y a littéralement des milliers de combinaisons possibles qu'un agent d'utilisateur pourrait être. Ce serait simplement inefficace, non inclusif et inflexible si nous essayions de faire correspondre exactement les chaînes à l'ancienne. Au lieu de cela, nous allons utiliser la manière intelligente et agile. Nous allons utiliser des expressions régulières. Maintenant, si vous avez peur de la mention de l'expression «expression régulière», c'est bon. Vous comprenez le pouvoir semblable à un ninja que nous donnent les expressions régulières. Ce n'est pas un tutoriel sur les expressions régulières. Vous avez besoin de toute une série pour cela. Comme celui-ci par le grand Jeffrey Way. Heureusement, nous n'avons besoin de rien de compliqué pour cette situation, donc ce ne sera pas trop difficile.
preg_match ()
Preg_match () est une fonction d'expression régulière PHP qui recherche un certain motif, comme une chaîne dans une chaîne plus grande. Preg_match est très capable, mais nous ne nous concentrerons que sur les bases. C'est tout ce dont vous avez besoin de vous préoccuper:
$ pattern = "Le modèle de chaîne plus petite que nous recherchons" $ subject = "Le plus grand corps de texte de données que nous recherchons. Cela ne doit pas nécessairement être une chaîne, mais dans ce cas ce sera le cas. être l'agent utilisateur. Dans ce cas, la chaîne de modèle n'est pas ici, aucun résultat ne sera trouvé "preg_match (chaîne $ modèle, chaîne $ sujet)
La bonne chose à ce propos est qu’elle utilise des expressions régulières, ce qui nous donne une grande flexibilité. Si nous voulons rechercher sans distinction de casse, nous pouvons:
Accentsconagua
// Le i après le délimiteur crée une recherche qui ne tient pas compte de la casse preg_match ("/ iPhone / i", "iphone est un super téléphone.") Si nous voulons rechercher des mots complets, nous pouvons le faire aussi:
// Le b dans le délimiteur de motif indique une limite de mot. Cela empêchera toute correspondance partielle comme "iPhoney" preg_match ("/ \ biPhone \ b / i", "l'iphone est un appareil génial…") Mettre cela ensemble avec une déclaration IF
Nous devons maintenant associer cela à une instruction IF pour vérifier les résultats. C'est assez simple:
$ agent = $ _SERVER ['HTTP_USER_AGENT']; if (preg_match ('/ iPhone / i', $ agent)) echo "Vous utilisez un iPhone."; Comme vous pouvez le constater, ce qui précède ne recherche que les iPhones. Lorsqu'un iPhone est détecté, le script exécute l'instruction echo..
Extension de la recherche
Plus nous aurons, plus nous couvrirons d’appareils téléphoniques, mais nous ne faisons ici que créer une vaste liste d’appareils mobiles. Heureusement, nous n'avons pas besoin de répéter la fonction. C'est ce que je vais vous montrer ensuite. En ajoutant simplement un caractère de pipe (c'est-à-dire |), nous pouvons créer essentiellement une instruction OR:
$ agent = $ _SERVER ['HTTP_USER_AGENT']; if (preg_match ('/ iPhone | Android | Blackberry / i', $ agent)) echo "Vous utilisez un appareil mobile."; Bien que nous comptions pour la très grande majorité des navigateurs mobiles en énumérant simplement ces trois appareils, le reste du faible pourcentage restant d'utilisation du mobile est réparti entre de nombreux autres téléphones. Pour le moment, au lieu de lister des centaines de téléphones, nous en resterons là. Vous verrez plus loin dans ce tutoriel comment nous allons résoudre ce problème.
Réorienter
Une fois que le navigateur est détecté comme mobile, nous devons rediriger vers une page mobile. Nous pouvons simplement utiliser la fonction d’en-tête PHP pour cela. Tout ce que vous avez à faire est de spécifier un emplacement. Voici le script complet:
La sortie s'assure que nous n'exécutons rien d'autre avant la redirection.
Maintenant que vous connaissez la théorie de la détection et de la redirection du navigateur, nous pouvons parler d'autres options. DetectMobileBrowser.com est une excellente ressource. Non seulement ils fournissent un service Web, mais ils fournissent également une solution open source pour presque toutes les langues dans lesquelles vous en avez besoin. La meilleure partie est qu'ils ont pris le temps de créer un modèle beaucoup plus vaste de chaînes de recherche potentielles pour les navigateurs mobiles. à travers. Cela rend la liste beaucoup plus complète.
Si vous n’êtes pas dérangé par un lien tiers, le simple service Web est une excellente solution. Vous pouvez diriger les utilisateurs vers le lien facile à générer, et le site les enverra à une URL différente selon qu’il s’agisse d’un navigateur mobile ou non. C'est très simple dans la structure. http://detectmobilebrowser.com/desktopulr|mobileurl
Si vous ne souhaitez pas utiliser de lien tiers, vous pouvez télécharger un script dans la langue de votre choix en cliquant sur Télécharger des scripts. Cela révélera 10 options différentes. Si vous regardez la source, vous verrez que cette liste est sans aucun doute aussi complète que possible et qu’elle est très similaire à la nôtre. De là, vous pouvez le mettre en œuvre sur votre propre serveur ou site.
Une fois le téléchargement effectué, installez-le sur votre serveur comme vous le feriez avec celui que nous avons créé. La seule chose à modifier est l'URL de redirection:
Maintenant que nous avons abordé la détection de navigateur mobile, la théorie qui la sous-tend et certaines solutions populaires, vous devriez être bien équipé pour implémenter un système similaire dans vos propres projets! J'espère que vous avez trouvé ce tutoriel informatif et utile et que vous avez des questions ou des remarques dans la section commentaires.!
