WordPress est le système de gestion de contenu (CMS = Content Management System) le plus populaire actuellement. C’est un outil puissant et qui peut l’être encore plus lorsqu’il est bien utilisé.
Ce constructeur de site internet propose également de nombreuses fonctions fortement appréciables pour les développeurs. Celles-ci permettent de mettre en place des fonctionnalités plus ou moins complexes sans forcément devoir écrire des centaines de lignes de code. Certaines d’entre elles sont, à tort, assez méconnues alors qu’elles s’avèrent pourtant particulièrement utiles dans diverses situations. Aujourd’hui, nous allons nous intéresser à la fonction wp_is_mobile() !
wp_is_mobile() : Une fonction WordPress permettant de détecter l'utilisation d'un mobile
Présentation de la fonction
wp_is_mobile() est une fonction WordPress détectant si l’appareil dont un internaute se sert est un mobile ou non. Celle-ci doit être utilisée en PHP (langage sur lequel repose l’ensemble de WordPress). Il est important de faire ici la distinction entre la taille de l’écran et le type de terminal utilisé. Cette fonction ne prend pas en compte le premier paramètre et s’occupe uniquement de tester l’agent utilisateur pour le mobile.
À noter que les tablettes sont aussi considérées comme des appareils mobiles. Voici la liste des terminaux jugés comme tels :
- Android
- BlackBerry
- Kindle
- Silk
- Opera Mini
- OperaMobi
Il n’est cependant pas conseillé d’avoir recours à cette fonction pour gérer la visibilité des éléments d’un site en fonction de l’appareil. Les medias queries en CSS sont prévues pour cela et conviennent tout à fait.
Mais alors, dans quel contexte utiliser cette fonction ?
Exemple d'utilisation de la fonction
Intéressons nous maintenant à un exemple concret pour lequel la fonction wp_is_mobile() est adaptée.
Imaginons que pour le design de votre site web, vous ayez besoin d’afficher de grandes images en pleine largeur en tant que bannières avec une faible hauteur. Ce genre de mise en forme peut avoir un très beau rendu sur un écran d’ordinateur mais les visuels peuvent potentiellement être beaucoup moins impactant sur un smartphone étant donné leur petite taille. Une solution consisterait bien sûr à définir les photos en fond d’une section et de choisir la taille de cette dernière en CSS selon la résolution de l’écran. Cependant, cela n’est pas optimisé car une grande image forcément d’un poids assez important devrait obligatoirement être chargée alors que l’internaute n’en verrait qu’une petite partie.
La technique idéale à appliquer dans ce cas est d’avoir deux medias différents (par exemple le premier de 1920 pixels de large et le deuxième de seulement 500 pixels) et de faire appel à l’un ou l’autre grâce à notre chère fonction. On peut alors penser à ajouter des images en portrait beaucoup plus adaptées sur les mobiles.
Ainsi, le code source d’une page web peut être simplifié et optimisé. Cela permet de proposer une version allégée d’un site internet et d’améliorer sa vitesse de chargement notamment.
Exemple de code
Voici un exemple de code PHP montrant une fonction particulièrement intéressante à appliquer dans le contexte énoncé ci-dessus. Celle-ci permet d’obtenir les attributs adéquats d’une image selon le terminal utilisé.
function fs_get_img($img_id) {
if (wp_is_mobile()) {
$img_size = "mobilesize";
} else {
$img_size = "desktopsize";
}
wp_get_attachment_image_src($img_id, $img_size);
}
Limites de la fonction
wp_is_mobile() est une fonction WordPress puissante mais il faut tout de même faire attention lorsque l’on s’en sert.
En effet, si on utilise un module de mise en cache (comme il est fortement recommandé de le faire), celui-ci doit absolument dissocier la version ordinateur de la version mobile pour éviter les mauvaises surprises.
Nous vous recommandons par exemple WP Rocket qui gère cela depuis longtemps.
Cette fonction est aussi utilisée au cœur même de WordPress. Elle sert surtout à gérer les éléments présents dans le tableau de bord comme l’éditeur visuel par exemple ou encore les options de la médiathèque.