Comment rendre un site WordPress responsive sur mobile

La plupart des sites WordPress mal adaptés au mobile ont l’une de ces trois causes : un vieux thème qui n’a jamais été responsive, des réglages de blocs ou de constructeur de pages qui ignorent le mobile, ou du CSS personnalisé à largeurs fixes. Corrigez-les dans cet ordre : vérifiez que le thème est responsive, ajustez les réglages mobiles dans l’éditeur ou le constructeur, puis faites le ménage dans le code personnalisé et les extensions. Contrôlez chaque étape à taille de téléphone avant de passer à la suivante.

Étape 1 : vérifiez que votre thème est responsive

Ouvrez votre site dans un affichage mobile (voir comment voir la version mobile d’un site sur ordinateur) et regardez une page simple, sans mise en page particulière, comme la politique de confidentialité. Si même cette page est dézoomée ou défile horizontalement, le thème est en cause.

Deux vérifications rapides :

• Affichez le code source de la page et cherchez name="viewport". Un thème responsive ajoute la balise meta viewport dans le <head>. Si elle manque, le thème date d’avant le mobile.
• Vérifiez l’âge du thème et ses mises à jour dans Apparence > Thèmes. Un thème non mis à jour depuis plusieurs années pose des risques qui dépassent l’affichage mobile.

Si le thème n’est pas responsive, en changer coûte en général moins cher que le rafistoler. Les thèmes blocs par défaut actuels, comme Twenty Twenty-Five, et la plupart des thèmes activement maintenus sont responsive d’origine. Essayez le nouveau thème avec Prévisualisation en direct avant de l’activer.

Étape 2 : utilisez l’aperçu mobile de l’éditeur

WordPress propose des aperçus par appareil :

• Dans l’éditeur de blocs et l’éditeur de site, la commande d’aperçu de la barre supérieure bascule entre Ordinateur, Tablette et Mobile.
• Dans l’outil de personnalisation classique (pour les thèmes classiques), les boutons d’appareils en bas de la barre latérale font la même chose.

Ces aperçus redimensionnent le canevas, ce qui aide à repérer les problèmes de mise en page pendant l’édition. Ils n’envoient pas de user agent mobile : vérifiez ensuite la page en ligne dans un véritable affichage mobile.

Étape 3 : adaptez les blocs aux petits écrans

Problèmes fréquents de l’éditeur de blocs et leurs solutions :

• Colonnes qui se tassent au lieu de s’empiler. Sélectionnez le bloc Colonnes et vérifiez que l’option d’empilement sur mobile est activée.
• Largeurs et hauteurs fixes. Les blocs Image, Bannière et Groupe peuvent avoir des dimensions fixes en pixels. Préférez des largeurs en pourcentage et des hauteurs minimales plutôt que fixes, pour que le texte ne soit pas coupé sur écran étroit.
• Tailles de police énormes. Un titre de 72 px qui rend bien sur ordinateur déborde sur téléphone. Utilisez les préréglages de typographie fluide du thème quand ils existent : ils suivent la taille de l’écran.
• Tableaux larges. Les tableaux à nombreuses colonnes débordent sur téléphone. Raccourcissez-les ou laissez-les défiler horizontalement dans leur propre conteneur.

Étape 4 : vérifiez les réglages mobiles du constructeur de pages

Si vous utilisez un constructeur comme Elementor, Divi ou Beaver Builder, la plupart des problèmes mobiles viennent de réglages appliqués uniquement à la taille ordinateur. Les constructeurs ont un mode responsive avec des valeurs distinctes pour mobile et tablette : espacements, taille de police, largeur des colonnes, visibilité.

1. Passez le constructeur en vue mobile.
2. Réduisez les grands paddings et marges définis en pixels.
3. Ajustez la taille des titres pour le mobile.
4. Vérifiez l’ordre des colonnes quand elles s’empilent ; inversez-le si l’image apparaît avant le titre qu’elle illustre.
5. Évitez de masquer du contenu important sur mobile. Google indexe la version mobile : un texte masqué n’existe pratiquement pas pour lui.

Les constructeurs définissent aussi leurs propres breakpoints (Elementor utilise par défaut 767 px pour le mobile et 1 024 px pour la tablette, et vous pouvez en ajouter). Assurez-vous que votre CSS personnalisé utilise les mêmes largeurs. Pour choisir les largeurs : les breakpoints responsive.

Étape 5 : corrigez le menu

Sur mobile, la navigation doit se replier derrière un bouton de menu. Les thèmes blocs le font avec le réglage de superposition du bloc Navigation (choisissez Mobile ou Toujours). Avec les thèmes classiques, c’est le thème qui s’en charge ; s’il ne le fait pas, c’est une raison de plus d’en changer. Gardez le menu mobile court et vérifiez que les sous-menus s’ouvrent au toucher.

Étape 6 : images et vitesse

WordPress fait déjà beaucoup : il crée plusieurs tailles de chaque image téléversée, ajoute srcset pour que les téléphones reçoivent des fichiers plus légers, et charge les images en différé par défaut. Vous pouvez l’aider en :

• téléversant des images pas plus grandes que leur taille d’affichage maximale ;
• les convertissant en WebP ou AVIF (pris en charge nativement par les versions récentes de WordPress, ou via une extension d’images) ;
• utilisant une extension de cache ou le cache de votre hébergeur ;
• supprimant les extensions inutilisées, chacune pouvant ajouter des scripts sur toutes les pages.

Mesurez le résultat avec les méthodes du guide du test de vitesse mobile.

Étape 7 : traquez le CSS personnalisé et les conflits d’extensions

Si le site défile encore horizontalement, trouvez l’élément trop large. Dans Chrome DevTools, exécutez ceci dans la Console pour lister les éléments plus larges que l’écran :

[...document.querySelectorAll('*')].filter(el => el.scrollWidth > document.documentElement.clientWidth)

Les coupables habituels sont des règles width: 1200px dans Apparence > Personnaliser > CSS additionnel, des widgets intégrés à taille fixe (anciens flux de réseaux sociaux, cartes, formulaires) et des carrousels qui imposent des largeurs en ligne.

Étape 8 : testez correctement le site en ligne

Les aperçus de l’éditeur sont un début. Avant de considérer le travail terminé :

1. Ouvrez les pages clés dans un affichage mobile dans Chrome. Mobile View Extension le fait en un clic et charge la page en ligne avec un user agent mobile : vous voyez ce que reçoivent vraiment les téléphones, y compris ce que servent le cache et les extensions mobiles.
2. Testez les formulaires et le tunnel de commande sur un vrai téléphone.
3. Lancez un audit Lighthouse mobile (mode d’emploi).

Si quelque chose s’affiche différemment sur téléphone que dans l’aperçu, pourquoi un site s’affiche mal sur mobile liste les causes habituelles.

Questions fréquentes

Pourquoi mon site WordPress s’affiche-t-il bien dans l’éditeur mais pas sur mon téléphone ?

Les aperçus de l’éditeur ne font que redimensionner le canevas. Les extensions de cache, les extensions mobiles, les réglages du CDN et le navigateur du téléphone peuvent modifier ce qui est servi. Vérifiez la page en ligne dans un vrai affichage mobile et videz les caches après chaque modification.

Faut-il une extension pour rendre WordPress responsive ?

En général, non. Un thème responsive fait l’essentiel. Les extensions qui créent un thème mobile séparé étaient courantes il y a des années, mais sont rarement utiles aujourd’hui.

AMP est-il encore nécessaire pour un site WordPress mobile ?

Non. AMP est facultatif, et une page responsive rapide atteint les mêmes objectifs sans format séparé.