Dans le cadre de l’approche « Mobile First » appliquée à la con­cep­tion de sites Web, il est de plus important de créer des sites aussi res­pon­sive que possible. À l’aide de plugins WordPress spé­ci­fi­que­ment conçus pour l’affichage mobile, vous pouvez con­fi­gu­rer un affichage de ce type pour les té­lé­phones et autres appareils portables en quelques étapes simples. Nous nous penchons ici sur plusieurs des plugins mobiles WordPress les plus po­pu­laires.

Nom de domaine
Votre domaine en un clic
  • 1 cer­ti­fi­cat SSL Wildcard par contrat
  • Fonction incluse Domain Connect pour une con­fi­gu­ra­tion DNS sim­pli­fiée

Profiter ra­pi­de­ment d’un site res­pon­sive avec un plugin WordPress

Plus de 43 % de tous les sites Web ont été créés avec WordPress. Toutefois, beaucoup ont vieilli et sont devenus obsolètes, ne serait-ce que sur le plan technique. Vous avez cer­tai­ne­ment déjà vu des sites de ce genre : le plus souvent, la police de ca­rac­tères est à peine lisible, l’ensemble du menu ne peut être parcouru qu’en faisant défiler la page et/ou en zoomant dessus à deux doigts, les images ne sont pas adaptées à l’affichage mobile… D’où viennent ces problèmes ? La création d’un tout nouveau site Web avec un thème res­pon­sive demande gé­né­ra­le­ment du temps et peut également s’avérer coûteuse.

Pour mieux répondre aux exigences de l’approche « Mobile First », certains plugins proposent une con­cep­tion res­pon­sive ne né­ces­si­tant aucun chan­ge­ment de thème. Mais ce n’est pas tout : en op­ti­mi­sant ainsi votre site Web, vous pouvez améliorer la rapidité de WordPress et votre ré­fé­ren­ce­ment mobile. Pour garantir son potentiel res­pon­sive, il vous suffit de créer votre tout nouveau site WordPress en ré­flé­chis­sant bien au choix de votre thème.

Pour mieux illustrer notre propos, nous avons créé un site de test avec les pa­ra­mètres suivants :

  • WordPress (version 5.9)
  • Thème : Twenty Eleven, proposé sur WordPress.org

Ce thème peut donc dif­fi­ci­le­ment être vu comme res­pon­sive : les images sont quelque peu adaptées, mais ce n’est pas du tout le cas du texte, et encore moins du menu. En choi­sis­sant les bons plugins mobiles WordPress, vous pouvez remédier à ce problème. Nous nous sommes in­té­res­sés à certains de ces plugins afin d’analyser leurs résultats sur un site WordPress pour téléphone portable. Vous trouverez le détail des options de con­fi­gu­ra­tion de chaque plugin WordPress res­pon­sive dans la pré­sen­ta­tion cor­res­pon­dante.

Conseil

Vous re­cher­chez un hé­ber­ge­ment Wordpress à la fois pratique et sûr ? Consultez les offres in­di­vi­duelles proposées par IONOS et découvrez les avantages de chacune d’elles.

Pré­sen­ta­tion rapide des plugins mobiles WordPress

Extension Avantages In­con­vé­nients Version gratuite Version pro­fes­sion­nelle*
WP Mobile Menu Principe d’uti­li­sa­tion très clair En anglais uni­que­ment €€€
Max Mega Menu Nom­breuses pos­si­bi­li­tés de con­cep­tion relatives à l’affichage mobile Con­nais­sances de base requises dans les langages HTML et CSS
WPtouch Nombreux réglages sur la base du WYSIWYG (What You See Is What You Get), avec outil de per­son­na­li­sa­tion Version pro­fes­sion­nelle coûteuse €€€€
AMP for WP Meilleur résultat (sur les quatre plugins testés) Large éventail de pos­si­bi­li­tés parfois dé­con­cer­tant €€**

* Com­pa­rai­son basée sur le prix basée de la version pro­fes­sion­nelle pour un site Web. ** En tant qu’offre avec de nombreux extras.

WP Mobile Menu : simple et rapide

Le plugin WP Mobile Menu est facile à utiliser ; il a été mis à jour à l’occasion de la pu­bli­ca­tion de la version 5.9 de WordPress.

