Afficher un contenu différent sur mobile et ordinateur dans WordPress

Pour afficher un contenu différent sur mobile et sur ordinateur dans WordPress, soit vous masquez des blocs selon la taille de l’écran, et chaque appareil reçoit la même page dont le navigateur cache ce qui ne convient pas, soit vous laissez le serveur détecter l’appareil et envoyer une page différente à chacun. Le masquage selon la taille d’écran est le bon choix pour la mise en page et fonctionne avec n’importe quel cache de pages ; les règles par appareil côté serveur servent au cas rare où un téléphone ne doit pas recevoir du tout certains contenus.

Cet article explique les deux approches, comment mettre en place chacune (avec l’éditeur de blocs, un constructeur de pages, quelques lignes de CSS ou un plugin) et les deux pièges qui attrapent presque tout le monde : le cache de pages et l’indexation mobile de Google.

Deux façons d’afficher un contenu différent sur mobile et ordinateur

La différence tient à l’endroit où la décision est prise.

• Selon la taille d’écran (CSS) : la page entière part vers chaque visiteur. Des règles de style, appelées media queries, masquent certaines parties quand l’écran est plus étroit ou plus large qu’une largeur donnée. Rien n’est retiré, c’est simplement non affiché.
• Selon l’appareil (côté serveur) : au moment où la page est demandée, WordPress regarde ce que le navigateur dit de lui-même (l’user agent et, dans les navigateurs récents, une indication qui précise s’il s’agit d’un mobile) et construit une page différente pour les téléphones et pour les ordinateurs.

Pour la plupart des sites, la réponse est la première colonne. La suite vous dit quand la seconde vaut le soin supplémentaire qu’elle demande.

Option 1 : masquer des blocs selon la taille d’écran

C’est ce que veut dire concrètement le « responsive design » : une seule page, organisée différemment sur chaque écran. Il existe quatre façons courantes de le faire.

L’éditeur de blocs de WordPress

Depuis WordPress 7.0, l’éditeur de blocs peut masquer tout bloc compatible sur ordinateur, tablette ou mobile. L’option Masquer se trouve dans la barre d’outils du bloc et dans la Vue en liste, où une petite icône signale les blocs qui ont une règle de visibilité. Comme l’explique l’équipe WordPress dans sa note de développement sur la visibilité des blocs (en anglais), les blocs masqués de cette façon restent dans la page et le masquage se fait en CSS. Les points de rupture sont fixes dans la version 7.0.

Votre thème ou votre constructeur de pages

Les constructeurs de pages ont leurs propres interrupteurs. Dans Elementor, par exemple, sélectionnez un widget ou un conteneur, ouvrez l’onglet Avancé et utilisez Masquer sur Ordinateur, Masquer sur Tablette et Masquer sur Mobile dans la section Responsive (le nom exact de chaque appareil dépend des points de rupture réglés). Certains thèmes proposent des options similaires. Vérifiez quelles largeurs utilise votre constructeur : elles peuvent différer de celles de votre thème.

Quelques lignes de CSS

Si un peu de code ne vous fait pas peur, donnez une classe au bloc dans son panneau Avancé, champ Classe(s) CSS additionnelle(s), par exemple hide-on-phone. Ajoutez ensuite ceci au CSS additionnel de votre site :

@media (max-width: 781px) { .hide-on-phone { display: none; } }

Changez le nombre pour déplacer le point de rupture. Pour l’effet inverse, utilisez min-width avec une classe comme hide-on-desktop.

Un plugin

Avec Content Gate Pro, le panneau Visibility de chaque bloc propose une option Hide on avec trois cases : Phone (écrans jusqu’à 781 pixels de large), Tablet (de 782 à 1023 pixels) et Desktop (1024 pixels et plus). Elle fonctionne aussi en CSS, donc sans risque avec le cache de pages, et demande que l’option Allow hiding blocks by screen size soit activée dans Settings, ce qui est le cas par défaut. Sous WordPress 7.0, l’option native couvre déjà les cas simples ; le plugin devient utile quand vous réservez aussi ce même bloc aux utilisateurs connectés ou à certains rôles. Voir Restreindre un seul bloc.

Option 2 : des règles par appareil côté serveur

Ici, WordPress décide avant que la page quitte le serveur. Sa propre vérification, la fonction wp_is_mobile() (documentation en anglais), lit la description que le navigateur donne de lui-même. La référence officielle est claire sur trois points : elle ne mesure pas la largeur de l’écran, les tablettes comptent comme des appareils mobiles, et tout cache de pages doit garder des copies séparées pour les visiteurs sur mobile et sur ordinateur.

