Au printemps 2012, la version 3.4 de WordPress a été publiée. En plus d’introduire la personnalisation de thème et la possibilité d’intégrer automatiquement les tweets, la version 3.4 a également ajouté une fonction que les développeurs pouvaient utiliser pour tester si un visiteur du site web se connectait depuis un appareil mobile comme un smartphone ou une tablette.
Cette fonction – wp_is_mobile() – est apparue à une époque où le célèbre « Retina Display » qu’Apple avait dévoilé pour son iPhone 4 n’offrait qu’une maigre résolution de 640 x 960 pixels. Lorsque l’iPhone 5 est arrivé quelques mois après WordPress 3.4, l’écran du téléphone atteignait 640 x 1 136 pixels – encore loin des écrans des smartphones et des tablettes modernes, qui brouillent les frontières entre l’écran mobile et l’écran de bureau.
Alors, wp_is_mobile() est-il utile aujourd’hui ?
L’objectif de la fonction wp_is_mobile()
En 2012, la prise en charge par les navigateurs des requêtes média CSS permettant la conception de sites réactifs était encore relativement nouvelle. (Vraiment nouvelle pour les utilisateurs du navigateur Internet Explorer de Microsoft !) Mais permettre des mises en page qui s’adaptent aux dimensions variables des fenêtres de visualisation n’était pas l’objectif de wp_is_mobile().
La fonction ne fait aucune distinction entre les téléphones et les tablettes et ignore totalement les pixels disponibles dans le navigateur d’un visiteur. Au lieu de cela, wp_is_mobile() a été conçu comme un outil qui permettrait aux développeurs d’optimiser la bande passante lorsqu’ils répondent à des appareils mobiles souvent sous-puissants et éventuellement entre les mains d’utilisateurs qui paient leurs fournisseurs de télécommunications pour les transferts de données.
Les téléphones et les tablettes étant aujourd’hui plus puissants que de nombreux ordinateurs de bureau disponibles en 2012, l’étranglement de la bande passante est peut-être moins important, mais il existe encore des cas d’utilisation pour une fonction qui divise simplement le monde en deux : les appareils mobiles et tout le reste.
La fonction wp_is_mobile() en action
La fonction WordPress wp_is_mobile() renvoie true lorsqu’elle est exécutée à la suite d’une requête provenant des navigateurs de la plupart des smartphones et des tablettes (y compris le Kindle). Ainsi, l’exemple classique de la fonction générant différents flux de contenu en PHP ressemble à ceci :
<?php if( wp_is_mobile()){ ?>
<p>This content is for mobile devices</p>
<?php } else { ?>
<p>This content is for desktops (and laptops).</p>
<?php } ?>Si vous avez vraiment besoin d’optimiser la sortie de votre site pour les appareils mobiles (probablement pour minimiser les besoins en bande passante), la technique ci-dessus pourrait être utilisée dans les fichiers de thème pour produire des structures entièrement différentes pour les pages mobiles et les pages d’ordinateur de bureau.
Détection des appareils pour des ajustements granulaires du contenu
Les requêtes média CSS et les autres techniques prenant en charge le responsive web design peuvent aider les mises en page à s’adapter à une grande variété de tailles et d’orientations d’écran. Mais elles ne peuvent pas t’aider à communiquer avec les visiteurs de votre site en tant qu’utilisateurs mobiles ou de bureau.
Par exemple, vous savez que les utilisateurs d’ordinateurs de bureau utiliseront probablement une souris pour « cliquer » sur les éléments de ton site, tandis que les utilisateurs de mobiles « tapoteront ». Les utilisateurs d’ordinateurs de bureau peuvent faire un « clic droit » sur un lien pour commencer à ouvrir le lien dans une nouvelle fenêtre de navigateur. Les utilisateurs de téléphones portables, quant à eux, peuvent « appuyer et maintenir » pour commencer la même tâche. Le simple fait de communiquer avec les utilisateurs sur la façon de naviguer sur votre site (comme dans ta documentation d’aide) peut signifier que vous utilisez la mauvaise terminologie la moitié du temps.
Voici comment nous pouvons combiner wp_is_mobile() et les codes courts WordPress pour prendre en charge la sortie granulaire du contenu mobile ou de bureau d’une manière qui est également facile à commander pour les éditeurs de sites web.
Nous utiliserons notre détection mobile/ordinateur de bureau en conjonction avec les fonctions WordPress add_shortcode() et do_shortocde() pour créer des outils de codes courts que les éditeurs pourront appliquer dans les publications.
Tout d’abord, nous ajouterons ce code au fichier functions.php (après l’avoir protégé en créant un thème enfant) :
/**
* Add shortcodes
*/
// Create [desktop] shortcode
add_shortcode('desktop', 'show_desktop_content');
function show_desktop_content($atts, $content = null){
if( !wp_is_mobile() ){
return do_shortcode( $content );
} else {
return null;
}
}
// Create [mobile] shortcode
add_shortcode('mobile', 'show_mobile_content');
function show_mobile_content($atts, $content = null){
if( wp_is_mobile() ){
return do_shortcode( $content );
} else {
return null;
}
}Cela crée les codes courts [desktop] et [mobile] (et leurs balises de fermeture) que nous pouvons utiliser dans n’importe quel contenu de post ou de page comme celui-ci :
<h2>Password Help</h2>
To change your password, [desktop]click[/desktop][mobile]tap[/mobile] the cog icon.Sur un appareil mobile, le contenu ci-dessus apparaîtra comme ceci :
Sur tous les autres appareils, les visiteurs verront ceci :
Cette technique permet de proposer assez facilement un contenu qui est « conscient » de la façon dont les visiteurs interagissent avec votre site WordPress.
La fonction wp_is_mobile() et la mise en cache de WordPress
Vous n’avez pas besoin d’utiliser WordPress depuis 2012 pour savoir que la mise en cache des pages est l’un des moyens les plus efficaces d’améliorer les performances. Mais la mise en cache WordPress de base peut mettre à mal les tentatives de diffusion de contenus différents sur les requêtes de la même page.
La mise en cache WordPress d’une page individuelle est initiée par une demande du client. Si cette première demande provient d’un appareil mobile, le contenu mis en cache sera adapté aux utilisateurs mobiles s’il est modifié par wp_is_mobile(). Et chaque requête ultérieure pour cette page fournira un contenu mobile – même aux utilisateurs d’ordinateurs de bureau – jusqu’à ce que le cache soit vidé.
C’est pourquoi la plateforme d’hébergement WordPress infogérée de Kinsta prend en charge des caches distincts pour le contenu mobile et le contenu de bureau – en commençant par le cache local de ton serveur web NGINX et en s’étendant au cache edge de Kinsta dans 260+ Pop Cloudflare à travers le monde.
L’activation de la mise en cache des pages pour les appareils mobiles se fait en quelques clics (ou taps !) dans le tableau de bord MyKinsta :
Résumé
La fonction WordPress wp_is_mobile() peut sembler appartenir au passé, mais tu pourrais trouver des utilisations à sa détection « mobile-or-desktop » qui peuvent vous aider à créer une meilleure expérience pour tous les visiteurs de votre site web.
N’oubliez pas que vous aurez besoin de caches distincts pour les différents contenus que vous générez si vous voulez obtenir les meilleures performances de ces chemins d’accès pour mobiles et ordinateurs de bureau.
Avez-vous une idée géniale pour tirer parti de wp_is_mobile()? Faîtes-le nous savoir dans le commentaire ci-dessous.
Steve Bonisteel est un rédacteur technique chez Kinsta qui a commencé sa carrière d'écrivain en tant que journaliste de presse écrite, chassant les ambulances et les camions de pompiers. Il couvre les technologies similaires à l'Internet depuis la fin des années 1990.
Laisser un commentaire