Ce plugin vous permet d’ajouter une barre de menu à l’en-tête de la page WordPress com­pre­nant le nom de votre site Web et le bouton du menu « Hamburger ». Le menu du thème Twenty Eleven reste ici bien en place. Ce plugin propose l’in­té­gra­tion de deux sous-menus sup­plé­men­taires. La barre de menu ainsi obtenue est dite « Sticky », car elle reste toujours visible en haut de la page lorsque vous faites défiler celle-ci. Une fois cette option activée, le menu se glisse sim­ple­ment au-dessus de votre contenu.

L’interface ad­mi­nis­tra­teur de WP Mobile Menu comporte sept éléments de menu, avec diverses variantes possibles. Vous pouvez notamment réaliser les actions suivantes :

  • Insertion d’un texte d’en-tête in­di­vi­duel et/ou d’un logo (au lieu de l’insertion au­to­ma­tique du nom de la page Web) ;
  • Su­per­po­si­tion définie sur le contenu lorsque le menu est activé, avec choix des couleurs pour la su­per­po­si­tion, les éléments du menu et leur dé­li­mi­ta­tion ;
  • Insertion d’une image d’arrière-plan pour le menu ;
  • Sup­pres­sion de l’affichage d’éléments spé­ci­fiques lorsque le menu mobile est actif ;
  • Uti­li­sa­tion de polices Google ;
  • Per­son­na­li­sa­tion du menu (cinq boutons « hamburger » dif­fé­rents sont par exemple dis­po­nibles) ;
  • Pos­si­bi­lité d’afficher le menu au-dessus du contenu ou de le faire glisser vers l’extérieur.

Avec la version pro­fes­sion­nelle payante de ce plugin WordPress, vous pouvez entre autres supprimer le menu mobile sur certaines pages définies ou modifier son apparence d’une page à une autre. Vous pouvez également choisir de po­si­tion­ner votre menu actif en bas de page ou sé­lec­tion­ner d’autres modes d’affichage. Ce plugin vous donne aussi accès à plus de 2 000 icônes issues de dif­fé­rentes bi­blio­thèques.

Max Mega Menu : ce plugin porte-t-il bien son nom ?

Ce plugin mobile WordPress propose une interface ad­mi­nis­tra­teur res­pon­sive dans la langue pa­ra­mé­trée pour votre tableau de bord WordPress. Son fonc­tion­ne­ment est clair et son uti­li­sa­tion (presque) toujours intuitive.

Dans sa version gratuite, le plugin Max Mega Menu vous permet notamment de réaliser les actions suivantes à partir de l’interface ad­mi­nis­tra­teur :

  • Création d’éléments de menu ho­ri­zon­taux (jusqu’au troisième niveau) ;
  • Réglages en­tiè­re­ment per­son­na­li­sables pour chaque niveau de menu, flèches de na­vi­ga­tion comprises ;
  • Uti­li­sa­tion (partielle) du glisser-déposer pour po­si­tion­ner les éléments ;
  • En­re­gis­tre­ment de thèmes in­di­vi­duels inspirés des menus que vous aurez conçus ;
  • Per­son­na­li­sa­tion de votre style grâce aux langages CSS/SCSS
  • Ex­por­ta­tion et im­por­ta­tion de thèmes de menu per­son­na­li­sés aux formats JSON ou PHP ;
  • Facilité d’accès à toute la do­cu­men­ta­tion.

Vous aurez besoin de con­nais­sances HTML et CSS pour certaines fonc­tion­na­li­tés, notamment pour l’ap­pli­ca­tion correcte du « z-index », le cas échéant.

Les uti­li­sa­teurs de la version pro­fes­sion­nelle peuvent accéder aux menus « Sticky », « Tabbed », « Accordion », aux menus verticaux, à plus de 600 icônes de menu, à 200 polices Google et à des badges de menu per­met­tant de mieux attirer l’attention, mais aussi profiter de l’in­té­gra­tion de Woo­Com­merce et d’Easy Digital Downloads.

WPtouch : de nom­breuses options de con­fi­gu­ra­tion