Quand est-ce que cela vaut la peine ? Quand un téléphone ne doit rien recevoir d’un contenu, par exemple :

• une intégration lourde, comme une grande visionneuse 3D ou un configurateur, que vous préférez ne pas faire charger aux téléphones ;
• le téléchargement d’un logiciel pour ordinateur, qui n’a aucun sens sur un téléphone ;
• une page qui doit envoyer les visiteurs sur téléphone vers une tout autre adresse.

La mise en place avec Content Gate

Les conditions par appareil sont une fonction Pro. Dans une règle, l’étape 6 Devices a deux cases, Desktop et Phone ; rien de coché signifie tous les appareils. L’appareil s’ajoute au groupe qui garde l’accès : cochez Desktop et seuls les visiteurs sur ordinateur qui remplissent aussi l’étape 2 Who can see it entrent, tandis que les visiteurs sur téléphone reçoivent ce que prévoit l’étape 4 What everyone else gets, par exemple un message ou une redirection vers une page adaptée au mobile. Sur un site où les visiteurs ne se connectent pas, associez-la à Only visitors who are not logged in.

Pour une partie de page, le shortcode accepte un attribut devices : [content_gate who="logged_out" devices="desktop"]Télécharger le logiciel[/content_gate] n’affiche le texte qu’aux visiteurs sur ordinateur qui ne sont pas connectés. La liste complète des options est dans Comment fonctionnent les règles.

Le guide du plugin lui-même conseille de ne pas toucher aux règles par appareil sans vrai besoin. Le serveur sait distinguer un téléphone d’un ordinateur, pas la taille exacte de l’écran. Les tablettes comptent comme des téléphones, sauf les iPad récents, qui se présentent comme un Mac et comptent comme ordinateur.

Cache de pages et SEO : les deux pièges

Le cache de pages

Un cache de pages garde une copie toute prête de chaque page et la sert aux visiteurs suivants. Si le premier visiteur après un vidage du cache est sur téléphone, la version mobile peut être servie à tout le monde, visiteurs sur ordinateur compris, jusqu’à l’expiration du cache. Le masquage selon la taille d’écran n’a pas ce problème, puisque chaque appareil reçoit la même page.

Si vous utilisez des règles par appareil côté serveur, faites l’une de ces choses :

• activez l’option de votre extension de cache ou de votre hébergeur qui garde un cache séparé pour les appareils mobiles, s’il y en a une ;
• excluez du cache les pages concernées ;
• ou demandez à votre hébergeur comment son cache traite les visiteurs sur mobile.

Google indexe la version mobile

Google utilise la version mobile d’une page, explorée par son robot pour smartphone, pour l’indexation et le classement, et demande que la version mobile ait le même contenu que la version pour ordinateur (voir les bonnes pratiques de Google pour l’indexation orientée mobile). Si vous retirez du texte côté serveur pour les téléphones, Google ne le verra probablement jamais. Gardez votre contenu important sur mobile, et réservez les règles par appareil aux éléments annexes, pas au texte avec lequel vous voulez vous positionner.

Comment tester les deux versions

1. Déconnectez-vous, ou utilisez une fenêtre privée. Avec Content Gate, les administrateurs voient toujours tout : depuis votre propre compte, les règles semblent donc ne pas fonctionner.
2. Masquage selon la taille d’écran : rétrécissez la fenêtre du navigateur, ou utilisez le mode appareil des outils de développement de votre navigateur, et regardez les blocs apparaître et disparaître.
3. Règles côté serveur : testez sur un vrai téléphone. Une fenêtre d’ordinateur étroite reste un ordinateur pour le serveur.
4. Avec un cache : videz-le, ouvrez la page d’abord sur un téléphone, puis sur un ordinateur, et vérifiez que chacun reçoit sa propre version.

Quelle option vous convient

Pour afficher un contenu différent sur mobile et ordinateur pour des raisons de mise en page (un titre plus court, une image plus petite, un bouton adapté au téléphone), masquez des blocs selon la taille d’écran : avec l’éditeur de blocs à partir de WordPress 7.0, les interrupteurs de votre constructeur de pages ou une ligne de CSS. C’est simple, compatible avec tous les caches et conforme à l’approche responsive que recommande Google.

Réservez les règles par appareil côté serveur aux cas où un téléphone ne doit pas recevoir un contenu, et configurez votre cache en conséquence. Si vous utilisez déjà Content Gate pour restreindre le contenu par rôle utilisateur, ses conditions par appareil (Pro) vous permettent d’ajouter cette décision aux mêmes règles.