Le plugin WPtouch de WordPress permet d’ajouter un thème mobile léger aux sites déjà existants. Son principe de fonc­tion­ne­ment est clai­re­ment com­pré­hen­sible et sa langue s’adapte à celle de votre tableau de bord WordPress. Les éléments et fonc­tion­na­li­tés dis­po­nibles uni­que­ment dans la version pro­fes­sion­nelle sont signalés par un code couleur.

De tous les plugins mobiles WordPress que nous avons testés, c’est celui qui a provoqué le plus de chan­ge­ments sur le plan visuel. Con­trai­re­ment aux autres, il est habituel d’utiliser l’outil de per­son­na­li­sa­tion de ce plugin pour adapter l’affichage mobile d’un site. Il vous suffit de cliquer sur le bouton « Passer au thème mobile » pour afficher et gérer la version mobile de votre site en toute sim­pli­cité. Les dé­ve­lop­peurs se sont inspirés des re­com­man­da­tions de Google visant à favoriser l’ef­fi­ca­cité de l’ex­pé­rience mobile pour les uti­li­sa­teurs et ont donc créé un plugin très léger. Le site Web mobile est donc clai­re­ment structuré, avec un texte continu plus lisible.

Avec la version gratuite, voici les pos­si­bi­li­tés qui s’offrent à l’ad­mi­nis­tra­teur du site Web :

  • Ap­pli­ca­tion du site mobile jusqu’à six groupes d’appareils / na­vi­ga­teurs au choix ;
  • Adap­ta­tion de la version mobile dans l’outil de per­son­na­li­sa­tion ;
  • Ac­ti­va­tion du menu sous forme de liste dé­rou­lante ou par glis­se­ment du contenu (menu « Off-canvas ») ;
  • Pos­si­bi­lité de régler la position du bouton « Hamburger » ;
  • Choix des couleurs libre pour l’arrière-plan, l’en-tête, le menu, les liens et les dif­fé­rents titres ;
  • Interface ad­mi­nis­tra­teur dis­po­nible en 23 langues ;
  • Aucune influence sur le thème d’origine pour l’affichage du bureau et les autres pa­ra­mètres de WordPress.

Avec la version pro­fes­sion­nelle, qui est loin d’être aussi avan­ta­geuse, l’abon­ne­ment d’un an permet de profiter d’une as­sis­tance haut de gamme, mais également de thèmes mobiles sup­plé­men­taires, de l’in­té­gra­tion de pu­bli­ci­tés, de la fonction « Pu­bli­ca­tions si­mi­laires » et de jQuery.

Conseil

Vous re­cher­chez une solution simple, mais pro­fes­sion­nelle, afin d’optimiser le ré­fé­ren­ce­ment de votre site Web en quelques étapes ? Nous vous con­seil­lons d’essayer le ran­king­Coach proposé par IONOS. Il prend en charge les prin­ci­paux systèmes de gestion de contenu et la plupart des systèmes de boutique en ligne pour vous aider à attirer davantage de visiteurs sur votre site Web

AMP for WP : Google vous salue

Le plugin mobile WordPress AMP for WP est un projet signé de la main de Google. Il applique les lignes di­rec­trices dé­ve­lop­pées par l’en­tre­prise pour une meilleure vi­si­bi­lité et des pages WordPress plus rapides, et ce, avec beaucoup d’ex­haus­ti­vité et de rigueur. Il a en outre été conçu pour améliorer le ré­fé­ren­ce­ment des sites Web dans les résultats de recherche Google.

Vous pouvez modifier votre site Web existant en utilisant un bouton de menu « Hamburger » dans l’en-tête et en rendant le texte continu beaucoup plus lisible. Avec la con­fi­gu­ra­tion de base du plugin, votre site est nettement plus rapide ; le menu activé couvre l’in­té­gra­lité de la page, les sous-menus s’ouvrent et se ferment par­fai­te­ment… Une barre de recherche est également intégrée à votre menu superposé.

La con­fi­gu­ra­tion est adaptée à votre niveau (débutant ou spé­cia­liste) et capable de vous guider, sans qu’aucune ex­pli­ca­tion ou presque ne soit né­ces­saire, à travers les dif­fé­rents éléments de menu de l’interface ad­mi­nis­tra­teur. Le résultat est plutôt agréable, et une do­cu­men­ta­tion en ligne très complète est également à votre dis­po­si­tion (en anglais).

Ce plugin WordPress offre un nombre con­si­dé­rable de pos­si­bi­li­tés pour les mobiles. La version gratuite comporte quatre thèmes et, d’après les in­di­ca­tions du dé­ve­lop­peur, plus de 300 variantes possibles. Vous pouvez acquérir des fonc­tion­na­li­tés sup­plé­men­taires sur l’interface ad­mi­nis­tra­teur, sous l’élément de menu « Ex­ten­sions ». Voici quelques-unes des fonc­tion­na­li­tés gratuites :

  • Prise en charge des Page Builders ;
  • Con­for­mité au RGPD ;
  • Sup­pres­sion au­to­ma­tique des éléments CSS non utilisés ;
  • Prise en charge des polices Google, même en cas d’uti­li­sa­tion locale ;
  • Com­pa­ti­bi­lité avec divers outils de ré­fé­ren­ce­ment ;
  • Pa­gi­na­tion (nu­mé­ro­ta­tion des pages) utile pour les contenus de grande envergure ;
  • Prise en charge de Google Tag Manager, Adsense (pour AMP), Google Analytics et d’autres four­nis­seurs d’outils ana­ly­tiques ;
  • Pos­si­bi­lité de créer un contenu différent pour la version mobile et la version de bureau ;
  • Pos­si­bi­lité d’intégrer l’élément « Pu­bli­ca­tions si­mi­laires » ;
  • Adap­ta­tion améliorée des images ;
  • In­té­gra­tion de vidéos YouTube, Vime, Twitter, Instagram ou Facebook ;
  • In­té­gra­tion de douze nouveaux canaux pour les réseaux sociaux ;
  • Mise en place de la version AMP en tant que page d’accueil spé­ci­fique et/ou page Web prio­ri­taire.

Voici à présent quelques-unes des fonc­tion­na­li­tés payantes :

  • Formes spé­ci­fiques de gestion des pu­bli­ci­tés ;
  • Prise en charge de certains for­mu­laires de contact ;
  • Ins­crip­tion par e-mail pour les ex­pé­di­teurs de news­let­ters ;
  • Mul­ti­lin­guisme grâce à WPML, Polylang et WeGlot ;
  • Connexion à des outils de commerce élec­tro­nique ;
  • Modèles d’éléments d’appel à l’action ;
  • Plus de 45 ex­ten­sions sup­plé­men­taires issues de l’univers AMP.

AMP for WP doit d’ailleurs être distingué du projet open source AMP. Ce dernier a pour objectif de vous permettre de créer des sites Web ne né­ces­si­tant que peu de code de pro­gram­ma­tion de manière à les rendre (plus) rapides. Pour en savoir plus à ce sujet, découvrez notre guide sur les plugins AMP pour WordPress. Ici, le plugin AMP for WP peut être considéré comme un outil rem­plis­sant par­tiel­le­ment ces deux fonctions. En outre, ce plugin tient compte « par défaut » des conseils de ré­fé­ren­ce­ment propres à WordPress.

En résumé

Avec les meilleurs plugins mobiles de WordPress, vous pouvez fa­ci­le­ment adapter votre site Web pour un affichage res­pon­sive sur les terminaux mobiles. Nous vous con­seil­lons de commencer par tester la version gratuite d’un plugin afin de vous fa­mi­lia­ri­ser avec son in­té­gra­tion et son uti­li­sa­tion. Cela vous aidera également à dé­ter­mi­ner si le plugin que vous avez choisi répond bien aux exigences de votre site Web. Vérifiez toujours le résultat (in­ter­mé­diaire) depuis votre téléphone portable ou votre tablette, car l’affichage fourni par les outils de dé­ve­lop­pe­ment des na­vi­ga­teurs est souvent lé­gè­re­ment différent de la véritable version mobile.

Conseil

Le Digital Guide proposé par IONOS vous permettra d’obtenir de nom­breuses autres in­for­ma­tions sur les plugins WordPress. En utilisant dif­fé­rents plugins, vous pouvez optimiser votre site Web de manière simple et éco­no­mique.

Aller au menu principal